@uniformdev/mesh-sdk-react 19.173.1-alpha.17 → 19.173.2-alpha.258

package/dist/index.mjs

@@ -966,7 +966,8 @@ var searchRowContainer = css6`
   cursor: pointer;
   padding: var(--spacing-sm);
   position: relative;
-  transition: background-color var(--duration-fast) var(--timing-ease-out),
+  transition:
+    background-color var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
 `;
 var searchRowContainerWithPopover = css6`
@@ -1956,7 +1957,8 @@ var productSearchRowContainer = css12`
   padding: var(--spacing-sm) 0;
   margin-right: var(--spacing-sm);
   position: relative;
-  transition: background-color var(--duration-fast) var(--timing-ease-out),
+  transition:
+    background-color var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
 `;
 var productSearchRowContent = css12`
@@ -2792,18 +2794,63 @@ import { ParameterShellContext, useParameterShell } from "@uniformdev/design-sys
 
 // src/components/Variables/composer/ControlledValuePlugin.tsx
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { dequal } from "dequal/lite";
-import { useEffect as useEffect5, useRef as useRef8 } from "react";
+import { useEffect as useEffect5 } from "react";
+
+// src/components/Variables/util/serializeVariablesEditorState.ts
+import { createVariableReference } from "@uniformdev/canvas";
+import {
+  LineBreakNode,
+  TextNode
+} from "lexical";
+
+// src/components/Variables/util/variableExpression.ts
+var variablePrefix = "${";
+var variableSuffix = "}";
+
+// src/components/Variables/util/serializeVariablesEditorState.ts
+function serializeVariablesEditorState(editorState) {
+  return serializeVariablesEditorSerializedState(editorState.toJSON().root);
+}
+function serializeVariablesEditorSerializedState(serializedEditorState) {
+  const buf = [];
+  if (serializedEditorState) {
+    serializeRecursive(serializedEditorState, buf);
+  }
+  const result = buf.join("");
+  return result.length > 0 ? result : void 0;
+}
+function serializeRecursive(node, buffer) {
+  if (node.type === TextNode.getType()) {
+    buffer.push(node.text.replace(variablePrefix, "\\${"));
+  }
+  if (node.type === VariableNode.getType()) {
+    buffer.push(createVariableReference(node.reference));
+  }
+  if (node.type === LineBreakNode.getType()) {
+    buffer.push("\n");
+  }
+  if ("children" in node && node.children) {
+    for (const child of node.children) {
+      if (!child) {
+        continue;
+      }
+      serializeRecursive(child, buffer);
+    }
+  }
+}
+
+// src/components/Variables/util/setVariablesEditorValue.ts
+import { emptyRichTextValue } from "@uniformdev/richtext";
 
 // src/components/Variables/util/deserializeVariablesEditorState.ts
 import { parseVariableExpression } from "@uniformdev/canvas";
