@uniformdev/mesh-sdk-react 19.159.1-alpha.16 → 19.159.1-alpha.27

package/dist/index.js

@@ -33,10 +33,10 @@ var src_exports = {};
 __export(src_exports, {
   $createVariableNode: () => $createVariableNode,
   $isVariableNode: () => $isVariableNode,
-  AddListButton: () => import_design_system63.AddListButton,
-  Button: () => import_design_system63.Button,
+  AddListButton: () => import_design_system64.AddListButton,
+  Button: () => import_design_system64.Button,
   CHECKBOX_OPERATORS: () => CHECKBOX_OPERATORS,
-  Callout: () => import_design_system63.Callout,
+  Callout: () => import_design_system64.Callout,
   ControlledValuePlugin: () => ControlledValuePlugin,
   DATE_OPERATORS: () => DATE_OPERATORS,
   DISCONNECT_VARIABLE_COMMAND: () => DISCONNECT_VARIABLE_COMMAND,
@@ -51,7 +51,7 @@ __export(src_exports, {
   DateRangeEditor: () => DateRangeEditor,
   DefaultSearchRow: () => DefaultSearchRow,
   DefaultSelectedItem: () => DefaultSelectedItem,
-  DrawerContent: () => import_design_system63.DrawerContent,
+  DrawerContent: () => import_design_system64.DrawerContent,
   EDIT_VARIABLE_COMMAND: () => EDIT_VARIABLE_COMMAND,
   EntrySearch: () => EntrySearch,
   FilterButton: () => FilterButton2,
@@ -62,22 +62,22 @@ __export(src_exports, {
   FilterMenu: () => FilterMenu,
   FilterMultiChoiceEditor: () => FilterMultiChoiceEditor,
   FilterSingleChoiceEditor: () => FilterSingleChoiceEditor,
-  Heading: () => import_design_system63.Heading,
+  Heading: () => import_design_system64.Heading,
   INSERT_VARIABLE_COMMAND: () => INSERT_VARIABLE_COMMAND,
   Icons: () => icons_exports,
-  Input: () => import_design_system63.Input,
-  InputComboBox: () => import_design_system63.InputComboBox,
-  InputKeywordSearch: () => import_design_system63.InputKeywordSearch,
-  InputSelect: () => import_design_system63.InputSelect,
-  InputToggle: () => import_design_system63.InputToggle,
+  Input: () => import_design_system64.Input,
+  InputComboBox: () => import_design_system64.InputComboBox,
+  InputKeywordSearch: () => import_design_system64.InputKeywordSearch,
+  InputSelect: () => import_design_system64.InputSelect,
+  InputToggle: () => import_design_system64.InputToggle,
   InputVariables: () => InputVariables,
-  Label: () => import_design_system63.Label,
+  Label: () => import_design_system64.Label,
   LinkButton: () => LinkButton,
-  LoadingIndicator: () => import_design_system63.LoadingIndicator,
-  LoadingOverlay: () => import_design_system63.LoadingOverlay,
+  LoadingIndicator: () => import_design_system64.LoadingIndicator,
+  LoadingOverlay: () => import_design_system64.LoadingOverlay,
   MULTI_SELECT_OPERATORS: () => MULTI_SELECT_OPERATORS,
-  Menu: () => import_design_system63.Menu,
-  MenuItem: () => import_design_system63.MenuItem,
+  Menu: () => import_design_system64.Menu,
+  MenuItem: () => import_design_system64.MenuItem,
   MeshApp: () => MeshApp,
   NUMBER_OPERATORS: () => NUMBER_OPERATORS,
   NumberEditor: () => NumberEditor,
@@ -95,22 +95,22 @@ __export(src_exports, {
   PUBLISH_STATUS_FIELD_OPERATORS: () => PUBLISH_STATUS_FIELD_OPERATORS,
   ParamTypeDynamicDataProvider: () => ParamTypeDynamicDataProvider,
   ParameterConnectionIndicator: () => ParameterConnectionIndicator,
-  ParameterGroup: () => import_design_system63.ParameterGroup,
-  ParameterImage: () => import_design_system63.ParameterImage,
-  ParameterImageInner: () => import_design_system63.ParameterImageInner,
-  ParameterInput: () => import_design_system63.ParameterInput,
-  ParameterInputInner: () => import_design_system63.ParameterInputInner,
-  ParameterLabel: () => import_design_system63.ParameterLabel,
-  ParameterMenuButton: () => import_design_system63.ParameterMenuButton,
+  ParameterGroup: () => import_design_system64.ParameterGroup,
+  ParameterImage: () => import_design_system64.ParameterImage,
+  ParameterImageInner: () => import_design_system64.ParameterImageInner,
+  ParameterInput: () => import_design_system64.ParameterInput,
+  ParameterInputInner: () => import_design_system64.ParameterInputInner,
+  ParameterLabel: () => import_design_system64.ParameterLabel,
+  ParameterMenuButton: () => import_design_system64.ParameterMenuButton,
   ParameterOrSingleVariable: () => ParameterOrSingleVariable,
-  ParameterSelect: () => import_design_system63.ParameterSelect,
-  ParameterSelectInner: () => import_design_system63.ParameterSelectInner,
-  ParameterShell: () => import_design_system63.ParameterShell,
+  ParameterSelect: () => import_design_system64.ParameterSelect,
+  ParameterSelectInner: () => import_design_system64.ParameterSelectInner,
+  ParameterShell: () => import_design_system64.ParameterShell,
   ParameterShellContext: () => import_design_system14.ParameterShellContext,
-  ParameterTextarea: () => import_design_system63.ParameterTextarea,
-  ParameterTextareaInner: () => import_design_system63.ParameterTextareaInner,
-  ParameterToggle: () => import_design_system63.ParameterToggle,
-  ParameterToggleInner: () => import_design_system63.ParameterToggleInner,
+  ParameterTextarea: () => import_design_system64.ParameterTextarea,
+  ParameterTextareaInner: () => import_design_system64.ParameterTextareaInner,
+  ParameterToggle: () => import_design_system64.ParameterToggle,
+  ParameterToggleInner: () => import_design_system64.ParameterToggleInner,
   ParameterVariables: () => ParameterVariables,
   ProductPreviewList: () => ProductPreviewList,
   ProductQuery: () => ProductQuery,
@@ -133,8 +133,8 @@ __export(src_exports, {
   SELECT_OPERATORS: () => SELECT_OPERATORS,
   SYSTEM_DATE_OPERATORS: () => SYSTEM_DATE_OPERATORS,
   SYSTEM_FIELD_OPERATORS: () => SYSTEM_FIELD_OPERATORS,
-  ScrollableList: () => import_design_system63.ScrollableList,
-  ScrollableListItem: () => import_design_system63.ScrollableListItem,
+  ScrollableList: () => import_design_system64.ScrollableList,
+  ScrollableListItem: () => import_design_system64.ScrollableListItem,
   SearchAndFilter: () => SearchAndFilter,
   SearchAndFilterContext: () => SearchAndFilterContext,
   SearchAndFilterOptionsContainer: () => SearchAndFilterOptionsContainer2,
@@ -146,12 +146,13 @@ __export(src_exports, {
   SortItems: () => SortItems,
   StatusMultiEditor: () => StatusMultiEditor,
   StatusSingleEditor: () => StatusSingleEditor,
-  Switch: () => import_design_system63.Switch,
+  Switch: () => import_design_system64.Switch,
   TEXTBOX_OPERATORS: () => TEXTBOX_OPERATORS,
   TextEditor: () => TextEditor,
+  TextMultiChoiceEditor: () => TextMultiChoiceEditor,
   TextVariableRenderer: () => TextVariableRenderer,
-  Textarea: () => import_design_system63.Textarea,
-  Theme: () => import_design_system63.Theme,
+  Textarea: () => import_design_system64.Textarea,
+  Theme: () => import_design_system64.Theme,
   USER_OPERATORS: () => USER_OPERATORS,
   VariableEditor: () => VariableEditor,
   VariableNode: () => VariableNode,
@@ -247,7 +248,7 @@ __export(src_exports, {
   useVariableEditor: () => useVariableEditor,
   useVariables: () => useVariables,
   useVariablesMenu: () => useVariablesMenu,
-  utilityColors: () => import_design_system63.utilityColors,
+  utilityColors: () => import_design_system64.utilityColors,
   variableDefaultTextValue: () => variableDefaultTextValue,
   variablePrefix: () => variablePrefix,
   variableSuffix: () => variableSuffix,
@@ -1893,8 +1894,7 @@ var EntrySearch = ({
   const handleCancelClick = (e) => {
     e.preventDefault();
     setListOpen(false);
-    if (onCancel)
-      onCancel();
+    if (onCancel) onCancel();
   };
   const handleLoadMoreClick = () => {
     search(textInput, {
@@ -4881,8 +4881,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,
@@ -5335,7 +5334,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,
@@ -8324,32 +8323,80 @@ var TextEditor = ({
   );
 };
 
+// src/components/SearchAndFilter/editors/TextMultiChoiceEditor.tsx
+var import_design_system52 = require("@uniformdev/design-system");
+var import_react85 = require("react");
+var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
+var TextMultiChoiceEditor = ({
+  value,
+  disabled,
+  readOnly,
+  valueTestId,
+  ...props
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  const isClearable = !readOnly || !disabled;
+  const { groupedOptions, selectedOptions } = (0, import_react85.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_system52.convertComboBoxGroupsToSelectableGroups)({ options, selectedItems: new Set(value) });
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    import_design_system52.InputCreatableComboBox,
+    {
+      ...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_system52.getComboBoxSelectedSelectableGroups)(e);
+        return props.onChange([...selectedValues]);
+      },
+      value: selectedOptions,
+      "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+
 // src/components/SearchAndFilter/FilterButton.tsx
-var import_design_system53 = require("@uniformdev/design-system");
+var import_design_system54 = require("@uniformdev/design-system");
 
 // src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
-var import_react85 = require("@emotion/react");
-var import_design_system52 = require("@uniformdev/design-system");
-var SearchAndFilterControlsWrapper = (gridColumns) => import_react85.css`
+var import_react86 = require("@emotion/react");
+var import_design_system53 = require("@uniformdev/design-system");
+var SearchAndFilterControlsWrapper = (gridColumns) => import_react86.css`
   align-items: stretch;
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-sm);
 `;
-var SearchAndFilterOutterControlWrapper = (gridColumns) => import_react85.css`
+var SearchAndFilterOutterControlWrapper = (gridColumns) => import_react86.css`
   align-items: stretch;
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-sm);
 `;
-var ConditionalFilterRow = import_react85.css`
+var ConditionalFilterRow = import_react86.css`
   align-items: baseline;
   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_system53.cq)("380px")} {
     &:after {
       content: '';
       display: block;
@@ -8368,22 +8415,22 @@ var ConditionalFilterRow = import_react85.css`
     grid-template-columns: 50px 1fr;
   }
 
-  ${(0, import_design_system52.cq)("580px")} {
+  ${(0, import_design_system53.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_system53.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
   }
 `;
-var ConditionalInputRow = import_react85.css`
+var ConditionalInputRow = import_react86.css`
   display: flex;
   gap: var(--spacing-sm);
   flex-wrap: wrap;
 
-  ${(0, import_design_system52.cq)("380px")} {
+  ${(0, import_design_system53.cq)("380px")} {
     & > div:nth-child(-n + 2) {
       width: calc(50% - var(--spacing-sm));
     }
@@ -8392,7 +8439,7 @@ var ConditionalInputRow = import_react85.css`
       width: calc(100% - 48px);
     }
   }
-  ${(0, import_design_system52.cq)("764px")} {
+  ${(0, import_design_system53.cq)("764px")} {
     align-items: flex-start;
     display: grid;
     grid-template-columns: 200px 160px 1fr 32px;
@@ -8402,11 +8449,11 @@ var ConditionalInputRow = import_react85.css`
     }
   }
 `;
-var SearchInput = import_react85.css`
+var SearchInput = import_react86.css`
   max-height: 40px;
   min-height: unset;
 `;
-var BindableKeywordSearchInputStyles = import_react85.css`
+var BindableKeywordSearchInputStyles = import_react86.css`
   position: relative;
   width: 100%;
 
@@ -8421,19 +8468,19 @@ var BindableKeywordSearchInputStyles = import_react85.css`
     white-space: nowrap;
   }
 `;
-var ClearSearchButtonContainer = import_react85.css`
+var ClearSearchButtonContainer = import_react86.css`
   align-items: center;
   display: flex;
   position: absolute;
   inset: 0 var(--spacing-lg) 0 auto;
 `;
-var ClearSearchButtonStyles = import_react85.css`
+var ClearSearchButtonStyles = import_react86.css`
   background: none;
   border: none;
   padding: 0;
   pointer-events: all;
 `;
-var FilterButton = import_react85.css`
+var FilterButton = import_react86.css`
   align-items: center;
   background: var(--white);
   border: 1px solid var(--gray-300);
@@ -8469,13 +8516,13 @@ var FilterButton = import_react85.css`
     opacity: var(--opacity-50);
   }
 `;
-var FilterButtonText = import_react85.css`
+var FilterButtonText = import_react86.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 14ch;
 `;
-var FilterButtonSelected = import_react85.css`
+var FilterButtonSelected = import_react86.css`
   background: var(--gray-100);
   border-color: var(--gray-300);
 
@@ -8483,7 +8530,7 @@ var FilterButtonSelected = import_react85.css`
     color: var(--accent-dark);
   }
 `;
-var FilterButtonWithOptions = import_react85.css`
+var FilterButtonWithOptions = import_react86.css`
   :where([aria-expanded='true']) {
     background: var(--purple-rain-100);
     border-color: var(--accent-light);
@@ -8495,14 +8542,14 @@ var FilterButtonWithOptions = import_react85.css`
     }
   }
 `;
-var SearchIcon = import_react85.css`
+var SearchIcon = import_react86.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_react85.css`
+var AddConditionalBtn = import_react86.css`
   align-items: center;
   background: transparent;
   border: none;
@@ -8521,31 +8568,32 @@ var AddConditionalBtn = import_react85.css`
     color: var(--gray-400);
   }
 `;
-var Title = import_react85.css`
+var Title = import_react86.css`
   color: var(--typography-light);
 
   &:focus {
     outline: none;
   }
 `;
-var ResetConditionsBtn = import_react85.css`
+var ResetConditionsBtn = import_react86.css`
   background: transparent;
   border: none;
   color: var(--action-destructive-default);
   transition: color var(--duration-fast) var(--timing-ease-out);
-  padding: 0;
+  padding: 0 var(--spacing-sm) 0 0;
 
   &:hover,
   &:focus {
     color: var(--action-destructive-hover);
   }
 `;
-var IconBtn = import_react85.css`
+var IconBtn = import_react86.css`
+  align-self: center;
   background: transparent;
   border: none;
   padding: var(--spacing-sm);
 `;
-var SearchAndFilterOptionsContainer = import_react85.css`
+var SearchAndFilterOptionsContainer = import_react86.css`
   background: var(--gray-50);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -8558,19 +8606,19 @@ var SearchAndFilterOptionsContainer = import_react85.css`
   position: relative;
   z-index: 2;
 `;
-var SearchAndFilterOptionsInnerContainer = import_react85.css`
+var SearchAndFilterOptionsInnerContainer = import_react86.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   padding-inline: var(--spacing-md);
 `;
-var SearchAndFilterButtonGroup = import_react85.css`
+var SearchAndFilterButtonGroup = import_react86.css`
   margin-top: var(--spacing-xs);
   margin-left: calc(56px + var(--spacing-md));
 `;
 
 // src/components/SearchAndFilter/FilterButton.tsx
-var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
 var FilterButton2 = ({
   text = "Filters",
   icon = "filter-add",
@@ -8579,7 +8627,7 @@ var FilterButton2 = ({
   dataTestId,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
     "button",
     {
       type: "button",
@@ -8591,9 +8639,9 @@ var FilterButton2 = ({
       ...props,
       "data-testid": dataTestId,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_design_system53.Icon, { icon, iconColor: "currentColor", size: "1rem" }),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { css: FilterButtonText, children: text }),
-        filterCount ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_design_system53.Counter, { count: filterCount, bgColor: "var(--white)" }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_design_system54.Icon, { icon, iconColor: "currentColor", size: "1rem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { css: FilterButtonText, children: text }),
+        filterCount ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_design_system54.Counter, { count: filterCount, bgColor: "var(--white)" }) : null
       ]
     }
   );
@@ -8601,28 +8649,25 @@ var FilterButton2 = ({
 
 // src/components/SearchAndFilter/FilterControls.tsx
 var import_CgClose5 = require("@react-icons/all-files/cg/CgClose");
-var import_design_system55 = require("@uniformdev/design-system");
+var import_design_system56 = require("@uniformdev/design-system");
 var import_lexical11 = require("lexical");
-var import_react87 = require("react");
+var import_react88 = require("react");
 var import_react_use10 = require("react-use");
 var import_uuid3 = require("uuid");
 
 // src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
-var import_design_system54 = require("@uniformdev/design-system");
-var import_react86 = require("react");
+var import_design_system55 = require("@uniformdev/design-system");
+var import_react87 = require("react");
 
 // src/components/SearchAndFilter/FilterEditor.tsx
-var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime82 = 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 (!Editor || editorType === "empty") {
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", {});
   }
-  if (editorType === "empty") {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Editor, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Editor, { ...props });
 };
 var filterMapper = {
   multiChoice: FilterMultiChoiceEditor,
@@ -8630,6 +8675,7 @@ var filterMapper = {
   date: DateEditor,
   dateRange: DateRangeEditor,
   text: TextEditor,
+  textMultiChoice: TextMultiChoiceEditor,
   numberRange: NumberRangeEditor,
   number: NumberEditor,
   statusMultiChoice: StatusMultiEditor,
@@ -8639,9 +8685,9 @@ var filterMapper = {
 function withInputVariables(WrappedComponent) {
   const WithInputVariables = (props) => {
     if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
-      return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(WrappedComponent, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(WrappedComponent, { ...props });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       InputVariables,
       {
         disableInlineMenu: true,
@@ -8649,7 +8695,7 @@ function withInputVariables(WrappedComponent) {
         onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
         value: props.value,
         disabled: props.disabled,
-        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(WrappedComponent, { ...props })
+        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(WrappedComponent, { ...props })
       }
     );
   };
@@ -8659,16 +8705,16 @@ function withInputVariablesForMultiValue(WrappedComponent) {
   const WithInputVariables = (props) => {
     var _a;
     if (!props.bindable || props.disabled || props.readOnly) {
-      return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(WrappedComponent, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(WrappedComponent, { ...props });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime82.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_runtime81.jsx)(WrappedComponent, { ...props })
+        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(WrappedComponent, { ...props })
       }
     );
   };
@@ -8684,8 +8730,8 @@ var bindableFiltersMapper = {
 };
 
 // src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
-var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
-var SearchAndFilterContext = (0, import_react86.createContext)({
+var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
+var SearchAndFilterContext = (0, import_react87.createContext)({
   searchTerm: "",
   setSearchTerm: () => {
   },
@@ -8720,41 +8766,41 @@ var SearchAndFilterProvider = ({
   children,
   allowBindingSearchTerm
 }) => {
-  const [searchTerm, setSearchTerm] = (0, import_react86.useState)(defaultSearchTerm);
-  const deferredSearchTerm = (0, import_react86.useDeferredValue)(searchTerm);
-  const [filterVisibility, setFilterVisibility] = (0, import_react86.useState)(filterVisible);
-  const handleSearchTerm = (0, import_react86.useCallback)(
+  const [searchTerm, setSearchTerm] = (0, import_react87.useState)(defaultSearchTerm);
+  const deferredSearchTerm = (0, import_react87.useDeferredValue)(searchTerm);
+  const [filterVisibility, setFilterVisibility] = (0, import_react87.useState)(filterVisible);
+  const handleSearchTerm = (0, import_react87.useCallback)(
     (term) => {
       setSearchTerm(term);
       onSearchChange == null ? void 0 : onSearchChange(term);
     },
     [setSearchTerm, onSearchChange]
   );
-  const handleToggleFilterVisibility = (0, import_react86.useCallback)(
+  const handleToggleFilterVisibility = (0, import_react87.useCallback)(
     (visible) => setFilterVisibility(visible),
     [setFilterVisibility]
   );
-  const handleAddFilter = (0, import_react86.useCallback)(() => {
+  const handleAddFilter = (0, import_react87.useCallback)(() => {
     onChange([...filters, { field: "", operator: "", value: "" }]);
   }, [filters, onChange]);
-  const handleResetFilters = (0, import_react86.useCallback)(() => {
+  const handleResetFilters = (0, import_react87.useCallback)(() => {
     onSearchChange == null ? void 0 : onSearchChange("");
     onChange(resetFilterValues);
   }, [onChange, resetFilterValues, onSearchChange]);
-  const handleDeleteFilter = (0, import_react86.useCallback)(
+  const handleDeleteFilter = (0, import_react87.useCallback)(
     (index) => {
       const remainingFilters = filters.filter((_, i) => i !== index);
       onChange(remainingFilters);
     },
     [filters, onChange]
   );
-  const validFilterQuery = (0, import_react86.useMemo)(() => {
+  const validFilterQuery = (0, import_react87.useMemo)(() => {
     const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
     if (hasValidFilters) {
       return filters;
     }
   }, [filters]);
-  (0, import_react86.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     if (filterVisibility) {
       const handleEscKeyFilterClose = (e) => {
         if (e.key === "Escape") {
@@ -8767,7 +8813,7 @@ var SearchAndFilterProvider = ({
       };
     }
   }, [filterVisibility]);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     SearchAndFilterContext.Provider,
     {
       value: {
@@ -8786,17 +8832,17 @@ var SearchAndFilterProvider = ({
         filterMapper: filterMapper2,
         allowBindingSearchTerm
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_design_system54.VerticalRhythm, { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_design_system55.VerticalRhythm, { children })
     }
   );
 };
 var useSearchAndFilter = () => {
-  const value = (0, import_react86.useContext)(SearchAndFilterContext);
+  const value = (0, import_react87.useContext)(SearchAndFilterContext);
   return { ...value };
 };
 
 // src/components/SearchAndFilter/FilterControls.tsx
-var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
 var FilterControls = ({
   children,
   hideSearchInput
@@ -8809,10 +8855,10 @@ var FilterControls = ({
     searchTerm,
     allowBindingSearchTerm
   } = useSearchAndFilter();
-  const editorRef = (0, import_react87.useRef)(null);
+  const editorRef = (0, import_react88.useRef)(null);
   const hasVariableInSearchTerm = hasReferencedVariables(searchTerm);
-  const [idToResetInputVariables, setIdToResetInputVariables] = (0, import_react87.useState)("data-resource-search-term-input");
-  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react87.useState)(searchTerm);
+  const [idToResetInputVariables, setIdToResetInputVariables] = (0, import_react88.useState)("data-resource-search-term-input");
+  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react88.useState)(searchTerm);
   (0, import_react_use10.useDebounce)(
     () => {
       setSearchTerm(localeSearchTerm);
@@ -8820,14 +8866,14 @@ var FilterControls = ({
     300,
     [localeSearchTerm]
   );
-  (0, import_react87.useEffect)(() => {
+  (0, import_react88.useEffect)(() => {
     if (searchTerm === "") {
       setLocaleSearchTerm("");
       setIdToResetInputVariables(`data-resource-search-term-input-${(0, import_uuid3.v4)()}`);
     }
   }, [searchTerm]);
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       FilterButton2,
       {
         "aria-controls": "search-and-filter-options",
@@ -8840,8 +8886,8 @@ var FilterControls = ({
         dataTestId: "filters-button"
       }
     ),
-    hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { css: BindableKeywordSearchInputStyles, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { css: BindableKeywordSearchInputStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         InputVariables,
         {
           label: "",
@@ -8851,8 +8897,8 @@ var FilterControls = ({
           value: localeSearchTerm,
           onChange: (value) => setLocaleSearchTerm(value != null ? value : ""),
           disableVariables: !allowBindingSearchTerm,
-          inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-            import_design_system55.InputKeywordSearch,
+          inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+            import_design_system56.InputKeywordSearch,
             {
               placeholder: "Search...",
               onSearchTextChanged: (e) => setLocaleSearchTerm(e),
@@ -8864,7 +8910,7 @@ var FilterControls = ({
           )
         }
       ),
-      hasVariableInSearchTerm ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { css: ClearSearchButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      hasVariableInSearchTerm ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { css: ClearSearchButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         "button",
         {
           css: ClearSearchButtonStyles,
@@ -8878,7 +8924,7 @@ var FilterControls = ({
           },
           type: "button",
           "data-testid": "keyword-search-clear-button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_design_system55.Icon, { icon: import_CgClose5.CgClose, iconColor: "red", size: "1rem" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_design_system56.Icon, { icon: import_CgClose5.CgClose, iconColor: "red", size: "1rem" })
         }
       ) }) : null
     ] }),
@@ -8887,22 +8933,22 @@ var FilterControls = ({
 };
 
 // src/components/SearchAndFilter/FilterItem.tsx
-var import_design_system57 = require("@uniformdev/design-system");
-var import_react89 = require("react");
+var import_design_system58 = require("@uniformdev/design-system");
+var import_react90 = require("react");
 
 // src/components/SearchAndFilter/FilterMenu.tsx
-var import_design_system56 = require("@uniformdev/design-system");
-var import_react88 = __toESM(require("react"));
-var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
+var import_design_system57 = require("@uniformdev/design-system");
+var import_react89 = __toESM(require("react"));
+var import_jsx_runtime85 = require("@emotion/react/jsx-runtime");
 var SearchAndFilterOptionsContainer2 = ({
   buttonRow,
   additionalFiltersContainer,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { css: SearchAndFilterOptionsContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { css: SearchAndFilterOptionsInnerContainer, children }),
-    buttonRow ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-      import_design_system56.HorizontalRhythm,
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { css: SearchAndFilterOptionsContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { css: SearchAndFilterOptionsInnerContainer, children }),
+    buttonRow ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      import_design_system57.HorizontalRhythm,
       {
         css: SearchAndFilterButtonGroup,
         gap: "sm",
@@ -8911,7 +8957,7 @@ var SearchAndFilterOptionsContainer2 = ({
         children: buttonRow
       }
     ) : null,
-    additionalFiltersContainer ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { children: additionalFiltersContainer }) : null
+    additionalFiltersContainer ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { children: additionalFiltersContainer }) : null
   ] });
 };
 var FilterMenu = ({
@@ -8924,22 +8970,22 @@ var FilterMenu = ({
   resetButtonText = "reset"
 }) => {
   const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
-  const innerMenuRef = import_react88.default.useRef(null);
-  (0, import_react88.useEffect)(() => {
+  const innerMenuRef = import_react89.default.useRef(null);
+  (0, import_react89.useEffect)(() => {
     var _a;
     if (filterVisibility) {
       (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
     }
   }, [filterVisibility]);
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_design_system56.VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_design_system57.VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
     SearchAndFilterOptionsContainer2,
     {
       buttonRow: menuControls,
       additionalFiltersContainer,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_design_system56.HorizontalRhythm, { gap: "sm", align: "center", justify: "space-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
-          (filters == null ? void 0 : filters.length) ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_design_system57.HorizontalRhythm, { gap: "sm", align: "center", justify: "space-between", children: [
+          filterTitle ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }) : null,
+          (filters == null ? void 0 : filters.length) && resetButtonText ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             "button",
             {
               type: "button",
@@ -8960,7 +9006,7 @@ var FilterMenu = ({
 };
 
 // src/components/SearchAndFilter/FilterItem.tsx
-var import_jsx_runtime85 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime86 = require("@emotion/react/jsx-runtime");
 var FilterItem = ({
   index,
   paramOptions,
@@ -8968,7 +9014,8 @@ var FilterItem = ({
   valueOptions,
   onParamChange,
   onOperatorChange,
-  onValueChange
+  onValueChange,
+  initialCriteriaTitle = "Where"
 }) => {
   var _a, _b;
   const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
@@ -8976,7 +9023,7 @@ 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_react89.useMemo)(() => {
+  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly, bindable } = (0, import_react90.useMemo)(() => {
     var _a2;
     const currentSelectedFilter = filterOptions.find((item) => {
       var _a3;
@@ -9003,11 +9050,11 @@ var FilterItem = ({
     menuIsOpen: false,
     isClearable: false
   } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { children: index === 0 ? "Where" : "and" }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { css: ConditionalInputRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-        import_design_system57.InputComboBox,
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: index === 0 ? initialCriteriaTitle : "and" }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { css: ConditionalInputRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        import_design_system58.InputComboBox,
         {
           "aria-label": label,
           options: paramOptions,
@@ -9033,8 +9080,8 @@ var FilterItem = ({
           name: `filter-field-${index}`
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-        import_design_system57.InputComboBox,
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        import_design_system58.InputComboBox,
         {
           "aria-label": operatorLabel,
           options: operatorOptions,
@@ -9057,7 +9104,7 @@ var FilterItem = ({
           name: `filter-operator-${index}`
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         FilterEditorRenderer,
         {
           "aria-label": metaDataLabel,
@@ -9071,7 +9118,7 @@ var FilterItem = ({
           valueTestId: "filter-value"
         }
       ),
-      readOnly || index === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         "button",
         {
           type: "button",
@@ -9079,15 +9126,36 @@ var FilterItem = ({
           "aria-label": "delete filter",
           css: IconBtn,
           "data-testid": "delete-filter",
-          children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_design_system57.Icon, { icon: "trash", iconColor: "red", size: "1rem" })
+          disabled: filters.length === 1,
+          children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_design_system58.Icon, { icon: "trash", iconColor: filters.length === 1 ? "gray" : "red", size: "1rem" })
         }
       )
     ] })
   ] });
 };
+var singleValuedOperators = /* @__PURE__ */ new Set([
+  "eq",
+  "neq",
+  "lt",
+  "gt",
+  "is",
+  "!is",
+  "has",
+  "!has",
+  "startswith",
+  "!startswith",
+  "endswith",
+  "!endswith"
+]);
+var arrayValuedOperators = /* @__PURE__ */ new Set(["in", "nin", "is$", "!is$"]);
+var clearValueOnChangeAwayFromOperators = /* @__PURE__ */ new Set(["def", "ndef", "empty", "!empty", "between"]);
+var noValueOperators = /* @__PURE__ */ new Set(["empty", "!empty"]);
 var FilterItems = ({
   addButtonText = "add condition",
-  additionalFiltersContainer
+  additionalFiltersContainer,
+  filterTitle,
+  resetButtonText,
+  initialCriteriaTitle
 }) => {
   const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
@@ -9095,14 +9163,25 @@ var FilterItems = ({
     const next = [...filters];
     next[index] = { ...next[index], [prop]: value };
     if (prop === "operator") {
-      if (!Array.isArray(value) && ["eq", "neq", "lt", "gt"].includes(value) && Array.isArray(next[index].value)) {
+      const newOperator = value;
+      const currentValue = next[index].value;
+      if (Array.isArray(newOperator)) {
+        throw new Error("Operator value must be a single string");
+      }
+      if (singleValuedOperators.has(newOperator) && Array.isArray(currentValue)) {
         next[index].value = next[index].value[0];
       }
-      if (filters[index].operator === "ndef" || filters[index].operator === "def") {
+      if (arrayValuedOperators.has(newOperator) && Array.isArray(currentValue) === false) {
+        next[index].value = currentValue ? [currentValue] : [];
+      }
+      if (clearValueOnChangeAwayFromOperators.has(filters[index].operator)) {
+        next[index].value = "";
+      }
+      if (noValueOperators.has(newOperator)) {
         next[index].value = "";
       }
-      if (!Array.isArray(value) && ["between"].includes(value) && Array.isArray(next[index].value) === false) {
-        next[index].value = [next[index].value, ""];
+      if (newOperator === "between" && Array.isArray(currentValue) === false) {
+        next[index].value = [currentValue, ""];
       }
       if (value === "def" || value === "true") {
         next[index].value = "true";
@@ -9121,12 +9200,12 @@ var FilterItems = ({
     }
     setFilters(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     FilterMenu,
     {
       id: "search-and-filter-options",
       dataTestId: "search-and-filter-options",
-      menuControls: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+      menuControls: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
         "button",
         {
           type: "button",
@@ -9134,12 +9213,14 @@ var FilterItems = ({
           onClick: handleAddFilter,
           "data-testid": "add-filter",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_design_system57.Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_design_system58.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) => {
@@ -9148,7 +9229,7 @@ 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_runtime85.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           FilterItem,
           {
             index: i,
@@ -9157,7 +9238,8 @@ var FilterItems = ({
             operatorOptions: possibleOperators,
             onOperatorChange: (e) => handleUpdateFilter(i, "operator", e),
             onValueChange: (e) => handleUpdateFilter(i, "value", e),
-            valueOptions: possibleValueOptions
+            valueOptions: possibleValueOptions,
+            initialCriteriaTitle
           },
           i
         );
@@ -9167,11 +9249,11 @@ var FilterItems = ({
 };
 
 // src/components/SearchAndFilter/SearchAndFilter.tsx
-var import_design_system59 = require("@uniformdev/design-system");
+var import_design_system60 = require("@uniformdev/design-system");
 
 // src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
-var import_design_system58 = require("@uniformdev/design-system");
-var import_jsx_runtime86 = require("@emotion/react/jsx-runtime");
+var import_design_system59 = require("@uniformdev/design-system");
+var import_jsx_runtime87 = require("@emotion/react/jsx-runtime");
 var SearchAndFilterResultContainer = ({
   buttonText,
   clearButtonLabel = "clear",
@@ -9201,19 +9283,19 @@ var SearchAndFilterResultContainer = ({
       handleResetFilters();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_design_system58.HorizontalRhythm, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_design_system59.HorizontalRhythm, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { children: [
         totalResults,
         " results ",
         searchTerm ? `for "${searchTerm}"` : null
       ] }),
-      !searchTerm || hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_design_system58.Button, { buttonType: "ghostDestructive", size: "zero", onClick: handleClearSearch, children: clearButtonLabel })
+      !searchTerm || hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_design_system59.Button, { buttonType: "ghostDestructive", size: "zero", onClick: handleClearSearch, children: clearButtonLabel })
     ] }),
-    totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_design_system58.Callout, { title: calloutTitle != null ? calloutTitle : automateCalloutTitle(), type: "note", children: [
-      calloutText ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_design_system58.Paragraph, { children: calloutText }) : null,
-      hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-        import_design_system58.Button,
+    totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_design_system59.Callout, { title: calloutTitle != null ? calloutTitle : automateCalloutTitle(), type: "note", children: [
+      calloutText ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_design_system59.Paragraph, { children: calloutText }) : null,
+      hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        import_design_system59.Button,
         {
           buttonType: "tertiaryOutline",
           size: "xs",
@@ -9227,14 +9309,14 @@ var SearchAndFilterResultContainer = ({
 };
 
 // src/components/SearchAndFilter/SearchAndFilter.tsx
-var import_jsx_runtime87 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime88 = require("@emotion/react/jsx-runtime");
 var SearchAndFilter = ({
   filters,
   filterOptions,
   filterVisible,
   filterControls,
   viewSwitchControls,
-  resultsContainerView = /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(SearchAndFilterResultContainer, {}),
+  resultsContainerView = /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(SearchAndFilterResultContainer, {}),
   filterMapper: filterMapper2 = filterMapper,
   additionalFiltersContainer,
   onChange,
@@ -9244,7 +9326,7 @@ var SearchAndFilter = ({
   allowBindingSearchTerm = false,
   resetFilterValues = []
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     SearchAndFilterProvider,
     {
       filters,
@@ -9257,18 +9339,18 @@ var SearchAndFilter = ({
       resetFilterValues,
       filterMapper: filterMapper2,
       allowBindingSearchTerm,
-      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_design_system59.VerticalRhythm, { "data-testid": "search-and-filter", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_design_system60.VerticalRhythm, { "data-testid": "search-and-filter", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
             "div",
             {
               css: SearchAndFilterControlsWrapper(viewSwitchControls ? "auto 1fr 0.05fr" : "auto 1fr"),
-              children: !filterControls ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
+              children: !filterControls ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
             }
           ),
           viewSwitchControls
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(FilterItems, { additionalFiltersContainer }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(FilterItems, { additionalFiltersContainer }),
         resultsContainerView
       ] })
     }
@@ -9276,18 +9358,18 @@ var SearchAndFilter = ({
 };
 
 // src/components/SearchAndFilter/SearchOnlyFilter.tsx
-var import_design_system60 = require("@uniformdev/design-system");
-var import_react90 = require("react");
+var import_design_system61 = require("@uniformdev/design-system");
+var import_react91 = require("react");
 var import_react_use11 = require("react-use");
-var import_jsx_runtime88 = require("@emotion/react/jsx-runtime");
-var SearchOnlyContext = (0, import_react90.createContext)({
+var import_jsx_runtime89 = require("@emotion/react/jsx-runtime");
+var SearchOnlyContext = (0, import_react91.createContext)({
   searchTerm: "",
   setSearchTerm: () => {
   }
 });
 var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
   const { searchTerm, setSearchTerm } = useSearchAndFilter();
-  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react90.useState)("");
+  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react91.useState)("");
   (0, import_react_use11.useDebounce)(
     () => {
       setSearchTerm(localeSearchTerm);
@@ -9296,15 +9378,15 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
     300,
     [localeSearchTerm]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     SearchOnlyContext.Provider,
     {
       value: {
         searchTerm,
         setSearchTerm: setLocaleSearchTerm
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-        import_design_system60.InputKeywordSearch,
+      children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        import_design_system61.InputKeywordSearch,
         {
           placeholder: "Search...",
           onSearchTextChanged: (e) => setLocaleSearchTerm(e),
@@ -9318,18 +9400,18 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
 };
 
 // src/components/SearchAndFilter/SortItems.tsx
-var import_design_system62 = require("@uniformdev/design-system");
+var import_design_system63 = require("@uniformdev/design-system");
 
 // src/components/SearchAndFilter/styles/SortItems.styles.ts
-var import_react91 = require("@emotion/react");
-var import_design_system61 = require("@uniformdev/design-system");
-var ConditionalFilterRow2 = import_react91.css`
+var import_react92 = require("@emotion/react");
+var import_design_system62 = require("@uniformdev/design-system");
+var ConditionalFilterRow2 = import_react92.css`
   display: grid;
   grid-template-columns: 35px 1fr;
   gap: var(--spacing-sm);
   margin-left: var(--spacing-base);
 
-  ${(0, import_design_system61.cq)("380px")} {
+  ${(0, import_design_system62.cq)("380px")} {
     align-items: center;
 
     &:after {
@@ -9350,22 +9432,22 @@ var ConditionalFilterRow2 = import_react91.css`
     grid-template-columns: 50px 1fr;
   }
 
-  ${(0, import_design_system61.cq)("580px")} {
+  ${(0, import_design_system62.cq)("580px")} {
     &:after {
       display: none;
     }
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    animation: ${import_design_system61.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
+    animation: ${import_design_system62.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
   }
 `;
-var ConditionalInputRow2 = import_react91.css`
+var ConditionalInputRow2 = import_react92.css`
   display: flex;
   gap: var(--spacing-sm);
   flex-wrap: wrap;
 
-  ${(0, import_design_system61.cq)("380px")} {
+  ${(0, import_design_system62.cq)("380px")} {
     & > div:nth-child(-n + 2) {
       width: calc(50% - var(--spacing-sm));
     }
@@ -9374,7 +9456,7 @@ var ConditionalInputRow2 = import_react91.css`
       width: calc(100% - 48px);
     }
   }
-  ${(0, import_design_system61.cq)("580px")} {
+  ${(0, import_design_system62.cq)("580px")} {
     display: grid;
     grid-template-columns: 200px 160px 1fr 32px;
 
@@ -9383,11 +9465,11 @@ var ConditionalInputRow2 = import_react91.css`
     }
   }
 `;
-var SearchInput2 = import_react91.css`
+var SearchInput2 = import_react92.css`
   max-height: 40px;
   min-height: unset;
 `;
-var FilterButton3 = import_react91.css`
+var FilterButton3 = import_react92.css`
   align-items: center;
   background: var(--white);
   border: 1px solid var(--gray-300);
@@ -9423,13 +9505,13 @@ var FilterButton3 = import_react91.css`
     opacity: var(--opacity-50);
   }
 `;
-var FilterButtonText2 = import_react91.css`
+var FilterButtonText2 = import_react92.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 14ch;
 `;
-var FilterButtonSelected2 = import_react91.css`
+var FilterButtonSelected2 = import_react92.css`
   background: var(--gray-100);
   border-color: var(--gray-300);
 
@@ -9437,7 +9519,7 @@ var FilterButtonSelected2 = import_react91.css`
     color: var(--accent-dark);
   }
 `;
-var FilterButtonWithOptions2 = import_react91.css`
+var FilterButtonWithOptions2 = import_react92.css`
   :where([aria-expanded='true']) {
     background: var(--purple-rain-100);
     border-color: var(--accent-light);
@@ -9449,14 +9531,14 @@ var FilterButtonWithOptions2 = import_react91.css`
     }
   }
 `;
-var SearchIcon2 = import_react91.css`
+var SearchIcon2 = import_react92.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_react91.css`
+var AddConditionalBtn2 = import_react92.css`
   align-items: center;
   background: transparent;
   border: none;
@@ -9475,14 +9557,14 @@ var AddConditionalBtn2 = import_react91.css`
     color: var(--gray-400);
   }
 `;
-var Title2 = import_react91.css`
+var Title2 = import_react92.css`
   color: var(--typography-light);
 
   &:focus {
     outline: none;
   }
 `;
-var ResetConditionsBtn2 = import_react91.css`
+var ResetConditionsBtn2 = import_react92.css`
   background: transparent;
   border: none;
   color: var(--action-destructive-default);
@@ -9494,12 +9576,12 @@ var ResetConditionsBtn2 = import_react91.css`
     color: var(--action-destructive-hover);
   }
 `;
-var IconBtn2 = import_react91.css`
+var IconBtn2 = import_react92.css`
   background: transparent;
   border: none;
   padding: var(--spacing-sm);
 `;
-var SearchAndFilterOptionsContainer3 = import_react91.css`
+var SearchAndFilterOptionsContainer3 = import_react92.css`
   background: var(--gray-50);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -9512,17 +9594,17 @@ var SearchAndFilterOptionsContainer3 = import_react91.css`
   position: relative;
   z-index: 1;
 `;
-var SearchAndFilterOptionsInnerContainer2 = import_react91.css`
+var SearchAndFilterOptionsInnerContainer2 = import_react92.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   padding-inline: var(--spacing-md);
 `;
-var SearchAndFilterButtonGroup2 = import_react91.css`
+var SearchAndFilterButtonGroup2 = import_react92.css`
   margin-top: var(--spacing-xs);
   margin-left: calc(56px + var(--spacing-md));
 `;
-var SortFilterWrapper = (hiddenLocaleInput) => import_react91.css`
+var SortFilterWrapper = (hiddenLocaleInput) => import_react92.css`
   align-items: center;
   border-top: 1px solid var(--gray-300);
   display: flex;
@@ -9532,18 +9614,18 @@ var SortFilterWrapper = (hiddenLocaleInput) => import_react91.css`
   position: relative;
   z-index: 0;
 
-  ${(0, import_design_system61.cq)("420px")} {
+  ${(0, import_design_system62.cq)("420px")} {
     display: grid;
     grid-template-columns: ${hiddenLocaleInput ? "1fr" : "1fr minmax(140px, 0.25fr)"};
   }
 `;
-var SortFilterInputRow = import_react91.css`
+var SortFilterInputRow = import_react92.css`
   align-items: center;
   display: grid;
   grid-template-columns: 1fr auto;
   gap: var(--spacing-base);
 `;
-var InputVariableWrapper = import_react91.css`
+var InputVariableWrapper = import_react92.css`
   flex-grow: 1;
 
   // we need to override label styles nested within the input variable
@@ -9554,7 +9636,7 @@ var InputVariableWrapper = import_react91.css`
 `;
 
 // src/components/SearchAndFilter/SortItems.tsx
-var import_jsx_runtime89 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime90 = require("@emotion/react/jsx-runtime");
 var SortItems = ({
   sortByLabel = "Sort by",
   localeLabel = "Show locale",
@@ -9576,11 +9658,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_runtime89.jsxs)("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_design_system62.VerticalRhythm, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { css: Title2, children: sortByLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: SortFilterInputRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_design_system63.VerticalRhythm, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { css: Title2, children: sortByLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { css: SortFilterInputRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           InputVariables,
           {
             disableInlineMenu: disableSortBinding,
@@ -9588,8 +9670,8 @@ var SortItems = ({
             value: sortField,
             valueToResetTo: "created_at",
             onChange: (e) => onSortChange(`${e}_${sortDirection}`),
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-              import_design_system62.InputComboBox,
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+              import_design_system63.InputComboBox,
               {
                 id: "sort-by-field",
                 "aria-label": "Sort by",
@@ -9611,7 +9693,7 @@ var SortItems = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           InputVariables,
           {
             disableInlineMenu: disableSortBinding,
@@ -9619,8 +9701,8 @@ var SortItems = ({
             valueToResetTo: "DESC",
             showMenuPosition: disableSortBinding ? void 0 : "inline-right",
             onChange: (e) => onSortChange(`${sortField}_${e}`),
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-              import_design_system62.SegmentedControl,
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+              import_design_system63.SegmentedControl,
               {
                 noCheckmark: true,
                 name: "sortBy",
@@ -9651,15 +9733,15 @@ var SortItems = ({
         )
       ] })
     ] }),
-    hideLocaleOptions ? null : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_design_system62.VerticalRhythm, { gap: "xs", css: InputVariableWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    hideLocaleOptions ? null : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_design_system63.VerticalRhythm, { gap: "xs", css: InputVariableWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
       InputVariables,
       {
         label: localeLabelValue,
         value: localeValue,
         showMenuPosition: "inline-right",
         onChange: (e) => onLocaleChange(e != null ? e : ""),
-        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-          import_design_system62.InputSelect,
+        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+          import_design_system63.InputSelect,
           {
             name: "localeReturned",
             "aria-label": localeLabelValue,
@@ -9689,19 +9771,19 @@ function createLocationValidator(setValue, validate) {
 
 // src/utils/useContentDataResourceLocaleInfo.ts
 var import_canvas10 = require("@uniformdev/canvas");
-var import_react92 = require("react");
+var import_react93 = require("react");
 function useContentDataResourceLocaleInfo({
   locale,
   setLocale,
   dynamicInputs
 }) {
   var _a;
-  const setLocaleRef = (0, import_react92.useRef)(setLocale);
+  const setLocaleRef = (0, import_react93.useRef)(setLocale);
   setLocaleRef.current = setLocale;
   const { flatVariables } = useVariables();
   const effectiveLocale = locale != null ? locale : dynamicInputs[import_canvas10.LOCALE_DYNAMIC_INPUT_NAME] ? (0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME) : "";
   const boundLocale = (_a = (0, import_canvas10.bindVariables)({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
-  (0, import_react92.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
       setLocaleRef.current((0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME));
     }
@@ -9710,7 +9792,7 @@ function useContentDataResourceLocaleInfo({
 }
 
 // src/index.ts
-var import_design_system63 = require("@uniformdev/design-system");
+var import_design_system64 = 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 = {
@@ -9832,6 +9914,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   Switch,
   TEXTBOX_OPERATORS,
   TextEditor,
+  TextMultiChoiceEditor,
   TextVariableRenderer,
   Textarea,
   Theme,