@uniformdev/mesh-sdk-react 19.135.1-alpha.10 → 19.135.1-alpha.12

package/dist/index.js

@@ -33,13 +33,14 @@ var src_exports = {};
 __export(src_exports, {
   $createVariableNode: () => $createVariableNode,
   $isVariableNode: () => $isVariableNode,
-  AddListButton: () => import_design_system54.AddListButton,
-  Button: () => import_design_system54.Button,
+  AddListButton: () => import_design_system66.AddListButton,
+  Button: () => import_design_system66.Button,
   CHECKBOX_OPERATORS: () => CHECKBOX_OPERATORS,
-  Callout: () => import_design_system54.Callout,
+  Callout: () => import_design_system66.Callout,
   ControlledObjectSearchProvider: () => ControlledObjectSearchProvider,
   ControlledValuePlugin: () => ControlledValuePlugin,
   DATE_OPERATORS: () => DATE_OPERATORS,
+  DATE_TIME_OPERATORS: () => DATE_TIME_OPERATORS,
   DISCONNECT_VARIABLE_COMMAND: () => DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem: () => DamSelectedItem,
   DataRefreshButton: () => DataRefreshButton,
@@ -53,7 +54,7 @@ __export(src_exports, {
   DateRangeEditor: () => DateRangeEditor,
   DefaultSearchRow: () => DefaultSearchRow,
   DefaultSelectedItem: () => DefaultSelectedItem,
-  DrawerContent: () => import_design_system54.DrawerContent,
+  DrawerContent: () => import_design_system66.DrawerContent,
   EDIT_VARIABLE_COMMAND: () => EDIT_VARIABLE_COMMAND,
   EntrySearch: () => EntrySearch,
   FilterButton: () => FilterButton2,
@@ -64,27 +65,28 @@ __export(src_exports, {
   FilterMenu: () => FilterMenu,
   FilterMultiChoiceEditor: () => FilterMultiChoiceEditor,
   FilterSingleChoiceEditor: () => FilterSingleChoiceEditor,
-  Heading: () => import_design_system54.Heading,
+  Heading: () => import_design_system66.Heading,
   INSERT_VARIABLE_COMMAND: () => INSERT_VARIABLE_COMMAND,
   Icons: () => icons_exports,
-  Input: () => import_design_system54.Input,
-  InputComboBox: () => import_design_system54.InputComboBox,
-  InputKeywordSearch: () => import_design_system54.InputKeywordSearch,
-  InputSelect: () => import_design_system54.InputSelect,
-  InputToggle: () => import_design_system54.InputToggle,
+  Input: () => import_design_system66.Input,
+  InputComboBox: () => import_design_system66.InputComboBox,
+  InputKeywordSearch: () => import_design_system66.InputKeywordSearch,
+  InputSelect: () => import_design_system66.InputSelect,
+  InputToggle: () => import_design_system66.InputToggle,
   InputVariables: () => InputVariables,
-  Label: () => import_design_system54.Label,
+  Label: () => import_design_system66.Label,
   LinkButton: () => LinkButton,
-  LoadingIndicator: () => import_design_system54.LoadingIndicator,
-  LoadingOverlay: () => import_design_system54.LoadingOverlay,
+  LoadingIndicator: () => import_design_system66.LoadingIndicator,
+  LoadingOverlay: () => import_design_system66.LoadingOverlay,
   MULTI_SELECT_OPERATORS: () => MULTI_SELECT_OPERATORS,
-  Menu: () => import_design_system54.Menu,
-  MenuItem: () => import_design_system54.MenuItem,
+  Menu: () => import_design_system66.Menu,
+  MenuItem: () => import_design_system66.MenuItem,
   MeshApp: () => MeshApp,
   NUMBER_OPERATORS: () => NUMBER_OPERATORS,
   NumberEditor: () => NumberEditor,
   NumberRangeEditor: () => NumberRangeEditor,
   OPEN_INSERT_VARIABLE_COMMAND: () => OPEN_INSERT_VARIABLE_COMMAND,
+  OPTIONAL_SYSTEM_FIELD_OPERATORS: () => OPTIONAL_SYSTEM_FIELD_OPERATORS,
   ObjectSearchContainer: () => ObjectSearchContainer,
   ObjectSearchContext: () => ObjectSearchContext,
   ObjectSearchFilter: () => ObjectSearchFilter,
@@ -99,22 +101,22 @@ __export(src_exports, {
   PUBLISH_STATUS_FIELD_OPERATORS: () => PUBLISH_STATUS_FIELD_OPERATORS,
   ParamTypeDynamicDataProvider: () => ParamTypeDynamicDataProvider,
   ParameterConnectionIndicator: () => ParameterConnectionIndicator,
-  ParameterGroup: () => import_design_system54.ParameterGroup,
-  ParameterImage: () => import_design_system54.ParameterImage,
-  ParameterImageInner: () => import_design_system54.ParameterImageInner,
-  ParameterInput: () => import_design_system54.ParameterInput,
-  ParameterInputInner: () => import_design_system54.ParameterInputInner,
-  ParameterLabel: () => import_design_system54.ParameterLabel,
-  ParameterMenuButton: () => import_design_system54.ParameterMenuButton,
+  ParameterGroup: () => import_design_system66.ParameterGroup,
+  ParameterImage: () => import_design_system66.ParameterImage,
+  ParameterImageInner: () => import_design_system66.ParameterImageInner,
+  ParameterInput: () => import_design_system66.ParameterInput,
+  ParameterInputInner: () => import_design_system66.ParameterInputInner,
+  ParameterLabel: () => import_design_system66.ParameterLabel,
+  ParameterMenuButton: () => import_design_system66.ParameterMenuButton,
   ParameterOrSingleVariable: () => ParameterOrSingleVariable,
-  ParameterSelect: () => import_design_system54.ParameterSelect,
-  ParameterSelectInner: () => import_design_system54.ParameterSelectInner,
-  ParameterShell: () => import_design_system54.ParameterShell,
+  ParameterSelect: () => import_design_system66.ParameterSelect,
+  ParameterSelectInner: () => import_design_system66.ParameterSelectInner,
+  ParameterShell: () => import_design_system66.ParameterShell,
   ParameterShellContext: () => import_design_system14.ParameterShellContext,
-  ParameterTextarea: () => import_design_system54.ParameterTextarea,
-  ParameterTextareaInner: () => import_design_system54.ParameterTextareaInner,
-  ParameterToggle: () => import_design_system54.ParameterToggle,
-  ParameterToggleInner: () => import_design_system54.ParameterToggleInner,
+  ParameterTextarea: () => import_design_system66.ParameterTextarea,
+  ParameterTextareaInner: () => import_design_system66.ParameterTextareaInner,
+  ParameterToggle: () => import_design_system66.ParameterToggle,
+  ParameterToggleInner: () => import_design_system66.ParameterToggleInner,
   ParameterVariables: () => ParameterVariables,
   ProductPreviewList: () => ProductPreviewList,
   ProductQuery: () => ProductQuery,
@@ -135,10 +137,9 @@ __export(src_exports, {
   RequestUrlInput: () => RequestUrlInput,
   ResolvableLoadingValue: () => ResolvableLoadingValue,
   SELECT_OPERATORS: () => SELECT_OPERATORS,
-  SYSTEM_DATE_OPERATORS: () => SYSTEM_DATE_OPERATORS,
   SYSTEM_FIELD_OPERATORS: () => SYSTEM_FIELD_OPERATORS,
-  ScrollableList: () => import_design_system54.ScrollableList,
-  ScrollableListItem: () => import_design_system54.ScrollableListItem,
+  ScrollableList: () => import_design_system66.ScrollableList,
+  ScrollableListItem: () => import_design_system66.ScrollableListItem,
   SearchAndFilter: () => SearchAndFilter,
   SearchAndFilterContext: () => SearchAndFilterContext,
   SearchAndFilterOptionsContainer: () => SearchAndFilterOptionsContainer2,
@@ -150,13 +151,15 @@ __export(src_exports, {
   SortItems: () => SortItems,
   StatusMultiEditor: () => StatusMultiEditor,
   StatusSingleEditor: () => StatusSingleEditor,
-  Switch: () => import_design_system54.Switch,
+  Switch: () => import_design_system66.Switch,
   TEXTBOX_OPERATORS: () => TEXTBOX_OPERATORS,
   TextEditor: () => TextEditor,
+  TextMultiChoiceEditor: () => TextMultiChoiceEditor,
   TextVariableRenderer: () => TextVariableRenderer,
-  Textarea: () => import_design_system54.Textarea,
-  Theme: () => import_design_system54.Theme,
+  Textarea: () => import_design_system66.Textarea,
+  Theme: () => import_design_system66.Theme,
   USER_OPERATORS: () => USER_OPERATORS,
+  VariableChip: () => VariableChip,
   VariableEditor: () => VariableEditor,
   VariableNode: () => VariableNode,
   VariablesList: () => VariablesList,
@@ -196,7 +199,7 @@ __export(src_exports, {
   entrySearchSelectOption: () => entrySearchSelectOption,
   entrySearchWrapper: () => entrySearchWrapper,
   filterMapper: () => filterMapper,
-  hasReferencedVariables: () => hasReferencedVariables,
+  hasReferencedVariables: () => hasReferencedVariables2,
   prettifyBindExpression: () => prettifyBindExpression,
   productSearchRowActiveIcon: () => productSearchRowActiveIcon,
   productSearchRowCategory: () => productSearchRowCategory,
@@ -231,6 +234,7 @@ __export(src_exports, {
   selectedItemIcon: () => selectedItemIcon,
   selectedItemInner: () => selectedItemInner,
   selectedItemTitle: () => selectedItemTitle,
+  serializeVariablesEditorSerializedState: () => serializeVariablesEditorSerializedState,
   serializeVariablesEditorState: () => serializeVariablesEditorState,
   setVariablesEditorValue: () => setVariablesEditorValue,
   urlEncodeRequestParameter: () => urlEncodeRequestParameter,
@@ -252,7 +256,7 @@ __export(src_exports, {
   useVariableEditor: () => useVariableEditor,
   useVariables: () => useVariables,
   useVariablesMenu: () => useVariablesMenu,
-  utilityColors: () => import_design_system54.utilityColors,
+  utilityColors: () => import_design_system66.utilityColors,
   variableDefaultTextValue: () => variableDefaultTextValue,
   variablePrefix: () => variablePrefix,
   variableSuffix: () => variableSuffix,
@@ -1223,7 +1227,8 @@ var searchRowContainer = import_react8.css`
   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 = import_react8.css`
@@ -1898,8 +1903,7 @@ var EntrySearch = ({
   const handleCancelClick = (e) => {
     e.preventDefault();
     setListOpen(false);
-    if (onCancel)
-      onCancel();
+    if (onCancel) onCancel();
   };
   const handleLoadMoreClick = () => {
     search(textInput, {
@@ -2204,7 +2208,8 @@ var productSearchRowContainer = import_react18.css`
   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 = import_react18.css`
@@ -3043,18 +3048,55 @@ var import_design_system14 = require("@uniformdev/design-system");
 
 // src/components/Variables/composer/ControlledValuePlugin.tsx
 var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-var import_lite = require("dequal/lite");
 var import_react31 = require("react");
 
-// src/components/Variables/util/deserializeVariablesEditorState.ts
+// src/components/Variables/util/serializeVariablesEditorState.ts
 var import_canvas2 = require("@uniformdev/canvas");
 var import_lexical = require("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 = [];
+  serializeRecursive(serializedEditorState, buf);
+  const result = buf.join("");
+  return result.length > 0 ? result : void 0;
+}
+function serializeRecursive(node, buffer) {
+  if (node.type === import_lexical.TextNode.getType()) {
+    buffer.push(node.text.replace(variablePrefix, "\\${"));
+  }
+  if (node.type === VariableNode.getType()) {
+    buffer.push((0, import_canvas2.createVariableReference)(node.reference));
+  }
+  if (node.type === import_lexical.LineBreakNode.getType()) {
+    buffer.push("\n");
+  }
+  if ("children" in node && node.children) {
+    for (const child of node.children) {
+      serializeRecursive(child, buffer);
+    }
+  }
+}
+
+// src/components/Variables/util/setVariablesEditorValue.ts
+var import_richtext = require("@uniformdev/richtext");
+
+// src/components/Variables/util/deserializeVariablesEditorState.ts
+var import_canvas3 = require("@uniformdev/canvas");
+var import_lexical2 = require("lexical");
 function deserializeVariablesEditorState(serialized) {
   const result = [];
-  (0, import_canvas2.parseVariableExpression)(serialized != null ? serialized : "", (token, type) => {
+  (0, import_canvas3.parseVariableExpression)(serialized != null ? serialized : "", (token, type) => {
     if (type === "text") {
       const node = {
-        type: import_lexical.TextNode.getType(),
+        type: import_lexical2.TextNode.getType(),
         text: token,
         mode: "normal",
         version: 1,
@@ -3096,11 +3138,11 @@ function deserializeVariablesEditorState(serialized) {
 }
 
 // src/components/Variables/util/refreshVariableNodeMetadata.ts
-var import_lexical2 = require("lexical");
+var import_lexical3 = require("lexical");
 function refreshVariableNodeMetadata(editor) {
   setTimeout(() => {
     editor.update(() => {
-      (0, import_lexical2.$nodesOfType)(VariableNode).forEach((variableNode) => {
+      (0, import_lexical3.$nodesOfType)(VariableNode).forEach((variableNode) => {
         variableNode.markDirty();
       });
     });
@@ -3108,14 +3150,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:",
@@ -3123,26 +3169,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: []
-            }
-          ]
-        }
+      const parsedState = editor.parseEditorState(import_richtext.emptyRichTextValue);
+      editor.setEditorState(parsedState.clone(null), {
+        tag
       });
-      editor.setEditorState(parsedState);
     }
   }
   refreshVariableNodeMetadata(editor);
@@ -3155,17 +3185,18 @@ function ControlledValuePlugin({
   extraDependencies
 }) {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
-  const lastValueRef = (0, import_react31.useRef)(value);
   (0, import_react31.useEffect)(() => {
+    var _a, _b;
     if (!enabled) {
       return;
     }
-    if ((0, import_lite.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);
       }
     });
@@ -3173,22 +3204,6 @@ function ControlledValuePlugin({
   return null;
 }
 
-// src/components/Variables/composer/VariableNode.tsx
-var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
-var import_useLexicalNodeSelection = require("@lexical/react/useLexicalNodeSelection");
-var import_selection = require("@lexical/selection");
-var import_utils2 = require("@lexical/utils");
-var import_canvas4 = require("@uniformdev/canvas");
-var import_design_system18 = require("@uniformdev/design-system");
-var import_lexical4 = require("lexical");
-var import_react40 = require("react");
-
-// src/components/Variables/util/prettifyBindExpression.tsx
-function prettifyBindExpression(bindExpression) {
-  const [, expression] = bindExpression.split(":");
-  return expression;
-}
-
 // src/components/Variables/composer/VariableChip.tsx
 var import_design_system15 = require("@uniformdev/design-system");
 var import_react32 = require("react");
@@ -3202,12 +3217,13 @@ function VariableChip({
   clickToEdit,
   isFresh,
   selected,
-  disabled
+  disabled,
+  errorMessage = `${reference} is not defined.`
 }) {
   const hasClickEvent = !!onClick;
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
   const Wrapper = referenceIsValidFr === "warning" ? WarningVariableReference : referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? import_react32.Fragment : UndefinedVariableReference;
-  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
+  const extraTitle = !referenceIsValidFr ? errorMessage : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
   const chippy = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.MultilineChip, { onClick, "aria-selected": selected ? true : void 0, "aria-disabled": disabled, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Wrapper, { children: displayName || reference }) });
   if (tooltip) {
     const tip = tooltip ? `${tooltip}${extraTitle ? `
@@ -3264,16 +3280,32 @@ function WarningVariableReference({ children }) {
   );
 }
 
+// src/components/Variables/composer/VariableNode.tsx
+var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
+var import_useLexicalNodeSelection = require("@lexical/react/useLexicalNodeSelection");
+var import_selection = require("@lexical/selection");
+var import_utils2 = require("@lexical/utils");
+var import_canvas5 = require("@uniformdev/canvas");
+var import_design_system18 = require("@uniformdev/design-system");
+var import_lexical5 = require("lexical");
+var import_react40 = require("react");
+
+// src/components/Variables/util/prettifyBindExpression.tsx
+function prettifyBindExpression(bindExpression) {
+  const [, expression] = bindExpression.split(":");
+  return expression;
+}
+
 // src/components/Variables/composer/VariablesPlugin.tsx
 var import_react38 = require("@emotion/react");
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalTypeaheadMenuPlugin = require("@lexical/react/LexicalTypeaheadMenuPlugin");
 var import_utils = require("@lexical/utils");
 var import_AiFillPlusCircle = require("@react-icons/all-files/ai/AiFillPlusCircle");
-var import_canvas3 = require("@uniformdev/canvas");
+var import_canvas4 = require("@uniformdev/canvas");
 var import_design_system17 = require("@uniformdev/design-system");
-var import_lite2 = require("dequal/lite");
-var import_lexical3 = require("lexical");
+var import_lite = require("dequal/lite");
+var import_lexical4 = require("lexical");
 var import_react39 = require("react");
 var import_react_dom = require("react-dom");
 
@@ -3728,12 +3760,12 @@ function variablesToGroupedList(variables, filterFn, context) {
 
 // src/components/Variables/composer/VariablesPlugin.tsx
 var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
-var OPEN_INSERT_VARIABLE_COMMAND = (0, import_lexical3.createCommand)("uniform:open-insert-variable");
-var EDIT_VARIABLE_COMMAND = (0, import_lexical3.createCommand)("uniform:edit-variable");
-var DISCONNECT_VARIABLE_COMMAND = (0, import_lexical3.createCommand)(
+var OPEN_INSERT_VARIABLE_COMMAND = (0, import_lexical4.createCommand)("uniform:open-insert-variable");
+var EDIT_VARIABLE_COMMAND = (0, import_lexical4.createCommand)("uniform:edit-variable");
+var DISCONNECT_VARIABLE_COMMAND = (0, import_lexical4.createCommand)(
   "uniform:disconnect-variable"
 );
-var INSERT_VARIABLE_COMMAND = (0, import_lexical3.createCommand)("uniform:insert-variable");
+var INSERT_VARIABLE_COMMAND = (0, import_lexical4.createCommand)("uniform:insert-variable");
 var TRIGGER = "\\$\\$";
 var LENGTH_LIMIT = 20;
 var DollarSignVariablesRegex = new RegExp(`(^.*)(${TRIGGER}(.{0,${LENGTH_LIMIT}}))$`);
@@ -3803,7 +3835,7 @@ function useVariablesMenu({
           var _a;
           const targetVariable = variables[value];
           if (overwriteExistingValue) {
-            setVariablesEditorValue(editor, (0, import_canvas3.createVariableReference)(value));
+            setVariablesEditorValue(editor, (0, import_canvas4.createVariableReference)(value));
             return true;
           }
           const variableNode = $createVariableNode(value, {
@@ -3817,7 +3849,7 @@ function useVariablesMenu({
           if (nodeToReplace) {
             nodeToReplace.replace(variableNode);
           } else {
-            (0, import_lexical3.$insertNodes)([variableNode]);
+            (0, import_lexical4.$insertNodes)([variableNode]);
           }
         });
       }
@@ -3900,11 +3932,11 @@ function VariablesPlugin({
                   return;
                 }
                 editor.update(() => {
-                  const selection = (0, import_lexical3.$getSelection)();
-                  if ((0, import_lexical3.$isNodeSelection)(selection)) {
+                  const selection = (0, import_lexical4.$getSelection)();
+                  if ((0, import_lexical4.$isNodeSelection)(selection)) {
                     const selectedNodes = selection.getNodes();
                     if (selectedNodes.every((node) => $isVariableNode(node))) {
-                      (0, import_lexical3.$setSelection)(null);
+                      (0, import_lexical4.$setSelection)(null);
                     }
                   }
                 });
@@ -3920,7 +3952,7 @@ function VariablesPlugin({
           }
           return true;
         },
-        import_lexical3.COMMAND_PRIORITY_NORMAL
+        import_lexical4.COMMAND_PRIORITY_NORMAL
       ),
       // disconnects a variable node from its variable value and leaves the variable's default value
       // as a string literal in its place. Note that single-valued binding UIs override this so that it
@@ -3930,17 +3962,17 @@ function VariablesPlugin({
         ({ sourceKey }) => {
           editor.update(() => {
             var _a;
-            const currentNode = (0, import_lexical3.$getNodeByKey)(sourceKey);
+            const currentNode = (0, import_lexical4.$getNodeByKey)(sourceKey);
             if (!$isVariableNode(currentNode)) {
               throw new Error("Cannot disconnect a non-variable node");
             }
             const currentVariableDefinition = variablesRef.current.variables[currentNode.reference];
-            const variableTextNode = (0, import_lexical3.$createTextNode)(
+            const variableTextNode = (0, import_lexical4.$createTextNode)(
               variableDefaultTextValue(
                 (_a = currentVariableDefinition == null ? void 0 : currentVariableDefinition.default) != null ? _a : currentNode.getState().displayName
               )
             );
-            const variableNode = (0, import_lexical3.$getNodeByKey)(sourceKey);
+            const variableNode = (0, import_lexical4.$getNodeByKey)(sourceKey);
             if (!variableNode) {
               console.error("Disconnected from unknown node.");
               return true;
@@ -3950,7 +3982,7 @@ function VariablesPlugin({
           });
           return true;
         },
-        import_lexical3.COMMAND_PRIORITY_NORMAL
+        import_lexical4.COMMAND_PRIORITY_NORMAL
       ),
       editor.registerCommand(
         OPEN_INSERT_VARIABLE_COMMAND,
@@ -3970,7 +4002,7 @@ function VariablesPlugin({
           }
           return true;
         },
-        import_lexical3.COMMAND_PRIORITY_NORMAL
+        import_lexical4.COMMAND_PRIORITY_NORMAL
       ),
       // register the insert variable command, used to handle inserting
       // a variable reference from non-autocomplete menus at the current selection,
@@ -3981,27 +4013,33 @@ function VariablesPlugin({
           var _a, _b;
           if (!disableVariables) {
             const targetVariable = variablesRef.current.variables[reference];
-            if (overwriteExistingValue) {
-              setVariablesEditorValue(editor, (0, import_canvas3.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 = (0, import_lexical4.$createParagraphNode)();
+              pNode.append(variableNode);
+              editor.update(() => {
+                const root = (0, import_lexical4.$getRoot)();
+                root.clear();
+                root.append(pNode);
+              });
+              return true;
+            }
             if (targetKey) {
-              (_b = (0, import_lexical3.$getNodeByKey)(targetKey)) == null ? void 0 : _b.replace(variableNode);
+              (_b = (0, import_lexical4.$getNodeByKey)(targetKey)) == null ? void 0 : _b.replace(variableNode);
             } else {
-              (0, import_lexical3.$insertNodes)([variableNode]);
+              (0, import_lexical4.$insertNodes)([variableNode]);
             }
           }
           return true;
         },
-        import_lexical3.COMMAND_PRIORITY_NORMAL
+        import_lexical4.COMMAND_PRIORITY_NORMAL
       )
     );
   }, [
@@ -4028,14 +4066,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 (!(0, import_lite2.dequal)(currentState, newState)) {
+      if (!(0, import_lite.dequal)(currentState, newState)) {
         variableNode.setState(newState);
       }
     },
@@ -4043,7 +4081,7 @@ function VariablesPlugin({
   );
   (0, import_react39.useEffect)(() => {
     editor.update(() => {
-      (0, import_lexical3.$nodesOfType)(VariableNode).forEach((variableNode) => {
+      (0, import_lexical4.$nodesOfType)(VariableNode).forEach((variableNode) => {
         updateExistingNodeIfChanged(variableNode);
       });
     });
@@ -4133,7 +4171,7 @@ function VariablesPlugin({
 
 // src/components/Variables/composer/VariableNode.tsx
 var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
-var VariableNode = class _VariableNode extends import_lexical4.DecoratorNode {
+var VariableNode = class _VariableNode extends import_lexical5.DecoratorNode {
   constructor(reference, state, key) {
     super(key);
     this.reference = reference;
@@ -4182,7 +4220,7 @@ var VariableNode = class _VariableNode extends import_lexical4.DecoratorNode {
    * (albeit it won't get the fancy chip-node)
    */
   getTextContent() {
-    return (0, import_canvas4.createVariableReference)(this.reference);
+    return (0, import_canvas5.createVariableReference)(this.reference);
   }
   /** Creates the DOM wrapper that hosts the node */
   createDOM() {
@@ -4216,9 +4254,9 @@ function VariableNodeComponent({
   const readOnly = !editor.isEditable();
   const onDelete = (0, import_react40.useCallback)(
     (event) => {
-      if (isSelected && (0, import_lexical4.$isNodeSelection)((0, import_lexical4.$getSelection)())) {
+      if (isSelected && (0, import_lexical5.$isNodeSelection)((0, import_lexical5.$getSelection)())) {
         event.preventDefault();
-        const node = (0, import_lexical4.$getNodeByKey)(nodeKey);
+        const node = (0, import_lexical5.$getNodeByKey)(nodeKey);
         if ($isVariableNode(node)) {
           node.remove();
         }
@@ -4229,18 +4267,18 @@ function VariableNodeComponent({
   );
   (0, import_react40.useEffect)(() => {
     return (0, import_utils2.mergeRegister)(
-      editor.registerCommand(import_lexical4.KEY_DELETE_COMMAND, onDelete, import_lexical4.COMMAND_PRIORITY_LOW),
-      editor.registerCommand(import_lexical4.KEY_BACKSPACE_COMMAND, onDelete, import_lexical4.COMMAND_PRIORITY_LOW),
+      editor.registerCommand(import_lexical5.KEY_DELETE_COMMAND, onDelete, import_lexical5.COMMAND_PRIORITY_LOW),
+      editor.registerCommand(import_lexical5.KEY_BACKSPACE_COMMAND, onDelete, import_lexical5.COMMAND_PRIORITY_LOW),
       // HACK: see https://github.com/facebook/lexical/issues/4214
       // Copied from https://github.com/facebook/lexical/blob/d4b192289d3714b34614b411d40e513d1f86f413/packages/lexical-rich-text/src/index.ts#L775
       // Fixes selection moving into and out of this node with arrow keys and plain text plugin.
       // If the above bug is fixed this may be removable. It's been tested when this is used within the RTE,
       // and seems to work ok there. It should also unregister itself when not in the context of the node. I think?
       editor.registerCommand(
-        import_lexical4.KEY_ARROW_LEFT_COMMAND,
+        import_lexical5.KEY_ARROW_LEFT_COMMAND,
         (event) => {
-          const selection = (0, import_lexical4.$getSelection)();
-          if ((0, import_lexical4.$isNodeSelection)(selection)) {
+          const selection = (0, import_lexical5.$getSelection)();
+          if ((0, import_lexical5.$isNodeSelection)(selection)) {
             const nodes = selection.getNodes();
             if (nodes.length > 0) {
               event.preventDefault();
@@ -4248,7 +4286,7 @@ function VariableNodeComponent({
               return true;
             }
           }
-          if (!(0, import_lexical4.$isRangeSelection)(selection)) {
+          if (!(0, import_lexical5.$isRangeSelection)(selection)) {
             return false;
           }
           if ((0, import_selection.$shouldOverrideDefaultCharacterSelection)(selection, true)) {
@@ -4259,15 +4297,15 @@ function VariableNodeComponent({
           }
           return false;
         },
-        import_lexical4.COMMAND_PRIORITY_EDITOR
+        import_lexical5.COMMAND_PRIORITY_EDITOR
       ),
       // HACK: as above
       // Source: https://github.com/facebook/lexical/blob/d4b192289d3714b34614b411d40e513d1f86f413/packages/lexical-rich-text/src/index.ts#L802C5-L831C7
       editor.registerCommand(
-        import_lexical4.KEY_ARROW_RIGHT_COMMAND,
+        import_lexical5.KEY_ARROW_RIGHT_COMMAND,
         (event) => {
-          const selection = (0, import_lexical4.$getSelection)();
-          if ((0, import_lexical4.$isNodeSelection)(selection) && !$isTargetWithinDecorator(event.target)) {
+          const selection = (0, import_lexical5.$getSelection)();
+          if ((0, import_lexical5.$isNodeSelection)(selection) && !$isTargetWithinDecorator(event.target)) {
             const nodes = selection.getNodes();
             if (nodes.length > 0) {
               event.preventDefault();
@@ -4275,7 +4313,7 @@ function VariableNodeComponent({
               return true;
             }
           }
-          if (!(0, import_lexical4.$isRangeSelection)(selection)) {
+          if (!(0, import_lexical5.$isRangeSelection)(selection)) {
             return false;
           }
           const isHoldingShift = event.shiftKey;
@@ -4286,7 +4324,7 @@ function VariableNodeComponent({
           }
           return false;
         },
-        import_lexical4.COMMAND_PRIORITY_EDITOR
+        import_lexical5.COMMAND_PRIORITY_EDITOR
       )
     );
   }, [clearSelection, editor, isSelected, nodeKey, onDelete, setSelected]);
@@ -4310,8 +4348,8 @@ function VariableNodeComponent({
   );
 }
 function $isTargetWithinDecorator(target) {
-  const node = (0, import_lexical4.$getNearestNodeFromDOMNode)(target);
-  return (0, import_lexical4.$isDecoratorNode)(node);
+  const node = (0, import_lexical5.$getNearestNodeFromDOMNode)(target);
+  return (0, import_lexical5.$isDecoratorNode)(node);
 }
 
 // src/components/Variables/InputVariables.tsx
@@ -4337,19 +4375,19 @@ function EditorRefPlugin({
 // src/components/Variables/composer/PasteTransformerPlugin.tsx
 var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
 var import_utils3 = require("@lexical/utils");
-var import_lexical5 = require("lexical");
+var import_lexical6 = require("lexical");
 var import_react41 = require("react");
 function PasteTransformerPlugin({ transformPaste }) {
   const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
   (0, import_react41.useEffect)(() => {
     return (0, import_utils3.mergeRegister)(
       editor.registerCommand(
-        import_lexical5.PASTE_COMMAND,
+        import_lexical6.PASTE_COMMAND,
         (event) => {
           var _a;
-          const selection = (0, import_lexical5.$getSelection)();
+          const selection = (0, import_lexical6.$getSelection)();
           const pastedText = (_a = event.clipboardData) == null ? void 0 : _a.getData("text/plain");
-          if (pastedText && transformPaste && (0, import_lexical5.$isRangeSelection)(selection)) {
+          if (pastedText && transformPaste && (0, import_lexical6.$isRangeSelection)(selection)) {
             const result = transformPaste(pastedText);
             if (result !== void 0) {
               selection.insertText(result);
@@ -4358,7 +4396,7 @@ function PasteTransformerPlugin({ transformPaste }) {
           }
           return false;
         },
-        import_lexical5.COMMAND_PRIORITY_HIGH
+        import_lexical6.COMMAND_PRIORITY_HIGH
       )
     );
   }, [editor, transformPaste]);
@@ -4387,9 +4425,11 @@ var input = import_react42.css`
   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);
@@ -4453,7 +4493,8 @@ var variableBindButton = import_react43.css`
   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;
 
@@ -4536,23 +4577,9 @@ var inputMultiLine = (lines) => import_react43.css`
 `;
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
+var import_canvas6 = require("@uniformdev/canvas");
 var React10 = __toESM(require("react"));
 var import_react44 = require("react");
-
-// src/components/Variables/util/hasReferencedVariables.ts
-var import_canvas5 = require("@uniformdev/canvas");
-function hasReferencedVariables(value) {
-  let result = false;
-  (0, import_canvas5.parseVariableExpression)(value, (token, type) => {
-    if (type === "variable") {
-      result = true;
-      return false;
-    }
-  });
-  return result;
-}
-
-// src/components/Variables/toolbox/InputVariablesProvider.tsx
 function useInputVariablesState({
   value,
   onChange,
@@ -4563,23 +4590,24 @@ function useInputVariablesState({
   valueToResetTo = void 0,
   menuTooltip,
   id,
-  filterVariable
+  filterVariable,
+  renderMenuInPortal
 }) {
   const { variables } = useVariables(true);
-  const hasVariablesInValue = hasReferencedVariables(value != null ? value : "");
+  const variableReferenceCountInValue = (0, import_canvas6.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 = (0, import_react44.useMemo)(
@@ -4591,7 +4619,8 @@ function useInputVariablesState({
         onChange(valueToResetTo);
       },
       getEditorContext,
-      filterVariable
+      filterVariable,
+      portal: renderMenuInPortal
     }),
     [
       disableResetForReals,
@@ -4600,13 +4629,14 @@ function useInputVariablesState({
       menuTooltip,
       onChange,
       showAddVariableMenuOption,
-      valueToResetTo
+      valueToResetTo,
+      renderMenuInPortal
     ]
   );
   return {
     sharedMenuProps,
     disableVariablesForReals,
-    hasVariablesInValue,
+    hasVariablesInValue: variableReferenceCountInValue > 0,
     hadVariablesInValue: hadVariablesInValueForReals,
     setHadVariablesInValue
   };
@@ -4629,7 +4659,8 @@ var variableBindButton2 = import_react45.css`
   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;
 
@@ -4647,7 +4678,7 @@ var variableBindButton2 = import_react45.css`
 
 // src/components/Variables/toolbox/VariablesComposerVariableMenu.tsx
 var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
-var import_lexical6 = require("lexical");
+var import_lexical7 = require("lexical");
 
 // src/components/Variables/toolbox/SelectVariableMenu.tsx
 var import_BsFillPlusCircleFill = require("@react-icons/all-files/bs/BsFillPlusCircleFill");
@@ -4755,7 +4786,7 @@ function VariablesComposerVariableMenu(props) {
   };
   const onResetVariable = () => {
     var _a;
-    editor.dispatchCommand(import_lexical6.CLEAR_EDITOR_COMMAND, void 0);
+    editor.dispatchCommand(import_lexical7.CLEAR_EDITOR_COMMAND, void 0);
     (_a = props.onResetVariables) == null ? void 0 : _a.call(props);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -4817,50 +4848,18 @@ function DisablePlugin({ disabled }) {
 
 // src/components/Variables/composer/SingleLineTextPlugin.tsx
 var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
-var import_lexical7 = require("lexical");
+var import_lexical8 = require("lexical");
 var import_react48 = require("react");
 function SingleLineTextPlugin() {
   const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
   (0, import_react48.useEffect)(() => {
-    editor.registerNodeTransform(import_lexical7.LineBreakNode, (node) => {
+    editor.registerNodeTransform(import_lexical8.LineBreakNode, (node) => {
       node.remove();
     });
   }, [editor]);
   return null;
 }
 
-// src/components/Variables/util/serializeVariablesEditorState.ts
-var import_canvas6 = require("@uniformdev/canvas");
-var import_lexical8 = require("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 === import_lexical8.TextNode.getType()) {
-    buffer.push(node.text.replace(variablePrefix, "\\${"));
-  }
-  if (node.type === VariableNode.getType()) {
-    buffer.push((0, import_canvas6.createVariableReference)(node.reference));
-  }
-  if (node.type === import_lexical8.LineBreakNode.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
 var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
 function VariablesComposer(props) {
@@ -4889,8 +4888,7 @@ function VariablesComposer(props) {
   );
   const editorState = (0, import_react49.useRef)();
   const updateTimeout = (0, import_react49.useRef)();
-  if (typeof document === "undefined")
-    return null;
+  if (typeof document === "undefined") return null;
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_LexicalComposer.LexicalComposer, { initialConfig: editorConfig, children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       import_LexicalOnChangePlugin.OnChangePlugin,
@@ -5056,7 +5054,8 @@ function InputVariables(props) {
     filterVariable,
     styleVariant = "default",
     renderMenuInPortal,
-    disableDismissEditorOnChange
+    disableDismissEditorOnChange,
+    singleTokenMode
   } = props;
   const [finalId] = (0, import_react52.useState)(id != null ? id : () => (0, import_uuid2.v4)());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
@@ -5121,7 +5120,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
                 }
               )
             ]
@@ -5161,13 +5160,13 @@ function InputVariables(props) {
       showAddVariableMenuOption,
       enableEditingVariables: !disabled && !disableVariablesForReals && enableEditingVariables,
       getEditorContext,
-      disabled,
+      disabled: disabled || singleTokenMode,
       replaceValueOnVariableInsert: useInputWithNoVariables,
       autoFocus,
       filterVariable,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PasteTransformerPlugin, { transformPaste }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ControlledValuePlugin, { value, enabled: useInputWithNoVariables }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ControlledValuePlugin, { value, enabled: singleTokenMode || useInputWithNoVariables }),
         editorRef ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(EditorRefPlugin, { editorRef }) : null,
         body
       ]
@@ -5210,7 +5209,8 @@ function ParameterConnectionIndicator({
   menuOptions,
   disabled,
   menuTooltip = "Insert variable",
-  overrideMenuButtonParentMargin
+  overrideMenuButtonParentMargin,
+  renderMenuInPortal = false
 }) {
   const hasVariablesInValue = (0, import_react53.useMemo)(() => {
     let result = false;
@@ -5224,12 +5224,12 @@ function ParameterConnectionIndicator({
     return result;
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system22.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { css: { flex: 1 }, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { css: { flex: 1, maxWidth: "100%" }, children }),
     disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       import_design_system22.Menu,
       {
         placement: "bottom-start",
-        withoutPortal: true,
+        withoutPortal: !renderMenuInPortal,
         menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "div",
           {
@@ -5343,7 +5343,7 @@ function ParameterOrSingleVariable(props) {
           editorRef ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EditorRefPlugin, { editorRef }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ControlledValuePlugin, { enabled: true, value }),
           /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_design_system23.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { css: { flex: 1 }, children: inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { css: { flex: 1, minWidth: "0" }, children: inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               VariablesComposerInput,
               {
                 "data-text-value": value,
@@ -5462,6 +5462,12 @@ ${prettifyBindExpression(bindExpression)}`
   };
 }
 
+// src/components/Variables/util/hasReferencedVariables.ts
+var import_canvas8 = require("@uniformdev/canvas");
+function hasReferencedVariables2(value) {
+  return (0, import_canvas8.hasReferencedVariables)(value) > 0;
+}
+
 // src/components/Variables/VariablesList.tsx
 var import_react58 = require("@emotion/react");
 var import_design_system25 = require("@uniformdev/design-system");
@@ -6494,12 +6500,12 @@ var DataRefreshButton = ({
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
 var import_react72 = require("@emotion/react");
-var import_canvas9 = require("@uniformdev/canvas");
+var import_canvas10 = require("@uniformdev/canvas");
 var import_design_system38 = require("@uniformdev/design-system");
 var import_react73 = __toESM(require("react"));
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
-var import_canvas8 = require("@uniformdev/canvas");
+var import_canvas9 = require("@uniformdev/canvas");
 var import_react67 = require("react");
 var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
 var ObjectSearchContext = (0, import_react67.createContext)({
@@ -6596,7 +6602,7 @@ function useObjectSearchContext() {
   return (0, import_react67.useContext)(ObjectSearchContext);
 }
 function bindQuery(query, inputs) {
-  const { result, errors } = (0, import_canvas8.bindVariablesToObject)({
+  const { result, errors } = (0, import_canvas9.bindVariablesToObject)({
     value: query,
     variables: inputs,
     errorPrefix: "Dynamic input"
@@ -6769,7 +6775,8 @@ var ButtonStyles = import_react69.css`
   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 {
@@ -7071,7 +7078,7 @@ var ObjectSearchContainer = ({
   const { flatVariables } = useVariables(true);
   const inputValue = (_b = dynamicEntryId != null ? dynamicEntryId : (_a = selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
   const isDynamicEntryIdAvailable = import_react73.default.useMemo(
-    () => Boolean(inputValue && hasReferencedVariables(inputValue)),
+    () => Boolean(inputValue && hasReferencedVariables2(inputValue)),
     [inputValue]
   );
   const listItems = resultList != null ? resultList : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
@@ -7093,7 +7100,7 @@ var ObjectSearchContainer = ({
       onSelectItem([]);
       return;
     }
-    const { result, errors } = (0, import_canvas9.bindVariables)({
+    const { result, errors } = (0, import_canvas10.bindVariables)({
       value: selectedValue,
       variables: flatVariables,
       errorPrefix: "Dynamic input"
@@ -7113,7 +7120,7 @@ var ObjectSearchContainer = ({
         id: selectedValue
       }
     ]);
-    if (hasReferencedVariables(selectedValue)) {
+    if (hasReferencedVariables2(selectedValue)) {
       onSetQuery({ ...query, dynamicEntryId: selectedValue });
     }
   };
@@ -7167,7 +7174,7 @@ function createLocationValidator(setValue, validate) {
 }
 
 // src/utils/useContentDataResourceLocaleInfo.ts
-var import_canvas10 = require("@uniformdev/canvas");
+var import_canvas11 = require("@uniformdev/canvas");
 var import_react74 = require("react");
 function useContentDataResourceLocaleInfo({
   locale,
@@ -7178,11 +7185,11 @@ function useContentDataResourceLocaleInfo({
   const setLocaleRef = (0, import_react74.useRef)(setLocale);
   setLocaleRef.current = setLocale;
   const { flatVariables } = useVariables();
-  const effectiveLocale = locale != null ? locale : dynamicInputs[import_canvas10.LOCALE_DYNAMIC_INPUT_NAME] ? (0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME) : "";
-  const boundLocale = (_a = (0, import_canvas10.bindVariables)({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
+  const effectiveLocale = locale != null ? locale : dynamicInputs[import_canvas11.LOCALE_DYNAMIC_INPUT_NAME] ? (0, import_canvas11.createVariableReference)(import_canvas11.LOCALE_DYNAMIC_INPUT_NAME) : "";
+  const boundLocale = (_a = (0, import_canvas11.bindVariables)({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
   (0, import_react74.useEffect)(() => {
     if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
-      setLocaleRef.current((0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME));
+      setLocaleRef.current((0, import_canvas11.createVariableReference)(import_canvas11.LOCALE_DYNAMIC_INPUT_NAME));
     }
   }, [locale, effectiveLocale]);
   return { effectiveLocale, boundLocale: boundLocale ? boundLocale : void 0 };
@@ -7542,13 +7549,15 @@ var ControlledObjectSearchProvider = ({
   );
   const onSelectItem = (0, import_react78.useCallback)(
     (selectedResult) => {
-      var _a2;
+      var _a2, _b2;
       if (Array.isArray(selectedResult)) {
         innerSelectedItems.current = selectedResult;
         onSelectItemsChange(selectedResult);
       } else {
-        const itemIsAlreadySelected = selectedItems == null ? void 0 : selectedItems.some((item) => item.id === selectedResult.id);
-        const updatedSelectedItems = itemIsAlreadySelected ? (_a2 = selectedItems == null ? void 0 : selectedItems.filter((item) => item.id !== selectedResult.id)) != null ? _a2 : [] : [...selectedItems != null ? selectedItems : [], selectedResult];
+        const itemIsAlreadySelected = (_a2 = selectedItems != null ? selectedItems : innerSelectedItems.current) == null ? void 0 : _a2.some(
+          (item) => item.id === selectedResult.id
+        );
+        const updatedSelectedItems = itemIsAlreadySelected ? (_b2 = selectedItems == null ? void 0 : selectedItems.filter((item) => item.id !== selectedResult.id)) != null ? _b2 : [] : [...selectedItems != null ? selectedItems : [], selectedResult];
         innerSelectedItems.current = updatedSelectedItems;
         onSelectItemsChange(updatedSelectedItems);
       }
@@ -7561,6 +7570,13 @@ var ControlledObjectSearchProvider = ({
   }, [onSelectItemsChange]);
   const list = (0, import_react78.useMemo)(() => ({ items: searchResultItems }), [searchResultItems]);
   const boundQuery = (0, import_react78.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
+  const flatLocaleOptions = (0, import_react78.useMemo)(
+    () => {
+      var _a2;
+      return (_a2 = localeOptions == null ? void 0 : localeOptions.flatMap((option) => "type" in option && option.type === "group" ? option.options : option).filter((v) => !Array.isArray(v))) != null ? _a2 : [];
+    },
+    [localeOptions]
+  );
   const isLoadingInitially = Boolean(
     isManualSelection ? !((_a = innerSelectedItems.current) == null ? void 0 : _a.length) && selectedItemsLoading : selectedItemsLoading
   );
@@ -7578,7 +7594,7 @@ var ControlledObjectSearchProvider = ({
         isSelectedItemsListLoading: isLoadingInitially,
         isListLoading: searchResultListLoading,
         isMulti,
-        localeOptions,
+        localeOptions: flatLocaleOptions,
         enableFilterByLocale,
         dynamicEntryId
       },
@@ -7644,669 +7660,868 @@ 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 not",
-    value: "sys-date-neq",
-    editorType: "date"
+    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",
+    expectedValueType: "array"
+  },
+  {
+    label: "is not",
+    value: "neq",
+    editorType: "singleChoice",
+    expectedValueType: "single"
+  },
+  {
+    label: "is none of...",
+    value: "nin",
+    editorType: "multiChoice",
+    expectedValueType: "array"
+  }
+];
+var OPTIONAL_SYSTEM_FIELD_OPERATORS = [
+  {
+    label: "is",
+    value: "eq",
+    editorType: "singleChoice",
+    expectedValueType: "single"
   },
   {
     label: "is any of...",
     value: "in",
-    editorType: "multiChoice"
+    editorType: "multiChoice",
+    expectedValueType: "array"
+  },
+  {
+    label: "is empty",
+    value: "ndef",
+    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",
+    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"
   }
 ];
 
-// src/components/SearchAndFilter/FilterButton.tsx
-var import_design_system43 = require("@uniformdev/design-system");
-
-// src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
-var import_react80 = require("@emotion/react");
+// src/components/SearchAndFilter/editors/DateEditor.tsx
 var import_design_system42 = require("@uniformdev/design-system");
-var SearchAndFilterControlsWrapper = (gridColumns) => import_react80.css`
-  align-items: stretch;
-  display: grid;
-  grid-template-columns: ${gridColumns};
-  gap: var(--spacing-sm);
-`;
-var SearchAndFilterOutterControlWrapper = (gridColumns) => import_react80.css`
-  align-items: stretch;
-  display: grid;
-  grid-template-columns: ${gridColumns};
-  gap: var(--spacing-sm);
-`;
-var ConditionalFilterRow = import_react80.css`
-  display: grid;
-  grid-template-columns: 35px 1fr;
-  gap: var(--spacing-sm);
-  margin-left: var(--spacing-base);
-
-  ${(0, import_design_system42.cq)("380px")} {
-    align-items: center;
-
-    &:after {
-      content: '';
-      display: block;
-      height: 1px;
-      background: var(--gray-300);
-      width: calc(100% - var(--spacing-base));
-      margin-left: var(--spacing-base);
-    }
-    &:last-of-type:after {
-      display: none;
+var import_react80 = require("react");
+var import_react_use6 = require("react-use");
+var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
+var DateEditor = ({
+  onChange,
+  ariaLabel,
+  disabled,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [innerValue, setInnerValue] = (0, import_react80.useState)(value != null ? value : "");
+  (0, import_react_use6.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    import_design_system42.Input,
+    {
+      type: "date",
+      label: ariaLabel,
+      showLabel: false,
+      onChange: (e) => setInnerValue(e.currentTarget.value),
+      disabled,
+      value: innerValue,
+      readOnly,
+      "data-testid": valueTestId
     }
-  }
+  );
+};
 
-  &:nth-of-type(2) {
-    margin-left: 0;
-    grid-template-columns: 50px 1fr;
-  }
+// src/components/SearchAndFilter/editors/DateRangeEditor.tsx
+var import_design_system44 = require("@uniformdev/design-system");
+var import_react81 = require("react");
+var import_react_use7 = require("react-use");
 
-  ${(0, import_design_system42.cq)("580px")} {
-    &:after {
-      display: none;
+// src/components/SearchAndFilter/editors/shared/ErrorContainer.tsx
+var import_design_system43 = require("@uniformdev/design-system");
+var import_jsx_runtime72 = require("@emotion/react/jsx-runtime");
+var ErrorContainer = ({ errorMessage }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    "div",
+    {
+      css: {
+        gridColumn: "span 6",
+        order: 6
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_design_system43.FieldMessage, { errorMessage })
     }
-  }
+  );
+};
 
-  @media (prefers-reduced-motion: no-preference) {
-    animation: ${import_design_system42.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
-  }
-`;
-var ConditionalInputRow = import_react80.css`
-  display: flex;
-  gap: var(--spacing-sm);
-  flex-wrap: wrap;
+// src/components/SearchAndFilter/editors/shared/twoColumnGrid.tsx
+var twoColumnGrid = {
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: "var(--spacing-sm);"
+};
 
-  ${(0, import_design_system42.cq)("380px")} {
-    & > div:nth-child(-n + 2) {
-      width: calc(50% - var(--spacing-sm));
+// src/components/SearchAndFilter/editors/DateRangeEditor.tsx
+var import_jsx_runtime73 = require("@emotion/react/jsx-runtime");
+var DateRangeEditor = ({
+  ariaLabel,
+  onChange,
+  disabled,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [minDateValue, setMinDateValue] = (0, import_react81.useState)(value ? value[0] : "");
+  const [maxDateValue, setMaxDateValue] = (0, import_react81.useState)(value ? value[1] : "");
+  const [error, setError] = (0, import_react81.useState)("");
+  (0, import_react_use7.useDebounce)(
+    () => {
+      if (minDateValue && maxDateValue && !error) {
+        onChange([minDateValue, maxDateValue]);
+      } else {
+        onChange([]);
+      }
+    },
+    500,
+    [minDateValue, maxDateValue]
+  );
+  (0, import_react81.useEffect)(() => {
+    if (!minDateValue || !maxDateValue) {
+      return;
     }
-
-    & > div:nth-child(n + 3) {
-      width: calc(100% - 48px);
+    const minDate = new Date(minDateValue);
+    const maxDate = new Date(maxDateValue);
+    if (maxDate < minDate) {
+      setError("The max date cannot be lower than the min date");
+      return;
     }
-  }
-  ${(0, import_design_system42.cq)("764px")} {
-    display: grid;
-    grid-template-columns: 200px 160px 1fr 32px;
-
-    & > div:nth-child(n) {
-      width: auto;
+    if (maxDate && !minDate) {
+      setError("Please enter both a low and high date");
+      return;
     }
-  }
-`;
-var SearchInput = import_react80.css`
-  max-height: 40px;
-  min-height: unset;
-`;
-var BindableKeywordSearchInputStyles = import_react80.css`
-  position: relative;
-  width: 100%;
+    const minDateString = minDate.toDateString();
+    const maxDateString = maxDate.toDateString();
+    if (minDateString === maxDateString || maxDateString === minDateString) {
+      setError("The min and max date cannot be the same");
+      return;
+    }
+    if (minDate > maxDate) {
+      setError("The min date cannot be higher than the max date");
+      return;
+    }
+    if (error) {
+      setError("");
+    }
+    if (minDate && maxDate) {
+      setMinDateValue(minDateValue);
+      setMaxDateValue(maxDateValue);
+    } else {
+      setMinDateValue("");
+      setMaxDateValue("");
+    }
+  }, [minDateValue, maxDateValue, setError]);
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        import_design_system44.Input,
+        {
+          label: `${ariaLabel}-min-date`,
+          type: "date",
+          showLabel: false,
+          value: minDateValue,
+          onChange: (e) => setMinDateValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled,
+          readOnly,
+          "data-testid": "value-low"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        import_design_system44.Input,
+        {
+          label: `${ariaLabel}-max-date`,
+          type: "date",
+          showLabel: false,
+          value: maxDateValue,
+          onChange: (e) => setMaxDateValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled,
+          readOnly,
+          "data-testid": "value-high"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ErrorContainer, { errorMessage: error })
+  ] });
+};
 
-  & [data-lexical-editor='true'] {
-    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
-    font-size: var(--fs-sm);
-    border-radius: var(--rounded-full);
-    max-height: 40px;
-    min-height: unset;
-    width: 100%;
-    position: relative;
-    white-space: nowrap;
-  }
-`;
-var ClearSearchButtonContainer = import_react80.css`
-  align-items: center;
-  display: flex;
-  position: absolute;
-  inset: 0 var(--spacing-lg) 0 auto;
-`;
-var ClearSearchButtonStyles = import_react80.css`
-  background: none;
-  border: none;
-  padding: 0;
-  pointer-events: all;
-`;
-var FilterButton = import_react80.css`
-  align-items: center;
-  background: var(--white);
-  border: 1px solid var(--gray-300);
-  border-radius: var(--rounded-full);
-  color: var(--typography-base);
-  display: flex;
-  font-size: var(--fs-sm);
-  gap: var(--spacing-sm);
-  padding: var(--spacing-sm) var(--spacing-base);
-  max-height: 40px;
-  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);
+// src/components/SearchAndFilter/editors/FilterMultiChoiceEditor.tsx
+var import_design_system45 = require("@uniformdev/design-system");
+var import_react82 = require("react");
 
-  svg {
-    color: var(--gray-300);
-    transition: color var(--duration-fast) var(--timing-ease-out);
-  }
+// src/components/SearchAndFilter/editors/shared/readOnlyAttributes.tsx
+var readOnlyAttributes = {
+  isSearchable: false,
+  menuIsOpen: false,
+  isClearable: false
+};
 
-  &:hover,
-  :where([aria-expanded='true']) {
-    outline: none;
-    background: var(--gray-200);
-    border-color: var(--gray-300);
+// src/components/SearchAndFilter/editors/FilterMultiChoiceEditor.tsx
+var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
+var FilterMultiChoiceEditor = ({
+  value,
+  options,
+  disabled,
+  readOnly,
+  valueTestId,
+  ...props
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  const isClearable = !readOnly || !disabled;
+  const { groupedOptions, selectedOptions } = (0, import_react82.useMemo)(
+    () => (0, import_design_system45.convertComboBoxGroupsToSelectableGroups)({ options: options != null ? options : [], selectedItems: new Set(value) }),
+    [options, value]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    import_design_system45.InputComboBox,
+    {
+      ...props,
+      placeholder: "Type to search...",
+      options: groupedOptions,
+      isMulti: true,
+      isClearable,
+      isDisabled: disabled,
+      onChange: (e) => {
+        const selectedValues = (0, import_design_system45.getComboBoxSelectedSelectableGroups)(e);
+        return props.onChange([...selectedValues]);
+      },
+      value: selectedOptions,
+      "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
 
-    svg {
-      color: var(--typography-base);
+// src/components/SearchAndFilter/editors/FilterSingleChoiceEditor.tsx
+var import_design_system46 = require("@uniformdev/design-system");
+var import_react83 = require("react");
+var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
+var FilterSingleChoiceEditor = ({
+  options,
+  value,
+  disabled,
+  readOnly,
+  onChange,
+  valueTestId
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  const { groupedOptions, selectedOptions } = (0, import_react83.useMemo)(
+    () => (0, import_design_system46.convertComboBoxGroupsToSelectableGroups)({
+      options: options != null ? options : [],
+      selectedItems: new Set(value ? [value] : void 0),
+      selectionMode: "single"
+    }),
+    [options, value]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    import_design_system46.InputComboBox,
+    {
+      placeholder: "Type to search...",
+      options: groupedOptions,
+      isClearable: true,
+      onChange: (e) => {
+        if (Array.isArray(e == null ? void 0 : e.value)) {
+          return;
+        }
+        return onChange(e == null ? void 0 : e.value);
+      },
+      isDisabled: disabled,
+      value: selectedOptions,
+      "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
     }
-  }
+  ) });
+};
 
-  &:disabled {
-    opacity: var(--opacity-50);
-  }
-`;
-var FilterButtonText = import_react80.css`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 14ch;
-`;
-var FilterButtonSelected = import_react80.css`
-  background: var(--gray-100);
-  border-color: var(--gray-300);
-
-  svg {
-    color: var(--accent-dark);
-  }
-`;
-var FilterButtonWithOptions = import_react80.css`
-  :where([aria-expanded='true']) {
-    background: var(--purple-rain-100);
-    border-color: var(--accent-light);
-    color: var(--typography-base);
-    box-shadow: var(--elevation-100);
-
-    svg {
-      color: var(--accent-dark);
-    }
-  }
-`;
-var SearchIcon = import_react80.css`
-  color: var(--icon-color);
-  position: absolute;
-  inset: 0 var(--spacing-base) 0 auto;
-  margin: auto;
-  transition: color var(--duration-fast) var(--timing-ease-out);
-`;
-var AddConditionalBtn = import_react80.css`
-  align-items: center;
-  background: transparent;
-  border: none;
-  color: var(--primary-action-default);
-  display: flex;
-  gap: var(--spacing-sm);
-  transition: color var(--duration-fast) var(--timing-ease-out);
-  padding: 0;
-
-  &:hover,
-  &:focus {
-    color: var(--primary-action-hover);
-  }
-
-  &:disabled {
-    color: var(--gray-400);
-  }
-`;
-var Title = import_react80.css`
-  color: var(--typography-light);
-
-  &:focus {
-    outline: none;
-  }
-`;
-var ResetConditionsBtn = import_react80.css`
-  background: transparent;
-  border: none;
-  color: var(--action-destructive-default);
-  transition: color var(--duration-fast) var(--timing-ease-out);
-  padding: 0;
-
-  &:hover,
-  &:focus {
-    color: var(--action-destructive-hover);
-  }
-`;
-var IconBtn = import_react80.css`
-  background: transparent;
-  border: none;
-  padding: var(--spacing-sm);
-`;
-var SearchAndFilterOptionsContainer = import_react80.css`
-  background: var(--gray-50);
-  border: 1px solid var(--gray-300);
-  border-radius: var(--rounded-base);
-  container-type: inline-size;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  padding: var(--spacing-md) 0 var(--spacing-base);
-  will-change: height;
-  position: relative;
-  z-index: 1;
-`;
-var SearchAndFilterOptionsInnerContainer = import_react80.css`
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  padding-inline: var(--spacing-md);
-`;
-var SearchAndFilterButtonGroup = import_react80.css`
-  margin-top: var(--spacing-xs);
-  margin-left: calc(56px + var(--spacing-md));
-`;
-
-// src/components/SearchAndFilter/FilterButton.tsx
-var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
-var FilterButton2 = ({
-  text = "Filters",
-  icon = "filter-add",
-  filterCount,
-  hasSelectedValue,
-  dataTestId,
-  ...props
+// src/components/SearchAndFilter/editors/NumberEditor.tsx
+var import_design_system47 = require("@uniformdev/design-system");
+var import_react84 = require("react");
+var import_react_use8 = require("react-use");
+var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
+var NumberEditor = ({
+  ariaLabel,
+  onChange,
+  disabled,
+  value,
+  readOnly,
+  valueTestId
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
-    "button",
+  const [innerValue, setInnerValue] = (0, import_react84.useState)(value != null ? value : "");
+  (0, import_react_use8.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    import_design_system47.Input,
     {
-      type: "button",
-      css: [
-        FilterButton,
-        hasSelectedValue ? FilterButtonSelected : void 0,
-        filterCount ? [FilterButtonWithOptions, FilterButtonSelected] : void 0
-      ],
-      ...props,
-      "data-testid": dataTestId,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_design_system43.Icon, { icon, iconColor: "currentColor", size: "1rem" }),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { css: FilterButtonText, children: text }),
-        filterCount ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_design_system43.Counter, { count: filterCount, bgColor: "var(--white)" }) : null
-      ]
+      label: ariaLabel,
+      type: "number",
+      showLabel: false,
+      min: 0,
+      onChange: (e) => setInnerValue(e.currentTarget.value),
+      disabled,
+      value: innerValue,
+      readOnly,
+      "data-testid": valueTestId
     }
   );
 };
 
-// src/components/SearchAndFilter/FilterControls.tsx
-var import_CgClose5 = require("@react-icons/all-files/cg/CgClose");
-var import_design_system46 = require("@uniformdev/design-system");
-var import_lexical11 = require("lexical");
-var import_react83 = require("react");
-var import_react_use7 = require("react-use");
-var import_uuid3 = require("uuid");
+// src/components/SearchAndFilter/editors/NumberRangeEditor.tsx
+var import_design_system48 = require("@uniformdev/design-system");
+var import_react85 = require("react");
+var import_react_use9 = require("react-use");
+var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
+var NumberRangeEditor = ({
+  onChange,
+  disabled,
+  ariaLabel,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [minValue, setMinValue] = (0, import_react85.useState)("");
+  const [maxValue, setMaxValue] = (0, import_react85.useState)("");
+  const [error, setError] = (0, import_react85.useState)("");
+  (0, import_react_use9.useDebounce)(
+    () => {
+      if (minValue && maxValue && !error) {
+        onChange([minValue, maxValue]);
+      } else {
+        onChange([]);
+      }
+    },
+    500,
+    [minValue, maxValue]
+  );
+  (0, import_react85.useEffect)(() => {
+    if (!maxValue && !minValue) {
+      return;
+    }
+    const max = Number(maxValue);
+    const min = Number(minValue);
+    if (max < min || min > max) {
+      setError("Please enter a valid numeric range");
+      return;
+    }
+    if (maxValue && !minValue || minValue && !maxValue) {
+      setError("Please enter both a low and high number");
+      return;
+    }
+    if (error) {
+      setError("");
+    }
+    if (min && max) {
+      setMinValue(minValue);
+      setMaxValue(maxValue);
+    }
+  }, [maxValue, minValue, setError]);
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        import_design_system48.Input,
+        {
+          label: `${ariaLabel}-min`,
+          type: "number",
+          showLabel: false,
+          min: 0,
+          placeholder: "Low",
+          onChange: (e) => setMinValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled,
+          value: value ? value[0] : "",
+          readOnly,
+          "data-testid": "value-low"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        import_design_system48.Input,
+        {
+          type: "number",
+          label: `${ariaLabel}-max`,
+          showLabel: false,
+          min: 0,
+          placeholder: "High",
+          onChange: (e) => setMaxValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled,
+          value: value ? value[1] : "",
+          readOnly,
+          "data-testid": "value-high"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ErrorContainer, { errorMessage: error })
+  ] });
+};
 
-// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
-var import_design_system45 = require("@uniformdev/design-system");
-var import_react82 = require("react");
+// src/components/SearchAndFilter/editors/StatusMultiEditor.tsx
+var import_design_system50 = require("@uniformdev/design-system");
+var import_react86 = require("react");
 
-// src/components/SearchAndFilter/FilterEditor.tsx
-var import_design_system44 = require("@uniformdev/design-system");
-var import_react81 = require("react");
-var import_react_use6 = require("react-use");
-var import_jsx_runtime72 = require("@emotion/react/jsx-runtime");
-var readOnlyAttributes = {
-  isSearchable: false,
-  menuIsOpen: false,
-  isClearable: false
+// src/components/SearchAndFilter/editors/shared/CustomOptions.tsx
+var import_design_system49 = require("@uniformdev/design-system");
+var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
+var CustomOptions = ({ label, value }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    import_design_system49.StatusBullet,
+    {
+      status: label,
+      message: Array.isArray(value) ? value.join(",") : value
+    }
+  );
 };
-var FilterMultiChoiceEditor = ({
-  value,
+
+// src/components/SearchAndFilter/editors/StatusMultiEditor.tsx
+var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
+var StatusMultiEditor = ({
   options,
+  value,
   disabled,
   readOnly,
-  valueTestId,
-  ...props
+  onChange,
+  valueTestId
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  const isClearable = !readOnly || !disabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-    import_design_system44.InputComboBox,
+  const { groupedOptions, selectedOptions } = (0, import_react86.useMemo)(
+    () => (0, import_design_system50.convertComboBoxGroupsToSelectableGroups)({ options: options != null ? options : [], selectedItems: new Set(value) }),
+    [options, value]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    import_design_system50.InputComboBox,
     {
-      ...props,
-      placeholder: "Type to search...",
-      options,
+      options: groupedOptions != null ? groupedOptions : [],
       isMulti: true,
-      isClearable,
-      isDisabled: disabled,
       onChange: (e) => {
-        var _a;
-        return props.onChange((_a = e == null ? void 0 : e.map((option) => option.value)) != null ? _a : []);
+        const selectedValues = (0, import_design_system50.getComboBoxSelectedSelectableGroups)(e);
+        return onChange([...selectedValues]);
       },
-      value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
+      formatOptionLabel: CustomOptions,
       "aria-readonly": readOnly,
+      value: selectedOptions,
+      isDisabled: disabled,
       styles: {
         menu(base) {
           return {
@@ -8319,7 +8534,12 @@ var FilterMultiChoiceEditor = ({
     }
   ) });
 };
-var FilterSingleChoiceEditor = ({
+
+// src/components/SearchAndFilter/editors/StatusSingleEditor.tsx
+var import_design_system51 = require("@uniformdev/design-system");
+var import_react87 = require("react");
+var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
+var StatusSingleEditor = ({
   options,
   value,
   disabled,
@@ -8327,90 +8547,28 @@ var FilterSingleChoiceEditor = ({
   onChange,
   valueTestId
 }) => {
-  var _a;
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-    import_design_system44.InputComboBox,
-    {
-      placeholder: "Type to search...",
-      options,
-      isClearable: true,
-      onChange: (e) => {
-        var _a2;
-        return onChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
-      },
-      isDisabled: disabled,
-      value: (_a = options == null ? void 0 : options.find((option) => option.value === value)) != null ? _a : null,
-      "aria-readonly": readOnly,
-      styles: {
-        menu(base) {
-          return {
-            ...base,
-            minWidth: "max-content"
-          };
-        }
-      },
-      ...readOnlyProps
-    }
-  ) });
-};
-var CustomOptions = ({ label, value }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_design_system44.StatusBullet, { status: label, message: value });
-};
-var StatusMultiEditor = ({
-  options,
-  value,
-  disabled,
-  readOnly,
-  onChange,
-  valueTestId
-}) => {
-  const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-    import_design_system44.InputComboBox,
+  const { groupedOptions, selectedOptions } = (0, import_react87.useMemo)(
+    () => (0, import_design_system51.convertComboBoxGroupsToSelectableGroups)({
+      options: options != null ? options : [],
+      selectedItems: new Set(value ? [value] : void 0),
+      selectionMode: "single"
+    }),
+    [options, value]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    import_design_system51.InputComboBox,
     {
-      options,
-      isMulti: true,
+      options: groupedOptions,
       onChange: (e) => {
-        var _a;
-        return onChange((_a = e.map((item) => item.value)) != null ? _a : []);
-      },
-      formatOptionLabel: CustomOptions,
-      "aria-readonly": readOnly,
-      value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
-      isDisabled: disabled,
-      styles: {
-        menu(base) {
-          return {
-            ...base,
-            minWidth: "max-content"
-          };
+        if (Array.isArray(e == null ? void 0 : e.value)) {
+          return;
         }
-      },
-      ...readOnlyProps
-    }
-  ) });
-};
-var StatusSingleEditor = ({
-  options,
-  value,
-  disabled,
-  readOnly,
-  onChange,
-  valueTestId
-}) => {
-  const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-    import_design_system44.InputComboBox,
-    {
-      options,
-      onChange: (e) => {
-        var _a;
-        return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+        return onChange(e == null ? void 0 : e.value);
       },
       formatOptionLabel: CustomOptions,
       "aria-readonly": readOnly,
-      value: options == null ? void 0 : options.find((option) => option.value === value),
+      value: selectedOptions,
       isDisabled: disabled,
       styles: {
         menu(base) {
@@ -8424,6 +8582,12 @@ var StatusSingleEditor = ({
     }
   ) });
 };
+
+// src/components/SearchAndFilter/editors/TextEditor.tsx
+var import_design_system52 = require("@uniformdev/design-system");
+var import_react88 = require("react");
+var import_react_use10 = require("react-use");
+var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
 var TextEditor = ({
   onChange,
   ariaLabel,
@@ -8431,10 +8595,10 @@ var TextEditor = ({
   readOnly,
   valueTestId
 }) => {
-  const [innerValue, setInnerValue] = (0, import_react81.useState)(value != null ? value : "");
-  (0, import_react_use6.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-    import_design_system44.Input,
+  const [innerValue, setInnerValue] = (0, import_react88.useState)(value != null ? value : "");
+  (0, import_react_use10.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+    import_design_system52.Input,
     {
       showLabel: false,
       label: ariaLabel,
@@ -8446,238 +8610,357 @@ var TextEditor = ({
     }
   );
 };
-var NumberRangeEditor = ({
-  onChange,
-  disabled,
-  ariaLabel,
+
+// src/components/SearchAndFilter/editors/TextMultiChoiceEditor.tsx
+var import_design_system53 = require("@uniformdev/design-system");
+var import_react89 = require("react");
+var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
+var TextMultiChoiceEditor = ({
   value,
-  readOnly,
-  valueTestId
-}) => {
-  const [minValue, setMinValue] = (0, import_react81.useState)("");
-  const [maxValue, setMaxValue] = (0, import_react81.useState)("");
-  const [error, setError] = (0, import_react81.useState)("");
-  (0, import_react_use6.useDebounce)(
-    () => {
-      if (minValue && maxValue && !error) {
-        onChange([minValue, maxValue]);
-      } else {
-        onChange([]);
-      }
-    },
-    500,
-    [minValue, maxValue]
-  );
-  (0, import_react81.useEffect)(() => {
-    if (!maxValue && !minValue) {
-      return;
-    }
-    const max = Number(maxValue);
-    const min = Number(minValue);
-    if (max < min || min > max) {
-      setError("Please enter a valid numeric range");
-      return;
-    }
-    if (maxValue && !minValue || minValue && !maxValue) {
-      setError("Please enter both a low and high number");
-      return;
-    }
-    if (error) {
-      setError("");
-    }
-    if (min && max) {
-      setMinValue(minValue);
-      setMaxValue(maxValue);
-    }
-  }, [maxValue, minValue, setError]);
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-        import_design_system44.Input,
-        {
-          label: `${ariaLabel}-min`,
-          type: "number",
-          showLabel: false,
-          min: 0,
-          placeholder: "Low",
-          onChange: (e) => setMinValue(e.currentTarget.value),
-          "aria-invalid": !error ? false : true,
-          disabled,
-          value: value ? value[0] : "",
-          readOnly,
-          "data-testid": "value-low"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-        import_design_system44.Input,
-        {
-          type: "number",
-          label: `${ariaLabel}-max`,
-          showLabel: false,
-          min: 0,
-          placeholder: "High",
-          onChange: (e) => setMaxValue(e.currentTarget.value),
-          "aria-invalid": !error ? false : true,
-          disabled,
-          value: value ? value[1] : "",
-          readOnly,
-          "data-testid": "value-high"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ErrorContainer, { errorMessage: error })
-  ] });
-};
-var NumberEditor = ({
-  ariaLabel,
-  onChange,
   disabled,
-  value,
   readOnly,
-  valueTestId
+  valueTestId,
+  ...props
 }) => {
-  const [innerValue, setInnerValue] = (0, import_react81.useState)(value != null ? value : "");
-  (0, import_react_use6.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-    import_design_system44.Input,
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  const isClearable = !readOnly || !disabled;
+  const { groupedOptions, selectedOptions } = (0, import_react89.useMemo)(() => {
+    var _a;
+    const coercedValue = typeof value === "string" ? [value] : value != null ? value : [];
+    const options = (_a = coercedValue.map((v) => ({ label: v, value: v }))) != null ? _a : [];
+    return (0, import_design_system53.convertComboBoxGroupsToSelectableGroups)({ options, selectedItems: new Set(value) });
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    import_design_system53.InputCreatableComboBox,
     {
-      label: ariaLabel,
-      type: "number",
-      showLabel: false,
-      min: 0,
-      onChange: (e) => setInnerValue(e.currentTarget.value),
-      disabled,
-      value: innerValue,
-      readOnly,
-      "data-testid": valueTestId
+      ...props,
+      placeholder: "Type a value\u2026",
+      noOptionsMessage: () => "Type to create a new value",
+      options: groupedOptions,
+      isMulti: true,
+      isClearable,
+      isDisabled: disabled,
+      onChange: (e) => {
+        const selectedValues = (0, import_design_system53.getComboBoxSelectedSelectableGroups)(e);
+        return props.onChange([...selectedValues]);
+      },
+      value: selectedOptions,
+      "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
     }
-  );
+  ) });
 };
-var DateEditor = ({
-  onChange,
-  ariaLabel,
-  disabled,
-  value,
-  readOnly,
-  valueTestId
-}) => {
-  const [innerValue, setInnerValue] = (0, import_react81.useState)(value != null ? value : "");
-  (0, import_react_use6.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-    import_design_system44.Input,
-    {
-      type: "date",
-      label: ariaLabel,
-      showLabel: false,
-      onChange: (e) => setInnerValue(e.currentTarget.value),
-      disabled,
-      value: innerValue,
-      readOnly,
-      "data-testid": valueTestId
+
+// src/components/SearchAndFilter/FilterButton.tsx
+var import_design_system55 = require("@uniformdev/design-system");
+
+// src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
+var import_react90 = require("@emotion/react");
+var import_design_system54 = require("@uniformdev/design-system");
+var SearchAndFilterControlsWrapper = (gridColumns) => import_react90.css`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: ${gridColumns};
+  gap: var(--spacing-sm);
+`;
+var SearchAndFilterOutterControlWrapper = (gridColumns) => import_react90.css`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: ${gridColumns};
+  gap: var(--spacing-sm);
+`;
+var ConditionalFilterRow = import_react90.css`
+  align-items: baseline;
+  display: grid;
+  grid-template-columns: 35px 1fr;
+  gap: var(--spacing-sm);
+  margin-left: var(--spacing-base);
+
+  ${(0, import_design_system54.cq)("380px")} {
+    &:after {
+      content: '';
+      display: block;
+      height: 1px;
+      background: var(--gray-300);
+      width: calc(100% - var(--spacing-base));
+      margin-left: var(--spacing-base);
     }
-  );
-};
-var DateRangeEditor = ({
-  ariaLabel,
-  onChange,
-  disabled,
-  value,
-  readOnly,
-  valueTestId
-}) => {
-  const [minDateValue, setMinDateValue] = (0, import_react81.useState)(value ? value[0] : "");
-  const [maxDateValue, setMaxDateValue] = (0, import_react81.useState)(value ? value[1] : "");
-  const [error, setError] = (0, import_react81.useState)("");
-  (0, import_react_use6.useDebounce)(
-    () => {
-      if (minDateValue && maxDateValue && !error) {
-        onChange([minDateValue, maxDateValue]);
-      } else {
-        onChange([]);
-      }
-    },
-    500,
-    [minDateValue, maxDateValue]
-  );
-  (0, import_react81.useEffect)(() => {
-    if (!minDateValue || !maxDateValue) {
-      return;
+    &:last-of-type:after {
+      display: none;
     }
-    const minDate = new Date(minDateValue);
-    const maxDate = new Date(maxDateValue);
-    if (maxDate < minDate) {
-      setError("The max date cannot be lower than the min date");
-      return;
+  }
+
+  &:nth-of-type(2) {
+    margin-left: 0;
+    grid-template-columns: 50px 1fr;
+  }
+
+  ${(0, import_design_system54.cq)("580px")} {
+    &:after {
+      display: none;
     }
-    if (maxDate && !minDate) {
-      setError("Please enter both a low and high date");
-      return;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${import_design_system54.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
+  }
+`;
+var ConditionalInputRow = import_react90.css`
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+
+  ${(0, import_design_system54.cq)("380px")} {
+    & > div:nth-child(-n + 2) {
+      width: calc(50% - var(--spacing-sm));
     }
-    const minDateString = minDate.toDateString();
-    const maxDateString = maxDate.toDateString();
-    if (minDateString === maxDateString || maxDateString === minDateString) {
-      setError("The min and max date cannot be the same");
-      return;
+
+    & > div:nth-child(n + 3) {
+      width: calc(100% - 48px);
     }
-    if (minDate > maxDate) {
-      setError("The min date cannot be higher than the max date");
-      return;
+  }
+  ${(0, import_design_system54.cq)("764px")} {
+    align-items: flex-start;
+    display: grid;
+    grid-template-columns: 250px 160px 1fr 32px;
+
+    & > div:nth-child(n) {
+      width: auto;
     }
-    if (error) {
-      setError("");
+  }
+`;
+var SearchInput = import_react90.css`
+  max-height: 40px;
+  min-height: unset;
+`;
+var BindableKeywordSearchInputStyles = import_react90.css`
+  position: relative;
+  width: 100%;
+
+  & [data-lexical-editor='true'] {
+    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
+    font-size: var(--fs-sm);
+    border-radius: var(--rounded-full);
+    max-height: 40px;
+    min-height: unset;
+    width: 100%;
+    position: relative;
+    white-space: nowrap;
+  }
+`;
+var ClearSearchButtonContainer = import_react90.css`
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0 var(--spacing-lg) 0 auto;
+`;
+var ClearSearchButtonStyles = import_react90.css`
+  background: none;
+  border: none;
+  padding: 0;
+  pointer-events: all;
+`;
+var FilterButton = import_react90.css`
+  align-items: center;
+  background: var(--white);
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-full);
+  color: var(--typography-base);
+  display: flex;
+  font-size: var(--fs-sm);
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-base);
+  max-height: 40px;
+  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);
+
+  svg {
+    color: var(--gray-300);
+    transition: color var(--duration-fast) var(--timing-ease-out);
+  }
+
+  &:hover,
+  :where([aria-expanded='true']) {
+    outline: none;
+    background: var(--gray-200);
+    border-color: var(--gray-300);
+
+    svg {
+      color: var(--typography-base);
     }
-    if (minDate && maxDate) {
-      setMinDateValue(minDateValue);
-      setMaxDateValue(maxDateValue);
-    } else {
-      setMinDateValue("");
-      setMaxDateValue("");
+  }
+
+  &:disabled {
+    opacity: var(--opacity-50);
+  }
+`;
+var FilterButtonText = import_react90.css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 14ch;
+`;
+var FilterButtonSelected = import_react90.css`
+  background: var(--gray-100);
+  border-color: var(--gray-300);
+
+  svg {
+    color: var(--accent-dark);
+  }
+`;
+var FilterButtonWithOptions = import_react90.css`
+  :where([aria-expanded='true']) {
+    background: var(--purple-rain-100);
+    border-color: var(--accent-light);
+    color: var(--typography-base);
+    box-shadow: var(--elevation-100);
+
+    svg {
+      color: var(--accent-dark);
+    }
+  }
+`;
+var SearchIcon = import_react90.css`
+  color: var(--icon-color);
+  position: absolute;
+  inset: 0 var(--spacing-base) 0 auto;
+  margin: auto;
+  transition: color var(--duration-fast) var(--timing-ease-out);
+`;
+var AddConditionalBtn = import_react90.css`
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--primary-action-default);
+  display: flex;
+  gap: var(--spacing-sm);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  padding: 0;
+
+  &:hover,
+  &:focus {
+    color: var(--primary-action-hover);
+  }
+
+  &:disabled {
+    color: var(--gray-400);
+  }
+`;
+var Title = import_react90.css`
+  color: var(--typography-light);
+
+  &:focus {
+    outline: none;
+  }
+`;
+var ResetConditionsBtn = import_react90.css`
+  background: transparent;
+  border: none;
+  color: var(--action-destructive-default);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  padding: 0 var(--spacing-sm) 0 0;
+
+  &:hover,
+  &:focus {
+    color: var(--action-destructive-hover);
+  }
+  &:disabled {
+    color: var(--gray-400);
+  }
+`;
+var IconBtn = import_react90.css`
+  align-self: center;
+  background: transparent;
+  border: none;
+  padding: var(--spacing-sm);
+`;
+var SearchAndFilterOptionsContainer = import_react90.css`
+  background: var(--gray-50);
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-base);
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md) 0 var(--spacing-base);
+  will-change: height;
+  position: relative;
+  z-index: 2;
+`;
+var SearchAndFilterOptionsInnerContainer = import_react90.css`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding-inline: var(--spacing-md);
+`;
+var SearchAndFilterButtonGroup = import_react90.css`
+  margin-top: var(--spacing-xs);
+  margin-left: calc(56px + var(--spacing-md));
+`;
+
+// src/components/SearchAndFilter/FilterButton.tsx
+var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
+var FilterButton2 = ({
+  text = "Filters",
+  icon = "filter-add",
+  filterCount,
+  hasSelectedValue,
+  dataTestId,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+    "button",
+    {
+      type: "button",
+      css: [
+        FilterButton,
+        hasSelectedValue ? FilterButtonSelected : void 0,
+        filterCount ? [FilterButtonWithOptions, FilterButtonSelected] : void 0
+      ],
+      ...props,
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_design_system55.Icon, { icon, iconColor: "currentColor", size: "1rem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { css: FilterButtonText, children: text }),
+        filterCount ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_design_system55.Counter, { count: filterCount, bgColor: "var(--white)" }) : null
+      ]
     }
-  }, [minDateValue, maxDateValue, setError]);
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-        import_design_system44.Input,
-        {
-          label: `${ariaLabel}-min-date`,
-          type: "date",
-          showLabel: false,
-          value: minDateValue,
-          onChange: (e) => setMinDateValue(e.currentTarget.value),
-          "aria-invalid": !error ? false : true,
-          disabled,
-          readOnly,
-          "data-testid": "value-low"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-        import_design_system44.Input,
-        {
-          label: `${ariaLabel}-max-date`,
-          type: "date",
-          showLabel: false,
-          value: maxDateValue,
-          onChange: (e) => setMaxDateValue(e.currentTarget.value),
-          "aria-invalid": !error ? false : true,
-          disabled,
-          readOnly,
-          "data-testid": "value-high"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ErrorContainer, { errorMessage: error })
-  ] });
+  );
 };
+
+// src/components/SearchAndFilter/FilterControls.tsx
+var import_CgClose5 = require("@react-icons/all-files/cg/CgClose");
+var import_canvas12 = require("@uniformdev/canvas");
+var import_design_system57 = require("@uniformdev/design-system");
+var import_lexical11 = require("lexical");
+var import_react92 = require("react");
+var import_react_use11 = require("react-use");
+var import_uuid3 = require("uuid");
+
+// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
+var import_design_system56 = require("@uniformdev/design-system");
+var import_react91 = require("react");
+
+// src/components/SearchAndFilter/FilterEditor.tsx
+var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
 var FilterEditorRenderer = ({ editorType, ...props }) => {
   const { filterMapper: contextFilterMapper } = useSearchAndFilter();
   const Editor = contextFilterMapper == null ? void 0 : contextFilterMapper[editorType];
-  if (!Editor) {
-    return null;
-  }
-  if (editorType === "empty") {
-    return null;
+  if (!Editor || editorType === "empty") {
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Editor, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Editor, { ...props });
 };
 var filterMapper = {
   multiChoice: FilterMultiChoiceEditor,
@@ -8685,18 +8968,19 @@ var filterMapper = {
   date: DateEditor,
   dateRange: DateRangeEditor,
   text: TextEditor,
+  textMultiChoice: TextMultiChoiceEditor,
   numberRange: NumberRangeEditor,
   number: NumberEditor,
   statusMultiChoice: StatusMultiEditor,
   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__ */ (0, import_jsx_runtime72.jsx)(WrappedComponent, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(WrappedComponent, { ...props });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       InputVariables,
       {
         disableInlineMenu: true,
@@ -8704,7 +8988,7 @@ function withInputVariables(WrappedComponent) {
         onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
         value: props.value,
         disabled: props.disabled,
-        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(WrappedComponent, { ...props })
+        inputWhenNoVariables: noSwapping ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(WrappedComponent, { ...props })
       }
     );
   };
@@ -8714,16 +8998,16 @@ function withInputVariablesForMultiValue(WrappedComponent) {
   const WithInputVariables = (props) => {
     var _a;
     if (!props.bindable || props.disabled || props.readOnly) {
-      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(WrappedComponent, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(WrappedComponent, { ...props });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       InputVariables,
       {
         disableInlineMenu: true,
         showMenuPosition: "inline-right",
         onChange: (newValue) => props.onChange(newValue ? [newValue] : []),
         value: (_a = props.value) == null ? void 0 : _a[0],
-        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(WrappedComponent, { ...props })
+        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(WrappedComponent, { ...props })
       }
     );
   };
@@ -8734,30 +9018,13 @@ var bindableFiltersMapper = {
   multiChoice: withInputVariablesForMultiValue(FilterMultiChoiceEditor),
   singleChoice: withInputVariables(FilterSingleChoiceEditor),
   date: withInputVariables(DateEditor),
-  text: withInputVariables(TextEditor),
+  text: withInputVariables(TextEditor, true),
   number: withInputVariables(NumberEditor)
 };
-var ErrorContainer = ({ errorMessage }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-    "div",
-    {
-      css: {
-        gridColumn: "span 6",
-        order: 6
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_design_system44.FieldMessage, { errorMessage })
-    }
-  );
-};
-var twoColumnGrid = {
-  display: "grid",
-  gridTemplateColumns: "1fr 1fr",
-  gap: "var(--spacing-sm);"
-};
 
 // src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
-var import_jsx_runtime73 = require("@emotion/react/jsx-runtime");
-var SearchAndFilterContext = (0, import_react82.createContext)({
+var import_jsx_runtime85 = require("@emotion/react/jsx-runtime");
+var SearchAndFilterContext = (0, import_react91.createContext)({
   searchTerm: "",
   setSearchTerm: () => {
   },
@@ -8783,6 +9050,7 @@ var SearchAndFilterProvider = ({
   filters,
   filterOptions,
   filterVisible = false,
+  alwaysVisible = false,
   defaultSearchTerm = "",
   onSearchChange,
   onChange,
@@ -8792,45 +9060,50 @@ var SearchAndFilterProvider = ({
   children,
   allowBindingSearchTerm
 }) => {
-  const [searchTerm, setSearchTerm] = (0, import_react82.useState)(defaultSearchTerm);
-  const deferredSearchTerm = (0, import_react82.useDeferredValue)(searchTerm);
-  const [filterVisibility, setFilterVisibility] = (0, import_react82.useState)(filterVisible);
-  const handleSearchTerm = (0, import_react82.useCallback)(
+  const [searchTerm, setSearchTerm] = (0, import_react91.useState)(defaultSearchTerm);
+  const deferredSearchTerm = (0, import_react91.useDeferredValue)(searchTerm);
+  const [filterVisibility, setFilterVisibility] = (0, import_react91.useState)(alwaysVisible || filterVisible);
+  const handleSearchTerm = (0, import_react91.useCallback)(
     (term) => {
       setSearchTerm(term);
       onSearchChange == null ? void 0 : onSearchChange(term);
     },
     [setSearchTerm, onSearchChange]
   );
-  const handleToggleFilterVisibility = (0, import_react82.useCallback)(
-    (visible) => setFilterVisibility(visible),
-    [setFilterVisibility]
+  const handleToggleFilterVisibility = (0, import_react91.useCallback)(
+    (visible) => {
+      if (alwaysVisible) {
+        return;
+      }
+      setFilterVisibility(visible);
+    },
+    [alwaysVisible]
   );
-  const handleAddFilter = (0, import_react82.useCallback)(() => {
+  const handleAddFilter = (0, import_react91.useCallback)(() => {
     onChange([...filters, { field: "", operator: "", value: "" }]);
   }, [filters, onChange]);
-  const handleResetFilters = (0, import_react82.useCallback)(() => {
+  const handleResetFilters = (0, import_react91.useCallback)(() => {
     onSearchChange == null ? void 0 : onSearchChange("");
     onChange(resetFilterValues);
   }, [onChange, resetFilterValues, onSearchChange]);
-  const handleDeleteFilter = (0, import_react82.useCallback)(
+  const handleDeleteFilter = (0, import_react91.useCallback)(
     (index) => {
       const remainingFilters = filters.filter((_, i) => i !== index);
       onChange(remainingFilters);
     },
     [filters, onChange]
   );
-  const validFilterQuery = (0, import_react82.useMemo)(() => {
+  const validFilterQuery = (0, import_react91.useMemo)(() => {
     const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
     if (hasValidFilters) {
       return filters;
     }
   }, [filters]);
-  (0, import_react82.useEffect)(() => {
+  (0, import_react91.useEffect)(() => {
     if (filterVisibility) {
       const handleEscKeyFilterClose = (e) => {
         if (e.key === "Escape") {
-          setFilterVisibility(false);
+          handleToggleFilterVisibility(false);
         }
       };
       document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
@@ -8838,8 +9111,8 @@ var SearchAndFilterProvider = ({
         document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
       };
     }
-  }, [filterVisibility]);
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  }, [filterVisibility, handleToggleFilterVisibility]);
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     SearchAndFilterContext.Provider,
     {
       value: {
@@ -8858,17 +9131,17 @@ var SearchAndFilterProvider = ({
         filterMapper: filterMapper2,
         allowBindingSearchTerm
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_design_system45.VerticalRhythm, { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_design_system56.VerticalRhythm, { children })
     }
   );
 };
 var useSearchAndFilter = () => {
-  const value = (0, import_react82.useContext)(SearchAndFilterContext);
+  const value = (0, import_react91.useContext)(SearchAndFilterContext);
   return { ...value };
 };
 
 // src/components/SearchAndFilter/FilterControls.tsx
-var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime86 = require("@emotion/react/jsx-runtime");
 var FilterControls = ({
   children,
   hideSearchInput
@@ -8881,25 +9154,25 @@ var FilterControls = ({
     searchTerm,
     allowBindingSearchTerm
   } = useSearchAndFilter();
-  const editorRef = (0, import_react83.useRef)(null);
-  const hasVariableInSearchTerm = hasReferencedVariables(searchTerm);
-  const [idToResetInputVariables, setIdToResetInputVariables] = (0, import_react83.useState)("data-resource-search-term-input");
-  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react83.useState)(searchTerm);
-  (0, import_react_use7.useDebounce)(
+  const editorRef = (0, import_react92.useRef)(null);
+  const variableRefernceCountInSearchTerm = (0, import_canvas12.hasReferencedVariables)(searchTerm);
+  const [idToResetInputVariables, setIdToResetInputVariables] = (0, import_react92.useState)("data-resource-search-term-input");
+  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react92.useState)(searchTerm);
+  (0, import_react_use11.useDebounce)(
     () => {
       setSearchTerm(localeSearchTerm);
     },
     300,
     [localeSearchTerm]
   );
-  (0, import_react83.useEffect)(() => {
+  (0, import_react92.useEffect)(() => {
     if (searchTerm === "") {
       setLocaleSearchTerm("");
       setIdToResetInputVariables(`data-resource-search-term-input-${(0, import_uuid3.v4)()}`);
     }
   }, [searchTerm]);
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       FilterButton2,
       {
         "aria-controls": "search-and-filter-options",
@@ -8912,8 +9185,8 @@ var FilterControls = ({
         dataTestId: "filters-button"
       }
     ),
-    hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { css: BindableKeywordSearchInputStyles, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { css: BindableKeywordSearchInputStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         InputVariables,
         {
           label: "",
@@ -8923,8 +9196,8 @@ var FilterControls = ({
           value: localeSearchTerm,
           onChange: (value) => setLocaleSearchTerm(value != null ? value : ""),
           disableVariables: !allowBindingSearchTerm,
-          inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-            import_design_system46.InputKeywordSearch,
+          inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            import_design_system57.InputKeywordSearch,
             {
               placeholder: "Search...",
               onSearchTextChanged: (e) => setLocaleSearchTerm(e),
@@ -8936,7 +9209,7 @@ var FilterControls = ({
           )
         }
       ),
-      hasVariableInSearchTerm ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { css: ClearSearchButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      variableRefernceCountInSearchTerm ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { css: ClearSearchButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         "button",
         {
           css: ClearSearchButtonStyles,
@@ -8950,7 +9223,7 @@ var FilterControls = ({
           },
           type: "button",
           "data-testid": "keyword-search-clear-button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_design_system46.Icon, { icon: import_CgClose5.CgClose, iconColor: "red", size: "1rem" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_design_system57.Icon, { icon: import_CgClose5.CgClose, iconColor: "red", size: "1rem" })
         }
       ) }) : null
     ] }),
@@ -8959,88 +9232,27 @@ var FilterControls = ({
 };
 
 // src/components/SearchAndFilter/FilterItem.tsx
-var import_design_system48 = require("@uniformdev/design-system");
-var import_react85 = require("react");
+var import_design_system58 = require("@uniformdev/design-system");
+var import_react93 = require("react");
 
-// src/components/SearchAndFilter/FilterMenu.tsx
-var import_design_system47 = require("@uniformdev/design-system");
-var import_react84 = __toESM(require("react"));
-var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
-var SearchAndFilterOptionsContainer2 = ({
-  buttonRow,
-  additionalFiltersContainer,
-  children
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { css: SearchAndFilterOptionsContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { css: SearchAndFilterOptionsInnerContainer, children }),
-    buttonRow ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-      import_design_system47.HorizontalRhythm,
-      {
-        css: SearchAndFilterButtonGroup,
-        gap: "sm",
-        align: "center",
-        justify: "space-between",
-        children: buttonRow
-      }
-    ) : null,
-    additionalFiltersContainer ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { children: additionalFiltersContainer }) : null
-  ] });
-};
-var FilterMenu = ({
-  id,
-  filterTitle = "Show results",
-  menuControls,
-  additionalFiltersContainer,
-  children,
-  dataTestId,
-  resetButtonText = "reset"
-}) => {
-  const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
-  const innerMenuRef = import_react84.default.useRef(null);
-  (0, import_react84.useEffect)(() => {
-    var _a;
-    if (filterVisibility) {
-      (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
-    }
-  }, [filterVisibility]);
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_design_system47.VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
-    SearchAndFilterOptionsContainer2,
-    {
-      buttonRow: menuControls,
-      additionalFiltersContainer,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_design_system47.HorizontalRhythm, { gap: "sm", align: "center", justify: "space-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
-          (filters == null ? void 0 : filters.length) ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-            "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
-var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime87 = require("@emotion/react/jsx-runtime");
 var FilterItem = ({
   index,
-  paramOptions,
   operatorOptions,
   valueOptions,
-  onParamChange,
+  onFilterOptionChange,
+  onFilterDynamicChange,
   onOperatorChange,
-  onValueChange
+  onValueChange,
+  initialCriteriaTitle = "Where",
+  criteriaGroupOperator = "and"
 }) => {
   var _a, _b;
   const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
@@ -9048,25 +9260,26 @@ var FilterItem = ({
   const operatorLabel = filters[index].operator !== "" ? `operator ${filters[index].operator}` : "unknown operator";
   const metaDataLabel = filters[index].value !== "" ? `value ${filters[index].value}` : "unknown value";
   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 } = (0, import_react85.useMemo)(() => {
+  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly, bindable } = (0, import_react93.useMemo)(() => {
     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 ? {
@@ -9075,17 +9288,28 @@ var FilterItem = ({
     menuIsOpen: false,
     isClearable: false
   } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { children: index === 0 ? "Where" : "and" }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { css: ConditionalInputRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-        import_design_system48.InputComboBox,
+  const CustomLeftHandComponent = selectedFieldValue == null ? void 0 : selectedFieldValue.leftHandSideComponentWhenSelected;
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: index === 0 ? initialCriteriaTitle : criteriaGroupOperator }),
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { css: ConditionalInputRow, children: [
+      CustomLeftHandComponent ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        CustomLeftHandComponent,
+        {
+          filterOption: selectedFieldValue,
+          filter: filters[index],
+          setFilterDynamicValue: onFilterDynamicChange,
+          deselectFilterOption: () => {
+            onFilterOptionChange("");
+          }
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        import_design_system58.InputComboBox,
         {
           "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;
@@ -9105,8 +9329,8 @@ var FilterItem = ({
           name: `filter-field-${index}`
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-        import_design_system48.InputComboBox,
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        import_design_system58.InputComboBox,
         {
           "aria-label": operatorLabel,
           options: operatorOptions,
@@ -9129,7 +9353,7 @@ var FilterItem = ({
           name: `filter-operator-${index}`
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
         FilterEditorRenderer,
         {
           "aria-label": metaDataLabel,
@@ -9143,7 +9367,7 @@ var FilterItem = ({
           valueTestId: "filter-value"
         }
       ),
-      readOnly || index === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
         "button",
         {
           type: "button",
@@ -9151,15 +9375,185 @@ var FilterItem = ({
           "aria-label": "delete filter",
           css: IconBtn,
           "data-testid": "delete-filter",
-          children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_design_system48.Icon, { icon: "trash", iconColor: "red", size: "1rem" })
+          disabled: filters.length === 1,
+          children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_design_system58.Icon, { icon: "trash", iconColor: filters.length === 1 ? "gray" : "red", size: "1rem" })
         }
       )
     ] })
   ] });
 };
+
+// src/components/SearchAndFilter/FilterItems.tsx
+var import_design_system60 = require("@uniformdev/design-system");
+
+// src/components/SearchAndFilter/FilterMenu.tsx
+var import_design_system59 = require("@uniformdev/design-system");
+var import_react94 = __toESM(require("react"));
+var import_jsx_runtime88 = require("@emotion/react/jsx-runtime");
+var SearchAndFilterOptionsContainer2 = ({
+  buttonRow,
+  additionalFiltersContainer,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { css: SearchAndFilterOptionsContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { css: SearchAndFilterOptionsInnerContainer, children }),
+    buttonRow ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      import_design_system59.HorizontalRhythm,
+      {
+        css: SearchAndFilterButtonGroup,
+        gap: "sm",
+        align: "center",
+        justify: "space-between",
+        children: buttonRow
+      }
+    ) : null,
+    additionalFiltersContainer ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { children: additionalFiltersContainer }) : null
+  ] });
+};
+var FilterMenu = ({
+  id,
+  filterTitle = "Show results",
+  menuControls,
+  additionalFiltersContainer,
+  children,
+  dataTestId,
+  resetButtonText = "reset"
+}) => {
+  const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
+  const innerMenuRef = import_react94.default.useRef(null);
+  (0, import_react94.useEffect)(() => {
+    var _a;
+    if (filterVisibility) {
+      (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [filterVisibility]);
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_design_system59.VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+    SearchAndFilterOptionsContainer2,
+    {
+      buttonRow: menuControls,
+      additionalFiltersContainer,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_design_system59.HorizontalRhythm, { gap: "sm", align: "center", justify: "space-between", children: [
+          filterTitle ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }) : null,
+          (filters == null ? void 0 : filters.length) && resetButtonText ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+            "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
+var import_canvas13 = require("@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) => (0, import_canvas13.hasReferencedVariables)(value));
+  }
+  return (0, import_canvas13.hasReferencedVariables)(currentValue) > 0;
+}
+
+// src/components/SearchAndFilter/FilterItems.tsx
+var import_jsx_runtime89 = require("@emotion/react/jsx-runtime");
 var FilterItems = ({
   addButtonText = "add condition",
-  additionalFiltersContainer
+  additionalFiltersContainer,
+  filterTitle,
+  resetButtonText,
+  initialCriteriaTitle,
+  criteriaGroupOperator
 }) => {
   const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
@@ -9167,21 +9561,16 @@ var FilterItems = ({
     const next = [...filters];
     next[index] = { ...next[index], [prop]: value };
     if (prop === "operator") {
-      if (["eq", "neq", "lt", "gt"].includes(value) && Array.isArray(next[index].value)) {
-        next[index].value = next[index].value[0];
-      }
-      if (filters[index].operator === "ndef" || filters[index].operator === "def") {
-        next[index].value = "";
-      }
-      if (["between"].includes(value) && Array.isArray(next[index].value) === false) {
-        next[index].value = [next[index].value, ""];
-      }
-      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) => {
@@ -9190,15 +9579,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__ */ (0, import_jsx_runtime76.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     FilterMenu,
     {
       id: "search-and-filter-options",
       dataTestId: "search-and-filter-options",
-      menuControls: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+      menuControls: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
         "button",
         {
           type: "button",
@@ -9206,12 +9596,14 @@ var FilterItems = ({
           onClick: handleAddFilter,
           "data-testid": "add-filter",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_design_system48.Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_design_system60.Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
             addButtonText
           ]
         }
       ),
       additionalFiltersContainer,
+      filterTitle,
+      resetButtonText,
       children: filters.map((item, i) => {
         var _a, _b, _c, _d, _e, _f;
         const availableTypeOptions = (_b = (_a = filterOptions.find((fo) => {
@@ -9220,16 +9612,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__ */ (0, import_jsx_runtime76.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           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),
-            valueOptions: possibleValueOptions
+            onFilterDynamicChange: (e) => handleUpdateFilter(i, "dynamicField", e),
+            valueOptions: possibleValueOptions,
+            initialCriteriaTitle,
+            criteriaGroupOperator
           },
           i
         );
@@ -9239,11 +9633,11 @@ var FilterItems = ({
 };
 
 // src/components/SearchAndFilter/SearchAndFilter.tsx
-var import_design_system50 = require("@uniformdev/design-system");
+var import_design_system62 = require("@uniformdev/design-system");
 
 // src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
-var import_design_system49 = require("@uniformdev/design-system");
-var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
+var import_design_system61 = require("@uniformdev/design-system");
+var import_jsx_runtime90 = require("@emotion/react/jsx-runtime");
 var SearchAndFilterResultContainer = ({
   buttonText,
   clearButtonLabel = "clear",
@@ -9273,31 +9667,40 @@ var SearchAndFilterResultContainer = ({
       handleResetFilters();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_design_system49.HorizontalRhythm, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_design_system61.HorizontalRhythm, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("span", { children: [
         totalResults,
         " results ",
         searchTerm ? `for "${searchTerm}"` : null
       ] }),
-      !searchTerm || hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_design_system49.Button, { buttonType: "ghostDestructive", size: "zero", onClick: handleClearSearch, children: clearButtonLabel })
+      !searchTerm || hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_design_system61.Button, { buttonType: "ghostDestructive", size: "zero", onClick: handleClearSearch, children: clearButtonLabel })
     ] }),
-    totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_design_system49.Callout, { title: calloutTitle != null ? calloutTitle : automateCalloutTitle(), type: "note", children: [
-      calloutText ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_design_system49.Paragraph, { children: calloutText }) : null,
-      hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_design_system49.Button, { buttonType: "tertiaryOutline", size: "xs", onClick: handleClearSearch, children: buttonText != null ? buttonText : "Clear search" })
+    totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_design_system61.Callout, { title: calloutTitle != null ? calloutTitle : automateCalloutTitle(), type: "note", children: [
+      calloutText ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_design_system61.Paragraph, { children: calloutText }) : null,
+      hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        import_design_system61.Button,
+        {
+          buttonType: "tertiaryOutline",
+          size: "xs",
+          onClick: handleClearSearch,
+          "data-testid": "clear-search",
+          children: buttonText != null ? buttonText : "Clear search"
+        }
+      )
     ] }) : null
   ] });
 };
 
 // src/components/SearchAndFilter/SearchAndFilter.tsx
-var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime91 = require("@emotion/react/jsx-runtime");
 var SearchAndFilter = ({
   filters,
   filterOptions,
   filterVisible,
   filterControls,
   viewSwitchControls,
-  resultsContainerView = /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(SearchAndFilterResultContainer, {}),
+  resultsContainerView = /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(SearchAndFilterResultContainer, {}),
   filterMapper: filterMapper2 = filterMapper,
   additionalFiltersContainer,
   onChange,
@@ -9307,7 +9710,7 @@ var SearchAndFilter = ({
   allowBindingSearchTerm = false,
   resetFilterValues = []
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     SearchAndFilterProvider,
     {
       filters,
@@ -9320,18 +9723,18 @@ var SearchAndFilter = ({
       resetFilterValues,
       filterMapper: filterMapper2,
       allowBindingSearchTerm,
-      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_design_system50.VerticalRhythm, { "data-testid": "search-and-filter", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_design_system62.VerticalRhythm, { "data-testid": "search-and-filter", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "div",
             {
               css: SearchAndFilterControlsWrapper(viewSwitchControls ? "auto 1fr 0.05fr" : "auto 1fr"),
-              children: !filterControls ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
+              children: !filterControls ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
             }
           ),
           viewSwitchControls
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(FilterItems, { additionalFiltersContainer }),
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(FilterItems, { additionalFiltersContainer }),
         resultsContainerView
       ] })
     }
@@ -9339,19 +9742,19 @@ var SearchAndFilter = ({
 };
 
 // src/components/SearchAndFilter/SearchOnlyFilter.tsx
-var import_design_system51 = require("@uniformdev/design-system");
-var import_react86 = require("react");
-var import_react_use8 = require("react-use");
-var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
-var SearchOnlyContext = (0, import_react86.createContext)({
+var import_design_system63 = require("@uniformdev/design-system");
+var import_react95 = require("react");
+var import_react_use12 = require("react-use");
+var import_jsx_runtime92 = require("@emotion/react/jsx-runtime");
+var SearchOnlyContext = (0, import_react95.createContext)({
   searchTerm: "",
   setSearchTerm: () => {
   }
 });
 var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
   const { searchTerm, setSearchTerm } = useSearchAndFilter();
-  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react86.useState)("");
-  (0, import_react_use8.useDebounce)(
+  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react95.useState)("");
+  (0, import_react_use12.useDebounce)(
     () => {
       setSearchTerm(localeSearchTerm);
       onSearchChange == null ? void 0 : onSearchChange(localeSearchTerm);
@@ -9359,15 +9762,15 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
     300,
     [localeSearchTerm]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     SearchOnlyContext.Provider,
     {
       value: {
         searchTerm,
         setSearchTerm: setLocaleSearchTerm
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-        import_design_system51.InputKeywordSearch,
+      children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        import_design_system63.InputKeywordSearch,
         {
           placeholder: "Search...",
           onSearchTextChanged: (e) => setLocaleSearchTerm(e),
@@ -9381,18 +9784,18 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
 };
 
 // src/components/SearchAndFilter/SortItems.tsx
-var import_design_system53 = require("@uniformdev/design-system");
+var import_design_system65 = require("@uniformdev/design-system");
 
 // src/components/SearchAndFilter/styles/SortItems.styles.ts
-var import_react87 = require("@emotion/react");
-var import_design_system52 = require("@uniformdev/design-system");
-var ConditionalFilterRow2 = import_react87.css`
+var import_react96 = require("@emotion/react");
+var import_design_system64 = require("@uniformdev/design-system");
+var ConditionalFilterRow2 = import_react96.css`
   display: grid;
   grid-template-columns: 35px 1fr;
   gap: var(--spacing-sm);
   margin-left: var(--spacing-base);
 
-  ${(0, import_design_system52.cq)("380px")} {
+  ${(0, import_design_system64.cq)("380px")} {
     align-items: center;
 
     &:after {
@@ -9413,22 +9816,22 @@ var ConditionalFilterRow2 = import_react87.css`
     grid-template-columns: 50px 1fr;
   }
 
-  ${(0, import_design_system52.cq)("580px")} {
+  ${(0, import_design_system64.cq)("580px")} {
     &:after {
       display: none;
     }
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    animation: ${import_design_system52.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
+    animation: ${import_design_system64.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
   }
 `;
-var ConditionalInputRow2 = import_react87.css`
+var ConditionalInputRow2 = import_react96.css`
   display: flex;
   gap: var(--spacing-sm);
   flex-wrap: wrap;
 
-  ${(0, import_design_system52.cq)("380px")} {
+  ${(0, import_design_system64.cq)("380px")} {
     & > div:nth-child(-n + 2) {
       width: calc(50% - var(--spacing-sm));
     }
@@ -9437,7 +9840,7 @@ var ConditionalInputRow2 = import_react87.css`
       width: calc(100% - 48px);
     }
   }
-  ${(0, import_design_system52.cq)("580px")} {
+  ${(0, import_design_system64.cq)("580px")} {
     display: grid;
     grid-template-columns: 200px 160px 1fr 32px;
 
@@ -9446,11 +9849,11 @@ var ConditionalInputRow2 = import_react87.css`
     }
   }
 `;
-var SearchInput2 = import_react87.css`
+var SearchInput2 = import_react96.css`
   max-height: 40px;
   min-height: unset;
 `;
-var FilterButton3 = import_react87.css`
+var FilterButton3 = import_react96.css`
   align-items: center;
   background: var(--white);
   border: 1px solid var(--gray-300);
@@ -9461,7 +9864,8 @@ var FilterButton3 = import_react87.css`
   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);
@@ -9486,13 +9890,13 @@ var FilterButton3 = import_react87.css`
     opacity: var(--opacity-50);
   }
 `;
-var FilterButtonText2 = import_react87.css`
+var FilterButtonText2 = import_react96.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 14ch;
 `;
-var FilterButtonSelected2 = import_react87.css`
+var FilterButtonSelected2 = import_react96.css`
   background: var(--gray-100);
   border-color: var(--gray-300);
 
@@ -9500,7 +9904,7 @@ var FilterButtonSelected2 = import_react87.css`
     color: var(--accent-dark);
   }
 `;
-var FilterButtonWithOptions2 = import_react87.css`
+var FilterButtonWithOptions2 = import_react96.css`
   :where([aria-expanded='true']) {
     background: var(--purple-rain-100);
     border-color: var(--accent-light);
@@ -9512,14 +9916,14 @@ var FilterButtonWithOptions2 = import_react87.css`
     }
   }
 `;
-var SearchIcon2 = import_react87.css`
+var SearchIcon2 = import_react96.css`
   color: var(--icon-color);
   position: absolute;
   inset: 0 var(--spacing-base) 0 auto;
   margin: auto;
   transition: color var(--duration-fast) var(--timing-ease-out);
 `;
-var AddConditionalBtn2 = import_react87.css`
+var AddConditionalBtn2 = import_react96.css`
   align-items: center;
   background: transparent;
   border: none;
@@ -9538,14 +9942,14 @@ var AddConditionalBtn2 = import_react87.css`
     color: var(--gray-400);
   }
 `;
-var Title2 = import_react87.css`
+var Title2 = import_react96.css`
   color: var(--typography-light);
 
   &:focus {
     outline: none;
   }
 `;
-var ResetConditionsBtn2 = import_react87.css`
+var ResetConditionsBtn2 = import_react96.css`
   background: transparent;
   border: none;
   color: var(--action-destructive-default);
@@ -9557,12 +9961,12 @@ var ResetConditionsBtn2 = import_react87.css`
     color: var(--action-destructive-hover);
   }
 `;
-var IconBtn2 = import_react87.css`
+var IconBtn2 = import_react96.css`
   background: transparent;
   border: none;
   padding: var(--spacing-sm);
 `;
-var SearchAndFilterOptionsContainer3 = import_react87.css`
+var SearchAndFilterOptionsContainer3 = import_react96.css`
   background: var(--gray-50);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -9575,17 +9979,17 @@ var SearchAndFilterOptionsContainer3 = import_react87.css`
   position: relative;
   z-index: 1;
 `;
-var SearchAndFilterOptionsInnerContainer2 = import_react87.css`
+var SearchAndFilterOptionsInnerContainer2 = import_react96.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   padding-inline: var(--spacing-md);
 `;
-var SearchAndFilterButtonGroup2 = import_react87.css`
+var SearchAndFilterButtonGroup2 = import_react96.css`
   margin-top: var(--spacing-xs);
   margin-left: calc(56px + var(--spacing-md));
 `;
-var SortFilterWrapper = (hiddenLocaleInput) => import_react87.css`
+var SortFilterWrapper = (hiddenLocaleInput) => import_react96.css`
   align-items: center;
   border-top: 1px solid var(--gray-300);
   display: flex;
@@ -9595,18 +9999,18 @@ var SortFilterWrapper = (hiddenLocaleInput) => import_react87.css`
   position: relative;
   z-index: 0;
 
-  ${(0, import_design_system52.cq)("420px")} {
+  ${(0, import_design_system64.cq)("420px")} {
     display: grid;
     grid-template-columns: ${hiddenLocaleInput ? "1fr" : "1fr minmax(140px, 0.25fr)"};
   }
 `;
-var SortFilterInputRow = import_react87.css`
+var SortFilterInputRow = import_react96.css`
   align-items: center;
   display: grid;
   grid-template-columns: 1fr auto;
   gap: var(--spacing-base);
 `;
-var InputVariableWrapper = import_react87.css`
+var InputVariableWrapper = import_react96.css`
   flex-grow: 1;
 
   // we need to override label styles nested within the input variable
@@ -9617,7 +10021,7 @@ var InputVariableWrapper = import_react87.css`
 `;
 
 // src/components/SearchAndFilter/SortItems.tsx
-var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime93 = require("@emotion/react/jsx-runtime");
 var SortItems = ({
   sortByLabel = "Sort by",
   localeLabel = "Show locale",
@@ -9639,11 +10043,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__ */ (0, import_jsx_runtime80.jsxs)("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_design_system53.VerticalRhythm, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { css: Title2, children: sortByLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { css: SortFilterInputRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_design_system65.VerticalRhythm, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { css: Title2, children: sortByLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { css: SortFilterInputRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           InputVariables,
           {
             disableInlineMenu: disableSortBinding,
@@ -9651,8 +10055,8 @@ var SortItems = ({
             value: sortField,
             valueToResetTo: "created_at",
             onChange: (e) => onSortChange(`${e}_${sortDirection}`),
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
-              import_design_system53.InputComboBox,
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+              import_design_system65.InputComboBox,
               {
                 id: "sort-by-field",
                 "aria-label": "Sort by",
@@ -9674,7 +10078,7 @@ var SortItems = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           InputVariables,
           {
             disableInlineMenu: disableSortBinding,
@@ -9682,8 +10086,8 @@ var SortItems = ({
             valueToResetTo: "DESC",
             showMenuPosition: disableSortBinding ? void 0 : "inline-right",
             onChange: (e) => onSortChange(`${sortField}_${e}`),
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
-              import_design_system53.SegmentedControl,
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+              import_design_system65.SegmentedControl,
               {
                 noCheckmark: true,
                 name: "sortBy",
@@ -9714,15 +10118,15 @@ var SortItems = ({
         )
       ] })
     ] }),
-    hideLocaleOptions ? null : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_design_system53.VerticalRhythm, { gap: "xs", css: InputVariableWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    hideLocaleOptions ? null : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_design_system65.VerticalRhythm, { gap: "xs", css: InputVariableWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       InputVariables,
       {
         label: localeLabelValue,
         value: localeValue,
         showMenuPosition: "inline-right",
         onChange: (e) => onLocaleChange(e != null ? e : ""),
-        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
-          import_design_system53.InputSelect,
+        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+          import_design_system65.InputSelect,
           {
             name: "localeReturned",
             "aria-label": localeLabelValue,
@@ -9743,7 +10147,7 @@ var SortItems = ({
 };
 
 // src/index.ts
-var import_design_system54 = require("@uniformdev/design-system");
+var import_design_system66 = require("@uniformdev/design-system");
 __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -9756,6 +10160,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   ControlledObjectSearchProvider,
   ControlledValuePlugin,
   DATE_OPERATORS,
+  DATE_TIME_OPERATORS,
   DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem,
   DataRefreshButton,
@@ -9801,6 +10206,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   NumberEditor,
   NumberRangeEditor,
   OPEN_INSERT_VARIABLE_COMMAND,
+  OPTIONAL_SYSTEM_FIELD_OPERATORS,
   ObjectSearchContainer,
   ObjectSearchContext,
   ObjectSearchFilter,
@@ -9851,7 +10257,6 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   RequestUrlInput,
   ResolvableLoadingValue,
   SELECT_OPERATORS,
-  SYSTEM_DATE_OPERATORS,
   SYSTEM_FIELD_OPERATORS,
   ScrollableList,
   ScrollableListItem,
@@ -9869,10 +10274,12 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   Switch,
   TEXTBOX_OPERATORS,
   TextEditor,
+  TextMultiChoiceEditor,
   TextVariableRenderer,
   Textarea,
   Theme,
   USER_OPERATORS,
+  VariableChip,
   VariableEditor,
   VariableNode,
   VariablesList,
@@ -9947,6 +10354,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   selectedItemIcon,
   selectedItemInner,
   selectedItemTitle,
+  serializeVariablesEditorSerializedState,
   serializeVariablesEditorState,
   setVariablesEditorValue,
   urlEncodeRequestParameter,