@uniformdev/mesh-sdk-react 19.140.2-alpha.7 → 19.142.0

package/dist/index.esm.js

@@ -2945,15 +2945,16 @@ import {
   KEY_BACKSPACE_COMMAND,
   KEY_DELETE_COMMAND
 } from "lexical";
-import { useCallback as useCallback3, useEffect as useEffect8 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect9 } from "react";
 
 // src/components/Variables/util/prettifyBindExpression.tsx
 function prettifyBindExpression(bindExpression) {
-  return bindExpression.substring(bindExpression.lastIndexOf(":") + 1);
+  const [, expression] = bindExpression.split(":");
+  return expression;
 }
 
 // src/components/Variables/composer/VariableChip.tsx
-import { MultilineChip } from "@uniformdev/design-system";
+import { MultilineChip, Tooltip, VerticalRhythm } from "@uniformdev/design-system";
 import { Fragment as Fragment5 } from "react";
 import { jsx as jsx30 } from "@emotion/react/jsx-runtime";
 function VariableChip({
@@ -2969,42 +2970,58 @@ function VariableChip({
 }) {
   const hasClickEvent = !!onClick;
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
-  const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? Fragment5 : UndefinedVariableReference;
+  const Wrapper = referenceIsValidFr === "warning" ? WarningVariableReference : referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? Fragment5 : UndefinedVariableReference;
   const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
+  const chippy = /* @__PURE__ */ jsx30(MultilineChip, { onClick, "aria-selected": selected ? true : void 0, "aria-disabled": disabled, children: /* @__PURE__ */ jsx30(Wrapper, { children: displayName || reference }) });
+  if (tooltip) {
+    const tip = tooltip ? `${tooltip}${extraTitle ? `
+
+${extraTitle}` : ""}` : extraTitle != null ? extraTitle : "";
+    const tipLines = tip.split("\n");
+    return /* @__PURE__ */ jsx30(
+      Tooltip,
+      {
+        title: /* @__PURE__ */ jsx30(VerticalRhythm, { gap: "sm", children: tipLines.map((t, index) => /* @__PURE__ */ jsx30("div", { children: t }, index)) }),
+        children: /* @__PURE__ */ jsx30("span", { children: chippy })
+      }
+    );
+  }
+  return chippy;
+}
+function UndefinedVariableReference({ children }) {
   return /* @__PURE__ */ jsx30(
-    MultilineChip,
+    "span",
     {
-      title: tooltip ? `${tooltip}${extraTitle ? `
-
-${extraTitle}` : ""}` : extraTitle,
-      onClick,
-      "aria-selected": selected ? true : void 0,
-      "aria-disabled": disabled,
-      children: /* @__PURE__ */ jsx30(Wrapper, { children: displayName || reference })
+      style: {
+        textDecoration: "underline",
+        textDecorationStyle: "wavy",
+        textDecorationColor: "var(--error)"
+      },
+      children
     }
   );
 }
-function UndefinedVariableReference({ children }) {
+function InfoVariableReference({ children }) {
   return /* @__PURE__ */ jsx30(
     "span",
     {
       style: {
         textDecoration: "underline",
         textDecorationStyle: "wavy",
-        textDecorationColor: "red"
+        textDecorationColor: "var(--primary-action-default)"
       },
       children
     }
   );
 }
-function InfoVariableReference({ children }) {
+function WarningVariableReference({ children }) {
   return /* @__PURE__ */ jsx30(
     "span",
     {
       style: {
         textDecoration: "underline",
         textDecorationStyle: "wavy",
-        textDecorationColor: "blue"
+        textDecorationColor: "var(--alert)"
       },
       children
     }
@@ -3034,7 +3051,7 @@ import {
   COMMAND_PRIORITY_NORMAL,
   createCommand
 } from "lexical";
-import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef10, useState as useState10 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect8, useMemo as useMemo8, useRef as useRef10, useState as useState10 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
@@ -3068,7 +3085,7 @@ var variablesTipText = css18`
 
 // src/components/Variables/VariablesProvider.tsx
 import mitt from "mitt";
-import { createContext as createContext3, useContext as useContext5, useMemo as useMemo7, useState as useState9 } from "react";
+import { createContext as createContext3, useContext as useContext5, useEffect as useEffect7, useMemo as useMemo7, useState as useState9 } from "react";
 
 // src/components/Variables/util/useVariableEditTransaction.ts
 import { useCallback, useEffect as useEffect6, useState as useState8 } from "react";
@@ -3265,7 +3282,8 @@ function VariablesProvider({
   readOnly,
   isLoading,
   children,
-  knownUndefinedValues = {}
+  knownUndefinedValues = {},
+  onChangeKnownUndefinedValue
 }) {
   const [editing, setEditing] = useState9();
   const [editingContext, setEditingContext] = useState9();
@@ -3332,6 +3350,15 @@ function VariablesProvider({
       isLoading: !!isLoading
     };
   }, [valueBasedContextValue, editVariableTxn, editing, events, knownUndefinedValues, isLoading]);
+  useEffect7(() => {
+    if (editing === void 0) {
+      return;
+    }
+    const activeElement = document.activeElement;
+    if (activeElement && "blur" in activeElement && typeof activeElement.blur === "function") {
+      activeElement.blur();
+    }
+  }, [editing]);
   return /* @__PURE__ */ jsxs17(VariablesContext.Provider, { value: contextValue, children: [
     children,
     typeof editing !== "undefined" ? /* @__PURE__ */ jsx32(
@@ -3340,9 +3367,19 @@ function VariablesProvider({
         context: editingContext,
         onSubmit: (val, editorCompletedContext) => {
           contextValue.dispatch({ type: "cancelEdit" });
-          const { name, ...varValue } = val;
-          const latestValue = { ...value, [name]: varValue };
-          onChange == null ? void 0 : onChange(latestValue);
+          if ("resultType" in val) {
+            if (!onChangeKnownUndefinedValue) {
+              throw new Error(
+                "onChangeKnownUndefinedValue must be provided to handle known-undefined-value results"
+              );
+            }
+            const { name, ...kuv } = val;
+            onChangeKnownUndefinedValue(val.name, kuv);
+          } else {
+            const { name, ...varValue } = val;
+            const latestValue = { ...value, [name]: varValue };
+            onChange == null ? void 0 : onChange(latestValue);
+          }
           events.emit("editCompleted", {
             canceled: false,
             selectedVariable: val,
@@ -3625,7 +3662,7 @@ function VariablesPlugin({
     },
     [editor, onSelect, queryString, replaceValueOnVariableInsert]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     return mergeRegister(
       editor.registerCommand(
         EDIT_VARIABLE_COMMAND,
@@ -3757,21 +3794,21 @@ function VariablesPlugin({
   ]);
   const updateExistingNodeIfChanged = useCallback2(
     (variableNode) => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       const targetVar = variablesRef.current.variables[variableNode.reference];
       const targetUndefinedVar = variablesRef.current.knownUndefinedValues[variableNode.reference];
       const isLoadingVariables = variablesRef.current.isLoading;
       const currentState = variableNode.getState();
-      if (currentState.isFresh && !targetVar) {
+      if (currentState.isFresh && !targetVar && !targetUndefinedVar) {
         return;
       }
-      const tooltip = (_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.info;
+      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,
         isLoading: isLoadingVariables && !targetVar && !(targetUndefinedVar == null ? void 0 : targetUndefinedVar.info),
         hasClickEvent: canEditVariable(variableNode.reference, targetVar),
-        referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : isLoadingVariables ? true : Boolean(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
       };
@@ -3781,14 +3818,14 @@ function VariablesPlugin({
     },
     [canEditVariable]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     editor.update(() => {
       $nodesOfType2(VariableNode).forEach((variableNode) => {
         updateExistingNodeIfChanged(variableNode);
       });
     });
-  }, [editor, variables, canEditVariable, updateExistingNodeIfChanged]);
-  useEffect7(() => {
+  }, [editor, variables, knownUndefinedValues, canEditVariable, updateExistingNodeIfChanged]);
+  useEffect8(() => {
     return editor.registerNodeTransform(VariableNode, (variableNode) => {
       updateExistingNodeIfChanged(variableNode);
     });
@@ -3967,7 +4004,7 @@ function VariableNodeComponent({
     },
     [isSelected, nodeKey]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     return mergeRegister2(
       editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
       editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
@@ -4084,10 +4121,10 @@ function EditorRefPlugin({
 import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister as mergeRegister3 } from "@lexical/utils";
 import { $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection2, COMMAND_PRIORITY_HIGH, PASTE_COMMAND } from "lexical";
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 function PasteTransformerPlugin({ transformPaste }) {
   const [editor] = useLexicalComposerContext5();
-  useEffect9(() => {
+  useEffect10(() => {
     return mergeRegister3(
       editor.registerCommand(
         PASTE_COMMAND,
@@ -4551,10 +4588,10 @@ import { useMemo as useMemo10, useRef as useRef12, useState as useState12 } from
 
 // src/components/Variables/composer/DisablePlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect12 } from "react";
 function DisablePlugin({ disabled }) {
   const [editor] = useLexicalComposerContext7();
-  useEffect11(() => {
+  useEffect12(() => {
     editor.setEditable(!disabled);
   }, [editor, disabled]);
   return null;
@@ -4563,10 +4600,10 @@ function DisablePlugin({ disabled }) {
 // src/components/Variables/composer/SingleLineTextPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
 import { LineBreakNode } from "lexical";
-import { useEffect as useEffect12 } from "react";
+import { useEffect as useEffect13 } from "react";
 function SingleLineTextPlugin() {
   const [editor] = useLexicalComposerContext8();
-  useEffect12(() => {
+  useEffect13(() => {
     editor.registerNodeTransform(LineBreakNode, (node) => {
       node.remove();
     });
@@ -4688,10 +4725,10 @@ import {
   CUT_COMMAND,
   PASTE_COMMAND as PASTE_COMMAND2
 } from "lexical";
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect14 } from "react";
 import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 function VariablesComposerInput({
-  css: css38,
+  css: css39,
   placeholder,
   ...contentEditableProps
 }) {
@@ -4710,7 +4747,7 @@ function VariablesComposerInput({
 }
 function RichishCopyAndPastePlugin() {
   const [editor] = useLexicalComposerContext9();
-  useEffect13(() => {
+  useEffect14(() => {
     return mergeRegister4(
       editor.registerCommand(
         COPY_COMMAND,
@@ -4812,7 +4849,8 @@ function InputVariables(props) {
     editorRef,
     filterVariable,
     styleVariant = "default",
-    renderMenuInPortal
+    renderMenuInPortal,
+    disableDismissEditorOnChange
   } = props;
   const [finalId] = useState13(id != null ? id : () => v42());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
@@ -4822,7 +4860,7 @@ function InputVariables(props) {
     "div",
     {
       onKeyDown: () => {
-        if (isEditing && canDispatch) {
+        if (!disableDismissEditorOnChange && isEditing && canDispatch) {
           dispatch({ type: "cancelEdit" });
         }
       },
@@ -5009,7 +5047,7 @@ import { useCallback as useCallback4 } from "react";
 import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister as mergeRegister5 } from "@lexical/utils";
 import { $getNodeByKey as $getNodeByKey3, COMMAND_PRIORITY_HIGH as COMMAND_PRIORITY_HIGH3 } from "lexical";
-import { useEffect as useEffect14, useRef as useRef13 } from "react";
+import { useEffect as useEffect15, useRef as useRef13 } from "react";
 function OnDisconnectPlugin({
   onDisconnect
 }) {
@@ -5017,7 +5055,7 @@ function OnDisconnectPlugin({
   const { variables } = useVariables(true);
   const variablesRef = useRef13(variables);
   variablesRef.current = variables;
-  useEffect14(() => {
+  useEffect15(() => {
     return mergeRegister5(
       editor.registerCommand(
         DISCONNECT_VARIABLE_COMMAND,
@@ -5154,19 +5192,17 @@ function ParameterVariables(props) {
       children: [
         editorRef ? /* @__PURE__ */ jsx43(EditorRefPlugin, { editorRef }) : null,
         /* @__PURE__ */ jsx43(ControlledValuePlugin, { value, enabled: useInputWhenNoVariables }),
-        /* @__PURE__ */ jsxs26(
-          HorizontalRhythm7,
-          {
-            align: "center",
-            gap: "xs",
-            css: { width: "100%" },
-            onKeyDown: () => {
-              if (isEditing && canDispatch) {
-                dispatch({ type: "cancelEdit" });
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsx43("div", { css: { flex: 1 }, children: useInputWhenNoVariables ? inputWhenNoVariables : /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsxs26(HorizontalRhythm7, { align: "center", gap: "xs", css: { width: "100%" }, children: [
+          /* @__PURE__ */ jsx43(
+            "div",
+            {
+              css: { flex: 1 },
+              onKeyDown: () => {
+                if (isEditing && canDispatch) {
+                  dispatch({ type: "cancelEdit" });
+                }
+              },
+              children: useInputWhenNoVariables ? inputWhenNoVariables : /* @__PURE__ */ jsx43(
                 VariablesComposerInput,
                 {
                   "aria-label": ariaLabel,
@@ -5178,20 +5214,20 @@ function ParameterVariables(props) {
                     inputCss != null ? inputCss : css25``
                   ]
                 }
-              ) }),
-              disableVariablesForReals ? null : /* @__PURE__ */ jsx43(
-                VariablesComposerVariableMenu,
-                {
-                  ...sharedMenuProps,
-                  buttonCss: [variableBindButton],
-                  tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
-                  buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
-                  replaceValueOnVariableInsert: useInputWhenNoVariables
-                }
               )
-            ]
-          }
-        )
+            }
+          ),
+          disableVariablesForReals ? null : /* @__PURE__ */ jsx43(
+            VariablesComposerVariableMenu,
+            {
+              ...sharedMenuProps,
+              buttonCss: [variableBindButton],
+              tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
+              buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
+              replaceValueOnVariableInsert: useInputWhenNoVariables
+            }
+          )
+        ] })
       ]
     }
   );
@@ -5199,7 +5235,7 @@ function ParameterVariables(props) {
 
 // src/components/Variables/util/convertConnectedDataToVariable.ts
 function convertConnectedDataToVariable(bindExpression, value) {
-  const isValuePrimitive = typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  const isValuePrimitive = typeof value === "string" && value.length > 0 || typeof value === "number" || typeof value === "boolean";
   return {
     ephemeral: true,
     displayName: isValuePrimitive ? value.toString() : prettifyBindExpression(bindExpression),
@@ -5396,7 +5432,7 @@ function DataResourceDynamicInputProviderRenderer({
 }
 
 // src/components/DataResourceVariablesList.tsx
-import { Callout as Callout4, VerticalRhythm } from "@uniformdev/design-system";
+import { Callout as Callout4, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
 import { jsx as jsx46 } from "@emotion/react/jsx-runtime";
 function DataResourceVariablesList(props) {
   const {
@@ -5428,7 +5464,7 @@ function DataResourceVariablesListExplicit({
     }
     return /* @__PURE__ */ jsx46(Callout4, { type: "note", children: "No settings are required." });
   }
-  return /* @__PURE__ */ jsx46(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ jsx46(VerticalRhythm, { children: variableDefinitions.map((variableDefinition) => {
+  return /* @__PURE__ */ jsx46(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ jsx46(VerticalRhythm2, { children: variableDefinitions.map((variableDefinition) => {
     var _a, _b, _c;
     const VariableRenderer = variableDefinition.type ? (_a = typeRenderers == null ? void 0 : typeRenderers[variableDefinition.type]) != null ? _a : TextVariableRenderer : TextVariableRenderer;
     return /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(
@@ -6173,12 +6209,12 @@ import { LoadingIndicator as LoadingIndicator3, Theme as Theme2 } from "@uniform
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
-import { useEffect as useEffect15, useRef as useRef14, useState as useState15 } from "react";
+import { useEffect as useEffect16, useRef as useRef14, useState as useState15 } from "react";
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
   const [error, setError] = useState15();
   const [sdk, setSdk] = useState15();
   const initializationInProgress = useRef14(false);
-  useEffect15(
+  useEffect16(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -6261,7 +6297,7 @@ var DataRefreshButton = ({
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
 import { css as css33 } from "@emotion/react";
 import { bindVariables } from "@uniformdev/canvas";
-import { Callout as Callout5, Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
+import { Callout as Callout5, Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
@@ -6549,7 +6585,7 @@ var ObjectSearchContainer = ({
       children: /* @__PURE__ */ jsx61(DefaultResultList, {})
     }
   );
-  const body = /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
+  const body = /* @__PURE__ */ jsxs35(VerticalRhythm3, { children: [
     searchFilters,
     listItems
   ] });
@@ -6580,7 +6616,7 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ jsx61(IconsProvider, { children: /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
+  return /* @__PURE__ */ jsx61(IconsProvider, { children: /* @__PURE__ */ jsxs35(VerticalRhythm3, { children: [
     /* @__PURE__ */ jsx61(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx61(
       InputVariables,
       {
@@ -7018,8 +7054,8 @@ function ObjectSearchResultList({
 }
 
 // src/components/ObjectSearch/QueryFilter.tsx
-import { DebouncedInputKeywordSearch as DebouncedInputKeywordSearch2, Input as Input5, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
-import { useEffect as useEffect16, useState as useState18 } from "react";
+import { DebouncedInputKeywordSearch as DebouncedInputKeywordSearch2, Input as Input5, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm4 } from "@uniformdev/design-system";
+import { useEffect as useEffect17, useState as useState18 } from "react";
 import { jsx as jsx67, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var QueryFilter = ({
   requireContentType,
@@ -7060,12 +7096,12 @@ var QueryFilter = ({
     setQueryState((prev) => ({ ...prev, ...value }));
     onSetQuery({ ...query, ...value });
   };
-  useEffect16(() => {
+  useEffect17(() => {
     onSetQuery(queryState);
   }, []);
   return /* @__PURE__ */ jsxs41("fieldset", { children: [
     /* @__PURE__ */ jsx67("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
-    /* @__PURE__ */ jsx67("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs41(VerticalRhythm3, { children: [
+    /* @__PURE__ */ jsx67("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs41(VerticalRhythm4, { children: [
       /* @__PURE__ */ jsx67(
         InputVariables,
         {
@@ -7186,7 +7222,7 @@ var QueryFilter = ({
 };
 
 // src/components/ParamTypeDynamicDataProvider.tsx
-import { useEffect as useEffect17, useMemo as useMemo16, useRef as useRef15 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo16, useRef as useRef15 } from "react";
 import { jsx as jsx68 } from "@emotion/react/jsx-runtime";
 function ParamTypeDynamicDataProvider(props) {
   const { children } = props;
@@ -7210,7 +7246,7 @@ var JsonMeshVariableEditor = ({
 }) => {
   const sillyRef = useRef15(false);
   const { editConnectedData } = useMeshLocation("paramType");
-  useEffect17(() => {
+  useEffect18(() => {
     if (sillyRef.current) {
       return;
     }
@@ -7238,100 +7274,1647 @@ var JsonMeshVariableEditor = ({
   return null;
 };
 
-// src/components/SearchAndFilter/filtersMapper.tsx
-import {
-  filterMapper,
-  FilterMultiChoiceEditor
-} from "@uniformdev/design-system";
-import { DateEditor, FilterSingleChoiceEditor, NumberEditor, TextEditor } from "@uniformdev/design-system";
-import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
-function withInputVariables(WrappedComponent) {
-  const WithInputVariables = (props) => {
-    if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
-      return /* @__PURE__ */ jsx69(WrappedComponent, { ...props });
+// src/components/SearchAndFilter/constants.ts
+var NUMBER_OPERATORS = [
+  {
+    label: "equals...",
+    symbol: "=",
+    value: "eq",
+    editorType: "number"
+  },
+  {
+    label: "does not equal...",
+    symbol: "\u2260",
+    value: "neq",
+    editorType: "number"
+  },
+  {
+    label: "greater than...",
+    symbol: ">",
+    value: "gt",
+    editorType: "number"
+  },
+  {
+    label: "greater than or equal to...",
+    symbol: "\u2265",
+    value: "gte",
+    editorType: "number"
+  },
+  {
+    label: "less than...",
+    symbol: "<",
+    value: "lt",
+    editorType: "number"
+  },
+  {
+    label: "less than or equal to...",
+    symbol: "\u2264",
+    value: "lte",
+    editorType: "number"
+  },
+  {
+    label: "is empty",
+    value: "ndef",
+    editorType: "empty"
+  },
+  {
+    label: "is between...",
+    value: "between",
+    editorType: "numberRange"
+  },
+  {
+    label: "is not empty",
+    value: "def",
+    editorType: "empty"
+  }
+];
+var DATE_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "date"
+  },
+  {
+    label: "is between...",
+    value: "between",
+    editorType: "dateRange"
+  },
+  {
+    label: "is before...",
+    value: "lt",
+    editorType: "date"
+  },
+  {
+    label: "is after...",
+    value: "gt",
+    editorType: "date"
+  },
+  {
+    label: "is on or before...",
+    value: "lte",
+    editorType: "date"
+  },
+  {
+    label: "is on or after...",
+    value: "gte",
+    editorType: "date"
+  },
+  {
+    label: "is empty",
+    value: "ndef",
+    editorType: "empty"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    editorType: "date"
+  },
+  {
+    label: "is not empty",
+    value: "def",
+    editorType: "empty"
+  }
+];
+var TEXTBOX_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "text"
+  },
+  {
+    label: "is empty",
+    value: "ndef",
+    editorType: "empty"
+  },
+  {
+    label: "contains...",
+    value: "match",
+    editorType: "text"
+  },
+  {
+    label: "starts with...",
+    value: "starts",
+    editorType: "text"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    editorType: "text"
+  },
+  {
+    label: "is not empty",
+    value: "def",
+    editorType: "empty"
+  }
+];
+var USER_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "text"
+  },
+  {
+    label: "contains...",
+    value: "match",
+    editorType: "text"
+  },
+  {
+    label: "starts with...",
+    value: "starts",
+    editorType: "text"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    editorType: "text"
+  }
+];
+var SYSTEM_DATE_OPERATORS = [
+  {
+    label: "is...",
+    value: "sys-date-eq",
+    editorType: "date"
+  },
+  {
+    label: "is between...",
+    value: "sys-date-between",
+    editorType: "dateRange"
+  },
+  {
+    label: "is before...",
+    value: "sys-date-lt",
+    editorType: "date"
+  },
+  {
+    label: "is after...",
+    value: "sys-date-gt",
+    editorType: "date"
+  },
+  {
+    label: "is on or before...",
+    value: "sys-date-lte",
+    editorType: "date"
+  },
+  {
+    label: "is on or after...",
+    value: "sys-date-gte",
+    editorType: "date"
+  },
+  {
+    label: "is not...",
+    value: "sys-date-neq",
+    editorType: "date"
+  }
+];
+var RICHTEXT_OPERATORS = [
+  {
+    label: "is empty",
+    value: "ndef",
+    editorType: "empty"
+  },
+  {
+    label: "contains...",
+    value: "match",
+    editorType: "text"
+  },
+  {
+    label: "starts with...",
+    value: "starts",
+    editorType: "text"
+  },
+  {
+    label: "is not empty",
+    value: "def",
+    editorType: "empty"
+  }
+];
+var CHECKBOX_OPERATORS = [
+  {
+    label: "is checked...",
+    value: "def",
+    editorType: "empty"
+  },
+  {
+    label: "is not checked...",
+    value: "ndef",
+    editorType: "empty"
+  }
+];
+var SYSTEM_FIELD_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "singleChoice"
+  },
+  {
+    label: "is any of...",
+    value: "in",
+    editorType: "multiChoice"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    editorType: "singleChoice"
+  },
+  {
+    label: "is none of...",
+    value: "nin",
+    editorType: "multiChoice"
+  }
+];
+var PUBLISH_STATUS_FIELD_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "statusSingleChoice"
+  },
+  {
+    label: "is any of...",
+    value: "in",
+    editorType: "statusMultiChoice"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    editorType: "statusSingleChoice"
+  },
+  {
+    label: "is none of...",
+    value: "nin",
+    editorType: "statusMultiChoice"
+  }
+];
+
+// src/components/SearchAndFilter/FilterButton.tsx
+import { Counter as Counter2, Icon as Icon6 } from "@uniformdev/design-system";
+
+// src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
+import { css as css38 } from "@emotion/react";
+import { cq, fadeInLtr } from "@uniformdev/design-system";
+var SearchAndFilterControlsWrapper = (gridColumns) => css38`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: ${gridColumns};
+  gap: var(--spacing-sm);
+`;
+var SearchAndFilterOutterControlWrapper = (gridColumns) => css38`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: ${gridColumns};
+  gap: var(--spacing-sm);
+`;
+var ConditionalFilterRow = css38`
+  display: grid;
+  grid-template-columns: 35px 1fr;
+  gap: var(--spacing-sm);
+  margin-left: var(--spacing-base);
+
+  ${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);
     }
-    return /* @__PURE__ */ jsx69(
-      InputVariables,
-      {
-        disableInlineMenu: true,
-        showMenuPosition: "inline-right",
-        onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
-        value: props.value,
-        disabled: props.disabled,
-        inputWhenNoVariables: /* @__PURE__ */ jsx69(WrappedComponent, { ...props })
-      }
-    );
-  };
-  return WithInputVariables;
-}
-function withInputVariablesForMultiValue(WrappedComponent) {
-  const WithInputVariables = (props) => {
-    var _a;
-    if (!props.bindable || props.disabled || props.readOnly) {
-      return /* @__PURE__ */ jsx69(WrappedComponent, { ...props });
+    &:last-of-type:after {
+      display: none;
     }
-    return /* @__PURE__ */ jsx69(
-      InputVariables,
-      {
-        disableInlineMenu: true,
-        showMenuPosition: "inline-right",
-        onChange: (newValue) => props.onChange(newValue ? [newValue] : []),
-        value: (_a = props.value) == null ? void 0 : _a[0],
-        inputWhenNoVariables: /* @__PURE__ */ jsx69(WrappedComponent, { ...props })
-      }
-    );
-  };
-  return WithInputVariables;
-}
-var bindableFiltersMapper = {
-  ...filterMapper,
-  multiChoice: withInputVariablesForMultiValue(FilterMultiChoiceEditor),
-  singleChoice: withInputVariables(FilterSingleChoiceEditor),
-  date: withInputVariables(DateEditor),
-  text: withInputVariables(TextEditor),
-  number: withInputVariables(NumberEditor)
-};
+  }
 
-// src/utils/createLocationValidator.ts
-function createLocationValidator(setValue, validate) {
-  return (dispatch) => setValue((previous) => {
-    const { newValue, options } = dispatch(previous);
-    return { newValue, options: validate(newValue, options) };
-  });
-}
+  &:nth-of-type(2) {
+    margin-left: 0;
+    grid-template-columns: 50px 1fr;
+  }
 
-// src/utils/useContentDataResourceLocaleInfo.ts
-import { bindVariables as bindVariables2, createVariableReference as createVariableReference4, LOCALE_DYNAMIC_INPUT_NAME as LOCALE_DYNAMIC_INPUT_NAME2 } from "@uniformdev/canvas";
-import { useEffect as useEffect18, useRef as useRef16 } from "react";
-function useContentDataResourceLocaleInfo({
-  locale,
-  setLocale,
-  dynamicInputs
-}) {
-  var _a;
-  const setLocaleRef = useRef16(setLocale);
-  setLocaleRef.current = setLocale;
-  const { flatVariables } = useVariables();
-  const effectiveLocale = locale != null ? locale : dynamicInputs[LOCALE_DYNAMIC_INPUT_NAME2] ? createVariableReference4(LOCALE_DYNAMIC_INPUT_NAME2) : "";
-  const boundLocale = (_a = bindVariables2({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
-  useEffect18(() => {
-    if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
-      setLocaleRef.current(createVariableReference4(LOCALE_DYNAMIC_INPUT_NAME2));
+  ${cq("580px")} {
+    &:after {
+      display: none;
     }
-  }, [locale, effectiveLocale]);
-  return { effectiveLocale, boundLocale: boundLocale ? boundLocale : void 0 };
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${fadeInLtr} var(--duration-fast) var(--timing-ease-out);
+  }
+`;
+var ConditionalInputRow = css38`
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+
+  ${cq("380px")} {
+    & > div:nth-child(-n + 2) {
+      width: calc(50% - var(--spacing-sm));
+    }
+
+    & > div:nth-child(n + 3) {
+      width: calc(100% - 48px);
+    }
+  }
+  ${cq("764px")} {
+    display: grid;
+    grid-template-columns: 200px 160px 1fr 32px;
+
+    & > div:nth-child(n) {
+      width: auto;
+    }
+  }
+`;
+var SearchInput = css38`
+  max-height: 40px;
+  min-height: unset;
+`;
+var FilterButton = css38`
+  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);
+    }
+  }
+
+  &:disabled {
+    opacity: var(--opacity-50);
+  }
+`;
+var FilterButtonText = css38`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 14ch;
+`;
+var FilterButtonSelected = css38`
+  background: var(--gray-100);
+  border-color: var(--gray-300);
+
+  svg {
+    color: var(--accent-dark);
+  }
+`;
+var FilterButtonWithOptions = css38`
+  :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 = css38`
+  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 = css38`
+  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 = css38`
+  color: var(--typography-light);
+
+  &:focus {
+    outline: none;
+  }
+`;
+var ResetConditionsBtn = css38`
+  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 = css38`
+  background: transparent;
+  border: none;
+  padding: var(--spacing-sm);
+`;
+var SearchAndFilterOptionsContainer = css38`
+  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 = css38`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding-inline: var(--spacing-md);
+`;
+var SearchAndFilterButtonGroup = css38`
+  margin-top: var(--spacing-xs);
+  margin-left: calc(56px + var(--spacing-md));
+`;
+
+// src/components/SearchAndFilter/FilterButton.tsx
+import { jsx as jsx69, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
+var FilterButton2 = ({
+  text = "Filters",
+  icon = "filter-add",
+  filterCount,
+  hasSelectedValue,
+  dataTestId,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs42(
+    "button",
+    {
+      type: "button",
+      css: [
+        FilterButton,
+        hasSelectedValue ? FilterButtonSelected : void 0,
+        filterCount ? [FilterButtonWithOptions, FilterButtonSelected] : void 0
+      ],
+      ...props,
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ jsx69(Icon6, { icon, iconColor: "currentColor", size: "1rem" }),
+        /* @__PURE__ */ jsx69("span", { css: FilterButtonText, children: text }),
+        filterCount ? /* @__PURE__ */ jsx69(Counter2, { count: filterCount, bgColor: "var(--white)" }) : null
+      ]
+    }
+  );
+};
+
+// src/components/SearchAndFilter/FilterControls.tsx
+import { InputKeywordSearch as InputKeywordSearch2 } from "@uniformdev/design-system";
+import { useEffect as useEffect21, useState as useState21 } from "react";
+import { useDebounce as useDebounce5 } from "react-use";
+
+// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
+import { VerticalRhythm as VerticalRhythm5 } from "@uniformdev/design-system";
+import {
+  createContext as createContext6,
+  useCallback as useCallback6,
+  useContext as useContext8,
+  useDeferredValue as useDeferredValue2,
+  useEffect as useEffect20,
+  useMemo as useMemo17,
+  useState as useState20
+} from "react";
+
+// src/components/SearchAndFilter/FilterEditor.tsx
+import { FieldMessage, Input as Input6, InputComboBox, StatusBullet } from "@uniformdev/design-system";
+import { useEffect as useEffect19, useState as useState19 } from "react";
+import { useDebounce as useDebounce4 } from "react-use";
+import { Fragment as Fragment14, jsx as jsx70, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
+var readOnlyAttributes = {
+  isSearchable: false,
+  menuIsOpen: false,
+  isClearable: false
+};
+var FilterMultiChoiceEditor = ({
+  value,
+  options,
+  disabled,
+  readOnly,
+  valueTestId,
+  ...props
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  const isClearable = !readOnly || !disabled;
+  return /* @__PURE__ */ jsx70("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx70(
+    InputComboBox,
+    {
+      ...props,
+      placeholder: "Type to search...",
+      options,
+      isMulti: true,
+      isClearable,
+      isDisabled: disabled,
+      onChange: (e) => {
+        var _a;
+        return props.onChange((_a = e == null ? void 0 : e.map((option) => option.value)) != null ? _a : []);
+      },
+      value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
+      "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+var FilterSingleChoiceEditor = ({
+  options,
+  value,
+  disabled,
+  readOnly,
+  onChange,
+  valueTestId
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ jsx70("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx70(
+    InputComboBox,
+    {
+      placeholder: "Type to search...",
+      options,
+      isClearable: true,
+      onChange: (e) => {
+        var _a;
+        return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+      },
+      isDisabled: disabled,
+      value: options == null ? void 0 : options.find((option) => option.value === value),
+      "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+var CustomOptions = ({ label, value }) => {
+  return /* @__PURE__ */ jsx70(StatusBullet, { status: label, message: value });
+};
+var StatusMultiEditor = ({
+  options,
+  value,
+  disabled,
+  readOnly,
+  onChange,
+  valueTestId
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ jsx70("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx70(
+    InputComboBox,
+    {
+      options,
+      isMulti: true,
+      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"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+var StatusSingleEditor = ({
+  options,
+  value,
+  disabled,
+  readOnly,
+  onChange,
+  valueTestId
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ jsx70("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx70(
+    InputComboBox,
+    {
+      options,
+      onChange: (e) => {
+        var _a;
+        return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+      },
+      formatOptionLabel: CustomOptions,
+      "aria-readonly": readOnly,
+      value: options == null ? void 0 : options.find((option) => option.value === value),
+      isDisabled: disabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+var TextEditor = ({
+  onChange,
+  ariaLabel,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [innerValue, setInnerValue] = useState19(value != null ? value : "");
+  useDebounce4(() => onChange(innerValue), 500, [innerValue]);
+  return /* @__PURE__ */ jsx70(
+    Input6,
+    {
+      showLabel: false,
+      label: ariaLabel,
+      onChange: (e) => setInnerValue(e.currentTarget.value),
+      placeholder: "Enter phrase to search\u2026",
+      value: innerValue,
+      readOnly,
+      "data-testid": valueTestId
+    }
+  );
+};
+var NumberRangeEditor = ({
+  onChange,
+  disabled,
+  ariaLabel,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [minValue, setMinValue] = useState19("");
+  const [maxValue, setMaxValue] = useState19("");
+  const [error, setError] = useState19("");
+  useDebounce4(
+    () => {
+      if (minValue && maxValue && !error) {
+        onChange([minValue, maxValue]);
+      } else {
+        onChange([]);
+      }
+    },
+    500,
+    [minValue, maxValue]
+  );
+  useEffect19(() => {
+    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__ */ jsxs43(Fragment14, { children: [
+    /* @__PURE__ */ jsxs43("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ jsx70(
+        Input6,
+        {
+          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__ */ jsx70(
+        Input6,
+        {
+          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__ */ jsx70(ErrorContainer, { errorMessage: error })
+  ] });
+};
+var NumberEditor = ({
+  ariaLabel,
+  onChange,
+  disabled,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [innerValue, setInnerValue] = useState19(value != null ? value : "");
+  useDebounce4(() => onChange(innerValue), 500, [innerValue]);
+  return /* @__PURE__ */ jsx70(
+    Input6,
+    {
+      label: ariaLabel,
+      type: "number",
+      showLabel: false,
+      min: 0,
+      onChange: (e) => setInnerValue(e.currentTarget.value),
+      disabled,
+      value: innerValue,
+      readOnly,
+      "data-testid": valueTestId
+    }
+  );
+};
+var DateEditor = ({
+  onChange,
+  ariaLabel,
+  disabled,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [innerValue, setInnerValue] = useState19(value != null ? value : "");
+  useDebounce4(() => onChange(innerValue), 500, [innerValue]);
+  return /* @__PURE__ */ jsx70(
+    Input6,
+    {
+      type: "date",
+      label: ariaLabel,
+      showLabel: false,
+      onChange: (e) => setInnerValue(e.currentTarget.value),
+      disabled,
+      value: innerValue,
+      readOnly,
+      "data-testid": valueTestId
+    }
+  );
+};
+var DateRangeEditor = ({
+  ariaLabel,
+  onChange,
+  disabled,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [minDateValue, setMinDateValue] = useState19(value ? value[0] : "");
+  const [maxDateValue, setMaxDateValue] = useState19(value ? value[1] : "");
+  const [error, setError] = useState19("");
+  useDebounce4(
+    () => {
+      if (minDateValue && maxDateValue && !error) {
+        onChange([minDateValue, maxDateValue]);
+      } else {
+        onChange([]);
+      }
+    },
+    500,
+    [minDateValue, maxDateValue]
+  );
+  useEffect19(() => {
+    if (!minDateValue || !maxDateValue) {
+      return;
+    }
+    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;
+    }
+    if (maxDate && !minDate) {
+      setError("Please enter both a low and high date");
+      return;
+    }
+    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__ */ jsxs43(Fragment14, { children: [
+    /* @__PURE__ */ jsxs43("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ jsx70(
+        Input6,
+        {
+          label: `${ariaLabel}-min-date`,
+          type: "date",
+          showLabel: false,
+          value: minDateValue,
+          onChange: (e) => setMinDateValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled,
+          readOnly
+        }
+      ),
+      /* @__PURE__ */ jsx70(
+        Input6,
+        {
+          label: `${ariaLabel}-max-date`,
+          type: "date",
+          showLabel: false,
+          value: maxDateValue,
+          onChange: (e) => setMaxDateValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled,
+          readOnly
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx70(ErrorContainer, { errorMessage: error })
+  ] });
+};
+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;
+  }
+  return /* @__PURE__ */ jsx70(Editor, { ...props });
+};
+var filterMapper = {
+  multiChoice: FilterMultiChoiceEditor,
+  singleChoice: FilterSingleChoiceEditor,
+  date: DateEditor,
+  dateRange: DateRangeEditor,
+  text: TextEditor,
+  numberRange: NumberRangeEditor,
+  number: NumberEditor,
+  statusMultiChoice: StatusMultiEditor,
+  statusSingleChoice: StatusSingleEditor,
+  empty: null
+};
+var ErrorContainer = ({ errorMessage }) => {
+  return /* @__PURE__ */ jsx70(
+    "div",
+    {
+      css: {
+        gridColumn: "span 6",
+        order: 6
+      },
+      children: /* @__PURE__ */ jsx70(FieldMessage, { errorMessage })
+    }
+  );
+};
+var twoColumnGrid = {
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: "var(--spacing-sm);"
+};
+
+// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
+import { jsx as jsx71 } from "@emotion/react/jsx-runtime";
+var SearchAndFilterContext = createContext6({
+  searchTerm: "",
+  setSearchTerm: () => {
+  },
+  filterVisibility: void 0,
+  setFilterVisibility: () => {
+  },
+  filters: [],
+  setFilters: () => {
+  },
+  handleAddFilter: () => {
+  },
+  handleResetFilters: () => {
+  },
+  handleDeleteFilter: () => {
+  },
+  filterOptions: [],
+  validFilterQuery: [],
+  filterMapper: {},
+  totalResults: 0
+});
+var SearchAndFilterProvider = ({
+  filters,
+  filterOptions,
+  filterVisible = false,
+  defaultSearchTerm = "",
+  onSearchChange,
+  onChange,
+  resetFilterValues = [{ field: "", operator: "", value: "" }],
+  totalResults,
+  filterMapper: filterMapper2 = filterMapper,
+  children
+}) => {
+  const [searchTerm, setSearchTerm] = useState20(defaultSearchTerm);
+  const deferredSearchTerm = useDeferredValue2(searchTerm);
+  const [filterVisibility, setFilterVisibility] = useState20(filterVisible);
+  const handleSearchTerm = useCallback6(
+    (term) => {
+      setSearchTerm(term);
+      onSearchChange == null ? void 0 : onSearchChange(term);
+    },
+    [setSearchTerm, onSearchChange]
+  );
+  const handleToggleFilterVisibility = useCallback6(
+    (visible) => setFilterVisibility(visible),
+    [setFilterVisibility]
+  );
+  const handleAddFilter = useCallback6(() => {
+    onChange([...filters, { field: "", operator: "", value: "" }]);
+  }, [filters, onChange]);
+  const handleResetFilters = useCallback6(() => {
+    onChange(resetFilterValues);
+  }, [onChange, resetFilterValues]);
+  const handleDeleteFilter = useCallback6(
+    (index) => {
+      const remainingFilters = filters.filter((_, i) => i !== index);
+      onChange(remainingFilters);
+    },
+    [filters, onChange]
+  );
+  const validFilterQuery = useMemo17(() => {
+    const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
+    if (hasValidFilters) {
+      return filters;
+    }
+  }, [filters]);
+  useEffect20(() => {
+    if (filterVisibility) {
+      const handleEscKeyFilterClose = (e) => {
+        if (e.key === "Escape") {
+          setFilterVisibility(false);
+        }
+      };
+      document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      return () => {
+        document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      };
+    }
+  }, [filterVisibility]);
+  return /* @__PURE__ */ jsx71(
+    SearchAndFilterContext.Provider,
+    {
+      value: {
+        searchTerm: deferredSearchTerm,
+        setSearchTerm: (e) => handleSearchTerm(e),
+        filterVisibility,
+        setFilterVisibility: (e) => handleToggleFilterVisibility(e),
+        filters,
+        setFilters: (e) => onChange(e),
+        handleAddFilter,
+        handleResetFilters,
+        handleDeleteFilter,
+        filterOptions,
+        validFilterQuery,
+        totalResults,
+        filterMapper: filterMapper2
+      },
+      children: /* @__PURE__ */ jsx71(VerticalRhythm5, { children })
+    }
+  );
+};
+var useSearchAndFilter = () => {
+  const value = useContext8(SearchAndFilterContext);
+  return { ...value };
+};
+
+// src/components/SearchAndFilter/FilterControls.tsx
+import { Fragment as Fragment15, jsx as jsx72, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+var FilterControls = ({
+  children,
+  hideSearchInput
+}) => {
+  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm } = useSearchAndFilter();
+  const [localeSearchTerm, setLocaleSearchTerm] = useState21("");
+  useDebounce5(
+    () => {
+      setSearchTerm(localeSearchTerm);
+    },
+    300,
+    [localeSearchTerm, searchTerm]
+  );
+  useEffect21(() => {
+    if (searchTerm === "") {
+      setLocaleSearchTerm("");
+    }
+  }, [searchTerm]);
+  return /* @__PURE__ */ jsxs44(Fragment15, { children: [
+    /* @__PURE__ */ jsx72(
+      FilterButton2,
+      {
+        "aria-controls": "search-and-filter-options",
+        "aria-label": "filter options",
+        "aria-haspopup": "true",
+        text: "Filter/Sort",
+        "aria-expanded": filterVisibility === true,
+        filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
+        onClick: () => setFilterVisibility(!filterVisibility),
+        dataTestId: "filters-button"
+      }
+    ),
+    hideSearchInput ? null : /* @__PURE__ */ jsx72(
+      InputKeywordSearch2,
+      {
+        placeholder: "Search...",
+        onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+        value: localeSearchTerm,
+        compact: true,
+        rounded: true,
+        css: SearchInput
+      }
+    ),
+    children
+  ] });
+};
+
+// src/components/SearchAndFilter/FilterItem.tsx
+import { Icon as Icon7, InputComboBox as InputComboBox2 } from "@uniformdev/design-system";
+import { useMemo as useMemo18 } from "react";
+
+// src/components/SearchAndFilter/FilterMenu.tsx
+import { HorizontalRhythm as HorizontalRhythm8, VerticalRhythm as VerticalRhythm6 } from "@uniformdev/design-system";
+import React12, { useEffect as useEffect22 } from "react";
+import { jsx as jsx73, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+var SearchAndFilterOptionsContainer2 = ({
+  buttonRow,
+  additionalFiltersContainer,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs45("div", { css: SearchAndFilterOptionsContainer, children: [
+    /* @__PURE__ */ jsx73("div", { css: SearchAndFilterOptionsInnerContainer, children }),
+    buttonRow ? /* @__PURE__ */ jsx73(
+      HorizontalRhythm8,
+      {
+        css: SearchAndFilterButtonGroup,
+        gap: "sm",
+        align: "center",
+        justify: "space-between",
+        children: buttonRow
+      }
+    ) : null,
+    additionalFiltersContainer ? /* @__PURE__ */ jsx73("div", { children: additionalFiltersContainer }) : null
+  ] });
+};
+var FilterMenu = ({
+  id,
+  filterTitle = "Show results",
+  menuControls,
+  additionalFiltersContainer,
+  children,
+  dataTestId,
+  resetButtonText = "reset"
+}) => {
+  const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
+  const innerMenuRef = React12.useRef(null);
+  useEffect22(() => {
+    var _a;
+    if (filterVisibility) {
+      (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [filterVisibility]);
+  return /* @__PURE__ */ jsx73(VerticalRhythm6, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ jsxs45(
+    SearchAndFilterOptionsContainer2,
+    {
+      buttonRow: menuControls,
+      additionalFiltersContainer,
+      children: [
+        /* @__PURE__ */ jsxs45(HorizontalRhythm8, { gap: "sm", align: "center", justify: "space-between", children: [
+          /* @__PURE__ */ jsx73("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
+          (filters == null ? void 0 : filters.length) ? /* @__PURE__ */ jsx73(
+            "button",
+            {
+              type: "button",
+              css: ResetConditionsBtn,
+              onClick: () => {
+                handleResetFilters();
+                setFilterVisibility(false);
+              },
+              "data-testid": "reset-filters",
+              children: resetButtonText
+            }
+          ) : null
+        ] }),
+        children
+      ]
+    }
+  ) : null });
+};
+
+// src/components/SearchAndFilter/FilterItem.tsx
+import { jsx as jsx74, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+var FilterItem = ({
+  index,
+  paramOptions,
+  operatorOptions,
+  valueOptions,
+  onParamChange,
+  onOperatorChange,
+  onValueChange
+}) => {
+  var _a, _b;
+  const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
+  const label = filters[index].field !== "" ? filters[index].field : "unknown filter field";
+  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 } = useMemo18(() => {
+    var _a2;
+    const currentSelectedFilter = 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) => {
+      return filters[index].field === item.value;
+    });
+    const isCurrentFieldReadOnly = selectedFieldValue2 == null ? void 0 : selectedFieldValue2.readOnly;
+    const selectedOperatorValue2 = operatorOptions == null ? void 0 : operatorOptions.find((item) => {
+      return filters[index].operator === item.value;
+    });
+    return {
+      selectedFieldValue: selectedFieldValue2,
+      selectedOperatorValue: selectedOperatorValue2 != null ? selectedOperatorValue2 : void 0,
+      selectedMetaValue: filters[index].value,
+      readOnly: isCurrentFieldReadOnly,
+      bindable: selectedFieldValue2 == null ? void 0 : selectedFieldValue2.bindable
+    };
+  }, [filters, filterOptions, index, operatorOptions]);
+  const readOnlyProps = readOnly ? {
+    "aria-readonly": true,
+    isSearchable: false,
+    menuIsOpen: false,
+    isClearable: false
+  } : {};
+  return /* @__PURE__ */ jsxs46("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
+    /* @__PURE__ */ jsx74("span", { children: index === 0 ? "Where" : "and" }),
+    /* @__PURE__ */ jsxs46("div", { css: ConditionalInputRow, children: [
+      /* @__PURE__ */ jsx74(
+        InputComboBox2,
+        {
+          "aria-label": label,
+          options: paramOptions,
+          onChange: (e) => {
+            var _a2;
+            onParamChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
+          },
+          isOptionDisabled: (option) => {
+            var _a2;
+            return (_a2 = option == null ? void 0 : option.disabled) != null ? _a2 : false;
+          },
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
+          value: selectedFieldValue,
+          ...readOnlyProps,
+          id: "filter-field",
+          name: `filter-field-${index}`
+        }
+      ),
+      /* @__PURE__ */ jsx74(
+        InputComboBox2,
+        {
+          "aria-label": operatorLabel,
+          options: operatorOptions,
+          onChange: (e) => {
+            var _a2;
+            return onOperatorChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
+          },
+          isDisabled: !filters[index].field,
+          value: selectedOperatorValue,
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
+          ...readOnlyProps,
+          id: "filter-operator",
+          name: `filter-operator-${index}`
+        }
+      ),
+      /* @__PURE__ */ jsx74(
+        FilterEditorRenderer,
+        {
+          "aria-label": metaDataLabel,
+          editorType: metaDataPossibleOptions,
+          options: valueOptions,
+          onChange: (e) => onValueChange(e != null ? e : ""),
+          readOnly,
+          bindable,
+          disabled: !filters[index].operator,
+          value: selectedMetaValue,
+          valueTestId: "filter-value"
+        }
+      ),
+      readOnly || index === 0 ? null : /* @__PURE__ */ jsx74(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleDeleteFilter(index),
+          "aria-label": "delete filter",
+          css: IconBtn,
+          "data-testid": "delete-filter",
+          children: /* @__PURE__ */ jsx74(Icon7, { icon: "trash", iconColor: "red", size: "1rem" })
+        }
+      )
+    ] })
+  ] });
+};
+var FilterItems = ({
+  addButtonText = "add condition",
+  additionalFiltersContainer
+}) => {
+  const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
+  const handleUpdateFilter = (index, prop, value) => {
+    var _a, _b, _c, _d, _e;
+    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";
+      }
+    }
+    if (prop === "field") {
+      const firstOperatorInAvailableOperators = (_e = (_d = (_c = (_b = (_a = filterOptions.find((fo) => {
+        var _a2;
+        return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === value);
+      })) == 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 = "";
+    }
+    setFilters(next);
+  };
+  return /* @__PURE__ */ jsx74(
+    FilterMenu,
+    {
+      id: "search-and-filter-options",
+      dataTestId: "search-and-filter-options",
+      menuControls: /* @__PURE__ */ jsxs46(
+        "button",
+        {
+          type: "button",
+          css: AddConditionalBtn,
+          onClick: handleAddFilter,
+          "data-testid": "add-filter",
+          children: [
+            /* @__PURE__ */ jsx74(Icon7, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+            addButtonText
+          ]
+        }
+      ),
+      additionalFiltersContainer,
+      children: filters.map((item, i) => {
+        var _a, _b, _c, _d, _e, _f;
+        const availableTypeOptions = (_b = (_a = filterOptions.find((fo) => {
+          var _a2;
+          return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === item.field);
+        })) == 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__ */ jsx74(
+          FilterItem,
+          {
+            index: i,
+            paramOptions: filterOptions,
+            onParamChange: (e) => handleUpdateFilter(i, "field", e),
+            operatorOptions: possibleOperators,
+            onOperatorChange: (e) => handleUpdateFilter(i, "operator", e),
+            onValueChange: (e) => handleUpdateFilter(i, "value", e),
+            valueOptions: possibleValueOptions
+          },
+          i
+        );
+      })
+    }
+  );
+};
+
+// src/components/SearchAndFilter/SearchAndFilter.tsx
+import { VerticalRhythm as VerticalRhythm7 } from "@uniformdev/design-system";
+
+// src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
+import { Button as Button6, Callout as Callout6, HorizontalRhythm as HorizontalRhythm9, Paragraph } from "@uniformdev/design-system";
+import { Fragment as Fragment16, jsx as jsx75, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
+var SearchAndFilterResultContainer = ({
+  buttonText,
+  clearButtonLabel = "clear",
+  calloutTitle,
+  calloutText,
+  onHandleClear,
+  hideClearButton
+}) => {
+  const { searchTerm, setSearchTerm, totalResults, setFilters, filters } = useSearchAndFilter();
+  const automateCalloutTitle = () => {
+    if (searchTerm && !filters.length) {
+      return "No search results found";
+    }
+    if (filters.length && !searchTerm) {
+      return "No results match the selected filters";
+    }
+    return "No matching results found";
+  };
+  const handleResetFilters = () => {
+    if (searchTerm && !filters.length) {
+      setSearchTerm("");
+      return;
+    } else if (!searchTerm && filters.length) {
+      setFilters([{ field: "", operator: "", value: "" }]);
+      return;
+    } else {
+      setSearchTerm("");
+      setFilters([{ field: "", operator: "", value: "" }]);
+      return;
+    }
+  };
+  if (totalResults && totalResults > 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs47(Fragment16, { children: [
+    /* @__PURE__ */ jsxs47(HorizontalRhythm9, { children: [
+      /* @__PURE__ */ jsxs47("span", { children: [
+        totalResults,
+        " results ",
+        searchTerm ? `for "${searchTerm}"` : null
+      ] }),
+      !searchTerm || hideClearButton ? null : /* @__PURE__ */ jsx75(Button6, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
+    ] }),
+    totalResults === 0 ? /* @__PURE__ */ jsxs47(Callout6, { title: calloutTitle != null ? calloutTitle : automateCalloutTitle(), type: "note", children: [
+      calloutText ? /* @__PURE__ */ jsx75(Paragraph, { children: calloutText }) : null,
+      hideClearButton ? null : /* @__PURE__ */ jsx75(Button6, { buttonType: "tertiaryOutline", size: "xs", onClick: onHandleClear != null ? onHandleClear : handleResetFilters, children: buttonText != null ? buttonText : "Clear search" })
+    ] }) : null
+  ] });
+};
+
+// src/components/SearchAndFilter/SearchAndFilter.tsx
+import { jsx as jsx76, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
+var SearchAndFilter = ({
+  filters,
+  filterOptions,
+  filterVisible,
+  filterControls,
+  viewSwitchControls,
+  resultsContainerView = /* @__PURE__ */ jsx76(SearchAndFilterResultContainer, {}),
+  filterMapper: filterMapper2 = filterMapper,
+  additionalFiltersContainer,
+  onChange,
+  defaultSearchTerm,
+  onSearchChange,
+  totalResults,
+  resetFilterValues = []
+}) => {
+  return /* @__PURE__ */ jsx76(
+    SearchAndFilterProvider,
+    {
+      filters,
+      filterOptions,
+      filterVisible,
+      onChange,
+      defaultSearchTerm,
+      onSearchChange,
+      totalResults,
+      resetFilterValues,
+      filterMapper: filterMapper2,
+      children: /* @__PURE__ */ jsxs48(VerticalRhythm7, { "data-testid": "search-and-filter", children: [
+        /* @__PURE__ */ jsxs48("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
+          /* @__PURE__ */ jsx76(
+            "div",
+            {
+              css: SearchAndFilterControlsWrapper(viewSwitchControls ? "auto 1fr 0.05fr" : "auto 1fr"),
+              children: !filterControls ? /* @__PURE__ */ jsx76(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
+            }
+          ),
+          viewSwitchControls
+        ] }),
+        /* @__PURE__ */ jsx76(FilterItems, { additionalFiltersContainer }),
+        resultsContainerView
+      ] })
+    }
+  );
+};
+
+// src/components/SearchAndFilter/SearchOnlyFilter.tsx
+import { InputKeywordSearch as InputKeywordSearch3 } from "@uniformdev/design-system";
+import { createContext as createContext7, useState as useState22 } from "react";
+import { useDebounce as useDebounce6 } from "react-use";
+import { jsx as jsx77 } from "@emotion/react/jsx-runtime";
+var SearchOnlyContext = createContext7({
+  searchTerm: "",
+  setSearchTerm: () => {
+  }
+});
+var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
+  const { searchTerm, setSearchTerm } = useSearchAndFilter();
+  const [localeSearchTerm, setLocaleSearchTerm] = useState22("");
+  useDebounce6(
+    () => {
+      setSearchTerm(localeSearchTerm);
+      onSearchChange == null ? void 0 : onSearchChange(localeSearchTerm);
+    },
+    300,
+    [localeSearchTerm]
+  );
+  return /* @__PURE__ */ jsx77(
+    SearchOnlyContext.Provider,
+    {
+      value: {
+        searchTerm,
+        setSearchTerm: setLocaleSearchTerm
+      },
+      children: /* @__PURE__ */ jsx77("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ jsx77(
+        InputKeywordSearch3,
+        {
+          placeholder: "Search...",
+          onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+          value: localeSearchTerm,
+          compact: true,
+          rounded: true
+        }
+      ) })
+    }
+  );
+};
+
+// src/components/SearchAndFilter2/filtersMapper.tsx
+import { jsx as jsx78 } from "@emotion/react/jsx-runtime";
+function withInputVariables(WrappedComponent) {
+  const WithInputVariables = (props) => {
+    if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
+      return /* @__PURE__ */ jsx78(WrappedComponent, { ...props });
+    }
+    return /* @__PURE__ */ jsx78(
+      InputVariables,
+      {
+        disableInlineMenu: true,
+        showMenuPosition: "inline-right",
+        onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
+        value: props.value,
+        disabled: props.disabled,
+        inputWhenNoVariables: /* @__PURE__ */ jsx78(WrappedComponent, { ...props })
+      }
+    );
+  };
+  return WithInputVariables;
+}
+function withInputVariablesForMultiValue(WrappedComponent) {
+  const WithInputVariables = (props) => {
+    var _a;
+    if (!props.bindable || props.disabled || props.readOnly) {
+      return /* @__PURE__ */ jsx78(WrappedComponent, { ...props });
+    }
+    return /* @__PURE__ */ jsx78(
+      InputVariables,
+      {
+        disableInlineMenu: true,
+        showMenuPosition: "inline-right",
+        onChange: (newValue) => props.onChange(newValue ? [newValue] : []),
+        value: (_a = props.value) == null ? void 0 : _a[0],
+        inputWhenNoVariables: /* @__PURE__ */ jsx78(WrappedComponent, { ...props })
+      }
+    );
+  };
+  return WithInputVariables;
+}
+var bindableFiltersMapper = {
+  ...filterMapper,
+  multiChoice: withInputVariablesForMultiValue(FilterMultiChoiceEditor),
+  singleChoice: withInputVariables(FilterSingleChoiceEditor),
+  date: withInputVariables(DateEditor),
+  text: withInputVariables(TextEditor),
+  number: withInputVariables(NumberEditor)
+};
+
+// src/utils/createLocationValidator.ts
+function createLocationValidator(setValue, validate) {
+  return (dispatch) => setValue((previous) => {
+    const { newValue, options } = dispatch(previous);
+    return { newValue, options: validate(newValue, options) };
+  });
+}
+
+// src/utils/useContentDataResourceLocaleInfo.ts
+import { bindVariables as bindVariables2, createVariableReference as createVariableReference4, LOCALE_DYNAMIC_INPUT_NAME as LOCALE_DYNAMIC_INPUT_NAME2 } from "@uniformdev/canvas";
+import { useEffect as useEffect23, useRef as useRef16 } from "react";
+function useContentDataResourceLocaleInfo({
+  locale,
+  setLocale,
+  dynamicInputs
+}) {
+  var _a;
+  const setLocaleRef = useRef16(setLocale);
+  setLocaleRef.current = setLocale;
+  const { flatVariables } = useVariables();
+  const effectiveLocale = locale != null ? locale : dynamicInputs[LOCALE_DYNAMIC_INPUT_NAME2] ? createVariableReference4(LOCALE_DYNAMIC_INPUT_NAME2) : "";
+  const boundLocale = (_a = bindVariables2({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
+  useEffect23(() => {
+    if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
+      setLocaleRef.current(createVariableReference4(LOCALE_DYNAMIC_INPUT_NAME2));
+    }
+  }, [locale, effectiveLocale]);
+  return { effectiveLocale, boundLocale: boundLocale ? boundLocale : void 0 };
 }
 
 // src/index.ts
 import {
   AddListButton as AddListButton2,
-  Button as Button6,
-  Callout as Callout6,
+  Button as Button7,
+  Callout as Callout7,
   DrawerContent,
   Heading,
-  Input as Input6,
-  InputComboBox,
-  InputKeywordSearch as InputKeywordSearch2,
+  Input as Input7,
+  InputComboBox as InputComboBox3,
+  InputKeywordSearch as InputKeywordSearch4,
   InputSelect as InputSelect8,
   InputToggle,
   Label,
@@ -7364,9 +8947,11 @@ export {
   $createVariableNode,
   $isVariableNode,
   AddListButton2 as AddListButton,
-  Button6 as Button,
-  Callout6 as Callout,
+  Button7 as Button,
+  CHECKBOX_OPERATORS,
+  Callout7 as Callout,
   ControlledValuePlugin,
+  DATE_OPERATORS,
   DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem,
   DataRefreshButton,
@@ -7375,17 +8960,27 @@ export {
   DataResourceVariablesListExplicit,
   DataSourceEditor,
   DataTypeEditor,
+  DateEditor,
+  DateRangeEditor,
   DefaultSearchRow,
   DefaultSelectedItem,
   DrawerContent,
   EDIT_VARIABLE_COMMAND,
   EntrySearch,
+  FilterButton2 as FilterButton,
+  FilterControls,
+  FilterEditorRenderer,
+  FilterItem,
+  FilterItems,
+  FilterMenu,
+  FilterMultiChoiceEditor,
+  FilterSingleChoiceEditor,
   Heading,
   INSERT_VARIABLE_COMMAND,
   icons_exports as Icons,
-  Input6 as Input,
-  InputComboBox,
-  InputKeywordSearch2 as InputKeywordSearch,
+  Input7 as Input,
+  InputComboBox3 as InputComboBox,
+  InputKeywordSearch4 as InputKeywordSearch,
   InputSelect8 as InputSelect,
   InputToggle,
   InputVariables,
@@ -7396,6 +8991,9 @@ export {
   Menu4 as Menu,
   MenuItem3 as MenuItem,
   MeshApp,
+  NUMBER_OPERATORS,
+  NumberEditor,
+  NumberRangeEditor,
   OPEN_INSERT_VARIABLE_COMMAND,
   ObjectSearchContainer,
   ObjectSearchFilter,
@@ -7406,6 +9004,7 @@ export {
   ObjectSearchResultItem,
   ObjectSearchResultItemButton,
   ObjectSearchResultList,
+  PUBLISH_STATUS_FIELD_OPERATORS,
   ParamTypeDynamicDataProvider,
   ParameterConnectionIndicator,
   ParameterGroup,
@@ -7433,6 +9032,7 @@ export {
   ProductSearchRow,
   ProductSelectedItem,
   QueryFilter,
+  RICHTEXT_OPERATORS,
   RequestBody,
   RequestHeaders,
   RequestMethodSelect,
@@ -7442,13 +9042,27 @@ export {
   RequestUrl,
   RequestUrlInput,
   ResolvableLoadingValue,
+  SYSTEM_DATE_OPERATORS,
+  SYSTEM_FIELD_OPERATORS,
   ScrollableList2 as ScrollableList,
   ScrollableListItem,
+  SearchAndFilter,
+  SearchAndFilterContext,
+  SearchAndFilterOptionsContainer2 as SearchAndFilterOptionsContainer,
+  SearchAndFilterProvider,
+  SearchAndFilterResultContainer,
+  SearchOnlyContext,
+  SearchOnlyFilter,
   SelectionField,
+  StatusMultiEditor,
+  StatusSingleEditor,
   Switch,
+  TEXTBOX_OPERATORS,
+  TextEditor,
   TextVariableRenderer,
   Textarea,
   Theme3 as Theme,
+  USER_OPERATORS,
   VariableEditor,
   VariableNode,
   VariablesList,
@@ -7486,6 +9100,7 @@ export {
   entrySearchSelectInput,
   entrySearchSelectOption,
   entrySearchWrapper,
+  filterMapper,
   hasReferencedVariables,
   prettifyBindExpression,
   productSearchRowActiveIcon,
@@ -7536,6 +9151,7 @@ export {
   useRequest,
   useRequestHeader,
   useRequestParameter,
+  useSearchAndFilter,
   useUniformMeshSdk,
   useVariableEditor,
   useVariables,