-import { TextNode } from "lexical";
+import { TextNode as TextNode2 } from "lexical";
 function deserializeVariablesEditorState(serialized) {
   const result = [];
   parseVariableExpression(serialized != null ? serialized : "", (token, type) => {
     if (type === "text") {
       const node = {
-        type: TextNode.getType(),
+        type: TextNode2.getType(),
         text: token,
         mode: "normal",
         version: 1,
@@ -2857,14 +2904,18 @@ function refreshVariableNodeMetadata(editor) {
 }
 
 // src/components/Variables/util/setVariablesEditorValue.ts
-function setVariablesEditorValue(editor, newValue) {
+function setVariablesEditorValue(editor, newValue, tag) {
   if (typeof newValue === "undefined" || typeof newValue === "string") {
     const parsedState = editor.parseEditorState(deserializeVariablesEditorState(newValue));
-    editor.setEditorState(parsedState);
+    editor.setEditorState(parsedState.clone(null), {
+      tag
+    });
   } else {
     try {
       const parsedState = editor.parseEditorState(newValue);
-      editor.setEditorState(parsedState);
+      editor.setEditorState(parsedState.clone(null), {
+        tag
+      });
     } catch (e) {
       console.warn(
         "Tried to set invalid Lexical state, probably invalidly formatted state object - falling back to empty state. Invalid state attempted:",
@@ -2872,27 +2923,10 @@ function setVariablesEditorValue(editor, newValue) {
         "Error:",
         e
       );
-      const parsedState = editor.parseEditorState({
-        root: {
-          type: "root",
-          version: 1,
-          direction: null,
-          format: "",
-          indent: 0,
-          children: [
-            {
-              type: "paragraph",
-              version: 1,
-              format: "start",
-              indent: 0,
-              direction: null,
-              children: [],
-              textFormat: 0
-            }
-          ]
-        }
+      const parsedState = editor.parseEditorState(emptyRichTextValue);
+      editor.setEditorState(parsedState.clone(null), {
+        tag
       });
-      editor.setEditorState(parsedState);
     }
   }
   refreshVariableNodeMetadata(editor);
@@ -2905,17 +2939,18 @@ function ControlledValuePlugin({
   extraDependencies
 }) {
   const [editor] = useLexicalComposerContext();
-  const lastValueRef = useRef8(value);
   useEffect5(() => {
+    var _a, _b;
     if (!enabled) {
       return;
     }
-    if (dequal(lastValueRef.current, value)) {
+    const currentValue = (_a = serializeVariablesEditorState(editor.getEditorState())) != null ? _a : "";
+    const newValue = (_b = value !== void 0 && typeof value !== "string" ? serializeVariablesEditorSerializedState(value.root) : value) != null ? _b : "";
+    if (currentValue === newValue) {
       return;
     }
     setTimeout(() => {
       if (editor) {
-        lastValueRef.current = value;
         setVariablesEditorValue(editor, value);
       }
     });
@@ -3004,7 +3039,7 @@ import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexica
 import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
 import { $moveCharacter, $shouldOverrideDefaultCharacterSelection } from "@lexical/selection";
 import { mergeRegister as mergeRegister2 } from "@lexical/utils";
-import { createVariableReference as createVariableReference2 } from "@uniformdev/canvas";
+import { createVariableReference as createVariableReference3 } from "@uniformdev/canvas";
 import { LoadingIndicator as LoadingIndicator2 } from "@uniformdev/design-system";
 import {
   $getNearestNodeFromDOMNode,
@@ -3038,12 +3073,14 @@ import {
 } from "@lexical/react/LexicalTypeaheadMenuPlugin";
 import { mergeRegister } from "@lexical/utils";
 import { AiFillPlusCircle } from "@react-icons/all-files/ai/AiFillPlusCircle";
-import { createVariableReference } from "@uniformdev/canvas";
+import { createVariableReference as createVariableReference2 } from "@uniformdev/canvas";
 import { HorizontalRhythm as HorizontalRhythm2, MenuGroup, MenuItemInner, MenuItemSeparator } from "@uniformdev/design-system";
-import { dequal as dequal2 } from "dequal/lite";
+import { dequal } from "dequal/lite";
 import {
+  $createParagraphNode,
   $createTextNode,
   $getNodeByKey,
+  $getRoot,
   $getSelection,
   $insertNodes,
   $isNodeSelection,
@@ -3052,7 +3089,7 @@ import {
   COMMAND_PRIORITY_NORMAL,
   createCommand
 } from "lexical";
-import { useCallback as useCallback2, useEffect as useEffect8, useMemo as useMemo8, useRef as useRef10, useState as useState10 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect8, useMemo as useMemo8, useRef as useRef9, useState as useState10 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
@@ -3138,7 +3175,7 @@ function useVariableEditTransaction({
 // src/components/Variables/VariableEditor.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button as Button2, Callout as Callout3, HorizontalRhythm, Input as Input2, useShortcut } from "@uniformdev/design-system";
-import { useLayoutEffect, useRef as useRef9 } from "react";
+import { useLayoutEffect, useRef as useRef8 } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -3197,7 +3234,7 @@ function VariableEditor({
     },
     activeWhenEditing: true
   });
-  const nameRef = useRef9(null);
+  const nameRef = useRef8(null);
   const { ref, ...nameRegister } = register("name");
   useLayoutEffect(() => {
     if (nameRef.current && !nameRef.current.value) {
@@ -3581,7 +3618,7 @@ function useVariablesMenu({
           var _a;
           const targetVariable = variables[value];
           if (overwriteExistingValue) {
-            setVariablesEditorValue(editor, createVariableReference(value));
+            setVariablesEditorValue(editor, createVariableReference2(value));
             return true;
           }
           const variableNode = $createVariableNode(value, {
@@ -3614,7 +3651,7 @@ function VariablesPlugin({
 }) {
   const [editor] = useLexicalComposerContext2();
   const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues, isLoading } = useVariables(true);
-  const variablesRef = useRef10({ variables, knownUndefinedValues, isLoading });
+  const variablesRef = useRef9({ variables, knownUndefinedValues, isLoading });
   variablesRef.current = { variables, knownUndefinedValues, isLoading };
   const canEditVariable = useCallback2(
     (name, variable) => (
@@ -3759,18 +3796,24 @@ function VariablesPlugin({
           var _a, _b;
           if (!disableVariables) {
             const targetVariable = variablesRef.current.variables[reference];
-            if (overwriteExistingValue) {
-              setVariablesEditorValue(editor, createVariableReference(reference));
-              return true;
-            }
             const variableNode = $createVariableNode(reference, {
-              displayName: initialDisplayName != null ? initialDisplayName : (targetVariable == null ? void 0 : targetVariable.displayName) || reference,
+              displayName: initialDisplayName != null ? initialDisplayName : (targetVariable == null ? void 0 : targetVariable.displayName) || prettifyBindExpression(reference),
               hasClickEvent: canEditVariable(reference, targetVariable),
               referenceIsValid: true,
               tooltip: (_a = targetVariable == null ? void 0 : targetVariable.tooltip) != null ? _a : targetVariable == null ? void 0 : targetVariable.helpText,
               isFresh: true,
               isLoading: false
             });
+            if (overwriteExistingValue) {
+              const pNode = $createParagraphNode();
+              pNode.append(variableNode);
+              editor.update(() => {
+                const root = $getRoot();
+                root.clear();
+                root.append(pNode);
+              });
+              return true;
+            }
             if (targetKey) {
               (_b = $getNodeByKey(targetKey)) == null ? void 0 : _b.replace(variableNode);
             } else {
@@ -3806,14 +3849,14 @@ function VariablesPlugin({
       const tooltip = (_d = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) != null ? _d : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
       const newState = {
         ...currentState,
-        displayName: (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || variableNode.reference,
+        displayName: (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || prettifyBindExpression(variableNode.reference),
         isLoading: isLoadingVariables && !targetVar && !(targetUndefinedVar == null ? void 0 : targetUndefinedVar.info),
         hasClickEvent: canEditVariable(variableNode.reference, targetVar),
         referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) ? false : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) ? "warning" : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : isLoadingVariables ? true : Boolean(targetVar),
         tooltip,
         isFresh: false
       };
-      if (!dequal2(currentState, newState)) {
+      if (!dequal(currentState, newState)) {
         variableNode.setState(newState);
       }
     },
@@ -3960,7 +4003,7 @@ var VariableNode = class _VariableNode extends DecoratorNode {
    * (albeit it won't get the fancy chip-node)
    */
   getTextContent() {
-    return createVariableReference2(this.reference);
+    return createVariableReference3(this.reference);
   }
   /** Creates the DOM wrapper that hosts the node */
   createDOM() {
@@ -4171,9 +4214,11 @@ var input = css21`
   min-height: 50px;
   width: 100%;
   position: relative;
-  transition: background var(--duration-fast) var(--timing-ease-out),
+  transition:
+    background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out), box-shadow var(--duration-fast) var(--timing-ease-out);
+    color var(--duration-fast) var(--timing-ease-out),
+    box-shadow var(--duration-fast) var(--timing-ease-out);
 
   &::placeholder {
     color: var(--gray-400);
@@ -4237,7 +4282,8 @@ var variableBindButton = css22`
   display: flex;
   height: 1.2rem;
   padding: var(--spacing-2xs);
-  transition: background var(--duration-fast) var(--timing-ease-out),
+  transition:
+    background var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
   width: 1.2rem;
 
@@ -4320,23 +4366,9 @@ var inputMultiLine = (lines) => css22`
 `;
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
+import { hasReferencedVariables } from "@uniformdev/canvas";
 import * as React10 from "react";
 import { useMemo as useMemo9 } from "react";
-
-// src/components/Variables/util/hasReferencedVariables.ts
-import { parseVariableExpression as parseVariableExpression2 } from "@uniformdev/canvas";
-function hasReferencedVariables(value) {
-  let result = false;
-  parseVariableExpression2(value, (token, type) => {
-    if (type === "variable") {
-      result = true;
-      return false;
-    }
-  });
-  return result;
-}
-
-// src/components/Variables/toolbox/InputVariablesProvider.tsx
 function useInputVariablesState({
   value,
   onChange,
@@ -4351,20 +4383,20 @@ function useInputVariablesState({
   renderMenuInPortal
 }) {
   const { variables } = useVariables(true);
-  const hasVariablesInValue = hasReferencedVariables(value != null ? value : "");
+  const variableReferenceCountInValue = hasReferencedVariables(value != null ? value : "");
   const [lastKnownId] = React10.useState(id);
-  const [hadVariablesInValue, setHadVariablesInValue] = React10.useState(hasVariablesInValue);
+  const [hadVariablesInValue, setHadVariablesInValue] = React10.useState(variableReferenceCountInValue > 0);
   React10.useEffect(() => {
-    if (hasVariablesInValue) {
+    if (variableReferenceCountInValue) {
       setHadVariablesInValue(true);
     }
-  }, [hasVariablesInValue]);
+  }, [variableReferenceCountInValue]);
   React10.useEffect(() => {
     if (id !== lastKnownId) {
-      setHadVariablesInValue(hasVariablesInValue);
+      setHadVariablesInValue(variableReferenceCountInValue > 0);
     }
-  }, [hasVariablesInValue, id, lastKnownId]);
-  const hadVariablesInValueForReals = inputWhenNoVariables ? hadVariablesInValue : hasVariablesInValue;
+  }, [variableReferenceCountInValue, id, lastKnownId]);
+  const hadVariablesInValueForReals = inputWhenNoVariables ? hadVariablesInValue : variableReferenceCountInValue > 0;
   const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption;
   const disableResetForReals = !inputWhenNoVariables || !hadVariablesInValueForReals;
   const sharedMenuProps = useMemo9(
@@ -4393,7 +4425,7 @@ function useInputVariablesState({
   return {
     sharedMenuProps,
     disableVariablesForReals,
-    hasVariablesInValue,
+    hasVariablesInValue: variableReferenceCountInValue > 0,
     hadVariablesInValue: hadVariablesInValueForReals,
     setHadVariablesInValue
   };
@@ -4416,7 +4448,8 @@ var variableBindButton2 = css23`
   display: flex;
   height: 1.2rem;
   padding: var(--spacing-2xs);
-  transition: background var(--duration-fast) var(--timing-ease-out),
+  transition:
+    background var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
   width: 1.2rem;
 
@@ -4440,7 +4473,7 @@ import { CLEAR_EDITOR_COMMAND } from "lexical";
 import { BsFillPlusCircleFill } from "@react-icons/all-files/bs/BsFillPlusCircleFill";
 import { CgUsbC } from "@react-icons/all-files/cg/CgUsbC";
 import { HorizontalRhythm as HorizontalRhythm3, Menu as Menu2, MenuGroup as MenuGroup2, MenuItem as MenuItem2, MenuItemSeparator as MenuItemSeparator2 } from "@uniformdev/design-system";
-import { useRef as useRef11 } from "react";
+import { useRef as useRef10 } from "react";
 import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 function SelectVariableMenu({
   onSelectVariable,
@@ -4455,7 +4488,7 @@ function SelectVariableMenu({
   filterVariable
 }) {
   const { variables, canDispatch, readOnly } = useVariables(true);
-  const btnRef = useRef11(null);
+  const btnRef = useRef10(null);
   const { editVariable } = useVariableEditor();
   const variablesGroups = variablesToGroupedList(variables, filterVariable, getEditorContext == null ? void 0 : getEditorContext());
   const showAddVariableMenuOptionForReals = showAddVariableMenuOption && canDispatch && !readOnly;
@@ -4589,7 +4622,7 @@ import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
-import { useMemo as useMemo10, useRef as useRef12, useState as useState12 } from "react";
+import { useMemo as useMemo10, useRef as useRef11, useState as useState12 } from "react";
 
 // src/components/Variables/composer/DisablePlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
@@ -4604,50 +4637,18 @@ function DisablePlugin({ disabled }) {
 
 // src/components/Variables/composer/SingleLineTextPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
-import { LineBreakNode } from "lexical";
+import { LineBreakNode as LineBreakNode2 } from "lexical";
 import { useEffect as useEffect13 } from "react";
 function SingleLineTextPlugin() {
   const [editor] = useLexicalComposerContext8();
   useEffect13(() => {
-    editor.registerNodeTransform(LineBreakNode, (node) => {
+    editor.registerNodeTransform(LineBreakNode2, (node) => {
       node.remove();
     });
   }, [editor]);
   return null;
 }
 
-// src/components/Variables/util/serializeVariablesEditorState.ts
-import { createVariableReference as createVariableReference3 } from "@uniformdev/canvas";
-import { LineBreakNode as LineBreakNode2, TextNode as TextNode3 } from "lexical";
-
-// src/components/Variables/util/variableExpression.ts
-var variablePrefix = "${";
-var variableSuffix = "}";
-
-// src/components/Variables/util/serializeVariablesEditorState.ts
-function serializeVariablesEditorState(editorState) {
-  const buf = [];
-  serializeRecursive(editorState.toJSON().root, buf);
-  const result = buf.join("");
-  return result.length > 0 ? result : void 0;
-}
-function serializeRecursive(node, buffer) {
-  if (node.type === TextNode3.getType()) {
-    buffer.push(node.text.replace(variablePrefix, "\\${"));
-  }
-  if (node.type === VariableNode.getType()) {
-    buffer.push(createVariableReference3(node.reference));
-  }
-  if (node.type === LineBreakNode2.getType()) {
-    buffer.push("\n");
-  }
-  if ("children" in node && node.children) {
-    for (const child of node.children) {
-      serializeRecursive(child, buffer);
-    }
-  }
-}
-
 // src/components/Variables/toolbox/VariablesComposer.tsx
 import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
 function VariablesComposer(props) {
@@ -4674,8 +4675,8 @@ function VariablesComposer(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const editorState = useRef12();
-  const updateTimeout = useRef12();
+  const editorState = useRef11();
+  const updateTimeout = useRef11();
   if (typeof document === "undefined") return null;
   return /* @__PURE__ */ jsxs21(LexicalComposer, { initialConfig: editorConfig, children: [
     /* @__PURE__ */ jsx38(
@@ -4854,7 +4855,8 @@ function InputVariables(props) {
     filterVariable,
     styleVariant = "default",
     renderMenuInPortal,
-    disableDismissEditorOnChange
+    disableDismissEditorOnChange,
+    singleTokenMode
   } = props;
   const [finalId] = useState13(id != null ? id : () => v42());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
@@ -4919,7 +4921,7 @@ function InputVariables(props) {
                   buttonCss: variableBindButton,
                   tip: useInputWithNoVariables ? void 0 : "Tip: access this list by typing $$",
                   buttonProps: hadVariablesInValue ? { "aria-pressed": "true" } : void 0,
-                  replaceValueOnVariableInsert: useInputWithNoVariables
+                  replaceValueOnVariableInsert: singleTokenMode || useInputWithNoVariables
                 }
               )
             ]
@@ -4959,13 +4961,13 @@ function InputVariables(props) {
       showAddVariableMenuOption,
       enableEditingVariables: !disabled && !disableVariablesForReals && enableEditingVariables,
       getEditorContext,
-      disabled,
+      disabled: disabled || singleTokenMode,
       replaceValueOnVariableInsert: useInputWithNoVariables,
       autoFocus,
       filterVariable,
       children: [
         /* @__PURE__ */ jsx40(PasteTransformerPlugin, { transformPaste }),
-        /* @__PURE__ */ jsx40(ControlledValuePlugin, { value, enabled: useInputWithNoVariables }),
+        /* @__PURE__ */ jsx40(ControlledValuePlugin, { value, enabled: singleTokenMode || useInputWithNoVariables }),
         editorRef ? /* @__PURE__ */ jsx40(EditorRefPlugin, { editorRef }) : null,
         body
       ]
@@ -5023,7 +5025,7 @@ function ParameterConnectionIndicator({
     return result;
   }, [value]);
   return /* @__PURE__ */ jsxs24(HorizontalRhythm5, { align: "center", gap: "xs", css: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx41("div", { css: { flex: 1 }, children }),
+    /* @__PURE__ */ jsx41("div", { css: { flex: 1, maxWidth: "100%" }, children }),
     disabled ? null : /* @__PURE__ */ jsx41(
       Menu3,
       {
@@ -5062,13 +5064,13 @@ import { useCallback as useCallback4 } from "react";
 import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister as mergeRegister5 } from "@lexical/utils";
 import { $getNodeByKey as $getNodeByKey3, COMMAND_PRIORITY_HIGH as COMMAND_PRIORITY_HIGH3 } from "lexical";
-import { useEffect as useEffect15, useRef as useRef13 } from "react";
+import { useEffect as useEffect15, useRef as useRef12 } from "react";
 function OnDisconnectPlugin({
   onDisconnect
 }) {
   const [editor] = useLexicalComposerContext10();
   const { variables } = useVariables(true);
-  const variablesRef = useRef13(variables);
+  const variablesRef = useRef12(variables);
   variablesRef.current = variables;
   useEffect15(() => {
     return mergeRegister5(
@@ -5261,8 +5263,15 @@ ${prettifyBindExpression(bindExpression)}`
   };
 }
 
+// src/components/Variables/util/hasReferencedVariables.ts
+import { hasReferencedVariables as canvasHasReferencedVariables } from "@uniformdev/canvas";
+function hasReferencedVariables2(value) {
+  return canvasHasReferencedVariables(value) > 0;
+}
+
 // src/components/Variables/VariablesList.tsx
 import { css as css27 } from "@emotion/react";
+import { CgTrash } from "@react-icons/all-files/cg/CgTrash";
 import {
   AddListButton,
   button,
@@ -5397,7 +5406,7 @@ function VariablesList() {
                         ],
                         "aria-controls": text,
                         onClick: () => dispatch({ type: "remove", variable: name }),
-                        children: /* @__PURE__ */ jsx44(Icon5, { icon: "trash", iconColor: "red" })
+                        children: /* @__PURE__ */ jsx44(Icon5, { icon: CgTrash, iconColor: "red" })
                       }
                     ) })
                   ]
@@ -6232,11 +6241,11 @@ import { LoadingIndicator as LoadingIndicator3, Theme as Theme2 } from "@uniform
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
-import { useEffect as useEffect16, useRef as useRef14, useState as useState15 } from "react";
+import { useEffect as useEffect16, useRef as useRef13, useState as useState15 } from "react";
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
   const [error, setError] = useState15();
   const [sdk, setSdk] = useState15();
-  const initializationInProgress = useRef14(false);
+  const initializationInProgress = useRef13(false);
   useEffect16(
     () => {
       if (typeof window === "undefined" || sdk) {
@@ -6320,7 +6329,7 @@ var DataRefreshButton = ({
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
 import { css as css33 } from "@emotion/react";
 import { bindVariables } from "@uniformdev/canvas";
-import { Callout as Callout5, Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
+import { Callout as Callout5, Container, ScrollableList, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
@@ -6639,7 +6648,7 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ jsx61(IconsProvider, { children: /* @__PURE__ */ jsxs35(VerticalRhythm3, { children: [
+  return /* @__PURE__ */ jsxs35(VerticalRhythm3, { children: [
     /* @__PURE__ */ jsx61(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx61(
       InputVariables,
       {
@@ -6656,7 +6665,7 @@ var ObjectSearchContainer = ({
       }
     ) : body }),
     children
-  ] }) });
+  ] });
 };
 var DefaultResultList = () => {
   var _a;
@@ -6785,7 +6794,8 @@ var ButtonStyles = css35`
   font-size: var(--fs-sm);
   line-height: 1;
   gap: var(--spacing-xs);
-  transition: border-color var(--duration-fast) var(--timing-ease-out),
+  transition:
+    border-color var(--duration-fast) var(--timing-ease-out),
     background-color var(--duration-fast) var(--timing-ease-out);
 
   &:hover {
@@ -7245,7 +7255,7 @@ var QueryFilter = ({
 };
 
 // src/components/ParamTypeDynamicDataProvider.tsx
-import { useEffect as useEffect18, useMemo as useMemo16, useRef as useRef15 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo16, useRef as useRef14 } from "react";
 import { jsx as jsx68 } from "@emotion/react/jsx-runtime";
 function ParamTypeDynamicDataProvider(props) {
   const { children } = props;
@@ -7267,7 +7277,7 @@ var JsonMeshVariableEditor = ({
   variable,
   context
 }) => {
-  const sillyRef = useRef15(false);
+  const sillyRef = useRef14(false);
   const { editConnectedData } = useMeshLocation("paramType");
   useEffect18(() => {
     if (sillyRef.current) {
@@ -7301,371 +7311,445 @@ var JsonMeshVariableEditor = ({
 var NUMBER_OPERATORS = [
   {
     label: "equals...",
-    symbol: "=",
     value: "eq",
-    editorType: "number"
+    editorType: "number",
+    expectedValueType: "single"
   },
   {
     label: "does not equal...",
-    symbol: "\u2260",
     value: "neq",
-    editorType: "number"
+    editorType: "number",
+    expectedValueType: "single"
   },
   {
     label: "greater than...",
-    symbol: ">",
     value: "gt",
-    editorType: "number"
+    editorType: "number",
+    expectedValueType: "single"
   },
   {
     label: "greater than or equal to...",
-    symbol: "\u2265",
     value: "gte",
-    editorType: "number"
+    editorType: "number",
+    expectedValueType: "single"
   },
   {
     label: "less than...",
-    symbol: "<",
     value: "lt",
-    editorType: "number"
+    editorType: "number",
+    expectedValueType: "single"
   },
   {
     label: "less than or equal to...",
-    symbol: "\u2264",
     value: "lte",
-    editorType: "number"
+    editorType: "number",
+    expectedValueType: "single"
   },
   {
     label: "is empty",
     value: "ndef",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "false"
   },
   {
     label: "is between...",
     value: "between",
-    editorType: "numberRange"
+    editorType: "numberRange",
+    expectedValueType: "between"
   },
   {
     label: "is not empty",
     value: "def",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "true"
   }
 ];
 var DATE_OPERATORS = [
   {
     label: "is",
     value: "eq",
-    editorType: "date"
+    editorType: "date",
+    expectedValueType: "single"
   },
   {
     label: "is between...",
     value: "between",
-    editorType: "dateRange"
+    editorType: "dateRange",
+    expectedValueType: "between"
   },
   {
     label: "is before...",
     value: "lt",
-    editorType: "date"
+    editorType: "date",
+    expectedValueType: "single"
   },
   {
     label: "is after...",
     value: "gt",
-    editorType: "date"
+    editorType: "date",
+    expectedValueType: "single"
   },
   {
     label: "is on or before...",
     value: "lte",
-    editorType: "date"
+    editorType: "date",
+    expectedValueType: "single"
   },
   {
     label: "is on or after...",
     value: "gte",
-    editorType: "date"
+    editorType: "date",
+    expectedValueType: "single"
   },
   {
     label: "is empty",
     value: "ndef",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "false"
   },
   {
     label: "is not",
     value: "neq",
-    editorType: "date"
+    editorType: "date",
+    expectedValueType: "single"
   },
   {
     label: "is not empty",
     value: "def",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "true"
   }
 ];
 var TEXTBOX_OPERATORS = [
   {
     label: "contains...",
     value: "match",
-    editorType: "text"
+    editorType: "text",
+    expectedValueType: "single"
   },
   {
     label: "is",
     value: "eq",
-    editorType: "text"
+    editorType: "text",
+    expectedValueType: "single"
   },
   {
     label: "is empty",
     value: "ndef",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "false"
   },
   {
     label: "starts with...",
     value: "starts",
-    editorType: "text"
+    editorType: "text",
+    expectedValueType: "single"
   },
   {
     label: "is not",
     value: "neq",
-    editorType: "text"
+    editorType: "text",
+    expectedValueType: "single"
   },
   {
     label: "is not empty",
     value: "def",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "true"
   }
 ];
 var USER_OPERATORS = [
   {
     label: "contains...",
     value: "match",
-    editorType: "text"
+    editorType: "text",
+    expectedValueType: "single"
   },
   {
     label: "is",
     value: "eq",
-    editorType: "text"
+    editorType: "text",
+    expectedValueType: "single"
   },
   {
     label: "starts with...",
     value: "starts",
-    editorType: "text"
+    editorType: "text",
+    expectedValueType: "single"
   },
   {
     label: "is not",
     value: "neq",
-    editorType: "text"
+    editorType: "text",
+    expectedValueType: "single"
   }
 ];
-var SYSTEM_DATE_OPERATORS = [
+var DATE_TIME_OPERATORS = [
   {
     label: "is",
     value: "sys-date-eq",
-    editorType: "date"
+    editorType: "date",
+    expectedValueType: "single"
   },
   {
     label: "is between...",
     value: "sys-date-between",
-    editorType: "dateRange"
+    editorType: "dateRange",
+    expectedValueType: "between"
   },
   {
     label: "is before...",
     value: "sys-date-lt",
-    editorType: "date"
+    editorType: "date",
+    expectedValueType: "single"
   },
   {
     label: "is after...",
     value: "sys-date-gt",
-    editorType: "date"
+    editorType: "date",
+    expectedValueType: "single"
   },
   {
     label: "is on or before...",
     value: "sys-date-lte",
-    editorType: "date"
+    editorType: "date",
+    expectedValueType: "single"
   },
   {
     label: "is on or after...",
     value: "sys-date-gte",
-    editorType: "date"
+    editorType: "date",
+    expectedValueType: "single"
+  },
+  {
+    label: "is empty",
+    value: "ndef",
+    editorType: "empty",
+    expectedValueType: "false"
+  },
+  {
+    label: "is not empty",
+    value: "def",
+    editorType: "empty",
+    expectedValueType: "true"
   }
 ];
 var RICHTEXT_OPERATORS = [
   {
     label: "contains...",
     value: "match",
-    editorType: "text"
+    editorType: "text",
+    expectedValueType: "single"
   },
   {
     label: "is empty",
     value: "ndef",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "false"
   },
   {
     label: "starts with...",
     value: "starts",
-    editorType: "text"
+    editorType: "text",
+    expectedValueType: "single"
   },
   {
     label: "is not empty",
     value: "def",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "true"
   }
 ];
 var CHECKBOX_OPERATORS = [
   {
     label: "is checked",
     value: "def",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "true"
   },
   {
     label: "is not checked",
     value: "ndef",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "false"
   }
 ];
 var SYSTEM_FIELD_OPERATORS = [
   {
     label: "is",
     value: "eq",
-    editorType: "singleChoice"
+    editorType: "singleChoice",
+    expectedValueType: "single"
   },
   {
     label: "is any of...",
     value: "in",
-    editorType: "multiChoice"
+    editorType: "multiChoice",
+    expectedValueType: "array"
   },
   {
     label: "is not",
     value: "neq",
-    editorType: "singleChoice"
+    editorType: "singleChoice",
+    expectedValueType: "single"
   },
   {
     label: "is none of...",
     value: "nin",
-    editorType: "multiChoice"
+    editorType: "multiChoice",
+    expectedValueType: "array"
   }
 ];
 var OPTIONAL_SYSTEM_FIELD_OPERATORS = [
   {
     label: "is",
     value: "eq",
-    editorType: "singleChoice"
+    editorType: "singleChoice",
+    expectedValueType: "single"
   },
   {
     label: "is any of...",
     value: "in",
-    editorType: "multiChoice"
+    editorType: "multiChoice",
+    expectedValueType: "array"
   },
   {
     label: "is empty",
     value: "ndef",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "false"
   },
   {
     label: "is not",
     value: "neq",
-    editorType: "singleChoice"
+    editorType: "singleChoice",
+    expectedValueType: "single"
   },
   {
     label: "is none of...",
     value: "nin",
-    editorType: "multiChoice"
+    editorType: "multiChoice",
+    expectedValueType: "array"
   },
   {
     label: "is not empty",
     value: "def",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "true"
   }
 ];
 var PUBLISH_STATUS_FIELD_OPERATORS = [
   {
     label: "is",
     value: "eq",
-    editorType: "statusSingleChoice"
+    editorType: "statusSingleChoice",
+    expectedValueType: "single"
   },
   {
     label: "is any of...",
     value: "in",
-    editorType: "statusMultiChoice"
+    editorType: "statusMultiChoice",
+    expectedValueType: "array"
   },
   {
     label: "is not",
     value: "neq",
-    editorType: "statusSingleChoice"
+    editorType: "statusSingleChoice",
+    expectedValueType: "single"
   },
   {
     label: "is none of...",
     value: "nin",
-    editorType: "statusMultiChoice"
+    editorType: "statusMultiChoice",
+    expectedValueType: "array"
   }
 ];
 var SELECT_OPERATORS = [
   {
     label: "is",
     value: "eq",
-    editorType: "singleChoice"
+    editorType: "singleChoice",
+    expectedValueType: "single"
   },
   {
     label: "is any of...",
     value: "in",
-    editorType: "multiChoice"
+    editorType: "multiChoice",
+    expectedValueType: "array"
   },
   {
     label: "is empty",
     value: "ndef",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "false"
   },
   {
     label: "contains...",
     value: "match",
-    editorType: "text"
+    editorType: "text",
+    expectedValueType: "single"
   },
   {
     label: "starts with...",
     value: "starts",
-    editorType: "text"
+    editorType: "text",
+    expectedValueType: "single"
   },
   {
     label: "is not",
     value: "neq",
-    editorType: "singleChoice"
+    editorType: "singleChoice",
+    expectedValueType: "single"
   },
   {
     label: "is none of...",
     value: "nin",
-    editorType: "multiChoice"
+    editorType: "multiChoice",
+    expectedValueType: "array"
   },
   {
     label: "is not empty",
     value: "def",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "true"
   }
 ];
 var MULTI_SELECT_OPERATORS = [
   {
     label: "is",
     value: "eq",
-    editorType: "singleChoice"
+    editorType: "singleChoice",
+    expectedValueType: "single"
   },
   {
     label: "is any of...",
     value: "in",
-    editorType: "multiChoice"
+    editorType: "multiChoice",
+    expectedValueType: "array"
   },
   {
     label: "is empty",
     value: "ndef",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "false"
   },
   {
     label: "is not",
     value: "neq",
-    editorType: "singleChoice"
+    editorType: "singleChoice",
+    expectedValueType: "single"
   },
   {
     label: "is none of...",
     value: "nin",
-    editorType: "multiChoice"
+    editorType: "multiChoice",
+    expectedValueType: "array"
   },
   {
     label: "is not empty",
     value: "def",
-    editorType: "empty"
+    editorType: "empty",
+    expectedValueType: "true"
   }
 ];
 
@@ -8245,7 +8329,7 @@ var TextMultiChoiceEditor = ({
 };
 
 // src/components/SearchAndFilter/FilterButton.tsx
-import { Counter as Counter2, Icon as Icon6 } from "@uniformdev/design-system";
+import { Counter as Counter2, customIcons, Icon as Icon6 } from "@uniformdev/design-system";
 
 // src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
 import { css as css38 } from "@emotion/react";
@@ -8315,13 +8399,16 @@ var ConditionalInputRow = css38`
   ${cq("764px")} {
     align-items: flex-start;
     display: grid;
-    grid-template-columns: 200px 160px 1fr 32px;
+    grid-template-columns: 250px 160px 1fr 32px;
 
     & > div:nth-child(n) {
       width: auto;
     }
   }
 `;
+var ConditionalInputRowEmpty = css38`
+  flex-wrap: nowrap;
+`;
 var SearchInput = css38`
   max-height: 40px;
   min-height: unset;
@@ -8364,7 +8451,8 @@ var FilterButton = css38`
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   max-height: 40px;
-  transition: color var(--duration-fast) var(--timing-ease-out),
+  transition:
+    color var(--duration-fast) var(--timing-ease-out),
     background-color var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
     box-shadow var(--duration-fast) var(--timing-ease-out);
@@ -8459,6 +8547,9 @@ var ResetConditionsBtn = css38`
   &:focus {
     color: var(--action-destructive-hover);
   }
+  &:disabled {
+    color: var(--gray-400);
+  }
 `;
 var IconBtn = css38`
   align-self: center;
@@ -8489,15 +8580,26 @@ var SearchAndFilterButtonGroup = css38`
   margin-top: var(--spacing-xs);
   margin-left: calc(56px + var(--spacing-md));
 `;
+var SearchAndFilterAdditionalContainer = css38`
+  align-items: center;
+  border-top: 1px solid var(--gray-300);
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--spacing-base);
+  padding: var(--spacing-base) var(--spacing-md) 0;
+  position: relative;
+  z-index: 0;
+`;
 
 // src/components/SearchAndFilter/FilterButton.tsx
 import { jsx as jsx81, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
 var FilterButton2 = ({
   text = "Filters",
-  icon = "filter-add",
+  icon = customIcons["filter-add"],
   filterCount,
   hasSelectedValue,
   dataTestId,
+  showDropdownIcon,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs44(
@@ -8514,7 +8616,8 @@ var FilterButton2 = ({
       children: [
         /* @__PURE__ */ jsx81(Icon6, { icon, iconColor: "currentColor", size: "1rem" }),
         /* @__PURE__ */ jsx81("span", { css: FilterButtonText, children: text }),
-        filterCount ? /* @__PURE__ */ jsx81(Counter2, { count: filterCount, bgColor: "var(--white)" }) : null
+        filterCount ? /* @__PURE__ */ jsx81(Counter2, { count: filterCount, bgColor: "var(--white)" }) : null,
+        showDropdownIcon ? /* @__PURE__ */ jsx81(Icon6, { icon: "chevron-down", iconColor: "currentColor", size: "1rem" }) : null
       ]
     }
   );
@@ -8522,9 +8625,10 @@ var FilterButton2 = ({
 
 // src/components/SearchAndFilter/FilterControls.tsx
 import { CgClose as CgClose5 } from "@react-icons/all-files/cg/CgClose";
+import { hasReferencedVariables as hasReferencedVariables3 } from "@uniformdev/canvas";
 import { Icon as Icon7, InputKeywordSearch as InputKeywordSearch2 } from "@uniformdev/design-system";
 import { CLEAR_EDITOR_COMMAND as CLEAR_EDITOR_COMMAND2 } from "lexical";
-import { useEffect as useEffect22, useRef as useRef16, useState as useState25 } from "react";
+import { useEffect as useEffect22, useRef as useRef15, useState as useState25 } from "react";
 import { useDebounce as useDebounce9 } from "react-use";
 import { v4 as v43 } from "uuid";
 
@@ -8563,7 +8667,7 @@ var filterMapper = {
   statusSingleChoice: StatusSingleEditor,
   empty: null
 };
-function withInputVariables(WrappedComponent) {
+function withInputVariables(WrappedComponent, noSwapping = false) {
   const WithInputVariables = (props) => {
     if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
       return /* @__PURE__ */ jsx82(WrappedComponent, { ...props });
@@ -8576,7 +8680,7 @@ function withInputVariables(WrappedComponent) {
         onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
         value: props.value,
         disabled: props.disabled,
-        inputWhenNoVariables: /* @__PURE__ */ jsx82(WrappedComponent, { ...props })
+        inputWhenNoVariables: noSwapping ? void 0 : /* @__PURE__ */ jsx82(WrappedComponent, { ...props })
       }
     );
   };
@@ -8606,7 +8710,7 @@ var bindableFiltersMapper = {
   multiChoice: withInputVariablesForMultiValue(FilterMultiChoiceEditor),
   singleChoice: withInputVariables(FilterSingleChoiceEditor),
   date: withInputVariables(DateEditor),
-  text: withInputVariables(TextEditor),
+  text: withInputVariables(TextEditor, true),
   number: withInputVariables(NumberEditor)
 };
 
@@ -8638,6 +8742,7 @@ var SearchAndFilterProvider = ({
   filters,
   filterOptions,
   filterVisible = false,
+  alwaysVisible = false,
   defaultSearchTerm = "",
   onSearchChange,
   onChange,
@@ -8649,7 +8754,7 @@ var SearchAndFilterProvider = ({
 }) => {
   const [searchTerm, setSearchTerm] = useState24(defaultSearchTerm);
   const deferredSearchTerm = useDeferredValue2(searchTerm);
-  const [filterVisibility, setFilterVisibility] = useState24(filterVisible);
+  const [filterVisibility, setFilterVisibility] = useState24(alwaysVisible || filterVisible);
   const handleSearchTerm = useCallback6(
     (term) => {
       setSearchTerm(term);
@@ -8658,8 +8763,13 @@ var SearchAndFilterProvider = ({
     [setSearchTerm, onSearchChange]
   );
   const handleToggleFilterVisibility = useCallback6(
-    (visible) => setFilterVisibility(visible),
-    [setFilterVisibility]
+    (visible) => {
+      if (alwaysVisible) {
+        return;
+      }
+      setFilterVisibility(visible);
+    },
+    [alwaysVisible]
   );
   const handleAddFilter = useCallback6(() => {
     onChange([...filters, { field: "", operator: "", value: "" }]);
@@ -8685,7 +8795,7 @@ var SearchAndFilterProvider = ({
     if (filterVisibility) {
       const handleEscKeyFilterClose = (e) => {
         if (e.key === "Escape") {
-          setFilterVisibility(false);
+          handleToggleFilterVisibility(false);
         }
       };
       document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
@@ -8693,7 +8803,7 @@ var SearchAndFilterProvider = ({
         document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
       };
     }
-  }, [filterVisibility]);
+  }, [filterVisibility, handleToggleFilterVisibility]);
   return /* @__PURE__ */ jsx83(
     SearchAndFilterContext.Provider,
     {
@@ -8736,8 +8846,8 @@ var FilterControls = ({
     searchTerm,
     allowBindingSearchTerm
   } = useSearchAndFilter();
-  const editorRef = useRef16(null);
-  const hasVariableInSearchTerm = hasReferencedVariables(searchTerm);
+  const editorRef = useRef15(null);
+  const variableRefernceCountInSearchTerm = hasReferencedVariables3(searchTerm);
   const [idToResetInputVariables, setIdToResetInputVariables] = useState25("data-resource-search-term-input");
   const [localeSearchTerm, setLocaleSearchTerm] = useState25(searchTerm);
   useDebounce9(
@@ -8791,7 +8901,7 @@ var FilterControls = ({
           )
         }
       ),
-      hasVariableInSearchTerm ? /* @__PURE__ */ jsx84("div", { css: ClearSearchButtonContainer, children: /* @__PURE__ */ jsx84(
+      variableRefernceCountInSearchTerm ? /* @__PURE__ */ jsx84("div", { css: ClearSearchButtonContainer, children: /* @__PURE__ */ jsx84(
         "button",
         {
           css: ClearSearchButtonStyles,
@@ -8814,89 +8924,28 @@ var FilterControls = ({
 };
 
 // src/components/SearchAndFilter/FilterItem.tsx
+import { CgTrash as CgTrash2 } from "@react-icons/all-files/cg/CgTrash";
 import { Icon as Icon8, InputComboBox as InputComboBox5 } from "@uniformdev/design-system";
 import { useMemo as useMemo23 } from "react";
 
-// src/components/SearchAndFilter/FilterMenu.tsx
-import { HorizontalRhythm as HorizontalRhythm8, VerticalRhythm as VerticalRhythm6 } from "@uniformdev/design-system";
-import React13, { useEffect as useEffect23 } from "react";
-import { jsx as jsx85, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
-var SearchAndFilterOptionsContainer2 = ({
-  buttonRow,
-  additionalFiltersContainer,
-  children
-}) => {
-  return /* @__PURE__ */ jsxs46("div", { css: SearchAndFilterOptionsContainer, children: [
-    /* @__PURE__ */ jsx85("div", { css: SearchAndFilterOptionsInnerContainer, children }),
-    buttonRow ? /* @__PURE__ */ jsx85(
-      HorizontalRhythm8,
-      {
-        css: SearchAndFilterButtonGroup,
-        gap: "sm",
-        align: "center",
-        justify: "space-between",
-        children: buttonRow
-      }
-    ) : null,
-    additionalFiltersContainer ? /* @__PURE__ */ jsx85("div", { children: additionalFiltersContainer }) : null
-  ] });
-};
-var FilterMenu = ({
-  id,
-  filterTitle = "Show results",
-  menuControls,
-  additionalFiltersContainer,
-  children,
-  dataTestId,
-  resetButtonText = "reset"
-}) => {
-  const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
-  const innerMenuRef = React13.useRef(null);
-  useEffect23(() => {
-    var _a;
-    if (filterVisibility) {
-      (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
-    }
-  }, [filterVisibility]);
-  return /* @__PURE__ */ jsx85(VerticalRhythm6, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ jsxs46(
-    SearchAndFilterOptionsContainer2,
-    {
-      buttonRow: menuControls,
-      additionalFiltersContainer,
-      children: [
-        /* @__PURE__ */ jsxs46(HorizontalRhythm8, { gap: "sm", align: "center", justify: "space-between", children: [
-          filterTitle ? /* @__PURE__ */ jsx85("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }) : null,
-          (filters == null ? void 0 : filters.length) && resetButtonText ? /* @__PURE__ */ jsx85(
-            "button",
-            {
-              type: "button",
-              css: ResetConditionsBtn,
-              onClick: () => {
-                handleResetFilters();
-                setFilterVisibility(false);
-              },
-              "data-testid": "reset-filters",
-              children: resetButtonText
-            }
-          ) : null
-        ] }),
-        children
-      ]
-    }
-  ) : null });
-};
+// src/components/SearchAndFilter/util/isFilterBindable.ts
+function isFilterBindable(filter, operator) {
+  var _a, _b;
+  return (_b = (_a = operator == null ? void 0 : operator.bindable) != null ? _a : filter == null ? void 0 : filter.bindable) != null ? _b : false;
+}
 
 // src/components/SearchAndFilter/FilterItem.tsx
-import { jsx as jsx86, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var FilterItem = ({
   index,
-  paramOptions,
   operatorOptions,
   valueOptions,
-  onParamChange,
+  onFilterOptionChange,
+  onFilterDynamicChange,
   onOperatorChange,
   onValueChange,
-  initialCriteriaTitle = "Where"
+  initialCriteriaTitle = "Where",
+  criteriaGroupOperator = "and"
 }) => {
   var _a, _b;
   const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
@@ -8906,23 +8955,24 @@ var FilterItem = ({
   const metaDataPossibleOptions = (_b = (_a = operatorOptions.find((op) => filters[index].operator === op.value)) == null ? void 0 : _a.editorType) != null ? _b : "singleChoice";
   const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly, bindable } = useMemo23(() => {
     var _a2;
-    const currentSelectedFilter = filterOptions.find((item) => {
+    const currentSelectedFilterGroup = filterOptions.find((item) => {
       var _a3;
       return (_a3 = item.options) == null ? void 0 : _a3.find((op) => op.value === filters[index].field);
     });
-    const selectedFieldValue2 = (_a2 = currentSelectedFilter == null ? void 0 : currentSelectedFilter.options) == null ? void 0 : _a2.find((item) => {
+    const selectedFilterOption = (_a2 = currentSelectedFilterGroup == null ? void 0 : currentSelectedFilterGroup.options) == null ? void 0 : _a2.find((item) => {
       return filters[index].field === item.value;
     });
-    const isCurrentFieldReadOnly = selectedFieldValue2 == null ? void 0 : selectedFieldValue2.readOnly;
+    const isCurrentFieldReadOnly = selectedFilterOption == null ? void 0 : selectedFilterOption.readOnly;
     const selectedOperatorValue2 = operatorOptions == null ? void 0 : operatorOptions.find((item) => {
       return filters[index].operator === item.value;
     });
+    const bindable2 = isFilterBindable(selectedFilterOption, selectedOperatorValue2);
     return {
-      selectedFieldValue: selectedFieldValue2,
+      selectedFieldValue: selectedFilterOption,
       selectedOperatorValue: selectedOperatorValue2 != null ? selectedOperatorValue2 : void 0,
       selectedMetaValue: filters[index].value,
       readOnly: isCurrentFieldReadOnly,
-      bindable: selectedFieldValue2 == null ? void 0 : selectedFieldValue2.bindable
+      bindable: bindable2
     };
   }, [filters, filterOptions, index, operatorOptions]);
   const readOnlyProps = readOnly ? {
@@ -8931,17 +8981,29 @@ var FilterItem = ({
     menuIsOpen: false,
     isClearable: false
   } : {};
-  return /* @__PURE__ */ jsxs47("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
-    /* @__PURE__ */ jsx86("span", { children: index === 0 ? initialCriteriaTitle : "and" }),
-    /* @__PURE__ */ jsxs47("div", { css: ConditionalInputRow, children: [
-      /* @__PURE__ */ jsx86(
+  const CustomLeftHandComponent = selectedFieldValue == null ? void 0 : selectedFieldValue.leftHandSideComponentWhenSelected;
+  const isEmptyOperator = metaDataPossibleOptions === "empty";
+  return /* @__PURE__ */ jsxs46("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
+    /* @__PURE__ */ jsx85("span", { children: index === 0 ? initialCriteriaTitle : criteriaGroupOperator }),
+    /* @__PURE__ */ jsxs46("div", { css: [ConditionalInputRow, isEmptyOperator ? ConditionalInputRowEmpty : null], children: [
+      CustomLeftHandComponent ? /* @__PURE__ */ jsx85(
+        CustomLeftHandComponent,
+        {
+          filterOption: selectedFieldValue,
+          filter: filters[index],
+          setFilterDynamicValue: onFilterDynamicChange,
+          deselectFilterOption: () => {
+            onFilterOptionChange("");
+          }
+        }
+      ) : /* @__PURE__ */ jsx85(
         InputComboBox5,
         {
           "aria-label": label,
-          options: paramOptions,
+          options: filterOptions,
           onChange: (e) => {
             var _a2;
-            onParamChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
+            onFilterOptionChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
           },
           isOptionDisabled: (option) => {
             var _a2;
@@ -8961,7 +9023,7 @@ var FilterItem = ({
           name: `filter-field-${index}`
         }
       ),
-      /* @__PURE__ */ jsx86(
+      /* @__PURE__ */ jsx85(
         InputComboBox5,
         {
           "aria-label": operatorLabel,
@@ -8985,7 +9047,7 @@ var FilterItem = ({
           name: `filter-operator-${index}`
         }
       ),
-      /* @__PURE__ */ jsx86(
+      /* @__PURE__ */ jsx85(
         FilterEditorRenderer,
         {
           "aria-label": metaDataLabel,
@@ -8999,7 +9061,7 @@ var FilterItem = ({
           valueTestId: "filter-value"
         }
       ),
-      readOnly ? null : /* @__PURE__ */ jsx86(
+      readOnly ? null : /* @__PURE__ */ jsx85(
         "button",
         {
           type: "button",
@@ -9008,35 +9070,185 @@ var FilterItem = ({
           css: IconBtn,
           "data-testid": "delete-filter",
           disabled: filters.length === 1,
-          children: /* @__PURE__ */ jsx86(Icon8, { icon: "trash", iconColor: filters.length === 1 ? "gray" : "red", size: "1rem" })
+          children: /* @__PURE__ */ jsx85(Icon8, { icon: CgTrash2, iconColor: filters.length === 1 ? "gray" : "red", size: "1rem" })
         }
       )
     ] })
   ] });
 };
-var singleValuedOperators = /* @__PURE__ */ new Set([
-  "eq",
-  "neq",
-  "lt",
-  "gt",
-  "is",
-  "!is",
-  "has",
-  "!has",
-  "startswith",
-  "!startswith",
-  "endswith",
-  "!endswith"
-]);
-var arrayValuedOperators = /* @__PURE__ */ new Set(["in", "nin", "is$", "!is$"]);
-var clearValueOnChangeAwayFromOperators = /* @__PURE__ */ new Set(["def", "ndef", "empty", "!empty", "between"]);
-var noValueOperators = /* @__PURE__ */ new Set(["empty", "!empty"]);
+
+// src/components/SearchAndFilter/FilterItems.tsx
+import { CgMathPlus } from "@react-icons/all-files/cg/CgMathPlus";
+import { Icon as Icon9 } from "@uniformdev/design-system";
+
+// src/components/SearchAndFilter/FilterMenu.tsx
+import { HorizontalRhythm as HorizontalRhythm8, VerticalRhythm as VerticalRhythm6 } from "@uniformdev/design-system";
+import React13, { useEffect as useEffect23 } from "react";
+import { jsx as jsx86, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
+var SearchAndFilterOptionsContainer2 = ({
+  buttonRow,
+  additionalFiltersContainer,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs47("div", { css: SearchAndFilterOptionsContainer, children: [
+    /* @__PURE__ */ jsx86("div", { css: SearchAndFilterOptionsInnerContainer, children }),
+    buttonRow ? /* @__PURE__ */ jsx86(
+      HorizontalRhythm8,
+      {
+        css: SearchAndFilterButtonGroup,
+        gap: "sm",
+        align: "center",
+        justify: "space-between",
+        children: buttonRow
+      }
+    ) : null,
+    additionalFiltersContainer ? /* @__PURE__ */ jsx86("div", { css: SearchAndFilterAdditionalContainer, children: additionalFiltersContainer }) : null
+  ] });
+};
+var FilterMenu = ({
+  id,
+  filterTitle = "Show results",
+  menuControls,
+  additionalFiltersContainer,
+  children,
+  dataTestId,
+  resetButtonText = "reset"
+}) => {
+  const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
+  const innerMenuRef = React13.useRef(null);
+  useEffect23(() => {
+    var _a;
+    if (filterVisibility) {
+      (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [filterVisibility]);
+  return /* @__PURE__ */ jsx86(VerticalRhythm6, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ jsxs47(
+    SearchAndFilterOptionsContainer2,
+    {
+      buttonRow: menuControls,
+      additionalFiltersContainer,
+      children: [
+        /* @__PURE__ */ jsxs47(HorizontalRhythm8, { gap: "sm", align: "center", justify: "space-between", children: [
+          filterTitle ? /* @__PURE__ */ jsx86("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }) : null,
+          (filters == null ? void 0 : filters.length) && resetButtonText ? /* @__PURE__ */ jsx86(
+            "button",
+            {
+              type: "button",
+              css: ResetConditionsBtn,
+              disabled: filters.every((f) => !f.field),
+              onClick: () => {
+                handleResetFilters();
+                setFilterVisibility(false);
+              },
+              "data-testid": "reset-filters",
+              children: resetButtonText
+            }
+          ) : null
+        ] }),
+        children
+      ]
+    }
+  ) : null });
+};
+
+// src/components/SearchAndFilter/util/getNewFilterValueAfterOperatorChange.ts
+import { hasReferencedVariables as hasReferencedVariables4 } from "@uniformdev/canvas";
+function getNewFilterValueAfterOperatorChange({
+  newOperatorId,
+  currentFilter,
+  filterOptions
+}) {
+  var _a, _b, _c;
+  if (Array.isArray(newOperatorId)) {
+    throw new Error("Operator value must be a single string");
+  }
+  const result = {
+    ...currentFilter,
+    operator: newOperatorId,
+    value: ""
+  };
+  const currentOperatorId = currentFilter.operator;
+  let currentValue = currentFilter.value;
+  const currentFieldDefinition = filterOptions.flatMap((group) => {
+    var _a2;
+    return (_a2 = group.options) != null ? _a2 : [];
+  }).find((filter) => filter.value === currentFilter.field);
+  const currentOperator = (_a = currentFieldDefinition == null ? void 0 : currentFieldDefinition.operatorOptions) == null ? void 0 : _a.find(
+    (op) => op.value === currentOperatorId
+  );
+  const newOperator = (_b = currentFieldDefinition == null ? void 0 : currentFieldDefinition.operatorOptions) == null ? void 0 : _b.find((op) => op.value === newOperatorId);
+  if (!currentOperator || !newOperator) {
+    result.value = "";
+    return result;
+  } else {
+    const currentOperatorValueType = currentOperator.expectedValueType;
+    const newOperatorValueType = newOperator.expectedValueType;
+    if (!isFilterBindable(currentFieldDefinition, newOperator) && hasBindings(currentValue)) {
+      currentValue = "";
+    }
+    if (isHardcodedOperatorValue(currentOperatorValueType)) {
+      result.value = isHardcodedOperatorValue(newOperatorValueType) ? newOperatorValueType : "";
+      return result;
+    }
+    switch (newOperatorValueType) {
+      case "single":
+        if (Array.isArray(currentValue)) {
+          if (currentOperatorValueType === "between") {
+            result.value = "";
+          } else {
+            result.value = (_c = currentValue[0]) != null ? _c : "";
+          }
+        } else {
+          result.value = currentValue;
+        }
+        return result;
+      case "array":
+        if (currentOperatorValueType === "between") {
+          result.value = "";
+        } else if (Array.isArray(currentValue)) {
+          result.value = currentValue;
+        } else {
+          result.value = currentValue ? [currentValue] : [];
+        }
+        return result;
+      case "between":
+        if (Array.isArray(currentValue)) {
+          result.value = "";
+        } else {
+          result.value = [currentValue, ""];
+        }
+        return result;
+      case "none":
+        result.value = "";
+        return result;
+      default:
+        result.value = newOperatorValueType;
+        return result;
+    }
+  }
+}
+function isHardcodedOperatorValue(valueType) {
+  return valueType !== void 0 && valueType !== "array" && valueType !== "between" && valueType !== "none" && valueType !== "single";
+}
+function hasBindings(currentValue) {
+  if (currentValue === void 0) {
+    return false;
+  }
+  if (Array.isArray(currentValue)) {
+    return currentValue.some((value) => hasReferencedVariables4(value));
+  }
+  return hasReferencedVariables4(currentValue) > 0;
+}
+
+// src/components/SearchAndFilter/FilterItems.tsx
+import { jsx as jsx87, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
 var FilterItems = ({
   addButtonText = "add condition",
   additionalFiltersContainer,
   filterTitle,
   resetButtonText,
-  initialCriteriaTitle
+  initialCriteriaTitle,
+  criteriaGroupOperator
 }) => {
   const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
@@ -9044,32 +9256,16 @@ var FilterItems = ({
     const next = [...filters];
     next[index] = { ...next[index], [prop]: value };
     if (prop === "operator") {
-      const newOperator = value;
-      const currentValue = next[index].value;
-      if (Array.isArray(newOperator)) {
-        throw new Error("Operator value must be a single string");
-      }
-      if (singleValuedOperators.has(newOperator) && Array.isArray(currentValue)) {
-        next[index].value = next[index].value[0];
-      }
-      if (arrayValuedOperators.has(newOperator) && Array.isArray(currentValue) === false) {
-        next[index].value = currentValue ? [currentValue] : [];
-      }
-      if (clearValueOnChangeAwayFromOperators.has(filters[index].operator)) {
-        next[index].value = "";
-      }
-      if (noValueOperators.has(newOperator)) {
-        next[index].value = "";
-      }
-      if (newOperator === "between" && Array.isArray(currentValue) === false) {
-        next[index].value = [currentValue, ""];
-      }
-      if (value === "def" || value === "true") {
-        next[index].value = "true";
-      }
-      if (value === "ndef" || value === "false") {
-        next[index].value = "false";
+      const newOperatorId = value;
+      const currentFilter = next[index];
+      if (!newOperatorId) {
+        throw new Error("you bad");
       }
+      next[index] = getNewFilterValueAfterOperatorChange({
+        newOperatorId,
+        currentFilter,
+        filterOptions
+      });
     }
     if (prop === "field") {
       const firstOperatorInAvailableOperators = (_e = (_d = (_c = (_b = (_a = filterOptions.find((fo) => {
@@ -9078,15 +9274,16 @@ var FilterItems = ({
       })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((op) => op.value === next[index].field)) == null ? void 0 : _c.operatorOptions) == null ? void 0 : _d[0].value) != null ? _e : "eq";
       next[index].operator = firstOperatorInAvailableOperators;
       next[index].value = "";
+      next[index].dynamicField = void 0;
     }
     setFilters(next);
   };
-  return /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx87(
     FilterMenu,
     {
       id: "search-and-filter-options",
       dataTestId: "search-and-filter-options",
-      menuControls: /* @__PURE__ */ jsxs47(
+      menuControls: /* @__PURE__ */ jsxs48(
         "button",
         {
           type: "button",
@@ -9094,7 +9291,7 @@ var FilterItems = ({
           onClick: handleAddFilter,
           "data-testid": "add-filter",
           children: [
-            /* @__PURE__ */ jsx86(Icon8, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+            /* @__PURE__ */ jsx87(Icon9, { icon: CgMathPlus, iconColor: "currentColor", size: "1rem" }),
             addButtonText
           ]
         }
@@ -9110,17 +9307,18 @@ var FilterItems = ({
         })) == null ? void 0 : _a.options) != null ? _b : [];
         const possibleValueOptions = (_d = (_c = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _c.valueOptions) != null ? _d : [];
         const possibleOperators = (_f = (_e = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _e.operatorOptions) != null ? _f : [];
-        return /* @__PURE__ */ jsx86(
+        return /* @__PURE__ */ jsx87(
           FilterItem,
           {
             index: i,
-            paramOptions: filterOptions,
-            onParamChange: (e) => handleUpdateFilter(i, "field", e),
+            onFilterOptionChange: (e) => handleUpdateFilter(i, "field", e),
             operatorOptions: possibleOperators,
             onOperatorChange: (e) => handleUpdateFilter(i, "operator", e),
             onValueChange: (e) => handleUpdateFilter(i, "value", e),
+            onFilterDynamicChange: (e) => handleUpdateFilter(i, "dynamicField", e),
             valueOptions: possibleValueOptions,
-            initialCriteriaTitle
+            initialCriteriaTitle,
+            criteriaGroupOperator
           },
           i
         );
@@ -9134,7 +9332,7 @@ import { VerticalRhythm as VerticalRhythm7 } from "@uniformdev/design-system";
 
 // src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
 import { Button as Button6, Callout as Callout6, HorizontalRhythm as HorizontalRhythm9, Paragraph } from "@uniformdev/design-system";
-import { Fragment as Fragment17, jsx as jsx87, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx88, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var SearchAndFilterResultContainer = ({
   buttonText,
   clearButtonLabel = "clear",
@@ -9164,18 +9362,18 @@ var SearchAndFilterResultContainer = ({
       handleResetFilters();
     }
   };
-  return /* @__PURE__ */ jsxs48(Fragment17, { children: [
-    /* @__PURE__ */ jsxs48(HorizontalRhythm9, { children: [
-      /* @__PURE__ */ jsxs48("span", { children: [
+  return /* @__PURE__ */ jsxs49(Fragment17, { children: [
+    /* @__PURE__ */ jsxs49(HorizontalRhythm9, { children: [
+      /* @__PURE__ */ jsxs49("span", { children: [
         totalResults,
         " results ",
         searchTerm ? `for "${searchTerm}"` : null
       ] }),
-      !searchTerm || hideClearButton ? null : /* @__PURE__ */ jsx87(Button6, { buttonType: "ghostDestructive", size: "zero", onClick: handleClearSearch, children: clearButtonLabel })
+      !searchTerm || hideClearButton ? null : /* @__PURE__ */ jsx88(Button6, { buttonType: "ghostDestructive", size: "zero", onClick: handleClearSearch, children: clearButtonLabel })
     ] }),
-    totalResults === 0 ? /* @__PURE__ */ jsxs48(Callout6, { title: calloutTitle != null ? calloutTitle : automateCalloutTitle(), type: "note", children: [
-      calloutText ? /* @__PURE__ */ jsx87(Paragraph, { children: calloutText }) : null,
-      hideClearButton ? null : /* @__PURE__ */ jsx87(
+    totalResults === 0 ? /* @__PURE__ */ jsxs49(Callout6, { title: calloutTitle != null ? calloutTitle : automateCalloutTitle(), type: "note", children: [
+      calloutText ? /* @__PURE__ */ jsx88(Paragraph, { children: calloutText }) : null,
+      hideClearButton ? null : /* @__PURE__ */ jsx88(
         Button6,
         {
           buttonType: "tertiaryOutline",
@@ -9190,14 +9388,14 @@ var SearchAndFilterResultContainer = ({
 };
 
 // src/components/SearchAndFilter/SearchAndFilter.tsx
-import { jsx as jsx88, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
 var SearchAndFilter = ({
   filters,
   filterOptions,
   filterVisible,
   filterControls,
   viewSwitchControls,
-  resultsContainerView = /* @__PURE__ */ jsx88(SearchAndFilterResultContainer, {}),
+  resultsContainerView = /* @__PURE__ */ jsx89(SearchAndFilterResultContainer, {}),
   filterMapper: filterMapper2 = filterMapper,
   additionalFiltersContainer,
   onChange,
@@ -9207,7 +9405,7 @@ var SearchAndFilter = ({
   allowBindingSearchTerm = false,
   resetFilterValues = []
 }) => {
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx89(
     SearchAndFilterProvider,
     {
       filters,
@@ -9220,18 +9418,18 @@ var SearchAndFilter = ({
       resetFilterValues,
       filterMapper: filterMapper2,
       allowBindingSearchTerm,
-      children: /* @__PURE__ */ jsxs49(VerticalRhythm7, { "data-testid": "search-and-filter", children: [
-        /* @__PURE__ */ jsxs49("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
-          /* @__PURE__ */ jsx88(
+      children: /* @__PURE__ */ jsxs50(VerticalRhythm7, { "data-testid": "search-and-filter", children: [
+        /* @__PURE__ */ jsxs50("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
+          /* @__PURE__ */ jsx89(
             "div",
             {
               css: SearchAndFilterControlsWrapper(viewSwitchControls ? "auto 1fr 0.05fr" : "auto 1fr"),
-              children: !filterControls ? /* @__PURE__ */ jsx88(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
+              children: !filterControls ? /* @__PURE__ */ jsx89(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
             }
           ),
           viewSwitchControls
         ] }),
-        /* @__PURE__ */ jsx88(FilterItems, { additionalFiltersContainer }),
+        /* @__PURE__ */ jsx89(FilterItems, { additionalFiltersContainer }),
         resultsContainerView
       ] })
     }
@@ -9242,7 +9440,7 @@ var SearchAndFilter = ({
 import { InputKeywordSearch as InputKeywordSearch3 } from "@uniformdev/design-system";
 import { createContext as createContext7, useState as useState26 } from "react";
 import { useDebounce as useDebounce10 } from "react-use";
-import { jsx as jsx89 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx90 } from "@emotion/react/jsx-runtime";
 var SearchOnlyContext = createContext7({
   searchTerm: "",
   setSearchTerm: () => {
@@ -9259,14 +9457,14 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
     300,
     [localeSearchTerm]
   );
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx90(
     SearchOnlyContext.Provider,
     {
       value: {
         searchTerm,
         setSearchTerm: setLocaleSearchTerm
       },
-      children: /* @__PURE__ */ jsx89("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ jsx89(
+      children: /* @__PURE__ */ jsx90("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ jsx90(
         InputKeywordSearch3,
         {
           placeholder: "Search...",
@@ -9361,7 +9559,8 @@ var FilterButton3 = css39`
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   max-height: 40px;
-  transition: color var(--duration-fast) var(--timing-ease-out),
+  transition:
+    color var(--duration-fast) var(--timing-ease-out),
     background-color var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
     box-shadow var(--duration-fast) var(--timing-ease-out);
@@ -9487,13 +9686,9 @@ var SearchAndFilterButtonGroup2 = css39`
 `;
 var SortFilterWrapper = (hiddenLocaleInput) => css39`
   align-items: center;
-  border-top: 1px solid var(--gray-300);
   display: flex;
-  flex-wrap: wrap;
   gap: var(--spacing-base);
-  padding: var(--spacing-base) var(--spacing-md) 0;
-  position: relative;
-  z-index: 0;
+  flex-grow: 1;
 
   ${cq2("420px")} {
     display: grid;
@@ -9517,7 +9712,7 @@ var InputVariableWrapper = css39`
 `;
 
 // src/components/SearchAndFilter/SortItems.tsx
-import { jsx as jsx90, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
 var SortItems = ({
   sortByLabel = "Sort by",
   localeLabel = "Show locale",
@@ -9539,11 +9734,11 @@ var SortItems = ({
     return (_a2 = item.options) == null ? void 0 : _a2.find((option) => option.value === sortField);
   })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((nestedOption) => nestedOption.value === sortField);
   const localeLabelValue = sortOptions.length > 1 ? localeLabel : `${localeLabel}s`;
-  return /* @__PURE__ */ jsxs50("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
-    /* @__PURE__ */ jsxs50(VerticalRhythm8, { gap: "xs", children: [
-      /* @__PURE__ */ jsx90("span", { css: Title2, children: sortByLabel }),
-      /* @__PURE__ */ jsxs50("div", { css: SortFilterInputRow, children: [
-        /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsxs51("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
+    /* @__PURE__ */ jsxs51(VerticalRhythm8, { gap: "xs", children: [
+      /* @__PURE__ */ jsx91("span", { css: Title2, children: sortByLabel }),
+      /* @__PURE__ */ jsxs51("div", { css: SortFilterInputRow, children: [
+        /* @__PURE__ */ jsx91(
           InputVariables,
           {
             disableInlineMenu: disableSortBinding,
@@ -9551,7 +9746,7 @@ var SortItems = ({
             value: sortField,
             valueToResetTo: "created_at",
             onChange: (e) => onSortChange(`${e}_${sortDirection}`),
-            inputWhenNoVariables: /* @__PURE__ */ jsx90(
+            inputWhenNoVariables: /* @__PURE__ */ jsx91(
               InputComboBox6,
               {
                 id: "sort-by-field",
@@ -9574,7 +9769,7 @@ var SortItems = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx90(
+        /* @__PURE__ */ jsx91(
           InputVariables,
           {
             disableInlineMenu: disableSortBinding,
@@ -9582,7 +9777,7 @@ var SortItems = ({
             valueToResetTo: "DESC",
             showMenuPosition: disableSortBinding ? void 0 : "inline-right",
             onChange: (e) => onSortChange(`${sortField}_${e}`),
-            inputWhenNoVariables: /* @__PURE__ */ jsx90(
+            inputWhenNoVariables: /* @__PURE__ */ jsx91(
               SegmentedControl,
               {
                 noCheckmark: true,
@@ -9614,14 +9809,14 @@ var SortItems = ({
         )
       ] })
     ] }),
-    hideLocaleOptions ? null : /* @__PURE__ */ jsx90(VerticalRhythm8, { gap: "xs", css: InputVariableWrapper, children: /* @__PURE__ */ jsx90(
+    hideLocaleOptions ? null : /* @__PURE__ */ jsx91(VerticalRhythm8, { gap: "xs", css: InputVariableWrapper, children: /* @__PURE__ */ jsx91(
       InputVariables,
       {
         label: localeLabelValue,
         value: localeValue,
         showMenuPosition: "inline-right",
         onChange: (e) => onLocaleChange(e != null ? e : ""),
-        inputWhenNoVariables: /* @__PURE__ */ jsx90(
+        inputWhenNoVariables: /* @__PURE__ */ jsx91(
           InputSelect8,
           {
             name: "localeReturned",
@@ -9652,14 +9847,14 @@ function createLocationValidator(setValue, validate) {
 
 // src/utils/useContentDataResourceLocaleInfo.ts
 import { bindVariables as bindVariables2, createVariableReference as createVariableReference4, LOCALE_DYNAMIC_INPUT_NAME as LOCALE_DYNAMIC_INPUT_NAME2 } from "@uniformdev/canvas";
-import { useEffect as useEffect24, useRef as useRef17 } from "react";
+import { useEffect as useEffect24, useRef as useRef16 } from "react";
 function useContentDataResourceLocaleInfo({
   locale,
   setLocale,
   dynamicInputs
 }) {
   var _a;
-  const setLocaleRef = useRef17(setLocale);
+  const setLocaleRef = useRef16(setLocale);
   setLocaleRef.current = setLocale;
   const { flatVariables } = useVariables();
   const effectiveLocale = locale != null ? locale : dynamicInputs[LOCALE_DYNAMIC_INPUT_NAME2] ? createVariableReference4(LOCALE_DYNAMIC_INPUT_NAME2) : "";
@@ -9720,6 +9915,7 @@ export {
   Callout7 as Callout,
   ControlledValuePlugin,
   DATE_OPERATORS,
+  DATE_TIME_OPERATORS,
   DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem,
   DataRefreshButton,
@@ -9813,7 +10009,6 @@ export {
   RequestUrlInput,
   ResolvableLoadingValue,
   SELECT_OPERATORS,
-  SYSTEM_DATE_OPERATORS,
   SYSTEM_FIELD_OPERATORS,
   ScrollableList2 as ScrollableList,
   ScrollableListItem,
@@ -9875,7 +10070,7 @@ export {
   entrySearchSelectOption,
   entrySearchWrapper,
   filterMapper,
-  hasReferencedVariables,
+  hasReferencedVariables2 as hasReferencedVariables,
   prettifyBindExpression,
   productSearchRowActiveIcon,
   productSearchRowCategory,
@@ -9910,6 +10105,7 @@ export {
   selectedItemIcon,
   selectedItemInner,
   selectedItemTitle,
+  serializeVariablesEditorSerializedState,
   serializeVariablesEditorState,
   setVariablesEditorValue,
   urlEncodeRequestParameter,