@uniformdev/mesh-sdk-react 19.3.0 → 19.5.1-alpha.22

package/dist/index.mjs

@@ -358,7 +358,7 @@ var SelectionField = ({
           {
             value: selectedValue,
             loading,
-            text: (_a2 = values.find((v) => v.id === selectedValue)) == null ? void 0 : _a2.name
+            text: (_a2 = values.find((v2) => v2.id === selectedValue)) == null ? void 0 : _a2.name
           }
         ) }),
         /* @__PURE__ */ jsx16(
@@ -457,9 +457,9 @@ var ProductQuery = ({
     ];
   }, [categoryOptions]);
   const brandOptions = useMemo(() => {
-    return (brands == null ? void 0 : brands.map((b) => ({
-      id: b.id.toString(),
-      name: b.name
+    return (brands == null ? void 0 : brands.map((b2) => ({
+      id: b2.id.toString(),
+      name: b2.name
     }))) || [];
   }, [brands]);
   const handleAddProductCategory = (category) => {
@@ -474,7 +474,7 @@ var ProductQuery = ({
   const handleRemoveProductCategory = (category) => {
     var _a2;
     setFormState({
-      categories: (_a2 = value == null ? void 0 : value.categories) == null ? void 0 : _a2.filter((c) => c !== category)
+      categories: (_a2 = value == null ? void 0 : value.categories) == null ? void 0 : _a2.filter((c2) => c2 !== category)
     });
   };
   const handleBrandChange = (e) => {
@@ -895,7 +895,7 @@ var ProductPreviewList = ({
         children: products == null ? void 0 : products.map((product, index) => {
           var _a;
           const [category] = (product == null ? void 0 : product.categories) || [];
-          const categoryName = typeof category === "undefined" || !categories ? void 0 : (_a = categories.find((c) => c.id === category.id)) == null ? void 0 : _a.name;
+          const categoryName = typeof category === "undefined" || !categories ? void 0 : (_a = categories.find((c2) => c2.id === category.id)) == null ? void 0 : _a.name;
           return /* @__PURE__ */ jsx18("li", { css: productPreviewListItem, children: /* @__PURE__ */ jsxs7(
             "div",
             {
@@ -1796,7 +1796,7 @@ var EntrySearch = ({
                             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
+                              selectedContentType: (_b = (_a = contentTypes == null ? void 0 : contentTypes.find((t2) => t2.id === contentTypeSelected)) == null ? void 0 : _a.name) != null ? _b : contentTypeSelected
                             }
                           ),
                           !resultsLoading && typeof totalResults !== "undefined" && results && (results == null ? void 0 : results.length) < totalResults && /* @__PURE__ */ jsx21("button", { type: "button", css: entrySearchLoadMoreBtn, onClick: handleLoadMoreClick, children: !loadingMore ? "Load More" : /* @__PURE__ */ jsx21(LoadingIndicator, {}) })
@@ -1986,7 +1986,7 @@ function ProductSearchRow({
   var _a;
   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;
+  const categoryName = typeof category === "undefined" || !categories ? void 0 : (_a = categories.find((c2) => c2.id === category.id)) == null ? void 0 : _a.name;
   return /* @__PURE__ */ jsx22(
     "div",
     {
@@ -2121,7 +2121,7 @@ function ProductSelectedItem({
   var _a;
   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;
+  const categoryName = typeof category === "undefined" || !categories ? void 0 : (_a = categories.find((c2) => c2.id === category.id)) == null ? void 0 : _a.name;
   return /* @__PURE__ */ jsx23("div", { css: [productSelectedItemContainer], children: /* @__PURE__ */ jsxs12("article", { css: [productSelectedItemDetails], children: [
     /* @__PURE__ */ jsxs12("div", { css: [productSelectedItemContent], children: [
       selectedItem.thumbnailUrl ? /* @__PURE__ */ jsx23(
@@ -2267,7 +2267,7 @@ function ProductSearch({
   } = useAsync(async () => {
     return await onGetCategories();
   }, [onGetCategories]);
-  const categoryIds = categories == null ? void 0 : categories.map((c) => c.id).join(",");
+  const categoryIds = categories == null ? void 0 : categories.map((c2) => c2.id).join(",");
   const categoryOptions = useMemo2(
     () => {
       if (!categories) {
@@ -2641,9 +2641,6 @@ function DefaultDamItemRenderer({ item }) {
   ] }) : null;
 }
 
-// src/components/DataResourceVariablesList.tsx
-import { Callout as Callout4, Input as Input4 } from "@uniformdev/design-system";
-
 // src/hooks/useMeshLocation.ts
 import { useMemo as useMemo4, useRef as useRef7 } from "react";
 
@@ -2724,52 +2721,22 @@ function useMeshLocation(expectedLocation) {
 }
 
 // src/components/Variables/InputVariables.tsx
-import { Input as Input3 } from "@uniformdev/design-system";
+import { Caption, ErrorMessage, InfoMessage, Input as Input3, WarningMessage } from "@uniformdev/design-system";
 import * as React11 from "react";
+import { v4 as v42 } from "uuid";
 
-// src/components/Variables/insertVariableIntoText.ts
-function insertVariableIntoText({
-  variableName: variableName2,
-  variablePrefix,
-  variableSuffix = "",
-  value,
-  selectionStart = null,
-  selectionEnd = null
-}) {
-  const variableExpression = `${variablePrefix}${variableName2}${variableSuffix}`;
-  if (selectionStart !== null && selectionEnd !== null && selectionStart !== selectionEnd) {
-    return `${value.substring(0, selectionStart)}${variableExpression}${value.substring(selectionEnd)}`;
-  }
-  const hasCursorPosition = selectionStart !== null;
-  let startOffset = 0;
-  if (hasCursorPosition && value.substring(selectionStart - variablePrefix.length, selectionStart) === variablePrefix) {
-    startOffset = variablePrefix.length;
-  }
-  if (hasCursorPosition) {
-    return `${value.substring(0, selectionStart - startOffset)}${variableExpression}${value.substring(
-      selectionStart
-    )}`;
-  }
-  return `${value}${variableExpression}`;
-}
-
-// src/components/Variables/InsertVariableMenu.tsx
-import { Icon as Icon5, Menu as Menu2, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
+// src/components/Variables/SelectVariableMenu.tsx
+import { Menu as Menu2, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
 import { useEffect as useEffect6, useRef as useRef8, useState as useState8 } from "react";
+import { CgUsbC } from "react-icons/cg";
 
 // src/components/Variables/styles/InsertVariableMenu.styles.ts
 import { css as css18 } from "@emotion/react";
-var menuContainer = css18`
-  position: relative;
-`;
 var menuBtn = css18`
   background: none;
   border: none;
   color: var(--gray-300);
   padding: 0;
-  position: absolute;
-  bottom: 25%;
-  right: var(--spacing-sm);
 `;
 var menuItemTextGroup = css18`
   align-items: flex-start;
@@ -2798,7 +2765,7 @@ import { Button as Button2, Callout as Callout3, Input as Input2, useShortcut }
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-// src/components/Variables/InputVariables.styles.ts
+// src/components/Variables/styles/VariableEditor.styles.ts
 import { css as css19 } from "@emotion/react";
 var variablesFormContainer = css19`
   > * {
@@ -2912,6 +2879,7 @@ function VariablesProvider({
   const events = React10.useMemo(() => mitt(), []);
   const Editor = editVariableComponent != null ? editVariableComponent : VariableEditor;
   const contextValue = {
+    flatVariables: flattenVariables(value),
     dispatch: (event) => {
       if (event.type === "set") {
         const { name, ...varValue } = event.variable;
@@ -2933,7 +2901,8 @@ function VariablesProvider({
     },
     variables: value,
     isEditing: typeof editing !== "undefined",
-    events
+    events,
+    canDispatch: true
   };
   return /* @__PURE__ */ jsxs17(VariablesContext.Provider, { value: contextValue, children: [
     children,
@@ -2952,63 +2921,76 @@ function VariablesProvider({
     ) : null
   ] });
 }
-function useVariables() {
+function useVariables(returnEmptyWithoutProvider = false) {
   const context = React10.useContext(VariablesContext);
   if (!context) {
+    if (returnEmptyWithoutProvider) {
+      return {
+        flatVariables: {},
+        dispatch: () => {
+          throw new Error("No VariablesProvider present");
+        },
+        events: mitt(),
+        isEditing: false,
+        variables: {},
+        canDispatch: false
+      };
+    }
     throw new Error("No VariablesProvider present");
   }
   return context;
 }
+function flattenVariables(variables) {
+  const flatVariables = {};
+  Object.entries(variables).forEach(([key, value]) => {
+    flatVariables[key] = value.default;
+  });
+  return flatVariables;
+}
 
 // src/components/Variables/useOnVariableUpdated.ts
-function useOnVariableUpdated(fn, disabled) {
+function useOnVariableUpdated(fn2, disabled) {
   const { variables, events } = useVariables();
   useEffect5(() => {
     if (disabled) {
       return;
     }
-    events.on("update", fn);
-    return () => events.off("update", fn);
-  }, [disabled, events, fn, variables]);
+    events.on("update", fn2);
+    return () => events.off("update", fn2);
+  }, [disabled, events, fn2, variables]);
 }
 
 // src/components/Variables/variablesToList.ts
 function variablesToList(variables) {
-  return Object.entries(variables || {}).sort(([aKey, a], [bKey, b]) => {
+  return Object.entries(variables || {}).sort(([aKey, a2], [bKey, b2]) => {
     var _a, _b;
-    if (a.order && b.order) {
-      return a.order - b.order;
-    } else if (a.order) {
+    if (a2.order && b2.order) {
+      return a2.order - b2.order;
+    } else if (a2.order) {
       return 1;
-    } else if (b.order) {
+    } else if (b2.order) {
       return -1;
     }
-    return ((_a = a.displayName) != null ? _a : aKey).localeCompare((_b = b.displayName) != null ? _b : bKey);
+    return ((_a = a2.displayName) != null ? _a : aKey).localeCompare((_b = b2.displayName) != null ? _b : bKey);
   }).map(([name, definition]) => ({
     name,
     ...definition
   }));
 }
 
-// src/components/Variables/InsertVariableMenu.tsx
+// src/components/Variables/SelectVariableMenu.tsx
 import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
-var InsertVariableMenu = ({
+var SelectVariableMenu = ({
   onSelectVariable,
-  children,
-  textValue,
-  trigger = "${",
+  onResetVariables,
   showAddVariableMenuOption = false,
-  disabled = false,
-  forceVisible
+  forceVisible,
+  buttonCss,
+  buttonProps,
+  tip
 }) => {
-  const { variables, dispatch, isEditing } = useVariables();
+  const { variables, dispatch, isEditing, canDispatch } = useVariables();
   const btnRef = useRef8(null);
-  const tip = `Tip: access this list by typing ${trigger}`;
-  useEffect6(() => {
-    if (textValue === trigger && btnRef.current && btnRef.current.getAttribute("aria-expanded") === "false") {
-      btnRef.current.click();
-    }
-  }, [textValue, btnRef, trigger]);
   const [openedAdd, setOpenedAdd] = useState8(false);
   useOnVariableUpdated((varName) => {
     onSelectVariable == null ? void 0 : onSelectVariable({ name: varName, default: "" });
@@ -3018,141 +3000,310 @@ var InsertVariableMenu = ({
       setOpenedAdd(false);
     }
   }, [isEditing, openedAdd]);
-  if (disabled) {
-    return /* @__PURE__ */ jsx30(Fragment4, { children });
-  }
   const variablesList = variablesToList(variables);
-  return /* @__PURE__ */ jsxs18("div", { css: menuContainer, children: [
-    children,
-    /* @__PURE__ */ jsxs18(
-      Menu2,
-      {
-        placement: "bottom-start",
-        forceVisible,
-        menuTrigger: /* @__PURE__ */ jsx30("button", { ref: btnRef, css: menuBtn, type: "button", title: "Insert variable", children: /* @__PURE__ */ jsx30(Icon5, { icon: "usb-c", iconColor: "currentColor" }) }),
-        menuLabel: "Insert variable",
-        children: [
-          variablesList.map((variable) => {
-            const { name, helpText } = variable;
-            return /* @__PURE__ */ jsxs18(
-              MenuItem2,
-              {
-                id: name,
-                css: menuItemTextGroup,
-                onClick: () => onSelectVariable == null ? void 0 : onSelectVariable(variable),
-                children: [
-                  /* @__PURE__ */ jsx30("span", { children: name }),
-                  helpText ? /* @__PURE__ */ jsx30("small", { css: smallText, children: helpText }) : null
-                ]
+  const menuHasVariableOptions = Object.entries(variables).length || showAddVariableMenuOption;
+  return /* @__PURE__ */ jsxs18(
+    Menu2,
+    {
+      placement: "bottom-start",
+      forceVisible,
+      menuTrigger: /* @__PURE__ */ jsx30(
+        "button",
+        {
+          title: "Insert variable",
+          ...buttonProps,
+          ref: btnRef,
+          css: [menuBtn, buttonCss],
+          type: "button",
+          children: /* @__PURE__ */ jsx30(CgUsbC, { size: "1.4rem" })
+        }
+      ),
+      menuLabel: "Insert variable",
+      children: [
+        variablesList.map((variable) => {
+          const { name, helpText } = variable;
+          return /* @__PURE__ */ jsxs18(
+            MenuItem2,
+            {
+              id: name,
+              css: menuItemTextGroup,
+              onClick: () => onSelectVariable == null ? void 0 : onSelectVariable(variable),
+              children: [
+                /* @__PURE__ */ jsx30("span", { children: name }),
+                helpText ? /* @__PURE__ */ jsx30("small", { css: smallText, children: helpText }) : null
+              ]
+            },
+            name
+          );
+        }),
+        showAddVariableMenuOption && canDispatch ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
+          variablesList.length ? /* @__PURE__ */ jsx30(MenuItemSeparator, {}) : null,
+          /* @__PURE__ */ jsx30(
+            MenuItem2,
+            {
+              onClick: () => {
+                setOpenedAdd(true);
+                dispatch({ type: "edit", variable: "" });
               },
-              name
-            );
-          }),
-          showAddVariableMenuOption ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
-            variablesList.length ? /* @__PURE__ */ jsx30(MenuItemSeparator, {}) : null,
-            /* @__PURE__ */ jsx30(
-              MenuItem2,
-              {
-                onClick: () => {
-                  setOpenedAdd(true);
-                  dispatch({ type: "edit", variable: "" });
-                },
-                children: "Add Variable"
-              }
-            )
-          ] }) : null,
-          Object.entries(variables).length || showAddVariableMenuOption ? /* @__PURE__ */ jsx30(MenuItemSeparator, {}) : null,
-          /* @__PURE__ */ jsx30("i", { css: variablesTipText, children: tip })
-        ]
-      }
-    )
-  ] });
+              children: "Add Variable"
+            }
+          )
+        ] }) : null,
+        menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ jsx30(MenuItemSeparator, {}) : null,
+        onResetVariables ? /* @__PURE__ */ jsx30(MenuItem2, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
+        tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ jsx30(MenuItemSeparator, {}) : null,
+        tip ? /* @__PURE__ */ jsx30("i", { css: variablesTipText, children: tip }) : null
+      ]
+    }
+  );
 };
 
+// src/components/Variables/styles/InputVariables.styles.ts
+import { css as css20 } from "@emotion/react";
+var menuContainer = css20`
+  position: relative;
+`;
+var menuBtn2 = css20`
+  position: absolute;
+  bottom: 25%;
+  right: var(--spacing-sm);
+`;
+
+// src/components/Variables/util/variableExpression.ts
+var variableExpression = /(?<!\\)\${([^}]+)}/g;
+var variablePrefix = "${";
+var variableSuffix = "}";
+
+// src/components/Variables/util/getReferencedVariables.ts
+function getReferencedVariables(value) {
+  const result = [];
+  for (const match of value.matchAll(variableExpression)) {
+    result.push(match[1]);
+  }
+  return result;
+}
+
+// src/components/Variables/util/insertVariableIntoText.ts
+function insertVariableIntoText({
+  variableName: variableName2,
+  value,
+  selectionStart = null,
+  selectionEnd = null
+}) {
+  const variableExpression2 = `${variablePrefix}${variableName2}${variableSuffix}`;
+  if (selectionStart !== null && selectionEnd !== null && selectionStart !== selectionEnd) {
+    return `${value.substring(0, selectionStart)}${variableExpression2}${value.substring(selectionEnd)}`;
+  }
+  const hasCursorPosition = selectionStart !== null;
+  let startOffset = 0;
+  if (hasCursorPosition && value.substring(selectionStart - variablePrefix.length, selectionStart) === variablePrefix) {
+    startOffset = variablePrefix.length;
+  }
+  if (hasCursorPosition) {
+    return `${value.substring(0, selectionStart - startOffset)}${variableExpression2}${value.substring(
+      selectionStart
+    )}`;
+  }
+  return `${value}${variableExpression2}`;
+}
+
+// src/components/Variables/styles/VariableField.styles.ts
+import { css as css21 } from "@emotion/react";
+var labelText = css21`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-xs);
+  font-weight: var(--fw-regular);
+  margin: 0 0 var(--spacing-xs);
+`;
+var variableBindButton = css21`
+  align-items: center;
+  border: none;
+  border-radius: var(--rounded-base);
+  background: none;
+  display: flex;
+  height: 1.2rem;
+  padding: var(--spacing-2xs);
+  transition: background var(--duration-fast) var(--timing-ease-out),
+    color var(--duration-fast) var(--timing-ease-out);
+  width: 1.2rem;
+
+  &:hover,
+  &[aria-pressed='true']:not(:disabled) {
+    background: var(--brand-secondary-3);
+    color: var(--white);
+  }
+
+  &[aria-disabled='true'] {
+    background: none;
+    color: currentColor;
+  }
+`;
+
+// src/components/Variables/VariableField.tsx
+import { jsx as jsx31, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
+function VariableField({
+  label,
+  selectVariableMenuOptions,
+  children,
+  id,
+  isActive,
+  disableVariables
+}) {
+  const { variables } = useVariables(true);
+  const varCount = Object.keys(variables).length;
+  const variableSelector = varCount > 0 && (selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.onSelectVariable) && !disableVariables ? /* @__PURE__ */ jsx31(
+    SelectVariableMenu,
+    {
+      ...selectVariableMenuOptions,
+      buttonCss: [variableBindButton, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
+      buttonProps: isActive ? { "aria-pressed": "true" } : void 0
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs19("div", { children: [
+    /* @__PURE__ */ jsxs19("label", { htmlFor: id, css: labelText, children: [
+      variableSelector,
+      /* @__PURE__ */ jsx31("span", { children: label })
+    ] }),
+    children
+  ] });
+}
+
 // src/components/Variables/InputVariables.tsx
-import { jsx as jsx31 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
 function InputVariables({
+  id,
   "aria-label": ariaLabel,
+  label,
   value,
   disableVariables,
+  disableReset,
+  disableInlineMenu,
   onChange,
   onPaste,
   showAddVariableMenuOption,
-  variablePrefix = "${",
-  variableSuffix = "}",
+  inputWhenNoVariables,
+  caption,
+  errorMessage,
+  warningMessage,
+  infoMessage,
   ...inputProps
 }) {
   var _a, _b;
-  const { variables, dispatch } = useVariables();
-  const currentVariables = React11.useRef(variables);
-  const currentDispatch = React11.useRef(dispatch);
-  const currentSetValue = React11.useRef(onChange);
+  const { variables } = useVariables(true);
   const inputRef = React11.useRef(null);
-  React11.useEffect(() => {
-    currentVariables.current = variables;
-  }, [variables]);
-  React11.useEffect(() => {
-    currentDispatch.current = dispatch;
-  }, [dispatch]);
-  React11.useEffect(() => {
-    currentSetValue.current = onChange;
-  }, [onChange]);
-  const onPasteHandler = () => {
-    setTimeout(() => {
-      if (!inputRef.current) {
-        return;
-      }
-      onPaste == null ? void 0 : onPaste(inputRef.current.value);
-    });
+  const [finalId] = React11.useState(id != null ? id : () => v42());
+  const onPasteHandler = (e) => {
+    var _a2, _b2, _c;
+    if (!onPaste) {
+      return;
+    }
+    const pastedValue = (_a2 = e.clipboardData) == null ? void 0 : _a2.getData("text/plain");
+    if (!pastedValue || !e.currentTarget) {
+      return;
+    }
+    const selectionStart = (_b2 = e.currentTarget.selectionStart) != null ? _b2 : 0;
+    const selectionEnd = (_c = e.currentTarget.selectionEnd) != null ? _c : 0;
+    const newValue = e.currentTarget.value.substring(0, selectionStart) + pastedValue + e.currentTarget.value.substring(selectionEnd);
+    onPaste(newValue);
+    e.preventDefault();
   };
+  const currentCursor = (_b = (_a = inputRef.current) == null ? void 0 : _a.selectionStart) != null ? _b : value.length;
+  const forceMenu = value.substring(currentCursor - 2, currentCursor) === variablePrefix;
+  const hasVariablesInValue = getReferencedVariables(value).length > 0;
+  const [hadVariablesInValue, setHadVariablesInValue] = React11.useState(hasVariablesInValue);
+  React11.useEffect(() => {
+    if (hasVariablesInValue) {
+      setHadVariablesInValue(true);
+    }
+  }, [hasVariablesInValue]);
+  const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption;
+  const disableInlineVariablesForReals = disableVariablesForReals || disableInlineMenu;
   const handleInsertVariable = (variable) => {
     var _a2, _b2;
+    const baseValue = inputWhenNoVariables && !hasVariablesInValue ? "" : value;
     handleSetValue(
       insertVariableIntoText({
         variableName: variable.name,
-        value,
-        variablePrefix,
-        variableSuffix,
+        value: baseValue,
         selectionEnd: (_a2 = inputRef.current) == null ? void 0 : _a2.selectionEnd,
         selectionStart: (_b2 = inputRef.current) == null ? void 0 : _b2.selectionStart
       })
     );
   };
   const handleSetValue = (rawValue) => {
-    currentSetValue.current(rawValue);
+    onChange(rawValue);
   };
-  const currentCursor = (_b = (_a = inputRef.current) == null ? void 0 : _a.selectionStart) != null ? _b : value.length;
-  const forceMenu = value.substring(currentCursor - 2, currentCursor) === "${";
-  return /* @__PURE__ */ jsx31(
-    InsertVariableMenu,
-    {
-      showAddVariableMenuOption,
-      textValue: value,
-      onSelectVariable: handleInsertVariable,
-      disabled: disableVariables,
-      forceVisible: forceMenu || void 0,
-      children: /* @__PURE__ */ jsx31(
-        Input3,
-        {
-          ref: inputRef,
-          label: ariaLabel,
-          showLabel: false,
-          value,
-          onChange: (e) => handleSetValue(e.currentTarget.value),
-          onPaste: onPasteHandler,
-          ...inputProps
-        }
-      )
-    }
-  );
+  const sharedMenuProps = {
+    onSelectVariable: handleInsertVariable,
+    showAddVariableMenuOption,
+    onResetVariables: hadVariablesInValue && !disableReset ? () => {
+      handleSetValue("");
+      setHadVariablesInValue(false);
+    } : void 0
+  };
+  const input = /* @__PURE__ */ jsxs20("div", { children: [
+    inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ jsx32(
+      InputVariablesShell,
+      {
+        ...sharedMenuProps,
+        disabled: disableInlineVariablesForReals,
+        forceVisible: forceMenu || void 0,
+        children: /* @__PURE__ */ jsx32(
+          Input3,
+          {
+            id: finalId,
+            ref: inputRef,
+            label: ariaLabel,
+            showLabel: false,
+            value,
+            onChange: (e) => handleSetValue(e.currentTarget.value),
+            onPaste: onPasteHandler,
+            ...inputProps
+          }
+        )
+      }
+    ),
+    caption ? /* @__PURE__ */ jsx32(Caption, { children: caption }) : null,
+    errorMessage ? /* @__PURE__ */ jsx32(ErrorMessage, { message: errorMessage }) : null,
+    warningMessage ? /* @__PURE__ */ jsx32(WarningMessage, { message: warningMessage }) : null,
+    infoMessage ? /* @__PURE__ */ jsx32(InfoMessage, { message: infoMessage }) : null
+  ] });
+  if (label) {
+    return /* @__PURE__ */ jsx32(
+      VariableField,
+      {
+        label,
+        selectVariableMenuOptions: sharedMenuProps,
+        id: finalId,
+        isActive: hadVariablesInValue,
+        disableVariables: disableVariablesForReals,
+        children: input
+      }
+    );
+  }
+  return input;
+}
+function InputVariablesShell({
+  children,
+  disabled,
+  ...props
+}) {
+  if (disabled) {
+    return /* @__PURE__ */ jsx32(Fragment5, { children });
+  }
+  return /* @__PURE__ */ jsxs20("div", { css: menuContainer, children: [
+    children,
+    /* @__PURE__ */ jsx32(SelectVariableMenu, { ...props, tip: "Tip: access this list by typing ${", buttonCss: menuBtn2 })
+  ] });
 }
 
 // src/components/Variables/VariablesList.tsx
-import { css as css21 } from "@emotion/react";
+import { css as css23 } from "@emotion/react";
 import {
   AddListButton,
   button,
-  Icon as Icon6,
+  Icon as Icon5,
   Table,
   TableBody,
   TableCellData,
@@ -3163,8 +3314,8 @@ import {
 import { DragDropContext as DragDropContext2, Draggable as Draggable2, Droppable as Droppable2 } from "react-beautiful-dnd";
 
 // src/components/Variables/styles/VariablesList.styles.ts
-import { css as css20 } from "@emotion/react";
-var tableRow = (isDragging) => css20`
+import { css as css22 } from "@emotion/react";
+var tableRow = (isDragging) => css22`
   position: relative;
   ${isDragging ? `
   display: table;   
@@ -3172,7 +3323,7 @@ var tableRow = (isDragging) => css20`
   top: auto !important;
   ` : void 0}
 `;
-var tableCellDragIcon = css20`
+var tableCellDragIcon = css22`
   &::after {
     content: '';
     display: block;
@@ -3190,7 +3341,7 @@ var tableCellDragIcon = css20`
     opacity: 1;
   }
 `;
-var variableName = css20`
+var variableName = css22`
   border: none;
   color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
@@ -3201,7 +3352,7 @@ var variableName = css20`
   white-space: nowrap;
   max-width: 20ch;
 `;
-var variableValue = css20`
+var variableValue = css22`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3209,7 +3360,7 @@ var variableValue = css20`
 `;
 
 // src/components/Variables/VariablesList.tsx
-import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
 function VariablesList() {
   const { variables, dispatch } = useVariables();
   const sorted = variablesToList(variables);
@@ -3230,23 +3381,23 @@ function VariablesList() {
       return result;
     }
   };
-  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
-    /* @__PURE__ */ jsx32(DragDropContext2, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx32(Droppable2, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs19(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
-      /* @__PURE__ */ jsx32(TableHead, { children: /* @__PURE__ */ jsxs19(TableRow, { children: [
-        /* @__PURE__ */ jsx32(TableCellHead, { children: "Name" }),
-        /* @__PURE__ */ jsx32(TableCellHead, { children: "Default Value" }),
-        /* @__PURE__ */ jsx32(TableCellHead, {})
+  return /* @__PURE__ */ jsxs21(Fragment6, { children: [
+    /* @__PURE__ */ jsx33(DragDropContext2, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx33(Droppable2, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs21(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
+      /* @__PURE__ */ jsx33(TableHead, { children: /* @__PURE__ */ jsxs21(TableRow, { children: [
+        /* @__PURE__ */ jsx33(TableCellHead, { children: "Name" }),
+        /* @__PURE__ */ jsx33(TableCellHead, { children: "Default Value" }),
+        /* @__PURE__ */ jsx33(TableCellHead, {})
       ] }) }),
-      /* @__PURE__ */ jsxs19(TableBody, { children: [
+      /* @__PURE__ */ jsxs21(TableBody, { children: [
         sorted.map(({ name, displayName, default: defaultValue }, index) => {
           const text = displayName != null ? displayName : name;
-          return /* @__PURE__ */ jsx32(
+          return /* @__PURE__ */ jsx33(
             Draggable2,
             {
               draggableId: name,
               index,
               isDragDisabled: sorted.length === 1,
-              children: (provided2, snapshot) => /* @__PURE__ */ jsxs19(
+              children: (provided2, snapshot) => /* @__PURE__ */ jsxs21(
                 TableRow,
                 {
                   ref: provided2.innerRef,
@@ -3256,7 +3407,7 @@ function VariablesList() {
                   css: tableRow(snapshot.isDragging),
                   "data-dragging": snapshot.isDragging,
                   children: [
-                    /* @__PURE__ */ jsx32(TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ jsx32(
+                    /* @__PURE__ */ jsx33(TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ jsx33(
                       "button",
                       {
                         css: variableName,
@@ -3269,21 +3420,21 @@ function VariablesList() {
                         children: text
                       }
                     ) }),
-                    /* @__PURE__ */ jsx32(TableCellData, { children: /* @__PURE__ */ jsx32("span", { css: variableValue, title: defaultValue, children: defaultValue }) }),
-                    /* @__PURE__ */ jsx32(TableCellData, { align: "right", children: /* @__PURE__ */ jsx32(
+                    /* @__PURE__ */ jsx33(TableCellData, { children: /* @__PURE__ */ jsx33("span", { css: variableValue, title: defaultValue, children: defaultValue }) }),
+                    /* @__PURE__ */ jsx33(TableCellData, { align: "right", children: /* @__PURE__ */ jsx33(
                       "button",
                       {
                         type: "button",
                         title: `delete ${text}`,
                         css: [
                           button,
-                          css21`
+                          css23`
                                   background: transparent;
                                 `
                         ],
                         "aria-controls": text,
                         onClick: () => dispatch({ type: "remove", variable: name }),
-                        children: /* @__PURE__ */ jsx32(Icon6, { icon: "trash", iconColor: "red" })
+                        children: /* @__PURE__ */ jsx33(Icon5, { icon: "trash", iconColor: "red" })
                       }
                     ) })
                   ]
@@ -3296,7 +3447,7 @@ function VariablesList() {
         provided.placeholder
       ] })
     ] }) }) }),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(
       AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
@@ -3309,28 +3460,90 @@ function VariablesList() {
   ] });
 }
 
-// src/components/DataResourceVariablesList.tsx
-import { jsx as jsx33, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
-function DataResourceVariablesList({
-  setVariables,
-  noVariables: NoVariablesComponent,
-  typeRenderers
+// src/components/DataResourceDynamicInputProvider.tsx
+import { jsx as jsx34 } from "@emotion/react/jsx-runtime";
+function DataResourceDynamicInputProvider({
+  children,
+  dynamicInputs
+}) {
+  if (dynamicInputs) {
+    return /* @__PURE__ */ jsx34(DataResourceDynamicInputProviderRenderer, { dynamicInputs, children });
+  }
+  return /* @__PURE__ */ jsx34(DataResourceDynamicInputProviderContextShim, { children });
+}
+function DataResourceDynamicInputProviderContextShim(props) {
+  const {
+    metadata: { dynamicInputs }
+  } = useMeshLocation("dataResource");
+  return /* @__PURE__ */ jsx34(DataResourceDynamicInputProviderRenderer, { ...props, dynamicInputs });
+}
+function DataResourceDynamicInputProviderRenderer({
+  children,
+  dynamicInputs
 }) {
+  return /* @__PURE__ */ jsx34(
+    VariablesProvider,
+    {
+      value: convertDynamicInputsToVariables(dynamicInputs),
+      onChange: () => {
+        throw new Error("Cannot change dynamic inputs. Make sure that add variable is disabled.");
+      },
+      editVariableComponent: () => /* @__PURE__ */ jsx34("span", { children: "Cannot edit dynamic inputs." }),
+      children
+    }
+  );
+}
+function convertDynamicInputsToVariables(dynamicInputs) {
+  return Object.entries(dynamicInputs).reduce(
+    (acc, [name, input]) => {
+      acc[name] = {
+        type: input.type,
+        default: input.value,
+        helpText: `${input.value}, from ${input.type === "path" ? "URL path" : "query string"}`
+      };
+      return acc;
+    },
+    {}
+  );
+}
+
+// src/components/DataResourceVariablesList.tsx
+import { Callout as Callout4 } from "@uniformdev/design-system";
+import { jsx as jsx35 } from "@emotion/react/jsx-runtime";
+function DataResourceVariablesList(props) {
   const {
     value,
-    metadata: { dataType }
+    metadata: { dataType, dynamicInputs }
   } = useMeshLocation("dataResource");
+  return /* @__PURE__ */ jsx35(
+    DataResourceVariablesListExplicit,
+    {
+      ...props,
+      value,
+      dataType,
+      dynamicInputs
+    }
+  );
+}
+function DataResourceVariablesListExplicit({
+  setVariables,
+  noVariables: NoVariablesComponent,
+  typeRenderers,
+  dataType,
+  dynamicInputs,
+  value
+}) {
   const variableDefinitions = variablesToList(dataType.variables);
   if (variableDefinitions.length === 0) {
     if (NoVariablesComponent) {
-      return /* @__PURE__ */ jsx33(NoVariablesComponent, {});
+      return /* @__PURE__ */ jsx35(NoVariablesComponent, {});
     }
-    return /* @__PURE__ */ jsx33(Callout4, { type: "note", children: "No settings are required." });
+    return /* @__PURE__ */ jsx35(Callout4, { type: "note", children: "No settings are required." });
   }
-  return /* @__PURE__ */ jsx33("div", { children: variableDefinitions.map((variableDefinition) => {
+  return /* @__PURE__ */ jsx35(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ jsx35("div", { 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__ */ jsx33("div", { children: /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(
       VariableRenderer,
       {
         definition: variableDefinition,
@@ -3349,36 +3562,29 @@ function DataResourceVariablesList({
         }
       }
     ) }, variableDefinition.name);
-  }) });
+  }) }) });
 }
 function TextVariableRenderer({ definition, value, setValue }) {
-  return /* @__PURE__ */ jsxs20("div", { children: [
-    /* @__PURE__ */ jsx33(
-      Input4,
-      {
-        label: definition.displayName || definition.name,
-        value,
-        caption: definition.helpText,
-        onChange: (e) => {
-          setValue(e.target.value);
-        }
-      }
-    ),
-    definition.default !== "" ? /* @__PURE__ */ jsxs20("small", { children: [
-      "Default value: ",
-      definition.default
-    ] }) : null
-  ] });
+  var _a;
+  return /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(
+    InputVariables,
+    {
+      label: definition.displayName || definition.name,
+      value: value != null ? value : "",
+      caption: (_a = definition.helpText) != null ? _a : definition.default !== "" ? `Default value: ${definition.default}` : void 0,
+      onChange: setValue
+    }
+  ) });
 }
 
 // src/components/Request/RequestBody.tsx
-import { css as css23 } from "@emotion/react";
+import { css as css25 } from "@emotion/react";
 import { InputSelect as InputSelect4, JsonEditor } from "@uniformdev/design-system";
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 
 // src/components/Request/RequestProvider.tsx
 import * as React12 from "react";
-import { jsx as jsx34 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx36 } from "@emotion/react/jsx-runtime";
 var RequestContext = React12.createContext(null);
 function RequestProvider({ value, onChange, children }) {
   const contextValue = React12.useMemo(() => {
@@ -3447,7 +3653,7 @@ function RequestProvider({ value, onChange, children }) {
       request: value
     };
   }, [onChange, value]);
-  return /* @__PURE__ */ jsx34(RequestContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx36(RequestContext.Provider, { value: contextValue, children });
 }
 function useRequest() {
   const context = React12.useContext(RequestContext);
@@ -3458,11 +3664,11 @@ function useRequest() {
 }
 
 // src/components/Request/styles/Request.styles.ts
-import { css as css22 } from "@emotion/react";
-var innerContentStyles = css22`
+import { css as css24 } from "@emotion/react";
+var innerContentStyles = css24`
   background: var(--white);
 `;
-var requestTypeContainer = (bgColor) => css22`
+var requestTypeContainer = (bgColor) => css24`
   align-items: start;
   background: ${bgColor};
   display: grid;
@@ -3471,17 +3677,17 @@ var requestTypeContainer = (bgColor) => css22`
 `;
 
 // src/components/Request/RequestTypeContainer.tsx
-import { jsx as jsx35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx37 } from "@emotion/react/jsx-runtime";
 var RequestTypeContainer = ({
   bgColor = "transparent",
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx35("div", { css: requestTypeContainer(bgColor), ...props, children });
+  return /* @__PURE__ */ jsx37("div", { css: requestTypeContainer(bgColor), ...props, children });
 };
 
 // src/components/Request/RequestBody.tsx
-import { jsx as jsx36, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 var LANGUAGE_OPTIONS = [
   { label: "Text", value: "plaintext" },
   { label: "JSON", value: "json" },
@@ -3500,22 +3706,22 @@ var LANGUAGE_TO_CONTENT_TYPE = {
 };
 function RequestBody() {
   const { request, dispatch } = useRequest();
-  const [language, setLanguage] = useState9("json");
-  return /* @__PURE__ */ jsxs21(
+  const [language, setLanguage] = useState10("json");
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
-      css: css23`
+      css: css25`
         background: var(--white);
       `,
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx38(
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
-            css: css23`
+            css: css25`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
-            children: /* @__PURE__ */ jsx36(
+            children: /* @__PURE__ */ jsx38(
               InputSelect4,
               {
                 label: "Language",
@@ -3538,7 +3744,7 @@ function RequestBody() {
             )
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx38(
           JsonEditor,
           {
             height: 200,
@@ -3557,16 +3763,16 @@ function RequestBody() {
 
 // src/components/Request/RequestHeaders.tsx
 import {
-  Input as Input5,
+  Input as Input4,
   Table as Table2,
   TableBody as TableBody2,
   TableCellData as TableCellData2,
   TableCellHead as TableCellHead2,
   TableHead as TableHead2,
   TableRow as TableRow2,
-  WarningMessage
+  WarningMessage as WarningMessage2
 } from "@uniformdev/design-system";
-import { jsx as jsx37, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
 function RequestHeaders({ disableVariables }) {
   var _a, _b;
   const { dispatch, request } = useRequest();
@@ -3582,29 +3788,29 @@ function RequestHeaders({ disableVariables }) {
       index
     });
   };
-  return /* @__PURE__ */ jsx37("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs22(Table2, { children: [
-    /* @__PURE__ */ jsx37(TableHead2, { children: /* @__PURE__ */ jsxs22(TableRow2, { children: [
-      /* @__PURE__ */ jsx37(TableCellHead2, { children: "Name" }),
-      /* @__PURE__ */ jsx37(TableCellHead2, { children: "Value" })
+  return /* @__PURE__ */ jsx39("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs23(Table2, { children: [
+    /* @__PURE__ */ jsx39(TableHead2, { children: /* @__PURE__ */ jsxs23(TableRow2, { children: [
+      /* @__PURE__ */ jsx39(TableCellHead2, { children: "Name" }),
+      /* @__PURE__ */ jsx39(TableCellHead2, { children: "Value" })
     ] }) }),
-    /* @__PURE__ */ jsxs22(TableBody2, { children: [
+    /* @__PURE__ */ jsxs23(TableBody2, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.headers) == null ? void 0 : _b.map((baseHeader) => {
-        return /* @__PURE__ */ jsxs22(TableRow2, { children: [
-          /* @__PURE__ */ jsxs22(TableCellData2, { width: "50%", children: [
+        return /* @__PURE__ */ jsxs23(TableRow2, { children: [
+          /* @__PURE__ */ jsxs23(TableCellData2, { width: "50%", children: [
             baseHeader.key,
-            /* @__PURE__ */ jsx37("br", {}),
-            /* @__PURE__ */ jsx37("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx37("small", { children: "from data source" }) })
+            /* @__PURE__ */ jsx39("br", {}),
+            /* @__PURE__ */ jsx39("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx39("small", { children: "from data source" }) })
           ] }),
-          /* @__PURE__ */ jsxs22(TableCellData2, { width: "50%", children: [
-            /* @__PURE__ */ jsx37("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
-            request.headers.find((p) => p.key === baseHeader.key) ? /* @__PURE__ */ jsx37(WarningMessage, { message: "overridden below" }) : null
+          /* @__PURE__ */ jsxs23(TableCellData2, { width: "50%", children: [
+            /* @__PURE__ */ jsx39("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
+            request.headers.find((p2) => p2.key === baseHeader.key) ? /* @__PURE__ */ jsx39(WarningMessage2, { message: "overridden below" }) : null
           ] })
         ] }, baseHeader.key);
       }),
       deezHeaders.map((header, index) => {
-        return /* @__PURE__ */ jsxs22(TableRow2, { children: [
-          /* @__PURE__ */ jsx37(TableCellData2, { width: "50%", children: /* @__PURE__ */ jsx37(
-            Input5,
+        return /* @__PURE__ */ jsxs23(TableRow2, { children: [
+          /* @__PURE__ */ jsx39(TableCellData2, { width: "50%", children: /* @__PURE__ */ jsx39(
+            Input4,
             {
               label: header.key,
               value: header.key,
@@ -3623,7 +3829,7 @@ function RequestHeaders({ disableVariables }) {
               "data-test-id": "header-key"
             }
           ) }),
-          /* @__PURE__ */ jsx37(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx39(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx39(
             InputVariables,
             {
               value: header.value,
@@ -3641,11 +3847,11 @@ function RequestHeaders({ disableVariables }) {
 
 // src/components/Request/RequestMethodSelect.tsx
 import { InputSelect as InputSelect5 } from "@uniformdev/design-system";
-import { jsx as jsx38 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx40 } from "@emotion/react/jsx-runtime";
 function RequestMethodSelect(props) {
   var _a;
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx40(
     InputSelect5,
     {
       ...props,
@@ -3662,16 +3868,16 @@ function RequestMethodSelect(props) {
 
 // src/components/Request/RequestParameters.tsx
 import {
-  Input as Input6,
+  Input as Input5,
   Table as Table3,
   TableBody as TableBody3,
   TableCellData as TableCellData3,
   TableCellHead as TableCellHead3,
   TableHead as TableHead3,
   TableRow as TableRow3,
-  WarningMessage as WarningMessage2
+  WarningMessage as WarningMessage3
 } from "@uniformdev/design-system";
-import { jsx as jsx39, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
 function RequestParameters({ disableVariables }) {
   var _a, _b;
   const { dispatch, request } = useRequest();
@@ -3687,29 +3893,29 @@ function RequestParameters({ disableVariables }) {
       index
     });
   };
-  return /* @__PURE__ */ jsx39("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs23(Table3, { children: [
-    /* @__PURE__ */ jsx39(TableHead3, { children: /* @__PURE__ */ jsxs23(TableRow3, { children: [
-      /* @__PURE__ */ jsx39(TableCellHead3, { children: "Name" }),
-      /* @__PURE__ */ jsx39(TableCellHead3, { children: "Value" })
+  return /* @__PURE__ */ jsx41("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs24(Table3, { children: [
+    /* @__PURE__ */ jsx41(TableHead3, { children: /* @__PURE__ */ jsxs24(TableRow3, { children: [
+      /* @__PURE__ */ jsx41(TableCellHead3, { children: "Name" }),
+      /* @__PURE__ */ jsx41(TableCellHead3, { children: "Value" })
     ] }) }),
-    /* @__PURE__ */ jsxs23(TableBody3, { children: [
+    /* @__PURE__ */ jsxs24(TableBody3, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.parameters) == null ? void 0 : _b.map((baseParameter) => {
-        return /* @__PURE__ */ jsxs23(TableRow3, { children: [
-          /* @__PURE__ */ jsxs23(TableCellData3, { width: "50%", children: [
+        return /* @__PURE__ */ jsxs24(TableRow3, { children: [
+          /* @__PURE__ */ jsxs24(TableCellData3, { width: "50%", children: [
             baseParameter.key,
-            /* @__PURE__ */ jsx39("br", {}),
-            /* @__PURE__ */ jsx39("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx39("small", { children: "from data source" }) })
+            /* @__PURE__ */ jsx41("br", {}),
+            /* @__PURE__ */ jsx41("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx41("small", { children: "from data source" }) })
           ] }),
-          /* @__PURE__ */ jsxs23(TableCellData3, { width: "50%", children: [
-            /* @__PURE__ */ jsx39("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
-            request.parameters.find((p) => p.key === baseParameter.key) ? /* @__PURE__ */ jsx39(WarningMessage2, { message: "overridden below" }) : null
+          /* @__PURE__ */ jsxs24(TableCellData3, { width: "50%", children: [
+            /* @__PURE__ */ jsx41("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
+            request.parameters.find((p2) => p2.key === baseParameter.key) ? /* @__PURE__ */ jsx41(WarningMessage3, { message: "overridden below" }) : null
           ] })
         ] }, baseParameter.key);
       }),
       deezParameters.map((parameter, index) => {
-        return /* @__PURE__ */ jsxs23(TableRow3, { children: [
-          /* @__PURE__ */ jsx39(TableCellData3, { width: "50%", children: /* @__PURE__ */ jsx39(
-            Input6,
+        return /* @__PURE__ */ jsxs24(TableRow3, { children: [
+          /* @__PURE__ */ jsx41(TableCellData3, { width: "50%", children: /* @__PURE__ */ jsx41(
+            Input5,
             {
               label: parameter.key,
               value: parameter.key,
@@ -3728,7 +3934,7 @@ function RequestParameters({ disableVariables }) {
               "data-test-id": "parameter-key"
             }
           ) }),
-          /* @__PURE__ */ jsx39(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx41(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx41(
             InputVariables,
             {
               value: parameter.value,
@@ -3749,7 +3955,7 @@ function RequestParameters({ disableVariables }) {
 }
 
 // src/components/Request/RequestUrl.tsx
-import { css as css24 } from "@emotion/react";
+import { css as css26 } from "@emotion/react";
 import { useMemo as useMemo7 } from "react";
 
 // src/components/Request/urlEncodeRequestParameter.ts
@@ -3771,7 +3977,7 @@ function decodeVariablesInUrlEncodedString(string, varValues) {
 }
 
 // src/components/Request/RequestUrl.tsx
-import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx42, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
 function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
@@ -3781,25 +3987,25 @@ function RequestUrl() {
     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);
+    return request.baseRequest.parameters.filter((baseParam) => !request.parameters.find((p2) => p2.key === baseParam.key)).concat(request.parameters);
   }, [(_a = request.baseRequest) == null ? void 0 : _a.parameters, request.parameters]);
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "small",
     {
-      css: css24`
+      css: css26`
         display: inline-block;
         margin-bottom: var(--spacing-xs);
         word-break: break-word;
       `,
       children: [
-        request.baseRequest ? /* @__PURE__ */ jsx40("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
-        /* @__PURE__ */ jsxs24("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
+        request.baseRequest ? /* @__PURE__ */ jsx42("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
+        /* @__PURE__ */ jsxs25("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
           urlEncodeRequestUrl(request.relativeUrl, variables),
-          mergedParameters.length > 0 ? /* @__PURE__ */ jsxs24(Fragment6, { children: [
+          mergedParameters.length > 0 ? /* @__PURE__ */ jsxs25(Fragment7, { children: [
             "?",
             mergedParameters.map((param, index) => {
               const encoded = urlEncodeRequestParameter(param, variables);
-              return /* @__PURE__ */ jsxs24("span", { children: [
+              return /* @__PURE__ */ jsxs25("span", { children: [
                 index > 0 ? "&" : null,
                 encoded.key,
                 "=",
@@ -3813,35 +4019,42 @@ function RequestUrl() {
   );
 }
 
+// src/components/Request/util/handlePastedUrl.ts
+function handlePastedUrl(value, currentRequest, dispatch) {
+  var _a, _b, _c;
+  const indexOfQueryString = value.indexOf("?");
+  const hasQueryString = indexOfQueryString >= 0;
+  let relativeUrl = hasQueryString ? value.substring(0, indexOfQueryString) : value;
+  if (((_a = currentRequest.baseRequest) == null ? void 0 : _a.baseUrl) && relativeUrl.startsWith((_b = currentRequest.baseRequest) == null ? void 0 : _b.baseUrl)) {
+    relativeUrl = relativeUrl.substring((_c = currentRequest.baseRequest) == null ? void 0 : _c.baseUrl.length);
+  }
+  dispatch({ type: "setRelativeUrl", relativeUrl });
+  if (hasQueryString) {
+    for (let index = currentRequest.parameters.length - 1; index >= 0; index--) {
+      dispatch({ type: "removeParameter", index });
+    }
+    try {
+      const query = new URLSearchParams(value.substring(indexOfQueryString));
+      query.forEach((value2, key) => {
+        dispatch({ type: "updateParameter", parameter: { key, value: value2 } });
+      });
+    } catch (e) {
+    }
+  }
+}
+
 // src/components/Request/RequestUrlInput.tsx
-import { jsx as jsx41 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx43 } from "@emotion/react/jsx-runtime";
 function RequestUrlInput(props) {
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx43(
     InputVariables,
     {
+      disableReset: true,
       ...props,
       value: request.relativeUrl,
       onPaste: (value) => {
-        var _a, _b, _c;
-        const indexOfQueryString = value.indexOf("?");
-        if (indexOfQueryString >= 0) {
-          let relativeUrl = value.substring(0, indexOfQueryString);
-          if (((_a = request.baseRequest) == null ? void 0 : _a.baseUrl) && relativeUrl.startsWith((_b = request.baseRequest) == null ? void 0 : _b.baseUrl)) {
-            relativeUrl = relativeUrl.substring((_c = request.baseRequest) == null ? void 0 : _c.baseUrl.length);
-          }
-          dispatch({ type: "setRelativeUrl", relativeUrl });
-          for (let index = request.parameters.length - 1; index >= 0; index--) {
-            dispatch({ type: "removeParameter", index });
-          }
-          try {
-            const query = new URLSearchParams(value.substring(indexOfQueryString));
-            query.forEach((value2, key) => {
-              dispatch({ type: "updateParameter", parameter: { key, value: value2 } });
-            });
-          } catch (e) {
-          }
-        }
+        handlePastedUrl(value, request, dispatch);
       },
       onChange: (value) => {
         dispatch({ type: "setRelativeUrl", relativeUrl: value });
@@ -3855,7 +4068,7 @@ function RequestUrlInput(props) {
 function useRequestHeader(headerName) {
   var _a, _b;
   const { request, dispatch } = useRequest();
-  const headerIndex = request.headers.findIndex((f) => f.key === headerName);
+  const headerIndex = request.headers.findIndex((f2) => f2.key === headerName);
   return {
     value: (_b = (_a = request.headers[headerIndex]) == null ? void 0 : _a.value) != null ? _b : "",
     update: (value) => {
@@ -3872,7 +4085,7 @@ function useRequestHeader(headerName) {
 function useRequestParameter(paramName) {
   var _a, _b;
   const { request, dispatch } = useRequest();
-  const paramIndex = request.parameters.findIndex((f) => f.key === paramName);
+  const paramIndex = request.parameters.findIndex((f2) => f2.key === paramName);
   return {
     value: (_b = (_a = request.parameters[paramIndex]) == null ? void 0 : _a.value) != null ? _b : "",
     update: (value) => {
@@ -3886,18 +4099,18 @@ function useRequestParameter(paramName) {
 }
 
 // src/components/DataSourceEditor.tsx
-import { jsx as jsx42 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx44 } from "@emotion/react/jsx-runtime";
 function DataSourceEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const { value } = useMeshLocation("dataSource");
   const currentRequestValue = convertDataSourceToRequestData(value);
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx44(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
       editVariableComponent,
-      children: /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx44(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -3934,7 +4147,7 @@ function convertRequestDataToDataSource(dataSource, requestData) {
 }
 
 // src/components/DataTypeEditor.tsx
-import { jsx as jsx43 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx45 } from "@emotion/react/jsx-runtime";
 function DataTypeEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const {
@@ -3942,13 +4155,13 @@ function DataTypeEditor({ onChange, children, editVariableComponent }) {
     metadata: { dataSource }
   } = useMeshLocation("dataType");
   const currentRequestValue = convertDataTypeToRequestData(value, dataSource);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx45(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
       editVariableComponent,
-      children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx45(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -3998,10 +4211,10 @@ import { LoadingIndicator as LoadingIndicator2, Theme as Theme2 } from "@uniform
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
-import { useEffect as useEffect8, useRef as useRef10, useState as useState10 } from "react";
+import { useEffect as useEffect8, useRef as useRef10, useState as useState11 } from "react";
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
-  const [error, setError] = useState10();
-  const [sdk, setSdk] = useState10();
+  const [error, setError] = useState11();
+  const [sdk, setSdk] = useState11();
   const initializationInProgress = useRef10(false);
   useEffect8(
     () => {
@@ -4036,7 +4249,7 @@ var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
 };
 
 // src/components/MeshApp.tsx
-import { jsx as jsx44, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
 var MeshApp = ({
   children,
   loadingComponent,
@@ -4045,36 +4258,36 @@ var MeshApp = ({
   const { initializing, error, sdk } = useInitializeUniformMeshSdk();
   if (initializing || !sdk) {
     const LoadingComponent = loadingComponent;
-    return LoadingComponent ? /* @__PURE__ */ jsx44(LoadingComponent, {}) : /* @__PURE__ */ jsx44(LoadingIndicator2, {});
+    return LoadingComponent ? /* @__PURE__ */ jsx46(LoadingComponent, {}) : /* @__PURE__ */ jsx46(LoadingIndicator2, {});
   }
   if (error) {
     const ErrorComponent = errorComponent;
     if (ErrorComponent) {
-      return /* @__PURE__ */ jsx44(ErrorComponent, { error });
+      return /* @__PURE__ */ jsx46(ErrorComponent, { error });
     }
     throw error;
   }
-  return /* @__PURE__ */ jsxs25(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
-    /* @__PURE__ */ jsx44(Theme2, {}),
-    /* @__PURE__ */ jsx44(UniformMeshLocationContextProvider, { children })
+  return /* @__PURE__ */ jsxs26(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
+    /* @__PURE__ */ jsx46(Theme2, {}),
+    /* @__PURE__ */ jsx46(UniformMeshLocationContextProvider, { children })
   ] });
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
-import { css as css25 } from "@emotion/react";
+import { css as css27 } from "@emotion/react";
 import { Button as Button3, LoadingIndicator as LoadingIndicator3 } from "@uniformdev/design-system";
-import { jsx as jsx45, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
 var DataRefreshButton = ({
   buttonText,
   isLoading,
   onRefreshData,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs26(Button3, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
-    !isLoading ? null : /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsxs27(Button3, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
+    !isLoading ? null : /* @__PURE__ */ jsx47(
       LoadingIndicator3,
       {
-        css: css25`
+        css: css27`
             ${isLoading ? "opacity: 0.2;" : void 0}
           `
       }
@@ -4083,39 +4296,1179 @@ var DataRefreshButton = ({
   ] });
 };
 
-// src/components/ObjectSearch/ObjectSearchContainer.tsx
-import { Container, IconsProvider, ScrollableList, VerticalRhythm } from "@uniformdev/design-system";
-import { jsx as jsx46, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
-var ObjectSearchContainer = ({
-  searchFilters,
-  resultList,
-  children
-}) => {
-  return /* @__PURE__ */ jsx46(IconsProvider, { children: /* @__PURE__ */ jsxs27(VerticalRhythm, { children: [
-    /* @__PURE__ */ jsx46(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: /* @__PURE__ */ jsxs27(VerticalRhythm, { children: [
-      searchFilters,
-      !resultList ? null : /* @__PURE__ */ jsx46(ScrollableList, { role: "list", children: resultList })
-    ] }) }),
-    children
-  ] }) });
+// ../context/dist/api/api.mjs
+var __defProp2 = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var nullLimitPolicy = async (func) => await func();
+var ApiClientError = class extends Error {
+  constructor(errorMessage, fetchMethod, fetchUri, statusCode, statusText, requestId) {
+    super(
+      `${errorMessage}
+ ${statusCode}${statusText ? " " + statusText : ""} (${fetchMethod} ${fetchUri}${requestId ? ` Request ID: ${requestId}` : ""})`
+    );
+    this.errorMessage = errorMessage;
+    this.fetchMethod = fetchMethod;
+    this.fetchUri = fetchUri;
+    this.statusCode = statusCode;
+    this.statusText = statusText;
+    this.requestId = requestId;
+    Object.setPrototypeOf(this, ApiClientError.prototype);
+  }
+};
+var ApiClient = class {
+  constructor(options) {
+    __publicField(this, "options");
+    var _a, _b, _c, _d, _e;
+    if (!options.apiKey && !options.bearerToken) {
+      throw new Error("You must provide an API key or a bearer token");
+    }
+    let leFetch = options.fetch;
+    if (!leFetch) {
+      if (typeof window !== "undefined") {
+        leFetch = window.fetch.bind(window);
+      } else if (typeof fetch !== "undefined") {
+        leFetch = fetch;
+      } else {
+        throw new Error("You must provide or polyfill a fetch implementation when not in a browser");
+      }
+    }
+    this.options = {
+      ...options,
+      fetch: leFetch,
+      apiHost: this.ensureApiHost(options.apiHost),
+      apiKey: (_a = options.apiKey) != null ? _a : null,
+      projectId: (_b = options.projectId) != null ? _b : null,
+      bearerToken: (_c = options.bearerToken) != null ? _c : null,
+      limitPolicy: (_d = options.limitPolicy) != null ? _d : nullLimitPolicy,
+      bypassCache: (_e = options.bypassCache) != null ? _e : false
+    };
+  }
+  async apiClient(fetchUri, options) {
+    return this.options.limitPolicy(async () => {
+      var _a;
+      const coreHeaders = this.options.apiKey ? {
+        "x-api-key": this.options.apiKey
+      } : {
+        Authorization: `Bearer ${this.options.bearerToken}`
+      };
+      if (this.options.bypassCache) {
+        coreHeaders["x-bypass-cache"] = "true";
+      }
+      const callApi = () => this.options.fetch(fetchUri.toString(), {
+        ...options,
+        headers: {
+          ...options == null ? void 0 : options.headers,
+          ...coreHeaders
+        }
+      });
+      const apiResponse = await handleRateLimits(callApi);
+      if (!apiResponse.ok) {
+        let message = "";
+        try {
+          const responseText = await apiResponse.text();
+          try {
+            const parsed = JSON.parse(responseText);
+            if (parsed.errorMessage) {
+              message = Array.isArray(parsed.errorMessage) ? parsed.errorMessage.join(", ") : parsed.errorMessage;
+            } else {
+              message = responseText;
+            }
+          } catch (e) {
+            message = responseText;
+          }
+        } catch (e) {
+          message = `General error`;
+        }
+        throw new ApiClientError(
+          message,
+          (_a = options == null ? void 0 : options.method) != null ? _a : "GET",
+          fetchUri.toString(),
+          apiResponse.status,
+          apiResponse.statusText,
+          ApiClient.getRequestId(apiResponse)
+        );
+      }
+      if (options == null ? void 0 : options.expectNoContent) {
+        return null;
+      }
+      return await apiResponse.json();
+    });
+  }
+  createUrl(path, queryParams, hostOverride) {
+    const url = new URL(`${hostOverride != null ? hostOverride : this.options.apiHost}${path}`);
+    Object.entries(queryParams != null ? queryParams : {}).forEach(([key, value]) => {
+      var _a;
+      if (typeof value !== "undefined" && value !== null) {
+        url.searchParams.append(key, Array.isArray(value) ? value.join(",") : (_a = value == null ? void 0 : value.toString()) != null ? _a : "");
+      }
+    });
+    return url;
+  }
+  ensureApiHost(apiHost) {
+    if (!apiHost)
+      return "https://uniform.app";
+    if (!(apiHost == null ? void 0 : apiHost.startsWith("http"))) {
+      throw new Error('Your apiHost must start with "http"');
+    }
+    if (apiHost.indexOf("/", 8) > -1) {
+      throw new Error("Your apiHost must not contain a path element after the domain");
+    }
+    if (apiHost.indexOf("?") > -1) {
+      throw new Error("Your apiHost must not contain a query string");
+    }
+    if (apiHost == null ? void 0 : apiHost.endsWith("/")) {
+      apiHost = apiHost.substring(0, apiHost.length - 1);
+    }
+    return apiHost;
+  }
+  static getRequestId(response) {
+    const apigRequestId = response.headers.get("apigw-requestid");
+    if (apigRequestId) {
+      return apigRequestId;
+    }
+    return void 0;
+  }
+};
+async function handleRateLimits(callApi) {
+  var _a;
+  const backoffRetries = 5;
+  let backoffRetriesLeft = backoffRetries;
+  let response;
+  while (backoffRetriesLeft > 0) {
+    response = await callApi();
+    if (response.status !== 429) {
+      break;
+    }
+    let resetWait = 0;
+    try {
+      const dateHeader = response.headers.get("date");
+      const serverTime = dateHeader ? new Date(dateHeader).getTime() : void 0;
+      const body = await response.json();
+      const resetTime = (_a = body == null ? void 0 : body.info) == null ? void 0 : _a.reset;
+      if (typeof serverTime === "number" && typeof resetTime === "number") {
+        resetWait = Math.max(0, Math.min(Math.round(1.1 * (resetTime - serverTime)), 1e4));
+      }
+    } catch (err) {
+    }
+    const base = Math.pow(2, backoffRetries - backoffRetriesLeft) * 333;
+    const backoffWait = base + Math.round(Math.random() * (base / 2)) * (Math.random() > 0.5 ? 1 : -1);
+    await new Promise((resolve) => setTimeout(resolve, resetWait + backoffWait));
+    backoffRetriesLeft -= 1;
+  }
+  return response;
+}
+var _url;
+var _AggregateClient = class extends ApiClient {
+  constructor(options) {
+    super(options);
+  }
+  /** Fetches all aggregates for a project */
+  async get(options) {
+    const { projectId } = this.options;
+    const fetchUri = this.createUrl(__privateGet(_AggregateClient, _url), { ...options, projectId });
+    return await this.apiClient(fetchUri);
+  }
+  /** Updates or creates (based on id) an Aggregate */
+  async upsert(body) {
+    const fetchUri = this.createUrl(__privateGet(_AggregateClient, _url));
+    await this.apiClient(fetchUri, {
+      method: "PUT",
+      body: JSON.stringify({ ...body, projectId: this.options.projectId }),
+      expectNoContent: true
+    });
+  }
+  /** Deletes an Aggregate */
+  async remove(body) {
+    const fetchUri = this.createUrl(__privateGet(_AggregateClient, _url));
+    await this.apiClient(fetchUri, {
+      method: "DELETE",
+      body: JSON.stringify({ ...body, projectId: this.options.projectId }),
+      expectNoContent: true
+    });
+  }
+};
+var AggregateClient = _AggregateClient;
+_url = /* @__PURE__ */ new WeakMap();
+__privateAdd(AggregateClient, _url, "/api/v2/aggregate");
+var _url2;
+var _DimensionClient = class extends ApiClient {
+  constructor(options) {
+    super(options);
+  }
+  /** Fetches the known score dimensions for a project */
+  async get(options) {
+    const { projectId } = this.options;
+    const fetchUri = this.createUrl(__privateGet(_DimensionClient, _url2), { ...options, projectId });
+    return await this.apiClient(fetchUri);
+  }
+};
+var DimensionClient = _DimensionClient;
+_url2 = /* @__PURE__ */ new WeakMap();
+__privateAdd(DimensionClient, _url2, "/api/v2/dimension");
+var _url3;
+var _valueUrl;
+var _EnrichmentClient = class extends ApiClient {
+  constructor(options) {
+    super(options);
+  }
+  /** Fetches all enrichments and values for a project, grouped by category */
+  async get(options) {
+    const { projectId } = this.options;
+    const fetchUri = this.createUrl(__privateGet(_EnrichmentClient, _url3), { ...options, projectId });
+    return await this.apiClient(fetchUri);
+  }
+  /** Updates or creates (based on id) an enrichment category */
+  async upsertCategory(body) {
+    const fetchUri = this.createUrl(__privateGet(_EnrichmentClient, _url3));
+    await this.apiClient(fetchUri, {
+      method: "PUT",
+      body: JSON.stringify({ ...body, projectId: this.options.projectId }),
+      expectNoContent: true
+    });
+  }
+  /** Deletes an enrichment category */
+  async removeCategory(body) {
+    const fetchUri = this.createUrl(__privateGet(_EnrichmentClient, _url3));
+    await this.apiClient(fetchUri, {
+      method: "DELETE",
+      body: JSON.stringify({ ...body, projectId: this.options.projectId }),
+      expectNoContent: true
+    });
+  }
+  /** Updates or creates (based on id) an enrichment value within an enrichment category */
+  async upsertValue(body) {
+    const fetchUri = this.createUrl(__privateGet(_EnrichmentClient, _valueUrl));
+    await this.apiClient(fetchUri, {
+      method: "PUT",
+      body: JSON.stringify({ ...body, projectId: this.options.projectId }),
+      expectNoContent: true
+    });
+  }
+  /** Deletes an enrichment value within an enrichment category. The category is left alone. */
+  async removeValue(body) {
+    const fetchUri = this.createUrl(__privateGet(_EnrichmentClient, _valueUrl));
+    await this.apiClient(fetchUri, {
+      method: "DELETE",
+      body: JSON.stringify({ ...body, projectId: this.options.projectId }),
+      expectNoContent: true
+    });
+  }
+};
+var EnrichmentClient = _EnrichmentClient;
+_url3 = /* @__PURE__ */ new WeakMap();
+_valueUrl = /* @__PURE__ */ new WeakMap();
+__privateAdd(EnrichmentClient, _url3, "/api/v1/enrichments");
+__privateAdd(EnrichmentClient, _valueUrl, "/api/v1/enrichment-values");
+var _url4;
+var _ManifestClient = class extends ApiClient {
+  constructor(options) {
+    super(options);
+  }
+  /** Fetches the Context manifest for a project */
+  async get(options) {
+    const { projectId } = this.options;
+    const fetchUri = this.createUrl(__privateGet(_ManifestClient, _url4), { ...options, projectId });
+    return await this.apiClient(fetchUri);
+  }
+  /** Publishes the Context manifest for a project */
+  async publish() {
+    const { projectId } = this.options;
+    const fetchUri = this.createUrl("/api/v1/publish", { siteId: projectId });
+    await this.apiClient(fetchUri, {
+      method: "POST",
+      expectNoContent: true
+    });
+  }
+};
+var ManifestClient = _ManifestClient;
+_url4 = /* @__PURE__ */ new WeakMap();
+__privateAdd(ManifestClient, _url4, "/api/v2/manifest");
+var _url5;
+var _QuirkClient = class extends ApiClient {
+  constructor(options) {
+    super(options);
+  }
+  /** Fetches all Quirks for a project */
+  async get(options) {
+    const { projectId } = this.options;
+    const fetchUri = this.createUrl(__privateGet(_QuirkClient, _url5), { ...options, projectId });
+    return await this.apiClient(fetchUri);
+  }
+  /** Updates or creates (based on id) a Quirk */
+  async upsert(body) {
+    const fetchUri = this.createUrl(__privateGet(_QuirkClient, _url5));
+    await this.apiClient(fetchUri, {
+      method: "PUT",
+      body: JSON.stringify({ ...body, projectId: this.options.projectId }),
+      expectNoContent: true
+    });
+  }
+  /** Deletes a Quirk */
+  async remove(body) {
+    const fetchUri = this.createUrl(__privateGet(_QuirkClient, _url5));
+    await this.apiClient(fetchUri, {
+      method: "DELETE",
+      body: JSON.stringify({ ...body, projectId: this.options.projectId }),
+      expectNoContent: true
+    });
+  }
+};
+var QuirkClient = _QuirkClient;
+_url5 = /* @__PURE__ */ new WeakMap();
+__privateAdd(QuirkClient, _url5, "/api/v2/quirk");
+var _url6;
+var _SignalClient = class extends ApiClient {
+  constructor(options) {
+    super(options);
+  }
+  /** Fetches all Signals for a project */
+  async get(options) {
+    const { projectId } = this.options;
+    const fetchUri = this.createUrl(__privateGet(_SignalClient, _url6), { ...options, projectId });
+    return await this.apiClient(fetchUri);
+  }
+  /** Updates or creates (based on id) a Signal */
+  async upsert(body) {
+    const fetchUri = this.createUrl(__privateGet(_SignalClient, _url6));
+    await this.apiClient(fetchUri, {
+      method: "PUT",
+      body: JSON.stringify({ ...body, projectId: this.options.projectId }),
+      expectNoContent: true
+    });
+  }
+  /** Deletes a Signal */
+  async remove(body) {
+    const fetchUri = this.createUrl(__privateGet(_SignalClient, _url6));
+    await this.apiClient(fetchUri, {
+      method: "DELETE",
+      body: JSON.stringify({ ...body, projectId: this.options.projectId }),
+      expectNoContent: true
+    });
+  }
+};
+var SignalClient = _SignalClient;
+_url6 = /* @__PURE__ */ new WeakMap();
+__privateAdd(SignalClient, _url6, "/api/v2/signal");
+var _url7;
+var _TestClient = class extends ApiClient {
+  constructor(options) {
+    super(options);
+  }
+  /** Fetches all Tests for a project */
+  async get(options) {
+    const { projectId } = this.options;
+    const fetchUri = this.createUrl(__privateGet(_TestClient, _url7), { ...options, projectId });
+    return await this.apiClient(fetchUri);
+  }
+  /** Updates or creates (based on id) a Test */
+  async upsert(body) {
+    const fetchUri = this.createUrl(__privateGet(_TestClient, _url7));
+    await this.apiClient(fetchUri, {
+      method: "PUT",
+      body: JSON.stringify({ ...body, projectId: this.options.projectId }),
+      expectNoContent: true
+    });
+  }
+  /** Deletes a Test */
+  async remove(body) {
+    const fetchUri = this.createUrl(__privateGet(_TestClient, _url7));
+    await this.apiClient(fetchUri, {
+      method: "DELETE",
+      body: JSON.stringify({ ...body, projectId: this.options.projectId }),
+      expectNoContent: true
+    });
+  }
+};
+var TestClient = _TestClient;
+_url7 = /* @__PURE__ */ new WeakMap();
+__privateAdd(TestClient, _url7, "/api/v2/test");
+
+// ../../node_modules/.pnpm/immer@9.0.21/node_modules/immer/dist/immer.esm.mjs
+function n(n2) {
+  for (var r2 = arguments.length, t2 = Array(r2 > 1 ? r2 - 1 : 0), e = 1; e < r2; e++)
+    t2[e - 1] = arguments[e];
+  if ("production" !== process.env.NODE_ENV) {
+    var i2 = Y[n2], o2 = i2 ? "function" == typeof i2 ? i2.apply(null, t2) : i2 : "unknown error nr: " + n2;
+    throw Error("[Immer] " + o2);
+  }
+  throw Error("[Immer] minified error nr: " + n2 + (t2.length ? " " + t2.map(function(n3) {
+    return "'" + n3 + "'";
+  }).join(",") : "") + ". Find the full error at: https://bit.ly/3cXEKWf");
+}
+function r(n2) {
+  return !!n2 && !!n2[Q];
+}
+function t(n2) {
+  var r2;
+  return !!n2 && (function(n3) {
+    if (!n3 || "object" != typeof n3)
+      return false;
+    var r3 = Object.getPrototypeOf(n3);
+    if (null === r3)
+      return true;
+    var t2 = Object.hasOwnProperty.call(r3, "constructor") && r3.constructor;
+    return t2 === Object || "function" == typeof t2 && Function.toString.call(t2) === Z;
+  }(n2) || Array.isArray(n2) || !!n2[L] || !!(null === (r2 = n2.constructor) || void 0 === r2 ? void 0 : r2[L]) || s(n2) || v(n2));
+}
+function i(n2, r2, t2) {
+  void 0 === t2 && (t2 = false), 0 === o(n2) ? (t2 ? Object.keys : nn)(n2).forEach(function(e) {
+    t2 && "symbol" == typeof e || r2(e, n2[e], n2);
+  }) : n2.forEach(function(t3, e) {
+    return r2(e, t3, n2);
+  });
+}
+function o(n2) {
+  var r2 = n2[Q];
+  return r2 ? r2.i > 3 ? r2.i - 4 : r2.i : Array.isArray(n2) ? 1 : s(n2) ? 2 : v(n2) ? 3 : 0;
+}
+function u(n2, r2) {
+  return 2 === o(n2) ? n2.has(r2) : Object.prototype.hasOwnProperty.call(n2, r2);
+}
+function a(n2, r2) {
+  return 2 === o(n2) ? n2.get(r2) : n2[r2];
+}
+function f(n2, r2, t2) {
+  var e = o(n2);
+  2 === e ? n2.set(r2, t2) : 3 === e ? n2.add(t2) : n2[r2] = t2;
+}
+function c(n2, r2) {
+  return n2 === r2 ? 0 !== n2 || 1 / n2 == 1 / r2 : n2 != n2 && r2 != r2;
+}
+function s(n2) {
+  return X && n2 instanceof Map;
+}
+function v(n2) {
+  return q && n2 instanceof Set;
+}
+function p(n2) {
+  return n2.o || n2.t;
+}
+function l(n2) {
+  if (Array.isArray(n2))
+    return Array.prototype.slice.call(n2);
+  var r2 = rn(n2);
+  delete r2[Q];
+  for (var t2 = nn(r2), e = 0; e < t2.length; e++) {
+    var i2 = t2[e], o2 = r2[i2];
+    false === o2.writable && (o2.writable = true, o2.configurable = true), (o2.get || o2.set) && (r2[i2] = { configurable: true, writable: true, enumerable: o2.enumerable, value: n2[i2] });
+  }
+  return Object.create(Object.getPrototypeOf(n2), r2);
+}
+function d(n2, e) {
+  return void 0 === e && (e = false), y(n2) || r(n2) || !t(n2) || (o(n2) > 1 && (n2.set = n2.add = n2.clear = n2.delete = h), Object.freeze(n2), e && i(n2, function(n3, r2) {
+    return d(r2, true);
+  }, true)), n2;
+}
+function h() {
+  n(2);
+}
+function y(n2) {
+  return null == n2 || "object" != typeof n2 || Object.isFrozen(n2);
+}
+function b(r2) {
+  var t2 = tn[r2];
+  return t2 || n(18, r2), t2;
+}
+function _() {
+  return "production" === process.env.NODE_ENV || U || n(0), U;
+}
+function j(n2, r2) {
+  r2 && (b("Patches"), n2.u = [], n2.s = [], n2.v = r2);
+}
+function g(n2) {
+  O(n2), n2.p.forEach(S), n2.p = null;
+}
+function O(n2) {
+  n2 === U && (U = n2.l);
+}
+function w(n2) {
+  return U = { p: [], l: U, h: n2, m: true, _: 0 };
+}
+function S(n2) {
+  var r2 = n2[Q];
+  0 === r2.i || 1 === r2.i ? r2.j() : r2.g = true;
+}
+function P(r2, e) {
+  e._ = e.p.length;
+  var i2 = e.p[0], o2 = void 0 !== r2 && r2 !== i2;
+  return e.h.O || b("ES5").S(e, r2, o2), o2 ? (i2[Q].P && (g(e), n(4)), t(r2) && (r2 = M(e, r2), e.l || x(e, r2)), e.u && b("Patches").M(i2[Q].t, r2, e.u, e.s)) : r2 = M(e, i2, []), g(e), e.u && e.v(e.u, e.s), r2 !== H ? r2 : void 0;
+}
+function M(n2, r2, t2) {
+  if (y(r2))
+    return r2;
+  var e = r2[Q];
+  if (!e)
+    return i(r2, function(i2, o3) {
+      return A(n2, e, r2, i2, o3, t2);
+    }, true), r2;
+  if (e.A !== n2)
+    return r2;
+  if (!e.P)
+    return x(n2, e.t, true), e.t;
+  if (!e.I) {
+    e.I = true, e.A._--;
+    var o2 = 4 === e.i || 5 === e.i ? e.o = l(e.k) : e.o, u2 = o2, a2 = false;
+    3 === e.i && (u2 = new Set(o2), o2.clear(), a2 = true), i(u2, function(r3, i2) {
+      return A(n2, e, o2, r3, i2, t2, a2);
+    }), x(n2, o2, false), t2 && n2.u && b("Patches").N(e, t2, n2.u, n2.s);
+  }
+  return e.o;
+}
+function A(e, i2, o2, a2, c2, s2, v2) {
+  if ("production" !== process.env.NODE_ENV && c2 === o2 && n(5), r(c2)) {
+    var p2 = M(e, c2, s2 && i2 && 3 !== i2.i && !u(i2.R, a2) ? s2.concat(a2) : void 0);
+    if (f(o2, a2, p2), !r(p2))
+      return;
+    e.m = false;
+  } else
+    v2 && o2.add(c2);
+  if (t(c2) && !y(c2)) {
+    if (!e.h.D && e._ < 1)
+      return;
+    M(e, c2), i2 && i2.A.l || x(e, c2);
+  }
+}
+function x(n2, r2, t2) {
+  void 0 === t2 && (t2 = false), !n2.l && n2.h.D && n2.m && d(r2, t2);
+}
+function z2(n2, r2) {
+  var t2 = n2[Q];
+  return (t2 ? p(t2) : n2)[r2];
+}
+function I(n2, r2) {
+  if (r2 in n2)
+    for (var t2 = Object.getPrototypeOf(n2); t2; ) {
+      var e = Object.getOwnPropertyDescriptor(t2, r2);
+      if (e)
+        return e;
+      t2 = Object.getPrototypeOf(t2);
+    }
+}
+function k(n2) {
+  n2.P || (n2.P = true, n2.l && k(n2.l));
+}
+function E(n2) {
+  n2.o || (n2.o = l(n2.t));
+}
+function N(n2, r2, t2) {
+  var e = s(r2) ? b("MapSet").F(r2, t2) : v(r2) ? b("MapSet").T(r2, t2) : n2.O ? function(n3, r3) {
+    var t3 = Array.isArray(n3), e2 = { i: t3 ? 1 : 0, A: r3 ? r3.A : _(), P: false, I: false, R: {}, l: r3, t: n3, k: null, o: null, j: null, C: false }, i2 = e2, o2 = en;
+    t3 && (i2 = [e2], o2 = on);
+    var u2 = Proxy.revocable(i2, o2), a2 = u2.revoke, f2 = u2.proxy;
+    return e2.k = f2, e2.j = a2, f2;
+  }(r2, t2) : b("ES5").J(r2, t2);
+  return (t2 ? t2.A : _()).p.push(e), e;
+}
+function R(e) {
+  return r(e) || n(22, e), function n2(r2) {
+    if (!t(r2))
+      return r2;
+    var e2, u2 = r2[Q], c2 = o(r2);
+    if (u2) {
+      if (!u2.P && (u2.i < 4 || !b("ES5").K(u2)))
+        return u2.t;
+      u2.I = true, e2 = D(r2, c2), u2.I = false;
+    } else
+      e2 = D(r2, c2);
+    return i(e2, function(r3, t2) {
+      u2 && a(u2.t, r3) === t2 || f(e2, r3, n2(t2));
+    }), 3 === c2 ? new Set(e2) : e2;
+  }(e);
+}
+function D(n2, r2) {
+  switch (r2) {
+    case 2:
+      return new Map(n2);
+    case 3:
+      return Array.from(n2);
+  }
+  return l(n2);
+}
+var G;
+var U;
+var W = "undefined" != typeof Symbol && "symbol" == typeof Symbol("x");
+var X = "undefined" != typeof Map;
+var q = "undefined" != typeof Set;
+var B = "undefined" != typeof Proxy && void 0 !== Proxy.revocable && "undefined" != typeof Reflect;
+var H = W ? Symbol.for("immer-nothing") : ((G = {})["immer-nothing"] = true, G);
+var L = W ? Symbol.for("immer-draftable") : "__$immer_draftable";
+var Q = W ? Symbol.for("immer-state") : "__$immer_state";
+var Y = { 0: "Illegal state", 1: "Immer drafts cannot have computed properties", 2: "This object has been frozen and should not be mutated", 3: function(n2) {
+  return "Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? " + n2;
+}, 4: "An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.", 5: "Immer forbids circular references", 6: "The first or second argument to `produce` must be a function", 7: "The third argument to `produce` must be a function or undefined", 8: "First argument to `createDraft` must be a plain object, an array, or an immerable object", 9: "First argument to `finishDraft` must be a draft returned by `createDraft`", 10: "The given draft is already finalized", 11: "Object.defineProperty() cannot be used on an Immer draft", 12: "Object.setPrototypeOf() cannot be used on an Immer draft", 13: "Immer only supports deleting array indices", 14: "Immer only supports setting array indices and the 'length' property", 15: function(n2) {
+  return "Cannot apply patch, path doesn't resolve: " + n2;
+}, 16: 'Sets cannot have "replace" patches.', 17: function(n2) {
+  return "Unsupported patch operation: " + n2;
+}, 18: function(n2) {
+  return "The plugin for '" + n2 + "' has not been loaded into Immer. To enable the plugin, import and call `enable" + n2 + "()` when initializing your application.";
+}, 20: "Cannot use proxies if Proxy, Proxy.revocable or Reflect are not available", 21: function(n2) {
+  return "produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '" + n2 + "'";
+}, 22: function(n2) {
+  return "'current' expects a draft, got: " + n2;
+}, 23: function(n2) {
+  return "'original' expects a draft, got: " + n2;
+}, 24: "Patching reserved attributes like __proto__, prototype and constructor is not allowed" };
+var Z = "" + Object.prototype.constructor;
+var nn = "undefined" != typeof Reflect && Reflect.ownKeys ? Reflect.ownKeys : void 0 !== Object.getOwnPropertySymbols ? function(n2) {
+  return Object.getOwnPropertyNames(n2).concat(Object.getOwnPropertySymbols(n2));
+} : Object.getOwnPropertyNames;
+var rn = Object.getOwnPropertyDescriptors || function(n2) {
+  var r2 = {};
+  return nn(n2).forEach(function(t2) {
+    r2[t2] = Object.getOwnPropertyDescriptor(n2, t2);
+  }), r2;
+};
+var tn = {};
+var en = { get: function(n2, r2) {
+  if (r2 === Q)
+    return n2;
+  var e = p(n2);
+  if (!u(e, r2))
+    return function(n3, r3, t2) {
+      var e2, i3 = I(r3, t2);
+      return i3 ? "value" in i3 ? i3.value : null === (e2 = i3.get) || void 0 === e2 ? void 0 : e2.call(n3.k) : void 0;
+    }(n2, e, r2);
+  var i2 = e[r2];
+  return n2.I || !t(i2) ? i2 : i2 === z2(n2.t, r2) ? (E(n2), n2.o[r2] = N(n2.A.h, i2, n2)) : i2;
+}, has: function(n2, r2) {
+  return r2 in p(n2);
+}, ownKeys: function(n2) {
+  return Reflect.ownKeys(p(n2));
+}, set: function(n2, r2, t2) {
+  var e = I(p(n2), r2);
+  if (null == e ? void 0 : e.set)
+    return e.set.call(n2.k, t2), true;
+  if (!n2.P) {
+    var i2 = z2(p(n2), r2), o2 = null == i2 ? void 0 : i2[Q];
+    if (o2 && o2.t === t2)
+      return n2.o[r2] = t2, n2.R[r2] = false, true;
+    if (c(t2, i2) && (void 0 !== t2 || u(n2.t, r2)))
+      return true;
+    E(n2), k(n2);
+  }
+  return n2.o[r2] === t2 && (void 0 !== t2 || r2 in n2.o) || Number.isNaN(t2) && Number.isNaN(n2.o[r2]) || (n2.o[r2] = t2, n2.R[r2] = true), true;
+}, deleteProperty: function(n2, r2) {
+  return void 0 !== z2(n2.t, r2) || r2 in n2.t ? (n2.R[r2] = false, E(n2), k(n2)) : delete n2.R[r2], n2.o && delete n2.o[r2], true;
+}, getOwnPropertyDescriptor: function(n2, r2) {
+  var t2 = p(n2), e = Reflect.getOwnPropertyDescriptor(t2, r2);
+  return e ? { writable: true, configurable: 1 !== n2.i || "length" !== r2, enumerable: e.enumerable, value: t2[r2] } : e;
+}, defineProperty: function() {
+  n(11);
+}, getPrototypeOf: function(n2) {
+  return Object.getPrototypeOf(n2.t);
+}, setPrototypeOf: function() {
+  n(12);
+} };
+var on = {};
+i(en, function(n2, r2) {
+  on[n2] = function() {
+    return arguments[0] = arguments[0][0], r2.apply(this, arguments);
+  };
+}), on.deleteProperty = function(r2, t2) {
+  return "production" !== process.env.NODE_ENV && isNaN(parseInt(t2)) && n(13), on.set.call(this, r2, t2, void 0);
+}, on.set = function(r2, t2, e) {
+  return "production" !== process.env.NODE_ENV && "length" !== t2 && isNaN(parseInt(t2)) && n(14), en.set.call(this, r2[0], t2, e, r2[0]);
+};
+var un = function() {
+  function e(r2) {
+    var e2 = this;
+    this.O = B, this.D = true, this.produce = function(r3, i3, o2) {
+      if ("function" == typeof r3 && "function" != typeof i3) {
+        var u2 = i3;
+        i3 = r3;
+        var a2 = e2;
+        return function(n2) {
+          var r4 = this;
+          void 0 === n2 && (n2 = u2);
+          for (var t2 = arguments.length, e3 = Array(t2 > 1 ? t2 - 1 : 0), o3 = 1; o3 < t2; o3++)
+            e3[o3 - 1] = arguments[o3];
+          return a2.produce(n2, function(n3) {
+            var t3;
+            return (t3 = i3).call.apply(t3, [r4, n3].concat(e3));
+          });
+        };
+      }
+      var f2;
+      if ("function" != typeof i3 && n(6), void 0 !== o2 && "function" != typeof o2 && n(7), t(r3)) {
+        var c2 = w(e2), s2 = N(e2, r3, void 0), v2 = true;
+        try {
+          f2 = i3(s2), v2 = false;
+        } finally {
+          v2 ? g(c2) : O(c2);
+        }
+        return "undefined" != typeof Promise && f2 instanceof Promise ? f2.then(function(n2) {
+          return j(c2, o2), P(n2, c2);
+        }, function(n2) {
+          throw g(c2), n2;
+        }) : (j(c2, o2), P(f2, c2));
+      }
+      if (!r3 || "object" != typeof r3) {
+        if (void 0 === (f2 = i3(r3)) && (f2 = r3), f2 === H && (f2 = void 0), e2.D && d(f2, true), o2) {
+          var p2 = [], l2 = [];
+          b("Patches").M(r3, f2, p2, l2), o2(p2, l2);
+        }
+        return f2;
+      }
+      n(21, r3);
+    }, this.produceWithPatches = function(n2, r3) {
+      if ("function" == typeof n2)
+        return function(r4) {
+          for (var t3 = arguments.length, i4 = Array(t3 > 1 ? t3 - 1 : 0), o3 = 1; o3 < t3; o3++)
+            i4[o3 - 1] = arguments[o3];
+          return e2.produceWithPatches(r4, function(r5) {
+            return n2.apply(void 0, [r5].concat(i4));
+          });
+        };
+      var t2, i3, o2 = e2.produce(n2, r3, function(n3, r4) {
+        t2 = n3, i3 = r4;
+      });
+      return "undefined" != typeof Promise && o2 instanceof Promise ? o2.then(function(n3) {
+        return [n3, t2, i3];
+      }) : [o2, t2, i3];
+    }, "boolean" == typeof (null == r2 ? void 0 : r2.useProxies) && this.setUseProxies(r2.useProxies), "boolean" == typeof (null == r2 ? void 0 : r2.autoFreeze) && this.setAutoFreeze(r2.autoFreeze);
+  }
+  var i2 = e.prototype;
+  return i2.createDraft = function(e2) {
+    t(e2) || n(8), r(e2) && (e2 = R(e2));
+    var i3 = w(this), o2 = N(this, e2, void 0);
+    return o2[Q].C = true, O(i3), o2;
+  }, i2.finishDraft = function(r2, t2) {
+    var e2 = r2 && r2[Q];
+    "production" !== process.env.NODE_ENV && (e2 && e2.C || n(9), e2.I && n(10));
+    var i3 = e2.A;
+    return j(i3, t2), P(void 0, i3);
+  }, i2.setAutoFreeze = function(n2) {
+    this.D = n2;
+  }, i2.setUseProxies = function(r2) {
+    r2 && !B && n(20), this.O = r2;
+  }, i2.applyPatches = function(n2, t2) {
+    var e2;
+    for (e2 = t2.length - 1; e2 >= 0; e2--) {
+      var i3 = t2[e2];
+      if (0 === i3.path.length && "replace" === i3.op) {
+        n2 = i3.value;
+        break;
+      }
+    }
+    e2 > -1 && (t2 = t2.slice(e2 + 1));
+    var o2 = b("Patches").$;
+    return r(n2) ? o2(n2, t2) : this.produce(n2, function(n3) {
+      return o2(n3, t2);
+    });
+  }, e;
+}();
+var an = new un();
+var fn = an.produce;
+var cn = an.produceWithPatches.bind(an);
+var sn = an.setAutoFreeze.bind(an);
+var vn = an.setUseProxies.bind(an);
+var pn = an.applyPatches.bind(an);
+var ln = an.createDraft.bind(an);
+var dn = an.finishDraft.bind(an);
+
+// ../canvas/dist/index.mjs
+var __create = Object.create;
+var __defProp3 = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp3(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp3(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __accessCheck2 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet2 = (obj, member, getter) => {
+  __accessCheck2(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd2 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var require_retry_operation = __commonJS({
+  "../../node_modules/.pnpm/retry@0.13.1/node_modules/retry/lib/retry_operation.js"(exports, module) {
+    function RetryOperation(timeouts, options) {
+      if (typeof options === "boolean") {
+        options = { forever: options };
+      }
+      this._originalTimeouts = JSON.parse(JSON.stringify(timeouts));
+      this._timeouts = timeouts;
+      this._options = options || {};
+      this._maxRetryTime = options && options.maxRetryTime || Infinity;
+      this._fn = null;
+      this._errors = [];
+      this._attempts = 1;
+      this._operationTimeout = null;
+      this._operationTimeoutCb = null;
+      this._timeout = null;
+      this._operationStart = null;
+      this._timer = null;
+      if (this._options.forever) {
+        this._cachedTimeouts = this._timeouts.slice(0);
+      }
+    }
+    module.exports = RetryOperation;
+    RetryOperation.prototype.reset = function() {
+      this._attempts = 1;
+      this._timeouts = this._originalTimeouts.slice(0);
+    };
+    RetryOperation.prototype.stop = function() {
+      if (this._timeout) {
+        clearTimeout(this._timeout);
+      }
+      if (this._timer) {
+        clearTimeout(this._timer);
+      }
+      this._timeouts = [];
+      this._cachedTimeouts = null;
+    };
+    RetryOperation.prototype.retry = function(err) {
+      if (this._timeout) {
+        clearTimeout(this._timeout);
+      }
+      if (!err) {
+        return false;
+      }
+      var currentTime = (/* @__PURE__ */ new Date()).getTime();
+      if (err && currentTime - this._operationStart >= this._maxRetryTime) {
+        this._errors.push(err);
+        this._errors.unshift(new Error("RetryOperation timeout occurred"));
+        return false;
+      }
+      this._errors.push(err);
+      var timeout = this._timeouts.shift();
+      if (timeout === void 0) {
+        if (this._cachedTimeouts) {
+          this._errors.splice(0, this._errors.length - 1);
+          timeout = this._cachedTimeouts.slice(-1);
+        } else {
+          return false;
+        }
+      }
+      var self = this;
+      this._timer = setTimeout(function() {
+        self._attempts++;
+        if (self._operationTimeoutCb) {
+          self._timeout = setTimeout(function() {
+            self._operationTimeoutCb(self._attempts);
+          }, self._operationTimeout);
+          if (self._options.unref) {
+            self._timeout.unref();
+          }
+        }
+        self._fn(self._attempts);
+      }, timeout);
+      if (this._options.unref) {
+        this._timer.unref();
+      }
+      return true;
+    };
+    RetryOperation.prototype.attempt = function(fn2, timeoutOps) {
+      this._fn = fn2;
+      if (timeoutOps) {
+        if (timeoutOps.timeout) {
+          this._operationTimeout = timeoutOps.timeout;
+        }
+        if (timeoutOps.cb) {
+          this._operationTimeoutCb = timeoutOps.cb;
+        }
+      }
+      var self = this;
+      if (this._operationTimeoutCb) {
+        this._timeout = setTimeout(function() {
+          self._operationTimeoutCb();
+        }, self._operationTimeout);
+      }
+      this._operationStart = (/* @__PURE__ */ new Date()).getTime();
+      this._fn(this._attempts);
+    };
+    RetryOperation.prototype.try = function(fn2) {
+      console.log("Using RetryOperation.try() is deprecated");
+      this.attempt(fn2);
+    };
+    RetryOperation.prototype.start = function(fn2) {
+      console.log("Using RetryOperation.start() is deprecated");
+      this.attempt(fn2);
+    };
+    RetryOperation.prototype.start = RetryOperation.prototype.try;
+    RetryOperation.prototype.errors = function() {
+      return this._errors;
+    };
+    RetryOperation.prototype.attempts = function() {
+      return this._attempts;
+    };
+    RetryOperation.prototype.mainError = function() {
+      if (this._errors.length === 0) {
+        return null;
+      }
+      var counts = {};
+      var mainError = null;
+      var mainErrorCount = 0;
+      for (var i2 = 0; i2 < this._errors.length; i2++) {
+        var error = this._errors[i2];
+        var message = error.message;
+        var count = (counts[message] || 0) + 1;
+        counts[message] = count;
+        if (count >= mainErrorCount) {
+          mainError = error;
+          mainErrorCount = count;
+        }
+      }
+      return mainError;
+    };
+  }
+});
+var require_retry = __commonJS({
+  "../../node_modules/.pnpm/retry@0.13.1/node_modules/retry/lib/retry.js"(exports) {
+    var RetryOperation = require_retry_operation();
+    exports.operation = function(options) {
+      var timeouts = exports.timeouts(options);
+      return new RetryOperation(timeouts, {
+        forever: options && (options.forever || options.retries === Infinity),
+        unref: options && options.unref,
+        maxRetryTime: options && options.maxRetryTime
+      });
+    };
+    exports.timeouts = function(options) {
+      if (options instanceof Array) {
+        return [].concat(options);
+      }
+      var opts = {
+        retries: 10,
+        factor: 2,
+        minTimeout: 1 * 1e3,
+        maxTimeout: Infinity,
+        randomize: false
+      };
+      for (var key in options) {
+        opts[key] = options[key];
+      }
+      if (opts.minTimeout > opts.maxTimeout) {
+        throw new Error("minTimeout is greater than maxTimeout");
+      }
+      var timeouts = [];
+      for (var i2 = 0; i2 < opts.retries; i2++) {
+        timeouts.push(this.createTimeout(i2, opts));
+      }
+      if (options && options.forever && !timeouts.length) {
+        timeouts.push(this.createTimeout(i2, opts));
+      }
+      timeouts.sort(function(a2, b2) {
+        return a2 - b2;
+      });
+      return timeouts;
+    };
+    exports.createTimeout = function(attempt, opts) {
+      var random = opts.randomize ? Math.random() + 1 : 1;
+      var timeout = Math.round(random * Math.max(opts.minTimeout, 1) * Math.pow(opts.factor, attempt));
+      timeout = Math.min(timeout, opts.maxTimeout);
+      return timeout;
+    };
+    exports.wrap = function(obj, options, methods) {
+      if (options instanceof Array) {
+        methods = options;
+        options = null;
+      }
+      if (!methods) {
+        methods = [];
+        for (var key in obj) {
+          if (typeof obj[key] === "function") {
+            methods.push(key);
+          }
+        }
+      }
+      for (var i2 = 0; i2 < methods.length; i2++) {
+        var method = methods[i2];
+        var original = obj[method];
+        obj[method] = function retryWrapper(original2) {
+          var op = exports.operation(options);
+          var args = Array.prototype.slice.call(arguments, 1);
+          var callback = args.pop();
+          args.push(function(err) {
+            if (op.retry(err)) {
+              return;
+            }
+            if (err) {
+              arguments[0] = op.mainError();
+            }
+            callback.apply(this, arguments);
+          });
+          op.attempt(function() {
+            original2.apply(obj, args);
+          });
+        }.bind(obj, original);
+        obj[method].options = options;
+      }
+    };
+  }
+});
+var require_retry2 = __commonJS({
+  "../../node_modules/.pnpm/retry@0.13.1/node_modules/retry/index.js"(exports, module) {
+    module.exports = require_retry();
+  }
+});
+var import_retry = __toESM(require_retry2(), 1);
+var _url8;
+var _DataTypeClient = class extends ApiClient {
+  constructor(options) {
+    super(options);
+  }
+  /** Fetches all DataTypes for a project */
+  async get(options) {
+    const { projectId } = this.options;
+    const fetchUri = this.createUrl(__privateGet2(_DataTypeClient, _url8), { ...options, projectId });
+    return await this.apiClient(fetchUri);
+  }
+  /** Updates or creates (based on id) a DataType */
+  async upsert(body) {
+    const fetchUri = this.createUrl(__privateGet2(_DataTypeClient, _url8));
+    await this.apiClient(fetchUri, {
+      method: "PUT",
+      body: JSON.stringify({ ...body, projectId: this.options.projectId }),
+      expectNoContent: true
+    });
+  }
+  /** Deletes a DataType */
+  async remove(body) {
+    const fetchUri = this.createUrl(__privateGet2(_DataTypeClient, _url8));
+    await this.apiClient(fetchUri, {
+      method: "DELETE",
+      body: JSON.stringify({ ...body, projectId: this.options.projectId }),
+      expectNoContent: true
+    });
+  }
 };
+var DataTypeClient = _DataTypeClient;
+_url8 = /* @__PURE__ */ new WeakMap();
+__privateAdd2(DataTypeClient, _url8, "/api/v1/data-types");
+var EDGE_MAX_L2_CACHE_TTL_IN_HOURS = 4 * 7 * 24;
+function bindVariables({
+  variables,
+  value,
+  errorPrefix = "Variable",
+  handleBinding
+}) {
+  let boundCount = 0;
+  const errors = [];
+  const defaultHandleBinding = (variableName2, variables2, errors2) => {
+    const variableValue2 = variables2[variableName2];
+    if (variableValue2 === void 0) {
+      errors2.push(`${errorPrefix} "${variableName2}" is not defined`);
+      return "";
+    }
+    return variableValue2;
+  };
+  const result = value.replace(/(?<!\\)\${([^}]+)}/g, (_match, variableName2) => {
+    const variableValue2 = (handleBinding != null ? handleBinding : defaultHandleBinding)(variableName2, variables, errors);
+    boundCount++;
+    return variableValue2;
+  });
+  return { result, boundCount, errors: errors.length > 0 ? errors : void 0 };
+}
+function bindVariablesToObject(options) {
+  return bindVariablesToObjectRecursive(options);
+}
+function bindVariablesToObjectRecursive({
+  value,
+  recursivePath,
+  ...bindVariablesOptions
+}) {
+  let boundCount = 0;
+  const errors = [];
+  if (typeof value === "string") {
+    return bindVariables({ ...bindVariablesOptions, value });
+  }
+  if (typeof value !== "object" || value === null) {
+    return { boundCount: 0, result: value };
+  }
+  const result = fn(value, (draft) => {
+    Object.entries(draft).forEach(([property, oldValue]) => {
+      const currentObjectPath = recursivePath ? `${recursivePath}.${property}` : property;
+      if (typeof oldValue === "string") {
+        const bindResult = bindVariables({ ...bindVariablesOptions, value: oldValue });
+        if (oldValue !== bindResult.result || bindResult.errors) {
+          boundCount += bindResult.boundCount;
+          draft[property] = bindResult.result;
+          if (bindResult.errors) {
+            errors.push(...bindResult.errors.map((e) => `${currentObjectPath}: ${e}`));
+          }
+        }
+        return;
+      }
+      const childBind = bindVariablesToObject({
+        ...bindVariablesOptions,
+        value: oldValue,
+        recursivePath: currentObjectPath
+      });
+      if (childBind.boundCount || childBind.errors) {
+        boundCount += childBind.boundCount;
+        draft[property] = childBind.result;
+        if (childBind.errors) {
+          errors.push(...childBind.errors.map((e) => `${currentObjectPath}: ${e}`));
+        }
+      }
+    });
+  });
+  return { boundCount, result, errors: errors.length > 0 ? errors : void 0 };
+}
 
-// src/components/ObjectSearch/ObjectSearchFilter.tsx
-import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
-import { useState as useState12 } from "react";
+// src/components/ObjectSearch/ObjectSearchContainer.tsx
+import { Container, IconsProvider, ScrollableList, VerticalRhythm } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
-import { createContext as createContext5, useCallback, useContext as useContext7, useDeferredValue, useState as useState11 } from "react";
-import { jsx as jsx47 } from "@emotion/react/jsx-runtime";
+import {
+  createContext as createContext5,
+  useCallback,
+  useContext as useContext7,
+  useDeferredValue,
+  useMemo as useMemo8,
+  useState as useState12
+} from "react";
+import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
 var ObjectSearchContext = createContext5({
   onSetQuery: () => {
   },
   onSelectItem: () => {
   },
-  query: {
-    contentType: "",
-    keyword: ""
-  },
+  query: {},
+  boundQuery: {},
   list: {},
   onSetList: () => {
   },
@@ -4124,22 +5477,23 @@ var ObjectSearchContext = createContext5({
   }
 });
 var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
-  const [query, setQuery] = useState11({
+  const [query, setQuery] = useState12({
     contentType: "",
     keyword: ""
   });
+  const { flatVariables } = useVariables(true);
   const querySearchDeferred = useDeferredValue(query);
-  const [selectedItems, setSelectedItems] = useState11(currentlySelectedItems != null ? currentlySelectedItems : []);
-  const [list, setList] = useState11({});
+  const [selectedItems, setSelectedItems] = useState12(currentlySelectedItems != null ? currentlySelectedItems : []);
+  const [list, setList] = useState12({});
   const onSetQuery = useCallback(
-    (value) => {
-      if (Array.isArray(value.contentType) && value.contentType.length > 0) {
+    (value2) => {
+      if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
         return setQuery({
-          ...value,
-          contentType: value.contentType[0].id
+          ...value2,
+          contentType: value2.contentType[0].id
         });
       }
-      return setQuery(value);
+      return setQuery(value2);
     },
     [setQuery]
   );
@@ -4161,35 +5515,116 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     setSelectedItems([]);
   }, [setSelectedItems]);
   const onSetList = useCallback(
-    (value) => {
-      setList(value);
+    (value2) => {
+      setList(value2);
     },
     [setList]
   );
-  return /* @__PURE__ */ jsx47(
-    ObjectSearchContext.Provider,
-    {
-      value: {
-        onSetQuery,
-        query: querySearchDeferred,
-        onSelectItem,
-        selectedListItems: selectedItems,
-        onRemoveAllSelectedItems,
-        list,
-        onSetList
-      },
-      children
-    }
+  const boundQuery = useMemo8(() => bindQuery(query, flatVariables), [query, flatVariables]);
+  const value = useMemo8(
+    () => ({
+      boundQuery,
+      onSetQuery,
+      query: querySearchDeferred,
+      onSelectItem,
+      selectedListItems: selectedItems,
+      onRemoveAllSelectedItems,
+      list,
+      onSetList
+    }),
+    [
+      boundQuery,
+      onSetQuery,
+      querySearchDeferred,
+      onSelectItem,
+      selectedItems,
+      onRemoveAllSelectedItems,
+      list,
+      onSetList
+    ]
   );
+  return /* @__PURE__ */ jsx48(ObjectSearchContext.Provider, { value, children });
 };
-var useObjectSearchContext = () => {
-  const contextValues = useContext7(ObjectSearchContext);
-  return { ...contextValues };
+function useObjectSearchContext() {
+  return useContext7(ObjectSearchContext);
+}
+function bindQuery(query, inputs) {
+  const { result, errors } = bindVariablesToObject({
+    value: query,
+    variables: inputs,
+    errorPrefix: "Dynamic input"
+  });
+  if (errors == null ? void 0 : errors.length) {
+    console.error(`Error binding query filters to dynamic inputs`, errors);
+  }
+  return result;
+}
+
+// src/components/ObjectSearch/ObjectSearchContainer.tsx
+import { jsx as jsx49, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
+var ObjectSearchContainer = ({
+  label,
+  enableDynamicInputToResultId,
+  searchFilters,
+  resultList,
+  children
+}) => {
+  var _a, _b;
+  const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
+  const { flatVariables } = useVariables(true);
+  const body = /* @__PURE__ */ jsxs28(VerticalRhythm, { children: [
+    searchFilters,
+    !resultList ? null : /* @__PURE__ */ jsx49(ScrollableList, { role: "list", children: resultList })
+  ] });
+  const handleSelectedVariableChange = (selectedValue) => {
+    var _a2;
+    if (!selectedValue) {
+      onSelectItem([]);
+      return;
+    }
+    const { result, errors } = bindVariables({
+      value: selectedValue,
+      variables: flatVariables,
+      errorPrefix: "Dynamic input"
+    });
+    if (!result) {
+      onSelectItem([]);
+      return;
+    }
+    const item = (_a2 = list.items) == null ? void 0 : _a2.find((i2) => i2.id === result);
+    onSelectItem([
+      {
+        title: selectedValue,
+        contentType: (errors == null ? void 0 : errors.length) ? errors[0] : `Current dynamic value "${result}" is not an ID in the options`,
+        // spread any matched list item, overriding the above default props
+        ...item,
+        // we want to make sure the ID is our dynamic value
+        id: selectedValue
+      }
+    ]);
+  };
+  return /* @__PURE__ */ jsx49(IconsProvider, { children: /* @__PURE__ */ jsxs28(VerticalRhythm, { children: [
+    /* @__PURE__ */ jsx49(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx49(
+      InputVariables,
+      {
+        label,
+        value: (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "",
+        onChange: handleSelectedVariableChange,
+        inputWhenNoVariables: body,
+        disableVariables: !enableDynamicInputToResultId
+      }
+    ) : body }),
+    children
+  ] }) });
 };
 
+// src/components/ObjectSearch/ObjectSearchFilter.tsx
+import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
+import { useState as useState13 } from "react";
+
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
-import { css as css26 } from "@emotion/react";
-var ObjectSearchFilterContainerLabel = css26`
+import { css as css28 } from "@emotion/react";
+var ObjectSearchFilterContainerLabel = css28`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -4197,21 +5632,21 @@ var ObjectSearchFilterContainerLabel = css26`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = css26`
+var ObjectSearchFilterContainer = css28`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterDropdownAndTextSearch = css26`
+var ObjectSearchFilterDropdownAndTextSearch = css28`
   grid-template-columns: 0.5fr 1fr;
 `;
-var ObjectSearchFilterGrid = (gridColumns) => css26`
+var ObjectSearchFilterGrid = (gridColumns) => css28`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
 `;
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-import { jsx as jsx48, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
 var ObjectSearchFilter = ({
   requireContentType,
   typeSelectorAllTypesOptionText = "All content types",
@@ -4221,7 +5656,7 @@ var ObjectSearchFilter = ({
   selectOptions
 }) => {
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = useState12({
+  const [searchState, setSearchState] = useState13({
     contentType: "",
     keyword: ""
   });
@@ -4231,8 +5666,8 @@ var ObjectSearchFilter = ({
     });
     onSetQuery({ ...query, ...value });
   };
-  return /* @__PURE__ */ jsxs28("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
-    /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs29("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
+    /* @__PURE__ */ jsx50(
       InputSelect6,
       {
         label: selectLabel,
@@ -4248,7 +5683,7 @@ var ObjectSearchFilter = ({
         value: query.contentType
       }
     ),
-    /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx50(
       InputKeywordSearch2,
       {
         inputFieldName: searchInputName,
@@ -4263,11 +5698,11 @@ var ObjectSearchFilter = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
-import { jsx as jsx49, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var ObjectSearchFilterContainer2 = ({ label, children }) => {
-  return /* @__PURE__ */ jsxs29("div", { children: [
-    /* @__PURE__ */ jsx49("span", { css: ObjectSearchFilterContainerLabel, children: label }),
-    /* @__PURE__ */ jsx49("div", { css: ObjectSearchFilterContainer, children })
+  return /* @__PURE__ */ jsxs30("div", { children: [
+    label ? /* @__PURE__ */ jsx51("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
+    /* @__PURE__ */ jsx51("div", { css: ObjectSearchFilterContainer, children })
   ] });
 };
 
@@ -4275,9 +5710,9 @@ var ObjectSearchFilterContainer2 = ({ label, children }) => {
 import { Popover } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
-import { css as css27 } from "@emotion/react";
+import { css as css29 } from "@emotion/react";
 import { skeletonLoading } from "@uniformdev/design-system";
-var ObjectListItemContainer = css27`
+var ObjectListItemContainer = css29`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -4290,7 +5725,7 @@ var ObjectListItemContainer = css27`
     display: none;
   }
 `;
-var ObjectListItemLoading = css27`
+var ObjectListItemLoading = css29`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-color: transparent;
   min-height: 42px;
@@ -4314,37 +5749,37 @@ var ObjectListItemLoading = css27`
     width: 1rem;
   }
 `;
-var ObjectListItemHeadingGroup = css27`
+var ObjectListItemHeadingGroup = css29`
   align-items: center;
   display: grid;
 `;
-var ObjectListItemTitle = css27`
+var ObjectListItemTitle = css29`
   color: var(--brand-secondary-1);
   display: block;
   font-size: var(--fs-sm);
 `;
-var ObjectListItemSubtitle = css27`
+var ObjectListItemSubtitle = css29`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectListItemInfoContainer = css27`
+var ObjectListItemInfoContainer = css29`
   align-items: center;
   display: flex;
   justify-content: center;
 `;
-var ObjectListItemControlledContent = css27`
+var ObjectListItemControlledContent = css29`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectListItemUnControlledContent = css27`
+var ObjectListItemUnControlledContent = css29`
   margin-top: var(--spacing-sm);
   grid-column: 1 / -1;
 `;
 
 // src/components/ObjectSearch/ObjectSearchListItem.tsx
-import { jsx as jsx50, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 var ObjectSearchListItem = ({
   id,
   title,
@@ -4353,8 +5788,7 @@ var ObjectSearchListItem = ({
   popoverData,
   onSelect,
   isMulti = false,
-  children,
-  ...props
+  children
 }) => {
   const { onSelectItem, selectedListItems } = useObjectSearchContext();
   const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
@@ -4368,20 +5802,20 @@ var ObjectSearchListItem = ({
     return onSelectItem([selectedItem]);
   };
   const hideWhenInSelectedList = selectedListItems.some((item) => item.id === id);
-  return /* @__PURE__ */ jsxs30("div", { role: "listitem", hidden: hideWhenInSelectedList, css: ObjectListItemContainer, ...props, children: [
-    /* @__PURE__ */ jsxs30("div", { role: "button", onClick: handleSelectItem, css: ObjectListItemControlledContent, children: [
-      !image ? null : /* @__PURE__ */ jsx50("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
-      /* @__PURE__ */ jsxs30("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
-        !contentType ? null : /* @__PURE__ */ jsx50("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
-        /* @__PURE__ */ jsx50("span", { css: ObjectListItemTitle, children: title })
+  return /* @__PURE__ */ jsxs31("div", { role: "listitem", hidden: hideWhenInSelectedList, css: ObjectListItemContainer, children: [
+    /* @__PURE__ */ jsxs31("div", { role: "button", onClick: handleSelectItem, css: ObjectListItemControlledContent, children: [
+      !image ? null : /* @__PURE__ */ jsx52("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
+      /* @__PURE__ */ jsxs31("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
+        !contentType ? null : /* @__PURE__ */ jsx52("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
+        /* @__PURE__ */ jsx52("span", { css: ObjectListItemTitle, children: title })
       ] })
     ] }),
-    !popoverData ? null : /* @__PURE__ */ jsx50("div", { css: ObjectListItemInfoContainer, children: /* @__PURE__ */ jsx50(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData }) }),
-    !children ? null : /* @__PURE__ */ jsx50("div", { css: ObjectListItemUnControlledContent, children })
+    !popoverData ? null : /* @__PURE__ */ jsx52("div", { css: ObjectListItemInfoContainer, children: /* @__PURE__ */ jsx52(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData }) }),
+    !children ? null : /* @__PURE__ */ jsx52("div", { css: ObjectListItemUnControlledContent, children })
   ] });
 };
 var ObjectSearchListItemLoadingSkeleton = () => {
-  return /* @__PURE__ */ jsx50("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
+  return /* @__PURE__ */ jsx52("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
 };
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
@@ -4389,9 +5823,9 @@ import { Badge, Button as Button4, Popover as Popover2 } from "@uniformdev/desig
 import { format as timeagoFormat } from "timeago.js";
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
-import { css as css28 } from "@emotion/react";
+import { css as css30 } from "@emotion/react";
 import { button as button2 } from "@uniformdev/design-system";
-var ButtonStyles = css28`
+var ButtonStyles = css30`
   ${button2}
   background: transparent;
   border: 1px solid var(--brand-secondary-1);
@@ -4418,20 +5852,20 @@ var ButtonStyles = css28`
     text-decoration: none;
   }
 `;
-var ButtonIcon = css28`
+var ButtonIcon = css30`
   width: 1rem;
   height: 1rem;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
-import { jsx as jsx51, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var ObjectSearchResultItemButton = ({
   text,
   icon,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs31("button", { type: "button", css: ButtonStyles, ...props, children: [
-    !icon ? null : /* @__PURE__ */ jsx51(Image, { src: icon, css: ButtonIcon }),
+  return /* @__PURE__ */ jsxs32("button", { type: "button", css: ButtonStyles, ...props, children: [
+    !icon ? null : /* @__PURE__ */ jsx53(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
@@ -4440,15 +5874,15 @@ var LinkButton = ({
   icon,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs31("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
-    !icon ? null : /* @__PURE__ */ jsx51(Image, { src: icon, css: ButtonIcon }),
+  return /* @__PURE__ */ jsxs32("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
+    !icon ? null : /* @__PURE__ */ jsx53(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
-import { css as css29 } from "@emotion/react";
-var ObjectSearchResultItemContainer = css29`
+import { css as css31 } from "@emotion/react";
+var ObjectSearchResultItemContainer = css31`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -4464,7 +5898,7 @@ var ObjectSearchResultItemContainer = css29`
     }
   }
 `;
-var ObjectSearchDragHandle = css29`
+var ObjectSearchDragHandle = css31`
   border-left: 2px dotted var(--gray-300);
   border-right: 2px dotted var(--gray-300);
   position: absolute;
@@ -4473,41 +5907,41 @@ var ObjectSearchDragHandle = css29`
   transition: opacity var(--duration-fast) var(--timing-ease-out);
   opacity: 0;
 `;
-var ObjectSearchResultItemSubtitle = css29`
+var ObjectSearchResultItemSubtitle = css31`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectSearchResultItemTitle = css29`
+var ObjectSearchResultItemTitle = css31`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
   gap: var(--spacing-xs);
 `;
-var ObjectSearchResultItemTimeStamp = css29`
+var ObjectSearchResultItemTimeStamp = css31`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
-var ObjectSearchAuthorStateGroup = css29`
+var ObjectSearchAuthorStateGroup = css31`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchUpdateGroup = css29`
+var ObjectSearchUpdateGroup = css31`
   display: grid;
 `;
-var ObjectSearchContentContainer = css29`
+var ObjectSearchContentContainer = css31`
   display: flex;
   gap: var(--spacing-base);
 `;
-var ObjectSearchImage = css29`
+var ObjectSearchImage = css31`
   width: 56px;
   object-fit: contain;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
-import { jsx as jsx52, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var ObjectSearchResultItem = ({
   id,
   title,
@@ -4528,38 +5962,38 @@ var ObjectSearchResultItem = ({
   const { onSelectItem } = useObjectSearchContext();
   const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
   const onRemoveItem = () => {
-    onSelectItem({ id });
+    onSelectItem({ id, title: id });
     onRemove == null ? void 0 : onRemove();
   };
-  return /* @__PURE__ */ jsxs32("div", { css: ObjectSearchResultItemContainer, children: [
-    disableDnD ? null : /* @__PURE__ */ jsx52("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
-    /* @__PURE__ */ jsx52("div", { children: /* @__PURE__ */ jsxs32("div", { css: ObjectSearchContentContainer, children: [
-      !imageUrl ? null : /* @__PURE__ */ jsx52("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
-      /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsx52("span", { css: ObjectSearchResultItemSubtitle, children: formatedContentType }),
-        /* @__PURE__ */ jsxs32("span", { role: "heading", css: ObjectSearchResultItemTitle, children: [
+  return /* @__PURE__ */ jsxs33("div", { css: ObjectSearchResultItemContainer, children: [
+    disableDnD ? null : /* @__PURE__ */ jsx54("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
+    /* @__PURE__ */ jsx54("div", { children: /* @__PURE__ */ jsxs33("div", { css: ObjectSearchContentContainer, children: [
+      !imageUrl ? null : /* @__PURE__ */ jsx54("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
+      /* @__PURE__ */ jsxs33("div", { children: [
+        /* @__PURE__ */ jsx54("span", { css: ObjectSearchResultItemSubtitle, children: formatedContentType }),
+        /* @__PURE__ */ jsxs33("span", { role: "heading", css: ObjectSearchResultItemTitle, children: [
           title != null ? title : name,
-          !popoverData ? null : /* @__PURE__ */ jsx52(Popover2, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
+          !popoverData ? null : /* @__PURE__ */ jsx54(Popover2, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
-        !createdAt && !publishStatus ? null : /* @__PURE__ */ jsxs32("div", { css: ObjectSearchAuthorStateGroup, children: [
-          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ jsx52(Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
-          !createdAt && !publishedAt ? null : /* @__PURE__ */ jsxs32("div", { css: ObjectSearchUpdateGroup, children: [
-            !createdAt ? null : /* @__PURE__ */ jsxs32("small", { css: ObjectSearchResultItemTimeStamp, children: [
-              /* @__PURE__ */ jsx52("strong", { children: "Last updated: " }),
+        !createdAt && !publishStatus ? null : /* @__PURE__ */ jsxs33("div", { css: ObjectSearchAuthorStateGroup, children: [
+          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ jsx54(Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
+          !createdAt && !publishedAt ? null : /* @__PURE__ */ jsxs33("div", { css: ObjectSearchUpdateGroup, children: [
+            !createdAt ? null : /* @__PURE__ */ jsxs33("small", { css: ObjectSearchResultItemTimeStamp, children: [
+              /* @__PURE__ */ jsx54("strong", { children: "Last updated: " }),
               timeagoFormat(createdAt)
             ] }),
-            !publishedAt ? null : /* @__PURE__ */ jsxs32("small", { css: ObjectSearchResultItemTimeStamp, children: [
-              /* @__PURE__ */ jsx52("strong", { children: "Last published: " }),
+            !publishedAt ? null : /* @__PURE__ */ jsxs33("small", { css: ObjectSearchResultItemTimeStamp, children: [
+              /* @__PURE__ */ jsx54("strong", { children: "Last published: " }),
               timeagoFormat(publishedAt)
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx52("div", { children })
+        /* @__PURE__ */ jsx54("div", { children })
       ] })
     ] }) }),
-    !editLink && hideRemoveButton ? null : /* @__PURE__ */ jsxs32("div", { css: ObjectSearchAuthorStateGroup, children: [
-      !editLink ? null : /* @__PURE__ */ jsx52(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
-      hideRemoveButton ? null : /* @__PURE__ */ jsx52(Button4, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+    !editLink && hideRemoveButton ? null : /* @__PURE__ */ jsxs33("div", { css: ObjectSearchAuthorStateGroup, children: [
+      !editLink ? null : /* @__PURE__ */ jsx54(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
+      hideRemoveButton ? null : /* @__PURE__ */ jsx54(Button4, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
     ] })
   ] });
 };
@@ -4569,38 +6003,39 @@ import { Button as Button5, Counter } from "@uniformdev/design-system";
 import { DragDropContext as DragDropContext3, Draggable as Draggable3, Droppable as Droppable3 } from "react-beautiful-dnd";
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
-import { css as css30 } from "@emotion/react";
-var ObjectSearchResultListContainer = css30`
+import { css as css32 } from "@emotion/react";
+var ObjectSearchResultListContainer = css32`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: space-between;
 `;
-var ObjectSearchDragContainer = css30`
+var ObjectSearchDragContainer = css32`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchResultListCounterContainer = css30`
+var ObjectSearchResultListCounterContainer = css32`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchResultListTitle = css30`
+var ObjectSearchResultListTitle = css32`
   font-weight: var(--fw-bold);
   line-height: 1;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
-import { Fragment as Fragment7, jsx as jsx53, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
-var ObjectSearchResultList = ({
+import { Fragment as Fragment8, jsx as jsx55, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  renderResultComponent = (value) => /* @__PURE__ */ jsx53(ObjectSearchResultItem, { ...value, disableDnD }),
+  renderResultComponent = (value) => /* @__PURE__ */ jsx55(ObjectSearchResultItem, { ...value, disableDnD }),
   multiSelectId,
-  disableDnD = false
-}) => {
+  disableDnD = false,
+  whenNothingSelected = null
+}) {
   const { selectedListItems, onRemoveAllSelectedItems, onSelectItem } = useObjectSearchContext();
   const handleRemoveAllSelectedItems = () => {
     onRemoveAllSelectedItems();
@@ -4616,16 +6051,16 @@ var ObjectSearchResultList = ({
       return result;
     }
   };
-  return /* @__PURE__ */ jsxs33(Fragment7, { children: [
-    /* @__PURE__ */ jsxs33("div", { role: "group", css: ObjectSearchResultListContainer, children: [
-      /* @__PURE__ */ jsxs33("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
-        /* @__PURE__ */ jsx53("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
+  return /* @__PURE__ */ jsxs34(Fragment8, { children: [
+    /* @__PURE__ */ jsxs34("div", { role: "group", css: ObjectSearchResultListContainer, children: [
+      /* @__PURE__ */ jsxs34("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+        /* @__PURE__ */ jsx55("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
-        !selectedListItems.length ? null : /* @__PURE__ */ jsx53(Counter, { count: selectedListItems.length })
+        !selectedListItems.length ? null : /* @__PURE__ */ jsx55(Counter, { count: selectedListItems.length })
       ] }),
-      /* @__PURE__ */ jsxs33("div", { css: ObjectSearchResultListCounterContainer, children: [
+      /* @__PURE__ */ jsxs34("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
-        hideRemoveButton ? null : /* @__PURE__ */ jsx53(
+        hideRemoveButton ? null : /* @__PURE__ */ jsx55(
           Button5,
           {
             buttonType: "ghostDestructive",
@@ -4637,10 +6072,10 @@ var ObjectSearchResultList = ({
         )
       ] })
     ] }),
-    !selectedListItems.length ? null : /* @__PURE__ */ jsx53(DragDropContext3, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx53(Droppable3, { droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs33("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
-      selectedListItems.map((item, i) => {
+    !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ jsx55(DragDropContext3, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx55(Droppable3, { droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs34("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
+      selectedListItems.map((item, i2) => {
         const renderListItem = renderResultComponent(item);
-        return /* @__PURE__ */ jsx53(Draggable3, { draggableId: item.id, index: i, isDragDisabled: disableDnD, children: (provided2, snapshot) => /* @__PURE__ */ jsx53(
+        return /* @__PURE__ */ jsx55(Draggable3, { draggableId: item.id, index: i2, isDragDisabled: disableDnD, children: (provided2, snapshot) => /* @__PURE__ */ jsx55(
           "div",
           {
             css: ObjectSearchDragContainer,
@@ -4655,12 +6090,12 @@ var ObjectSearchResultList = ({
       provided.placeholder
     ] }) }) })
   ] });
-};
+}
 
 // src/components/ObjectSearch/QueryFilter.tsx
-import { Input as Input7, InputKeywordSearch as InputKeywordSearch3, InputSelect as InputSelect7 } from "@uniformdev/design-system";
-import { useEffect as useEffect9, useState as useState13 } from "react";
-import { jsx as jsx54, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+import { Input as Input6, InputKeywordSearch as InputKeywordSearch3, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
+import { useEffect as useEffect9, useState as useState14 } from "react";
+import { jsx as jsx56, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var QueryFilter = ({
   requireContentType,
   queryFilterTitle = "Configure Query",
@@ -4669,9 +6104,10 @@ var QueryFilter = ({
   contentTypeOptions,
   searchInputName = "searchText",
   searchInputPlaceholderText = "Enter keyword to narrow your results",
+  searchInputLabel = "Query",
   countLabel = "Count",
   countValue = 5,
-  sortLabel = "Sort",
+  sortLabel = "Sort By",
   sortOptions,
   sortOrderLabel = "Sort Order",
   sortOrderOptions = [
@@ -4688,9 +6124,9 @@ var QueryFilter = ({
   ],
   children
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = useState13({
+  const [queryState, setQueryState] = useState14({
     contentType: "",
     keyword: "",
     count: countValue != null ? countValue : 5,
@@ -4704,84 +6140,142 @@ var QueryFilter = ({
   useEffect9(() => {
     onSetQuery(queryState);
   }, [onSetQuery, queryState]);
-  return /* @__PURE__ */ jsxs34("fieldset", { children: [
-    /* @__PURE__ */ jsx54("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
-    /* @__PURE__ */ jsxs34("div", { css: ObjectSearchFilterContainer, children: [
-      /* @__PURE__ */ jsxs34("div", { css: ObjectSearchFilterGrid("0.5fr 1fr"), children: [
-        /* @__PURE__ */ jsx54(
-          InputSelect7,
+  return /* @__PURE__ */ jsxs35("fieldset", { children: [
+    /* @__PURE__ */ jsx56("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
+    /* @__PURE__ */ jsx56("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
+      /* @__PURE__ */ jsx56(
+        InputVariables,
+        {
+          label: searchInputLabel,
+          value: (_c = queryState.keyword) != null ? _c : "",
+          onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
+          disableInlineMenu: true,
+          id: "qf_searchText",
+          inputWhenNoVariables: /* @__PURE__ */ jsx56(
+            InputKeywordSearch3,
+            {
+              id: "qf_searchText",
+              inputFieldName: searchInputName,
+              placeholder: searchInputPlaceholderText,
+              onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+              disabledFieldSubmission: true,
+              onClear: () => handleFilterChange({ keyword: "" }),
+              value: queryState.keyword
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs35("div", { css: ObjectSearchFilterGrid("1fr 100px"), children: [
+        /* @__PURE__ */ jsx56(
+          InputVariables,
           {
             label: contentTypeLabel,
-            showLabel: false,
-            options: [
-              ...!requireContentType ? [{ id: "", label: typeSelectorAllTypesOptionText }] : [],
-              ...contentTypeOptions ? contentTypeOptions.map((option) => {
-                var _a2;
-                return { id: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
-              }) : []
-            ],
-            onChange: (e) => handleFilterChange({ contentType: e.target.value }),
-            value: queryState.contentType
+            id: "qf_contentType",
+            value: (_d = queryState.contentType) != null ? _d : "",
+            onChange: (newType) => handleFilterChange({ contentType: newType }),
+            disableInlineMenu: true,
+            inputWhenNoVariables: /* @__PURE__ */ jsx56(
+              InputSelect7,
+              {
+                id: "qf_contentType",
+                label: contentTypeLabel,
+                showLabel: false,
+                options: [
+                  ...!requireContentType ? [{ id: "", label: typeSelectorAllTypesOptionText }] : [],
+                  ...contentTypeOptions ? contentTypeOptions.map((option) => {
+                    var _a2;
+                    return { id: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
+                  }) : []
+                ],
+                onChange: (e) => handleFilterChange({ contentType: e.target.value }),
+                value: queryState.contentType
+              }
+            )
           }
         ),
-        /* @__PURE__ */ jsx54(
-          InputKeywordSearch3,
+        /* @__PURE__ */ jsx56(
+          InputVariables,
           {
-            inputFieldName: searchInputName,
-            placeholder: searchInputPlaceholderText,
-            onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
-            disabledFieldSubmission: true,
-            onClear: () => handleFilterChange({ keyword: "" }),
-            value: queryState.keyword
+            label: countLabel,
+            id: "qf_count",
+            value: queryState.count.toString(10),
+            onChange: (newCount) => handleFilterChange({ count: newCount }),
+            disableInlineMenu: true,
+            inputWhenNoVariables: /* @__PURE__ */ jsx56(
+              Input6,
+              {
+                id: "qf_count",
+                label: countLabel,
+                showLabel: false,
+                type: "number",
+                onChange: (e) => handleFilterChange({ count: e.target.value }),
+                defaultValue: countValue,
+                value: queryState.count
+              }
+            )
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs34("div", { css: ObjectSearchFilterGrid("repeat(2, 1fr) 0.5fr"), children: [
-        /* @__PURE__ */ jsx54(
-          InputSelect7,
+      /* @__PURE__ */ jsxs35("div", { css: ObjectSearchFilterGrid("2fr 1fr"), children: [
+        /* @__PURE__ */ jsx56(
+          InputVariables,
           {
+            id: "qf_sortBy",
             label: sortLabel,
-            options: [
+            value: queryState.sortBy,
+            onChange: (newSortBy) => handleFilterChange({ sortBy: newSortBy }),
+            disableInlineMenu: true,
+            inputWhenNoVariables: /* @__PURE__ */ jsx56(
+              InputSelect7,
               {
-                label: "Select a sort",
-                id: ""
-              },
-              ...sortOptions ? sortOptions.map((option) => {
-                var _a2;
-                return { id: option.id, name: option.name, label: (_a2 = option.label) != null ? _a2 : option.name };
-              }) : []
-            ],
-            onChange: (e) => handleFilterChange({ sortBy: e.target.value }),
-            value: queryState.sortBy
+                label: sortLabel,
+                id: "qf_sortBy",
+                showLabel: false,
+                options: [
+                  {
+                    label: "Select a sort",
+                    id: ""
+                  },
+                  ...sortOptions ? sortOptions.map((option) => {
+                    var _a2;
+                    return { id: option.id, name: option.name, label: (_a2 = option.label) != null ? _a2 : option.name };
+                  }) : []
+                ],
+                onChange: (e) => handleFilterChange({ sortBy: e.target.value }),
+                value: queryState.sortBy
+              }
+            )
           }
         ),
-        /* @__PURE__ */ jsx54(
-          InputSelect7,
+        /* @__PURE__ */ jsx56(
+          InputVariables,
           {
             label: sortOrderLabel,
-            options: [
-              ...sortOrderOptions ? sortOrderOptions.map((option) => {
-                var _a2;
-                return { value: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
-              }) : []
-            ],
-            onChange: (e) => handleFilterChange({ sortOrder: e.target.value }),
-            value: queryState.sortOrder
-          }
-        ),
-        /* @__PURE__ */ jsx54(
-          Input7,
-          {
-            label: countLabel,
-            type: "number",
-            onChange: (e) => handleFilterChange({ count: e.target.value }),
-            defaultValue: countValue,
-            value: queryState.count
+            id: "qf_sortOrder",
+            value: queryState.sortOrder,
+            onChange: (newSort) => handleFilterChange({ sortOrder: newSort }),
+            disableInlineMenu: true,
+            inputWhenNoVariables: /* @__PURE__ */ jsx56(
+              InputSelect7,
+              {
+                label: sortOrderLabel,
+                id: "qf_sortOrder",
+                showLabel: false,
+                options: [
+                  ...sortOrderOptions ? sortOrderOptions.map((option) => {
+                    var _a2;
+                    return { value: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
+                  }) : []
+                ],
+                onChange: (e) => handleFilterChange({ sortOrder: e.target.value }),
+                value: queryState.sortOrder
+              }
+            )
           }
         )
       ] }),
       children
-    ] })
+    ] }) })
   ] });
 };
 
@@ -4802,7 +6296,7 @@ import {
   Button as Button6,
   Callout as Callout5,
   Heading,
-  Input as Input8,
+  Input as Input7,
   InputComboBox,
   InputKeywordSearch as InputKeywordSearch4,
   InputSelect as InputSelect8,
@@ -4839,7 +6333,9 @@ export {
   Callout5 as Callout,
   DamSelectedItem,
   DataRefreshButton,
+  DataResourceDynamicInputProvider,
   DataResourceVariablesList,
+  DataResourceVariablesListExplicit,
   DataSourceEditor,
   DataTypeEditor,
   DefaultSearchRow,
@@ -4847,7 +6343,7 @@ export {
   EntrySearch,
   Heading,
   icons_exports as Icons,
-  Input8 as Input,
+  Input7 as Input,
   InputComboBox,
   InputKeywordSearch4 as InputKeywordSearch,
   InputSelect8 as InputSelect,
@@ -4986,5 +6482,8 @@ export {
   useRequestParameter,
   useUniformMeshSdk,
   useVariables,
+  variableExpression,
+  variablePrefix,
+  variableSuffix,
   variablesToList
 };