@uniformdev/mesh-sdk-react 19.157.1-alpha.6 → 19.159.0

package/dist/index.mjs

@@ -7478,11 +7478,6 @@ var SYSTEM_DATE_OPERATORS = [
     label: "is on or after...",
     value: "sys-date-gte",
     editorType: "date"
-  },
-  {
-    label: "is not",
-    value: "sys-date-neq",
-    editorType: "date"
   }
 ];
 var RICHTEXT_OPERATORS = [
@@ -7638,311 +7633,175 @@ var MULTI_SELECT_OPERATORS = [
   }
 ];
 
-// 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);
-    }
-    &:last-of-type:after {
-      display: none;
+// src/components/SearchAndFilter/editors/DateEditor.tsx
+import { Input as Input6 } from "@uniformdev/design-system";
+import { useState as useState19 } from "react";
+import { useDebounce as useDebounce4 } from "react-use";
+import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
+var DateEditor = ({
+  onChange,
+  ariaLabel,
+  disabled,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [innerValue, setInnerValue] = useState19(value != null ? value : "");
+  useDebounce4(() => onChange(innerValue), 500, [innerValue]);
+  return /* @__PURE__ */ jsx69(
+    Input6,
+    {
+      type: "date",
+      label: ariaLabel,
+      showLabel: false,
+      onChange: (e) => setInnerValue(e.currentTarget.value),
+      disabled,
+      value: innerValue,
+      readOnly,
+      "data-testid": valueTestId
     }
-  }
+  );
+};
 
-  &:nth-of-type(2) {
-    margin-left: 0;
-    grid-template-columns: 50px 1fr;
-  }
+// src/components/SearchAndFilter/editors/DateRangeEditor.tsx
+import { Input as Input7 } from "@uniformdev/design-system";
+import { useEffect as useEffect19, useState as useState20 } from "react";
+import { useDebounce as useDebounce5 } from "react-use";
 
-  ${cq("580px")} {
-    &:after {
-      display: none;
+// src/components/SearchAndFilter/editors/shared/ErrorContainer.tsx
+import { FieldMessage } from "@uniformdev/design-system";
+import { jsx as jsx70 } from "@emotion/react/jsx-runtime";
+var ErrorContainer = ({ errorMessage }) => {
+  return /* @__PURE__ */ jsx70(
+    "div",
+    {
+      css: {
+        gridColumn: "span 6",
+        order: 6
+      },
+      children: /* @__PURE__ */ jsx70(FieldMessage, { errorMessage })
     }
-  }
+  );
+};
 
-  @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;
+// src/components/SearchAndFilter/editors/shared/twoColumnGrid.tsx
+var twoColumnGrid = {
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: "var(--spacing-sm);"
+};
 
-  ${cq("380px")} {
-    & > div:nth-child(-n + 2) {
-      width: calc(50% - var(--spacing-sm));
+// src/components/SearchAndFilter/editors/DateRangeEditor.tsx
+import { Fragment as Fragment14, jsx as jsx71, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
+var DateRangeEditor = ({
+  ariaLabel,
+  onChange,
+  disabled,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [minDateValue, setMinDateValue] = useState20(value ? value[0] : "");
+  const [maxDateValue, setMaxDateValue] = useState20(value ? value[1] : "");
+  const [error, setError] = useState20("");
+  useDebounce5(
+    () => {
+      if (minDateValue && maxDateValue && !error) {
+        onChange([minDateValue, maxDateValue]);
+      } else {
+        onChange([]);
+      }
+    },
+    500,
+    [minDateValue, maxDateValue]
+  );
+  useEffect19(() => {
+    if (!minDateValue || !maxDateValue) {
+      return;
     }
-
-    & > div:nth-child(n + 3) {
-      width: calc(100% - 48px);
+    const minDate = new Date(minDateValue);
+    const maxDate = new Date(maxDateValue);
+    if (maxDate < minDate) {
+      setError("The max date cannot be lower than the min date");
+      return;
     }
-  }
-  ${cq("764px")} {
-    display: grid;
-    grid-template-columns: 200px 160px 1fr 32px;
-
-    & > div:nth-child(n) {
-      width: auto;
+    if (maxDate && !minDate) {
+      setError("Please enter both a low and high date");
+      return;
     }
-  }
-`;
-var SearchInput = css38`
-  max-height: 40px;
-  min-height: unset;
-`;
-var BindableKeywordSearchInputStyles = css38`
-  position: relative;
-  width: 100%;
-
-  & [data-lexical-editor='true'] {
-    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
-    font-size: var(--fs-sm);
-    border-radius: var(--rounded-full);
-    max-height: 40px;
-    min-height: unset;
-    width: 100%;
-    position: relative;
-    white-space: nowrap;
-  }
-`;
-var ClearSearchButtonContainer = css38`
-  align-items: center;
-  display: flex;
-  position: absolute;
-  inset: 0 var(--spacing-lg) 0 auto;
-`;
-var ClearSearchButtonStyles = css38`
-  background: none;
-  border: none;
-  padding: 0;
-  pointer-events: all;
-`;
-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);
+    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__ */ jsxs42(Fragment14, { children: [
+    /* @__PURE__ */ jsxs42("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ jsx71(
+        Input7,
+        {
+          label: `${ariaLabel}-min-date`,
+          type: "date",
+          showLabel: false,
+          value: minDateValue,
+          onChange: (e) => setMinDateValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled,
+          readOnly,
+          "data-testid": "value-low"
+        }
+      ),
+      /* @__PURE__ */ jsx71(
+        Input7,
+        {
+          label: `${ariaLabel}-max-date`,
+          type: "date",
+          showLabel: false,
+          value: maxDateValue,
+          onChange: (e) => setMaxDateValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled,
+          readOnly,
+          "data-testid": "value-high"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx71(ErrorContainer, { errorMessage: error })
+  ] });
+};
 
-  svg {
-    color: var(--gray-300);
-    transition: color var(--duration-fast) var(--timing-ease-out);
-  }
+// src/components/SearchAndFilter/editors/FilterMultiChoiceEditor.tsx
+import {
+  convertComboBoxGroupsToSelectableGroups,
+  getComboBoxSelectedSelectableGroups,
+  InputComboBox
+} from "@uniformdev/design-system";
+import { useMemo as useMemo17 } from "react";
 
-  &:hover,
-  :where([aria-expanded='true']) {
-    outline: none;
-    background: var(--gray-200);
-    border-color: var(--gray-300);
+// src/components/SearchAndFilter/editors/shared/readOnlyAttributes.tsx
+var readOnlyAttributes = {
+  isSearchable: false,
+  menuIsOpen: false,
+  isClearable: false
+};
 
-    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 { CgClose as CgClose5 } from "@react-icons/all-files/cg/CgClose";
-import { Icon as Icon7, InputKeywordSearch as InputKeywordSearch2 } from "@uniformdev/design-system";
-import { CLEAR_EDITOR_COMMAND as CLEAR_EDITOR_COMMAND2 } from "lexical";
-import { useEffect as useEffect21, useRef as useRef16, useState as useState21 } from "react";
-import { useDebounce as useDebounce5 } from "react-use";
-import { v4 as v43 } from "uuid";
-
-// 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
-};
+// src/components/SearchAndFilter/editors/FilterMultiChoiceEditor.tsx
+import { jsx as jsx72 } from "@emotion/react/jsx-runtime";
 var FilterMultiChoiceEditor = ({
   value,
   options,
@@ -7953,20 +7812,24 @@ var FilterMultiChoiceEditor = ({
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
   const isClearable = !readOnly || !disabled;
-  return /* @__PURE__ */ jsx70("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx70(
+  const { groupedOptions, selectedOptions } = useMemo17(
+    () => convertComboBoxGroupsToSelectableGroups({ options: options != null ? options : [], selectedItems: new Set(value) }),
+    [options, value]
+  );
+  return /* @__PURE__ */ jsx72("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx72(
     InputComboBox,
     {
       ...props,
       placeholder: "Type to search...",
-      options,
+      options: groupedOptions,
       isMulti: true,
       isClearable,
       isDisabled: disabled,
       onChange: (e) => {
-        var _a;
-        return props.onChange((_a = e == null ? void 0 : e.map((option) => option.value)) != null ? _a : []);
+        const selectedValues = getComboBoxSelectedSelectableGroups(e);
+        return props.onChange([...selectedValues]);
       },
-      value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
+      value: selectedOptions,
       "aria-readonly": readOnly,
       styles: {
         menu(base) {
@@ -7980,6 +7843,14 @@ var FilterMultiChoiceEditor = ({
     }
   ) });
 };
+
+// src/components/SearchAndFilter/editors/FilterSingleChoiceEditor.tsx
+import {
+  convertComboBoxGroupsToSelectableGroups as convertComboBoxGroupsToSelectableGroups2,
+  InputComboBox as InputComboBox2
+} from "@uniformdev/design-system";
+import { useMemo as useMemo18 } from "react";
+import { jsx as jsx73 } from "@emotion/react/jsx-runtime";
 var FilterSingleChoiceEditor = ({
   options,
   value,
@@ -7988,91 +7859,30 @@ var FilterSingleChoiceEditor = ({
   onChange,
   valueTestId
 }) => {
-  var _a;
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ jsx70("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx70(
-    InputComboBox,
+  const { groupedOptions, selectedOptions } = useMemo18(
+    () => convertComboBoxGroupsToSelectableGroups2({
+      options: options != null ? options : [],
+      selectedItems: new Set(value ? [value] : void 0),
+      selectionMode: "single"
+    }),
+    [options, value]
+  );
+  return /* @__PURE__ */ jsx73("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx73(
+    InputComboBox2,
     {
       placeholder: "Type to search...",
-      options,
+      options: groupedOptions,
       isClearable: true,
       onChange: (e) => {
-        var _a2;
-        return onChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
-      },
-      isDisabled: disabled,
-      value: (_a = options == null ? void 0 : options.find((option) => option.value === value)) != null ? _a : null,
-      "aria-readonly": readOnly,
-      styles: {
-        menu(base) {
-          return {
-            ...base,
-            minWidth: "max-content"
-          };
+        if (Array.isArray(e == null ? void 0 : e.value)) {
+          return;
         }
+        return onChange(e == null ? void 0 : e.value);
       },
-      ...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,
+      value: selectedOptions,
       "aria-readonly": readOnly,
-      value: options == null ? void 0 : options.find((option) => option.value === value),
-      isDisabled: disabled,
       styles: {
         menu(base) {
           return {
@@ -8085,28 +7895,43 @@ var StatusSingleEditor = ({
     }
   ) });
 };
-var TextEditor = ({
-  onChange,
+
+// src/components/SearchAndFilter/editors/NumberEditor.tsx
+import { Input as Input8 } from "@uniformdev/design-system";
+import { useState as useState21 } from "react";
+import { useDebounce as useDebounce6 } from "react-use";
+import { jsx as jsx74 } from "@emotion/react/jsx-runtime";
+var NumberEditor = ({
   ariaLabel,
+  onChange,
+  disabled,
   value,
   readOnly,
   valueTestId
 }) => {
-  const [innerValue, setInnerValue] = useState19(value != null ? value : "");
-  useDebounce4(() => onChange(innerValue), 500, [innerValue]);
-  return /* @__PURE__ */ jsx70(
-    Input6,
+  const [innerValue, setInnerValue] = useState21(value != null ? value : "");
+  useDebounce6(() => onChange(innerValue), 500, [innerValue]);
+  return /* @__PURE__ */ jsx74(
+    Input8,
     {
-      showLabel: false,
       label: ariaLabel,
+      type: "number",
+      showLabel: false,
+      min: 0,
       onChange: (e) => setInnerValue(e.currentTarget.value),
-      placeholder: "Enter phrase to search\u2026",
+      disabled,
       value: innerValue,
       readOnly,
       "data-testid": valueTestId
     }
   );
 };
+
+// src/components/SearchAndFilter/editors/NumberRangeEditor.tsx
+import { Input as Input9 } from "@uniformdev/design-system";
+import { useEffect as useEffect20, useState as useState22 } from "react";
+import { useDebounce as useDebounce7 } from "react-use";
+import { Fragment as Fragment15, jsx as jsx75, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
 var NumberRangeEditor = ({
   onChange,
   disabled,
@@ -8115,10 +7940,10 @@ var NumberRangeEditor = ({
   readOnly,
   valueTestId
 }) => {
-  const [minValue, setMinValue] = useState19("");
-  const [maxValue, setMaxValue] = useState19("");
-  const [error, setError] = useState19("");
-  useDebounce4(
+  const [minValue, setMinValue] = useState22("");
+  const [maxValue, setMaxValue] = useState22("");
+  const [error, setError] = useState22("");
+  useDebounce7(
     () => {
       if (minValue && maxValue && !error) {
         onChange([minValue, maxValue]);
@@ -8129,7 +7954,7 @@ var NumberRangeEditor = ({
     500,
     [minValue, maxValue]
   );
-  useEffect19(() => {
+  useEffect20(() => {
     if (!maxValue && !minValue) {
       return;
     }
@@ -8151,10 +7976,10 @@ var NumberRangeEditor = ({
       setMaxValue(maxValue);
     }
   }, [maxValue, minValue, setError]);
-  return /* @__PURE__ */ jsxs43(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs43(Fragment15, { children: [
     /* @__PURE__ */ jsxs43("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
-      /* @__PURE__ */ jsx70(
-        Input6,
+      /* @__PURE__ */ jsx75(
+        Input9,
         {
           label: `${ariaLabel}-min`,
           type: "number",
@@ -8169,8 +7994,8 @@ var NumberRangeEditor = ({
           "data-testid": "value-low"
         }
       ),
-      /* @__PURE__ */ jsx70(
-        Input6,
+      /* @__PURE__ */ jsx75(
+        Input9,
         {
           type: "number",
           label: `${ariaLabel}-max`,
@@ -8186,149 +8011,448 @@ var NumberRangeEditor = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx70(ErrorContainer, { errorMessage: error })
+    /* @__PURE__ */ jsx75(ErrorContainer, { errorMessage: error })
   ] });
 };
-var NumberEditor = ({
-  ariaLabel,
+
+// src/components/SearchAndFilter/editors/StatusMultiEditor.tsx
+import {
+  convertComboBoxGroupsToSelectableGroups as convertComboBoxGroupsToSelectableGroups3,
+  getComboBoxSelectedSelectableGroups as getComboBoxSelectedSelectableGroups2,
+  InputComboBox as InputComboBox3
+} from "@uniformdev/design-system";
+import { useMemo as useMemo19 } from "react";
+
+// src/components/SearchAndFilter/editors/shared/CustomOptions.tsx
+import { StatusBullet } from "@uniformdev/design-system";
+import { jsx as jsx76 } from "@emotion/react/jsx-runtime";
+var CustomOptions = ({ label, value }) => {
+  return /* @__PURE__ */ jsx76(
+    StatusBullet,
+    {
+      status: label,
+      message: Array.isArray(value) ? value.join(",") : value
+    }
+  );
+};
+
+// src/components/SearchAndFilter/editors/StatusMultiEditor.tsx
+import { jsx as jsx77 } from "@emotion/react/jsx-runtime";
+var StatusMultiEditor = ({
+  options,
+  value,
+  disabled,
+  readOnly,
   onChange,
+  valueTestId
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  const { groupedOptions, selectedOptions } = useMemo19(
+    () => convertComboBoxGroupsToSelectableGroups3({ options: options != null ? options : [], selectedItems: new Set(value) }),
+    [options, value]
+  );
+  return /* @__PURE__ */ jsx77("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx77(
+    InputComboBox3,
+    {
+      options: groupedOptions != null ? groupedOptions : [],
+      isMulti: true,
+      onChange: (e) => {
+        const selectedValues = getComboBoxSelectedSelectableGroups2(e);
+        return onChange([...selectedValues]);
+      },
+      formatOptionLabel: CustomOptions,
+      "aria-readonly": readOnly,
+      value: selectedOptions,
+      isDisabled: disabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+
+// src/components/SearchAndFilter/editors/StatusSingleEditor.tsx
+import {
+  convertComboBoxGroupsToSelectableGroups as convertComboBoxGroupsToSelectableGroups4,
+  InputComboBox as InputComboBox4
+} from "@uniformdev/design-system";
+import { useMemo as useMemo20 } from "react";
+import { jsx as jsx78 } from "@emotion/react/jsx-runtime";
+var StatusSingleEditor = ({
+  options,
+  value,
   disabled,
+  readOnly,
+  onChange,
+  valueTestId
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  const { groupedOptions, selectedOptions } = useMemo20(
+    () => convertComboBoxGroupsToSelectableGroups4({
+      options: options != null ? options : [],
+      selectedItems: new Set(value ? [value] : void 0),
+      selectionMode: "single"
+    }),
+    [options, value]
+  );
+  return /* @__PURE__ */ jsx78("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx78(
+    InputComboBox4,
+    {
+      options: groupedOptions,
+      onChange: (e) => {
+        if (Array.isArray(e == null ? void 0 : e.value)) {
+          return;
+        }
+        return onChange(e == null ? void 0 : e.value);
+      },
+      formatOptionLabel: CustomOptions,
+      "aria-readonly": readOnly,
+      value: selectedOptions,
+      isDisabled: disabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+
+// src/components/SearchAndFilter/editors/TextEditor.tsx
+import { Input as Input10 } from "@uniformdev/design-system";
+import { useState as useState23 } from "react";
+import { useDebounce as useDebounce8 } from "react-use";
+import { jsx as jsx79 } from "@emotion/react/jsx-runtime";
+var TextEditor = ({
+  onChange,
+  ariaLabel,
   value,
   readOnly,
   valueTestId
 }) => {
-  const [innerValue, setInnerValue] = useState19(value != null ? value : "");
-  useDebounce4(() => onChange(innerValue), 500, [innerValue]);
-  return /* @__PURE__ */ jsx70(
-    Input6,
+  const [innerValue, setInnerValue] = useState23(value != null ? value : "");
+  useDebounce8(() => onChange(innerValue), 500, [innerValue]);
+  return /* @__PURE__ */ jsx79(
+    Input10,
     {
-      label: ariaLabel,
-      type: "number",
       showLabel: false,
-      min: 0,
+      label: ariaLabel,
       onChange: (e) => setInnerValue(e.currentTarget.value),
-      disabled,
+      placeholder: "Enter phrase to search\u2026",
       value: innerValue,
       readOnly,
       "data-testid": valueTestId
     }
-  );
-};
-var DateEditor = ({
-  onChange,
-  ariaLabel,
-  disabled,
-  value,
-  readOnly,
-  valueTestId
+  );
+};
+
+// 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`
+  align-items: baseline;
+  display: grid;
+  grid-template-columns: 35px 1fr;
+  gap: var(--spacing-sm);
+  margin-left: var(--spacing-base);
+
+  ${cq("380px")} {
+    &:after {
+      content: '';
+      display: block;
+      height: 1px;
+      background: var(--gray-300);
+      width: calc(100% - var(--spacing-base));
+      margin-left: var(--spacing-base);
+    }
+    &:last-of-type:after {
+      display: none;
+    }
+  }
+
+  &:nth-of-type(2) {
+    margin-left: 0;
+    grid-template-columns: 50px 1fr;
+  }
+
+  ${cq("580px")} {
+    &:after {
+      display: none;
+    }
+  }
+
+  @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")} {
+    align-items: flex-start;
+    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 BindableKeywordSearchInputStyles = css38`
+  position: relative;
+  width: 100%;
+
+  & [data-lexical-editor='true'] {
+    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
+    font-size: var(--fs-sm);
+    border-radius: var(--rounded-full);
+    max-height: 40px;
+    min-height: unset;
+    width: 100%;
+    position: relative;
+    white-space: nowrap;
+  }
+`;
+var ClearSearchButtonContainer = css38`
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0 var(--spacing-lg) 0 auto;
+`;
+var ClearSearchButtonStyles = css38`
+  background: none;
+  border: none;
+  padding: 0;
+  pointer-events: all;
+`;
+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 jsx80, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+var FilterButton2 = ({
+  text = "Filters",
+  icon = "filter-add",
+  filterCount,
+  hasSelectedValue,
+  dataTestId,
+  ...props
 }) => {
-  const [innerValue, setInnerValue] = useState19(value != null ? value : "");
-  useDebounce4(() => onChange(innerValue), 500, [innerValue]);
-  return /* @__PURE__ */ jsx70(
-    Input6,
+  return /* @__PURE__ */ jsxs44(
+    "button",
     {
-      type: "date",
-      label: ariaLabel,
-      showLabel: false,
-      onChange: (e) => setInnerValue(e.currentTarget.value),
-      disabled,
-      value: innerValue,
-      readOnly,
-      "data-testid": valueTestId
+      type: "button",
+      css: [
+        FilterButton,
+        hasSelectedValue ? FilterButtonSelected : void 0,
+        filterCount ? [FilterButtonWithOptions, FilterButtonSelected] : void 0
+      ],
+      ...props,
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ jsx80(Icon6, { icon, iconColor: "currentColor", size: "1rem" }),
+        /* @__PURE__ */ jsx80("span", { css: FilterButtonText, children: text }),
+        filterCount ? /* @__PURE__ */ jsx80(Counter2, { count: filterCount, bgColor: "var(--white)" }) : null
+      ]
     }
   );
 };
-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,
-          "data-testid": "value-low"
-        }
-      ),
-      /* @__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,
-          "data-testid": "value-high"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx70(ErrorContainer, { errorMessage: error })
-  ] });
-};
+
+// src/components/SearchAndFilter/FilterControls.tsx
+import { CgClose as CgClose5 } from "@react-icons/all-files/cg/CgClose";
+import { Icon as Icon7, InputKeywordSearch as InputKeywordSearch2 } from "@uniformdev/design-system";
+import { CLEAR_EDITOR_COMMAND as CLEAR_EDITOR_COMMAND2 } from "lexical";
+import { useEffect as useEffect22, useRef as useRef16, useState as useState25 } from "react";
+import { useDebounce as useDebounce9 } from "react-use";
+import { v4 as v43 } from "uuid";
+
+// 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 useEffect21,
+  useMemo as useMemo21,
+  useState as useState24
+} from "react";
+
+// src/components/SearchAndFilter/FilterEditor.tsx
+import { jsx as jsx81 } from "@emotion/react/jsx-runtime";
 var FilterEditorRenderer = ({ editorType, ...props }) => {
   const { filterMapper: contextFilterMapper } = useSearchAndFilter();
   const Editor = contextFilterMapper == null ? void 0 : contextFilterMapper[editorType];
@@ -8338,7 +8462,7 @@ var FilterEditorRenderer = ({ editorType, ...props }) => {
   if (editorType === "empty") {
     return null;
   }
-  return /* @__PURE__ */ jsx70(Editor, { ...props });
+  return /* @__PURE__ */ jsx81(Editor, { ...props });
 };
 var filterMapper = {
   multiChoice: FilterMultiChoiceEditor,
@@ -8355,9 +8479,9 @@ var filterMapper = {
 function withInputVariables(WrappedComponent) {
   const WithInputVariables = (props) => {
     if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
-      return /* @__PURE__ */ jsx70(WrappedComponent, { ...props });
+      return /* @__PURE__ */ jsx81(WrappedComponent, { ...props });
     }
-    return /* @__PURE__ */ jsx70(
+    return /* @__PURE__ */ jsx81(
       InputVariables,
       {
         disableInlineMenu: true,
@@ -8365,7 +8489,7 @@ function withInputVariables(WrappedComponent) {
         onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
         value: props.value,
         disabled: props.disabled,
-        inputWhenNoVariables: /* @__PURE__ */ jsx70(WrappedComponent, { ...props })
+        inputWhenNoVariables: /* @__PURE__ */ jsx81(WrappedComponent, { ...props })
       }
     );
   };
@@ -8375,16 +8499,16 @@ function withInputVariablesForMultiValue(WrappedComponent) {
   const WithInputVariables = (props) => {
     var _a;
     if (!props.bindable || props.disabled || props.readOnly) {
-      return /* @__PURE__ */ jsx70(WrappedComponent, { ...props });
+      return /* @__PURE__ */ jsx81(WrappedComponent, { ...props });
     }
-    return /* @__PURE__ */ jsx70(
+    return /* @__PURE__ */ jsx81(
       InputVariables,
       {
         disableInlineMenu: true,
         showMenuPosition: "inline-right",
         onChange: (newValue) => props.onChange(newValue ? [newValue] : []),
         value: (_a = props.value) == null ? void 0 : _a[0],
-        inputWhenNoVariables: /* @__PURE__ */ jsx70(WrappedComponent, { ...props })
+        inputWhenNoVariables: /* @__PURE__ */ jsx81(WrappedComponent, { ...props })
       }
     );
   };
@@ -8398,26 +8522,9 @@ var bindableFiltersMapper = {
   text: withInputVariables(TextEditor),
   number: withInputVariables(NumberEditor)
 };
-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";
+import { jsx as jsx82 } from "@emotion/react/jsx-runtime";
 var SearchAndFilterContext = createContext6({
   searchTerm: "",
   setSearchTerm: () => {
@@ -8453,9 +8560,9 @@ var SearchAndFilterProvider = ({
   children,
   allowBindingSearchTerm
 }) => {
-  const [searchTerm, setSearchTerm] = useState20(defaultSearchTerm);
+  const [searchTerm, setSearchTerm] = useState24(defaultSearchTerm);
   const deferredSearchTerm = useDeferredValue2(searchTerm);
-  const [filterVisibility, setFilterVisibility] = useState20(filterVisible);
+  const [filterVisibility, setFilterVisibility] = useState24(filterVisible);
   const handleSearchTerm = useCallback6(
     (term) => {
       setSearchTerm(term);
@@ -8481,13 +8588,13 @@ var SearchAndFilterProvider = ({
     },
     [filters, onChange]
   );
-  const validFilterQuery = useMemo17(() => {
+  const validFilterQuery = useMemo21(() => {
     const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
     if (hasValidFilters) {
       return filters;
     }
   }, [filters]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (filterVisibility) {
       const handleEscKeyFilterClose = (e) => {
         if (e.key === "Escape") {
@@ -8500,7 +8607,7 @@ var SearchAndFilterProvider = ({
       };
     }
   }, [filterVisibility]);
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx82(
     SearchAndFilterContext.Provider,
     {
       value: {
@@ -8519,7 +8626,7 @@ var SearchAndFilterProvider = ({
         filterMapper: filterMapper2,
         allowBindingSearchTerm
       },
-      children: /* @__PURE__ */ jsx71(VerticalRhythm5, { children })
+      children: /* @__PURE__ */ jsx82(VerticalRhythm5, { children })
     }
   );
 };
@@ -8529,7 +8636,7 @@ var useSearchAndFilter = () => {
 };
 
 // src/components/SearchAndFilter/FilterControls.tsx
-import { Fragment as Fragment15, jsx as jsx72, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx83, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
 var FilterControls = ({
   children,
   hideSearchInput
@@ -8544,23 +8651,23 @@ var FilterControls = ({
   } = useSearchAndFilter();
   const editorRef = useRef16(null);
   const hasVariableInSearchTerm = hasReferencedVariables(searchTerm);
-  const [idToResetInputVariables, setIdToResetInputVariables] = useState21("data-resource-search-term-input");
-  const [localeSearchTerm, setLocaleSearchTerm] = useState21(searchTerm);
-  useDebounce5(
+  const [idToResetInputVariables, setIdToResetInputVariables] = useState25("data-resource-search-term-input");
+  const [localeSearchTerm, setLocaleSearchTerm] = useState25(searchTerm);
+  useDebounce9(
     () => {
       setSearchTerm(localeSearchTerm);
     },
     300,
     [localeSearchTerm]
   );
-  useEffect21(() => {
+  useEffect22(() => {
     if (searchTerm === "") {
       setLocaleSearchTerm("");
       setIdToResetInputVariables(`data-resource-search-term-input-${v43()}`);
     }
   }, [searchTerm]);
-  return /* @__PURE__ */ jsxs44(Fragment15, { children: [
-    /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsxs45(Fragment16, { children: [
+    /* @__PURE__ */ jsx83(
       FilterButton2,
       {
         "aria-controls": "search-and-filter-options",
@@ -8573,8 +8680,8 @@ var FilterControls = ({
         dataTestId: "filters-button"
       }
     ),
-    hideSearchInput ? null : /* @__PURE__ */ jsxs44("div", { css: BindableKeywordSearchInputStyles, children: [
-      /* @__PURE__ */ jsx72(
+    hideSearchInput ? null : /* @__PURE__ */ jsxs45("div", { css: BindableKeywordSearchInputStyles, children: [
+      /* @__PURE__ */ jsx83(
         InputVariables,
         {
           label: "",
@@ -8584,7 +8691,7 @@ var FilterControls = ({
           value: localeSearchTerm,
           onChange: (value) => setLocaleSearchTerm(value != null ? value : ""),
           disableVariables: !allowBindingSearchTerm,
-          inputWhenNoVariables: /* @__PURE__ */ jsx72(
+          inputWhenNoVariables: /* @__PURE__ */ jsx83(
             InputKeywordSearch2,
             {
               placeholder: "Search...",
@@ -8597,7 +8704,7 @@ var FilterControls = ({
           )
         }
       ),
-      hasVariableInSearchTerm ? /* @__PURE__ */ jsx72("div", { css: ClearSearchButtonContainer, children: /* @__PURE__ */ jsx72(
+      hasVariableInSearchTerm ? /* @__PURE__ */ jsx83("div", { css: ClearSearchButtonContainer, children: /* @__PURE__ */ jsx83(
         "button",
         {
           css: ClearSearchButtonStyles,
@@ -8611,7 +8718,7 @@ var FilterControls = ({
           },
           type: "button",
           "data-testid": "keyword-search-clear-button",
-          children: /* @__PURE__ */ jsx72(Icon7, { icon: CgClose5, iconColor: "red", size: "1rem" })
+          children: /* @__PURE__ */ jsx83(Icon7, { icon: CgClose5, iconColor: "red", size: "1rem" })
         }
       ) }) : null
     ] }),
@@ -8620,21 +8727,21 @@ var FilterControls = ({
 };
 
 // src/components/SearchAndFilter/FilterItem.tsx
-import { Icon as Icon8, InputComboBox as InputComboBox2 } from "@uniformdev/design-system";
-import { useMemo as useMemo18 } from "react";
+import { Icon as Icon8, InputComboBox as InputComboBox5 } from "@uniformdev/design-system";
+import { useMemo as useMemo22 } from "react";
 
 // src/components/SearchAndFilter/FilterMenu.tsx
 import { HorizontalRhythm as HorizontalRhythm8, VerticalRhythm as VerticalRhythm6 } from "@uniformdev/design-system";
-import React13, { useEffect as useEffect22 } from "react";
-import { jsx as jsx73, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+import React13, { useEffect as useEffect23 } from "react";
+import { jsx as jsx84, jsxs as jsxs46 } 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(
+  return /* @__PURE__ */ jsxs46("div", { css: SearchAndFilterOptionsContainer, children: [
+    /* @__PURE__ */ jsx84("div", { css: SearchAndFilterOptionsInnerContainer, children }),
+    buttonRow ? /* @__PURE__ */ jsx84(
       HorizontalRhythm8,
       {
         css: SearchAndFilterButtonGroup,
@@ -8644,7 +8751,7 @@ var SearchAndFilterOptionsContainer2 = ({
         children: buttonRow
       }
     ) : null,
-    additionalFiltersContainer ? /* @__PURE__ */ jsx73("div", { children: additionalFiltersContainer }) : null
+    additionalFiltersContainer ? /* @__PURE__ */ jsx84("div", { children: additionalFiltersContainer }) : null
   ] });
 };
 var FilterMenu = ({
@@ -8658,21 +8765,21 @@ var FilterMenu = ({
 }) => {
   const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
   const innerMenuRef = React13.useRef(null);
-  useEffect22(() => {
+  useEffect23(() => {
     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(
+  return /* @__PURE__ */ jsx84(VerticalRhythm6, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ jsxs46(
     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(
+        /* @__PURE__ */ jsxs46(HorizontalRhythm8, { gap: "sm", align: "center", justify: "space-between", children: [
+          /* @__PURE__ */ jsx84("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
+          (filters == null ? void 0 : filters.length) ? /* @__PURE__ */ jsx84(
             "button",
             {
               type: "button",
@@ -8693,7 +8800,7 @@ var FilterMenu = ({
 };
 
 // src/components/SearchAndFilter/FilterItem.tsx
-import { jsx as jsx74, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
 var FilterItem = ({
   index,
   paramOptions,
@@ -8709,7 +8816,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 } = useMemo18(() => {
+  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly, bindable } = useMemo22(() => {
     var _a2;
     const currentSelectedFilter = filterOptions.find((item) => {
       var _a3;
@@ -8736,11 +8843,11 @@ var FilterItem = ({
     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,
+  return /* @__PURE__ */ jsxs47("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
+    /* @__PURE__ */ jsx85("span", { children: index === 0 ? "Where" : "and" }),
+    /* @__PURE__ */ jsxs47("div", { css: ConditionalInputRow, children: [
+      /* @__PURE__ */ jsx85(
+        InputComboBox5,
         {
           "aria-label": label,
           options: paramOptions,
@@ -8766,8 +8873,8 @@ var FilterItem = ({
           name: `filter-field-${index}`
         }
       ),
-      /* @__PURE__ */ jsx74(
-        InputComboBox2,
+      /* @__PURE__ */ jsx85(
+        InputComboBox5,
         {
           "aria-label": operatorLabel,
           options: operatorOptions,
@@ -8790,7 +8897,7 @@ var FilterItem = ({
           name: `filter-operator-${index}`
         }
       ),
-      /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx85(
         FilterEditorRenderer,
         {
           "aria-label": metaDataLabel,
@@ -8804,7 +8911,7 @@ var FilterItem = ({
           valueTestId: "filter-value"
         }
       ),
-      readOnly || index === 0 ? null : /* @__PURE__ */ jsx74(
+      readOnly || index === 0 ? null : /* @__PURE__ */ jsx85(
         "button",
         {
           type: "button",
@@ -8812,7 +8919,7 @@ var FilterItem = ({
           "aria-label": "delete filter",
           css: IconBtn,
           "data-testid": "delete-filter",
-          children: /* @__PURE__ */ jsx74(Icon8, { icon: "trash", iconColor: "red", size: "1rem" })
+          children: /* @__PURE__ */ jsx85(Icon8, { icon: "trash", iconColor: "red", size: "1rem" })
         }
       )
     ] })
@@ -8828,13 +8935,13 @@ var FilterItems = ({
     const next = [...filters];
     next[index] = { ...next[index], [prop]: value };
     if (prop === "operator") {
-      if (["eq", "neq", "lt", "gt"].includes(value) && Array.isArray(next[index].value)) {
+      if (!Array.isArray(value) && ["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) {
+      if (!Array.isArray(value) && ["between"].includes(value) && Array.isArray(next[index].value) === false) {
         next[index].value = [next[index].value, ""];
       }
       if (value === "def" || value === "true") {
@@ -8854,12 +8961,12 @@ var FilterItems = ({
     }
     setFilters(next);
   };
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx85(
     FilterMenu,
     {
       id: "search-and-filter-options",
       dataTestId: "search-and-filter-options",
-      menuControls: /* @__PURE__ */ jsxs46(
+      menuControls: /* @__PURE__ */ jsxs47(
         "button",
         {
           type: "button",
@@ -8867,7 +8974,7 @@ var FilterItems = ({
           onClick: handleAddFilter,
           "data-testid": "add-filter",
           children: [
-            /* @__PURE__ */ jsx74(Icon8, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+            /* @__PURE__ */ jsx85(Icon8, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
             addButtonText
           ]
         }
@@ -8881,7 +8988,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__ */ jsx74(
+        return /* @__PURE__ */ jsx85(
           FilterItem,
           {
             index: i,
@@ -8904,7 +9011,7 @@ import { VerticalRhythm as VerticalRhythm7 } from "@uniformdev/design-system";
 
 // src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
 import { Button as Button6, Callout as Callout6, HorizontalRhythm as HorizontalRhythm9, Paragraph } from "@uniformdev/design-system";
-import { Fragment as Fragment16, jsx as jsx75, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx86, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
 var SearchAndFilterResultContainer = ({
   buttonText,
   clearButtonLabel = "clear",
@@ -8934,31 +9041,31 @@ var SearchAndFilterResultContainer = ({
       handleResetFilters();
     }
   };
-  return /* @__PURE__ */ jsxs47(Fragment16, { children: [
-    /* @__PURE__ */ jsxs47(HorizontalRhythm9, { children: [
-      /* @__PURE__ */ jsxs47("span", { children: [
+  return /* @__PURE__ */ jsxs48(Fragment17, { children: [
+    /* @__PURE__ */ jsxs48(HorizontalRhythm9, { children: [
+      /* @__PURE__ */ jsxs48("span", { children: [
         totalResults,
         " results ",
         searchTerm ? `for "${searchTerm}"` : null
       ] }),
-      !searchTerm || hideClearButton ? null : /* @__PURE__ */ jsx75(Button6, { buttonType: "ghostDestructive", size: "zero", onClick: handleClearSearch, children: clearButtonLabel })
+      !searchTerm || hideClearButton ? null : /* @__PURE__ */ jsx86(Button6, { buttonType: "ghostDestructive", size: "zero", onClick: handleClearSearch, 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: handleClearSearch, children: buttonText != null ? buttonText : "Clear search" })
+    totalResults === 0 ? /* @__PURE__ */ jsxs48(Callout6, { title: calloutTitle != null ? calloutTitle : automateCalloutTitle(), type: "note", children: [
+      calloutText ? /* @__PURE__ */ jsx86(Paragraph, { children: calloutText }) : null,
+      hideClearButton ? null : /* @__PURE__ */ jsx86(Button6, { buttonType: "tertiaryOutline", size: "xs", onClick: handleClearSearch, children: buttonText != null ? buttonText : "Clear search" })
     ] }) : null
   ] });
 };
 
 // src/components/SearchAndFilter/SearchAndFilter.tsx
-import { jsx as jsx76, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var SearchAndFilter = ({
   filters,
   filterOptions,
   filterVisible,
   filterControls,
   viewSwitchControls,
-  resultsContainerView = /* @__PURE__ */ jsx76(SearchAndFilterResultContainer, {}),
+  resultsContainerView = /* @__PURE__ */ jsx87(SearchAndFilterResultContainer, {}),
   filterMapper: filterMapper2 = filterMapper,
   additionalFiltersContainer,
   onChange,
@@ -8968,7 +9075,7 @@ var SearchAndFilter = ({
   allowBindingSearchTerm = false,
   resetFilterValues = []
 }) => {
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx87(
     SearchAndFilterProvider,
     {
       filters,
@@ -8981,18 +9088,18 @@ var SearchAndFilter = ({
       resetFilterValues,
       filterMapper: filterMapper2,
       allowBindingSearchTerm,
-      children: /* @__PURE__ */ jsxs48(VerticalRhythm7, { "data-testid": "search-and-filter", children: [
-        /* @__PURE__ */ jsxs48("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
-          /* @__PURE__ */ jsx76(
+      children: /* @__PURE__ */ jsxs49(VerticalRhythm7, { "data-testid": "search-and-filter", children: [
+        /* @__PURE__ */ jsxs49("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
+          /* @__PURE__ */ jsx87(
             "div",
             {
               css: SearchAndFilterControlsWrapper(viewSwitchControls ? "auto 1fr 0.05fr" : "auto 1fr"),
-              children: !filterControls ? /* @__PURE__ */ jsx76(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
+              children: !filterControls ? /* @__PURE__ */ jsx87(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
             }
           ),
           viewSwitchControls
         ] }),
-        /* @__PURE__ */ jsx76(FilterItems, { additionalFiltersContainer }),
+        /* @__PURE__ */ jsx87(FilterItems, { additionalFiltersContainer }),
         resultsContainerView
       ] })
     }
@@ -9001,9 +9108,9 @@ var SearchAndFilter = ({
 
 // 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";
+import { createContext as createContext7, useState as useState26 } from "react";
+import { useDebounce as useDebounce10 } from "react-use";
+import { jsx as jsx88 } from "@emotion/react/jsx-runtime";
 var SearchOnlyContext = createContext7({
   searchTerm: "",
   setSearchTerm: () => {
@@ -9011,8 +9118,8 @@ var SearchOnlyContext = createContext7({
 });
 var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
   const { searchTerm, setSearchTerm } = useSearchAndFilter();
-  const [localeSearchTerm, setLocaleSearchTerm] = useState22("");
-  useDebounce6(
+  const [localeSearchTerm, setLocaleSearchTerm] = useState26("");
+  useDebounce10(
     () => {
       setSearchTerm(localeSearchTerm);
       onSearchChange == null ? void 0 : onSearchChange(localeSearchTerm);
@@ -9020,14 +9127,14 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
     300,
     [localeSearchTerm]
   );
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx88(
     SearchOnlyContext.Provider,
     {
       value: {
         searchTerm,
         setSearchTerm: setLocaleSearchTerm
       },
-      children: /* @__PURE__ */ jsx77("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ jsx77(
+      children: /* @__PURE__ */ jsx88("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ jsx88(
         InputKeywordSearch3,
         {
           placeholder: "Search...",
@@ -9042,7 +9149,7 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
 };
 
 // src/components/SearchAndFilter/SortItems.tsx
-import { InputComboBox as InputComboBox3, InputSelect as InputSelect8, SegmentedControl, VerticalRhythm as VerticalRhythm8 } from "@uniformdev/design-system";
+import { InputComboBox as InputComboBox6, InputSelect as InputSelect8, SegmentedControl, VerticalRhythm as VerticalRhythm8 } from "@uniformdev/design-system";
 
 // src/components/SearchAndFilter/styles/SortItems.styles.ts
 import { css as css39 } from "@emotion/react";
@@ -9278,7 +9385,7 @@ var InputVariableWrapper = css39`
 `;
 
 // src/components/SearchAndFilter/SortItems.tsx
-import { jsx as jsx78, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
 var SortItems = ({
   sortByLabel = "Sort by",
   localeLabel = "Show locale",
@@ -9300,11 +9407,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__ */ jsxs49("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
-    /* @__PURE__ */ jsxs49(VerticalRhythm8, { gap: "xs", children: [
-      /* @__PURE__ */ jsx78("span", { css: Title2, children: sortByLabel }),
-      /* @__PURE__ */ jsxs49("div", { css: SortFilterInputRow, children: [
-        /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsxs50("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
+    /* @__PURE__ */ jsxs50(VerticalRhythm8, { gap: "xs", children: [
+      /* @__PURE__ */ jsx89("span", { css: Title2, children: sortByLabel }),
+      /* @__PURE__ */ jsxs50("div", { css: SortFilterInputRow, children: [
+        /* @__PURE__ */ jsx89(
           InputVariables,
           {
             disableInlineMenu: disableSortBinding,
@@ -9312,8 +9419,8 @@ var SortItems = ({
             value: sortField,
             valueToResetTo: "created_at",
             onChange: (e) => onSortChange(`${e}_${sortDirection}`),
-            inputWhenNoVariables: /* @__PURE__ */ jsx78(
-              InputComboBox3,
+            inputWhenNoVariables: /* @__PURE__ */ jsx89(
+              InputComboBox6,
               {
                 id: "sort-by-field",
                 "aria-label": "Sort by",
@@ -9335,7 +9442,7 @@ var SortItems = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx78(
+        /* @__PURE__ */ jsx89(
           InputVariables,
           {
             disableInlineMenu: disableSortBinding,
@@ -9343,7 +9450,7 @@ var SortItems = ({
             valueToResetTo: "DESC",
             showMenuPosition: disableSortBinding ? void 0 : "inline-right",
             onChange: (e) => onSortChange(`${sortField}_${e}`),
-            inputWhenNoVariables: /* @__PURE__ */ jsx78(
+            inputWhenNoVariables: /* @__PURE__ */ jsx89(
               SegmentedControl,
               {
                 noCheckmark: true,
@@ -9375,14 +9482,14 @@ var SortItems = ({
         )
       ] })
     ] }),
-    hideLocaleOptions ? null : /* @__PURE__ */ jsx78(VerticalRhythm8, { gap: "xs", css: InputVariableWrapper, children: /* @__PURE__ */ jsx78(
+    hideLocaleOptions ? null : /* @__PURE__ */ jsx89(VerticalRhythm8, { gap: "xs", css: InputVariableWrapper, children: /* @__PURE__ */ jsx89(
       InputVariables,
       {
         label: localeLabelValue,
         value: localeValue,
         showMenuPosition: "inline-right",
         onChange: (e) => onLocaleChange(e != null ? e : ""),
-        inputWhenNoVariables: /* @__PURE__ */ jsx78(
+        inputWhenNoVariables: /* @__PURE__ */ jsx89(
           InputSelect8,
           {
             name: "localeReturned",
@@ -9413,7 +9520,7 @@ function createLocationValidator(setValue, validate) {
 
 // src/utils/useContentDataResourceLocaleInfo.ts
 import { bindVariables as bindVariables2, createVariableReference as createVariableReference4, LOCALE_DYNAMIC_INPUT_NAME as LOCALE_DYNAMIC_INPUT_NAME2 } from "@uniformdev/canvas";
-import { useEffect as useEffect23, useRef as useRef17 } from "react";
+import { useEffect as useEffect24, useRef as useRef17 } from "react";
 function useContentDataResourceLocaleInfo({
   locale,
   setLocale,
@@ -9425,7 +9532,7 @@ function useContentDataResourceLocaleInfo({
   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(() => {
+  useEffect24(() => {
     if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
       setLocaleRef.current(createVariableReference4(LOCALE_DYNAMIC_INPUT_NAME2));
     }
@@ -9440,8 +9547,8 @@ import {
   Callout as Callout7,
   DrawerContent,
   Heading,
-  Input as Input7,
-  InputComboBox as InputComboBox4,
+  Input as Input11,
+  InputComboBox as InputComboBox7,
   InputKeywordSearch as InputKeywordSearch4,
   InputSelect as InputSelect9,
   InputToggle as InputToggle3,
@@ -9507,8 +9614,8 @@ export {
   Heading,
   INSERT_VARIABLE_COMMAND,
   icons_exports as Icons,
-  Input7 as Input,
-  InputComboBox4 as InputComboBox,
+  Input11 as Input,
+  InputComboBox7 as InputComboBox,
   InputKeywordSearch4 as InputKeywordSearch,
   InputSelect9 as InputSelect,
   InputToggle3 as InputToggle,