@uniformdev/design-system 19.119.0 → 19.121.1-alpha.3

package/dist/esm/index.js

@@ -639,7 +639,7 @@ var input = (whiteSpaceWrap) => css2`
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
   padding: var(--input-padding);
-  min-height: 46px;
+  min-height: 50px;
   width: 100%;
   position: relative;
   white-space: ${whiteSpaceWrap};
@@ -1232,6 +1232,9 @@ var IconColorAction = css8`
 var IconColorAccent = css8`
   color: var(--accent-alt-dark);
 `;
+var IconColorAccentDark = css8`
+  color: var(--accent-dark);
+`;
 var IconColorAccentLight = css8`
   color: var(--accent-light);
 `;
@@ -1252,7 +1255,7 @@ function IconsProvider({ children }) {
   const [isLoading, setIsLoading] = useState2(true);
   const [iconsMap, setIconsMap] = useState2({});
   const initializeIconsMap = async () => {
-    const { importedIcons } = await import("./importedIcons-GRLD5JXK.js");
+    const { importedIcons } = await import("./importedIcons-XEGXOSVC.js");
     setIconsMap({ ...importedIcons, ...customIcons });
     setIsLoading(false);
   };
@@ -1275,6 +1278,7 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
     red: IconColorRed,
     accent: IconColorAccent,
     currentColor: IconColorCurrent,
+    "accent-dark": IconColorAccentDark,
     "accent-light": IconColorAccentLight
   };
   if (isIconName && isLoading) {
@@ -2553,7 +2557,7 @@ import { css as css15 } from "@emotion/react";
 var PageHeaderSectionContainer = css15`
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--spacing-lg);
+  margin-bottom: var(--spacing-sm);
   flex-direction: column;
   gap: var(--spacing-sm);
 
@@ -12215,7 +12219,7 @@ var ButtonWithMenu = ({
 };
 
 // src/components/Calendar/Calendar.tsx
-import { parseDate, today } from "@internationalized/date";
+import { isToday, parseDate, today } from "@internationalized/date";
 import { useCallback, useState as useState3 } from "react";
 import {
   Button as AriaButton,
@@ -12228,6 +12232,7 @@ import {
 // src/components/Calendar/Calendar.styles.ts
 import { css as css28 } from "@emotion/react";
 var container = css28`
+  --calendar-cell-size: 1.8rem;
   width: fit-content;
   max-width: 100%;
 `;
@@ -12252,13 +12257,13 @@ var headerNavButton = css28`
   }
 `;
 var cell = css28`
-  width: 2rem;
-  line-height: 2rem;
+  width: var(--calendar-cell-size);
+  line-height: var(--calendar-cell-size);
   text-align: center;
   border-radius: var(--rounded-sm);
   cursor: default;
   outline: none;
-  margin: 1px;
+  margin: 1px 0;
   forced-color-adjust: none;
 
   &:hover {
@@ -12284,6 +12289,12 @@ var cell = css28`
     color: var(--white);
   }
 `;
+var cellIsOutsideRange = css28`
+  color: var(--gray-400);
+`;
+var cellIsToday = css28`
+  background: var(--gray-200);
+`;
 var actions = css28`
   display: flex;
   justify-content: end;
@@ -12312,6 +12323,9 @@ var Calendar = ({
   ...props
 }) => {
   const [focusedValue, setFocusedValue] = useState3(void 0);
+  const today_date = today(timeZone);
+  const minDate = tryParseDate(minValue);
+  const maxDate = tryParseDate(maxValue);
   const handleChange = useCallback(
     (value2) => {
       onChange == null ? void 0 : onChange(value2.toString());
@@ -12319,10 +12333,9 @@ var Calendar = ({
     [onChange]
   );
   const gotoToday = useCallback(() => {
-    const date = today(timeZone);
-    onChange == null ? void 0 : onChange(date.toString());
-    setFocusedValue(date);
-  }, [onChange, timeZone]);
+    onChange == null ? void 0 : onChange(today_date.toString());
+    setFocusedValue(today_date);
+  }, [onChange, today_date]);
   return /* @__PURE__ */ jsxs18("div", { ...props, children: [
     /* @__PURE__ */ jsxs18(
       AriaCalendar,
@@ -12330,8 +12343,8 @@ var Calendar = ({
         value: tryParseDate(value) || null,
         focusedValue,
         onFocusChange: setFocusedValue,
-        minValue: tryParseDate(minValue),
-        maxValue: tryParseDate(maxValue),
+        minValue: minDate,
+        maxValue: maxDate,
         onChange: handleChange,
         css: container,
         "aria-label": "Appointment date",
@@ -12358,7 +12371,18 @@ var Calendar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx29(CalendarGrid, { children: (date) => /* @__PURE__ */ jsx29(CalendarCell, { css: cell, date }) })
+          /* @__PURE__ */ jsx29(CalendarGrid, { children: (date) => /* @__PURE__ */ jsx29(
+            CalendarCell,
+            {
+              css: [
+                cell,
+                minDate && date.compare(minDate) < 0 ? cellIsOutsideRange : null,
+                maxDate && date.compare(maxDate) > 0 ? cellIsOutsideRange : null,
+                isToday(date, timeZone) ? cellIsToday : null
+              ],
+              date
+            }
+          ) })
         ]
       }
     ),
@@ -13375,7 +13399,7 @@ var DashedBox = ({
 };
 
 // src/components/DateTimePicker/DateTimePicker.tsx
-import { getLocalTimeZone as getLocalTimeZone2, parseDate as parseDate2, parseTime as parseTime2 } from "@internationalized/date";
+import { getLocalTimeZone as getLocalTimeZone2, parseDate as parseDate2, parseTime as parseTime2, Time as Time3 } from "@internationalized/date";
 import { createContext as createContext2, useCallback as useCallback3, useContext as useContext3, useEffect as useEffect4, useMemo, useState as useState6 } from "react";
 import { Popover as Popover2, PopoverDisclosure, usePopoverState } from "reakit/Popover";
 
@@ -13817,6 +13841,13 @@ function InputComboBox(props) {
               boxShadow: "none",
               borderColor: "var(--accent-dark-hover)"
             },
+            '&:has([aria-readonly="true"])': {
+              background: "var(--gray-100)",
+              "&:hover": {
+                borderColor: "var(--gray-300)"
+              },
+              ...state.isFocused ? { borderColor: "var(--gray-300)" } : {}
+            },
             ...(_b = (_a2 = props.styles) == null ? void 0 : _a2.control) == null ? void 0 : _b.call(_a2, base, state)
           };
         },
@@ -14482,7 +14513,7 @@ var popover = css52`
   padding: var(--spacing-md);
   max-width: none;
   gap: var(--spacing-md);
-  grid-template-columns: 1fr 0.9fr;
+  grid-template-columns: 0.8fr 1fr;
   grid-template-rows: 1fr 1fr;
 
   [data-variant='date'] & {
@@ -14544,7 +14575,7 @@ import {
 function getTimeZoneLabel(tz) {
   var _a;
   const offset = (_a = Intl.DateTimeFormat("en", { timeZoneName: "shortOffset", timeZone: tz }).formatToParts().find((p) => p.type === "timeZoneName")) == null ? void 0 : _a.value;
-  return tz + (offset ? ` (${offset})` : "");
+  return String(tz).replace(/_/g, " ") + (offset ? ` (${offset})` : "");
 }
 function tryParseAbsolute(isoDateTime, timeZone) {
   try {
@@ -14579,7 +14610,8 @@ var DateTimePickerVariant = /* @__PURE__ */ ((DateTimePickerVariant2) => {
 
 // src/components/DateTimePicker/DateTimePicker.tsx
 import { jsx as jsx61, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
-var TIMEZONE_OPTIONS = Intl.supportedValuesOf("timeZone").map((v) => ({
+var timeZoneOptions = typeof Intl !== "undefined" && typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : ["Etc/UTC"];
+var TIMEZONE_OPTIONS = timeZoneOptions.map((v) => ({
   label: getTimeZoneLabel(v),
   value: v
 }));
@@ -14629,9 +14661,10 @@ var DateTimePicker = ({
     return TIMEZONE_OPTIONS.find(({ value: value2 }) => value2 === timeZone);
   });
   useEffect4(() => {
+    var _a;
     if (popover2.visible) {
       setDraftDate(tryToCalendarDate(parsedValue));
-      setDraftTime(tryToTime(parsedValue));
+      setDraftTime((_a = tryToTime(parsedValue)) != null ? _a : new Time3(0, 0));
     }
   }, [parsedValue, popover2.visible]);
   const handleDateChange = useCallback3((isoDate) => {
@@ -17529,6 +17562,16 @@ var toggleInput2 = css79`
     color: var(--white);
   }
 
+  &:indeterminate,
+  &:indeterminate:hover,
+  &:indeterminate:focus {
+    background: var(--accent-dark-active)
+      url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNiIKICBoZWlnaHQ9IjE2IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNCAxMkM0IDExLjQ0NzcgNC40NDc3MiAxMSA1IDExSDE5QzE5LjU1MjMgMTEgMjAgMTEuNDQ3NyAyMCAxMkMyMCAxMi41NTIzIDE5LjU1MjMgMTMgMTkgMTNINUM0LjQ0NzcyIDEzIDQgMTIuNTUyMyA0IDEyWiIKICAgIGZpbGw9IndoaXRlIgogIC8+Cjwvc3ZnPg==')
+      no-repeat center center;
+    border-color: var(--accent-dark-active);
+    color: var(--white);
+  }
+
   &:hover {
     border-color: var(--accent-dark-hover);
   }
@@ -20240,6 +20283,60 @@ var TEXTBOX_OPERATORS = [
     editorType: "empty"
   }
 ];
+var USER_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "text"
+  },
+  {
+    label: "contains...",
+    value: "match",
+    editorType: "text"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    editorType: "text"
+  }
+];
+var SYSTEM_DATE_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "date"
+  },
+  {
+    label: "is between...",
+    value: "between",
+    editorType: "dateRange"
+  },
+  {
+    label: "is before...",
+    value: "lt",
+    editorType: "date"
+  },
+  {
+    label: "is after...",
+    value: "gt",
+    editorType: "date"
+  },
+  {
+    label: "is on or before...",
+    value: "lte",
+    editorType: "date"
+  },
+  {
+    label: "is on or after...",
+    value: "gte",
+    editorType: "date"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    editorType: "date"
+  }
+];
 var RICHTEXT_OPERATORS = [
   {
     label: "is empty...",
@@ -20295,16 +20392,16 @@ var SYSTEM_FIELD_OPERATORS = [
 // src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
 import { css as css92 } from "@emotion/react";
 var SearchAndFilterContainer = css92``;
-var SearchAndFilterControlsWrapper = css92`
+var SearchAndFilterControlsWrapper = (gridColumns) => css92`
   align-items: stretch;
   display: grid;
-  grid-template-columns: auto auto 1fr 0.5fr;
+  grid-template-columns: ${gridColumns};
   gap: var(--spacing-sm);
 `;
-var SearchAndFilterOutterControlWrapper = css92`
+var SearchAndFilterOutterControlWrapper = (gridColumns) => css92`
   align-items: stretch;
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: ${gridColumns};
   gap: var(--spacing-sm);
 `;
 var ConditionalFilterRow = css92`
@@ -20337,7 +20434,7 @@ var ConditionalInputRow = css92`
   }
   ${cq("580px")} {
     display: grid;
-    grid-template-columns: 200px 160px repeat(2, minmax(160px, 240px)) 32px;
+    grid-template-columns: 200px 160px 1fr 32px;
   }
 `;
 var SearchInput = css92`
@@ -20381,6 +20478,12 @@ var FilterButton = css92`
     opacity: var(--opacity-50);
   }
 `;
+var FilterButtonText = css92`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 14ch;
+`;
 var FilterButtonSelected = css92`
   background: var(--gray-100);
   border-color: var(--gray-300);
@@ -20417,7 +20520,6 @@ var AddConditionalBtn = css92`
   gap: var(--spacing-sm);
   transition: color var(--duration-fast) var(--timing-ease-out);
   padding: 0;
-  font-size: var(--fs-sm);
 
   &:hover,
   &:focus {
@@ -20482,6 +20584,11 @@ var SearchAndFilterOptionsInnerContainer = css92`
 var SearchAndFilterButtonGroup = css92`
   margin-top: var(--spacing-base);
 `;
+var SortFilterInputRow = css92`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+`;
 
 // src/components/SearchAndFilter/FilterButton.tsx
 import { jsx as jsx117, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
@@ -20505,7 +20612,7 @@ var FilterButton2 = ({
       "data-testid": "filters-button",
       children: [
         /* @__PURE__ */ jsx117(Icon, { icon, iconColor: "currentColor", size: "1rem" }),
-        text,
+        /* @__PURE__ */ jsx117("span", { css: FilterButtonText, children: text }),
         filterCount ? /* @__PURE__ */ jsx117(Counter, { count: filterCount, bgColor: "var(--white)" }) : null
       ]
     }
@@ -20514,7 +20621,7 @@ var FilterButton2 = ({
 
 // src/components/SearchAndFilter/FilterControls.tsx
 import { useEffect as useEffect18, useState as useState17 } from "react";
-import { useDebounce as useDebounce2 } from "react-use";
+import { useDebounce as useDebounce2, useEffectOnce } from "react-use";
 
 // src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
 import {
@@ -20556,6 +20663,7 @@ var SearchAndFilterProvider = ({
   filterOptions,
   sortOptions,
   defaultSortByValue,
+  filterMode: filterMode3 = void 0,
   onSearchChange,
   onChange,
   onSortChange,
@@ -20564,12 +20672,12 @@ var SearchAndFilterProvider = ({
 }) => {
   const [searchTerm, setSearchTerm] = useState16("");
   const deferredSearchTerm = useDeferredValue2(searchTerm);
-  const [filterVisibility, setFilterVisibility] = useState16(void 0);
+  const [filterVisibility, setFilterVisibility] = useState16(filterMode3);
   const [sortByValue, setSortByValue] = useState16(defaultSortByValue);
   const handleSearchTerm = useCallback10(
     (term) => {
       setSearchTerm(term);
-      onSearchChange(term);
+      onSearchChange == null ? void 0 : onSearchChange(term);
     },
     [setSearchTerm, onSearchChange]
   );
@@ -20648,10 +20756,23 @@ var useSearchAndFilter = () => {
 // src/components/SearchAndFilter/FilterControls.tsx
 import { Fragment as Fragment19, jsx as jsx119, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
 var FilterControls = ({
-  children
+  children,
+  defaultSortByValue,
+  hideSearchInput
 }) => {
-  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm, sortByValue } = useSearchAndFilter();
+  var _a, _b, _c;
+  const {
+    setFilterVisibility,
+    filterVisibility,
+    setSearchTerm,
+    validFilterQuery,
+    searchTerm,
+    sortByValue,
+    filterOptions
+  } = useSearchAndFilter();
+  const [initialSortValue, setInitialSortValue] = useState17(sortByValue);
   const [localeSearchTerm, setLocaleSearchTerm] = useState17("");
+  const [userHasChangedSortByValue, setUserHasChangedSortByValue] = useState17(false);
   useDebounce2(
     () => {
       setSearchTerm(localeSearchTerm);
@@ -20665,14 +20786,25 @@ var FilterControls = ({
     }
   }, [searchTerm]);
   const handleFilterToggle = (mode) => {
-    if (filterVisibility && ["sort", "filters"].includes(filterVisibility)) {
+    if (filterVisibility === "filters" && mode === "filters" || filterVisibility === "sort" && mode === "sort") {
       return setFilterVisibility(void 0);
     }
     return setFilterVisibility(mode);
   };
-  const sortByValues = sortByValue ? sortByValue == null ? void 0 : sortByValue.split("_") : "Sort";
-  const sortByValueLabel = Array.isArray(sortByValues) ? sortByValue == null ? void 0 : sortByValue.split("_")[0] : "Sort";
-  const sortByIcon = Array.isArray(sortByValues) ? sortByValues[1] === "ASC" ? "arrow-up" : "arrow-down" : "sort-az";
+  const sortValue = (sortByValue != null ? sortByValue : defaultSortByValue).split("_");
+  const sortDirection = sortValue == null ? void 0 : sortValue.pop();
+  const sortField = sortValue == null ? void 0 : sortValue.join("_");
+  const sortOn = sortField.startsWith("fields.") ? "contentTypeFields" : "metadata";
+  const sortByValueLabel = (_c = (_b = (_a = filterOptions == null ? void 0 : filterOptions.find((op) => op.value === sortOn)) == null ? void 0 : _a.options) == null ? void 0 : _b.find((f) => f.value === sortField)) == null ? void 0 : _c.label;
+  const sortByIcon = userHasChangedSortByValue ? sortDirection === "ASC" ? "arrow-up" : "arrow-down" : "sort-az";
+  useEffectOnce(() => {
+    setInitialSortValue(sortByValue);
+  });
+  useEffect18(() => {
+    if (initialSortValue !== sortByValue) {
+      setUserHasChangedSortByValue(true);
+    }
+  }, [initialSortValue, sortByValue]);
   return /* @__PURE__ */ jsxs80(Fragment19, { children: [
     /* @__PURE__ */ jsx119(
       FilterButton2,
@@ -20691,7 +20823,7 @@ var FilterControls = ({
         "aria-controls": "search-and-filter-sortBy",
         "aria-label": "sort by options",
         "aria-haspopup": "true",
-        text: sortByValueLabel,
+        text: !userHasChangedSortByValue ? "Sort" : sortByValueLabel,
         icon: sortByIcon,
         "aria-expanded": filterVisibility === "sort",
         hasSelectedValue: sortByValue !== "",
@@ -20699,7 +20831,7 @@ var FilterControls = ({
         "data-testid": "sort-by-dropdown"
       }
     ),
-    /* @__PURE__ */ jsx119(
+    hideSearchInput ? null : /* @__PURE__ */ jsx119(
       InputKeywordSearch,
       {
         placeholder: "Search...",
@@ -20793,6 +20925,11 @@ var StatusUnknown = css93`
     background: var(--gray-800);
   }
 `;
+var StatusDeleted = css93`
+  &:before {
+    background: var(--error);
+  }
+`;
 
 // src/components/Validation/StatusBullet.tsx
 import { jsx as jsx120 } from "@emotion/react/jsx-runtime";
@@ -20811,7 +20948,8 @@ var StatusBullet = ({
     Published: StatusPublished,
     Draft: StatusDraft,
     Previous: StatusDraft,
-    Unknown: StatusUnknown
+    Unknown: StatusUnknown,
+    Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
   return /* @__PURE__ */ jsx120(
@@ -20828,13 +20966,21 @@ var StatusBullet = ({
 
 // src/components/SearchAndFilter/FilterEditor.tsx
 import { Fragment as Fragment20, jsx as jsx121, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
+var readOnlyAttributes = {
+  isSearchable: false,
+  menuIsOpen: false,
+  isClearable: false
+};
 var FilterMultiChoiceEditor = ({
   value,
   options,
   isDisabled,
+  readOnly,
+  valueTestId,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx121(
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ jsx121("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx121(
     InputComboBox,
     {
       ...props,
@@ -20847,17 +20993,30 @@ var FilterMultiChoiceEditor = ({
         var _a;
         return props.onChange((_a = e.map((item) => item.value)) != null ? _a : []);
       },
-      value
+      value,
+      "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
     }
-  );
+  ) });
 };
 var FilterSingleChoiceEditor = ({
   options,
   value,
   isDisabled,
-  onChange
+  readOnly,
+  onChange,
+  valueTestId
 }) => {
-  return /* @__PURE__ */ jsx121(
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ jsx121("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx121(
     InputComboBox,
     {
       placeholder: "Type to search...",
@@ -20868,9 +21027,19 @@ var FilterSingleChoiceEditor = ({
         return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
       },
       isDisabled,
-      value
+      value,
+      "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
     }
-  );
+  ) });
 };
 var CustomOptions = ({ label, value }) => {
   return /* @__PURE__ */ jsx121(StatusBullet, { status: label, message: value });
@@ -20879,9 +21048,12 @@ var StatusMultiEditor = ({
   options,
   value,
   isDisabled,
-  onChange
+  readOnly,
+  onChange,
+  valueTestId
 }) => {
-  return /* @__PURE__ */ jsx121(
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ jsx121("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx121(
     InputComboBox,
     {
       options,
@@ -20892,17 +21064,29 @@ var StatusMultiEditor = ({
       },
       formatOptionLabel: CustomOptions,
       value,
-      isDisabled
+      isDisabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
     }
-  );
+  ) });
 };
 var StatusSingleEditor = ({
   options,
   value,
   isDisabled,
-  onChange
+  readOnly,
+  onChange,
+  valueTestId
 }) => {
-  return /* @__PURE__ */ jsx121(
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ jsx121("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx121(
     InputComboBox,
     {
       options,
@@ -20912,11 +21096,20 @@ var StatusSingleEditor = ({
       },
       formatOptionLabel: CustomOptions,
       value,
-      isDisabled
+      isDisabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
     }
-  );
+  ) });
 };
-var TextEditor = ({ onChange, ariaLabel, value }) => {
+var TextEditor = ({ onChange, ariaLabel, value, readOnly, valueTestId }) => {
   useDebounce3(() => onChange, 500, [value]);
   return /* @__PURE__ */ jsx121(
     Input,
@@ -20925,11 +21118,20 @@ var TextEditor = ({ onChange, ariaLabel, value }) => {
       label: ariaLabel,
       onChange: (e) => onChange(e.currentTarget.value),
       placeholder: "Enter phrase to search\u2026",
-      value
+      value,
+      readOnly,
+      "data-testid": valueTestId
     }
   );
 };
-var NumberRangeEditor = ({ onChange, disabled: disabled2, ariaLabel, value }) => {
+var NumberRangeEditor = ({
+  onChange,
+  disabled: disabled2,
+  ariaLabel,
+  value,
+  readOnly,
+  valueTestId
+}) => {
   const [minValue, setMinValue] = useState18("");
   const [maxValue, setMaxValue] = useState18("");
   const [error, setError] = useState18("");
@@ -20953,38 +21155,49 @@ var NumberRangeEditor = ({ onChange, disabled: disabled2, ariaLabel, value }) =>
     onChange([minValue, maxValue]);
   }, [maxValue, minValue, setError]);
   return /* @__PURE__ */ jsxs81(Fragment20, { children: [
-    /* @__PURE__ */ jsx121(
-      Input,
-      {
-        label: `${ariaLabel}-min`,
-        type: "number",
-        showLabel: false,
-        min: 0,
-        placeholder: "Low",
-        onChange: (e) => setMinValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true,
-        disabled: disabled2,
-        value: value ? value[0] : ""
-      }
-    ),
-    /* @__PURE__ */ jsx121(
-      Input,
-      {
-        type: "number",
-        label: `${ariaLabel}-max`,
-        showLabel: false,
-        min: 0,
-        placeholder: "High",
-        onChange: (e) => setMaxValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true,
-        disabled: disabled2,
-        value: value ? value[1] : ""
-      }
-    ),
+    /* @__PURE__ */ jsxs81("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ jsx121(
+        Input,
+        {
+          label: `${ariaLabel}-min`,
+          type: "number",
+          showLabel: false,
+          min: 0,
+          placeholder: "Low",
+          onChange: (e) => setMinValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled: disabled2,
+          value: value ? value[0] : "",
+          readOnly
+        }
+      ),
+      /* @__PURE__ */ jsx121(
+        Input,
+        {
+          type: "number",
+          label: `${ariaLabel}-max`,
+          showLabel: false,
+          min: 0,
+          placeholder: "High",
+          onChange: (e) => setMaxValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled: disabled2,
+          value: value ? value[1] : "",
+          readOnly
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx121(ErrorContainer, { errorMessage: error })
   ] });
 };
-var NumberEditor = ({ ariaLabel, onChange, disabled: disabled2, value }) => {
+var NumberEditor = ({
+  ariaLabel,
+  onChange,
+  disabled: disabled2,
+  value,
+  readOnly,
+  valueTestId
+}) => {
   return /* @__PURE__ */ jsx121(
     Input,
     {
@@ -20994,11 +21207,20 @@ var NumberEditor = ({ ariaLabel, onChange, disabled: disabled2, value }) => {
       min: 0,
       onChange: (e) => onChange(e.currentTarget.value),
       disabled: disabled2,
-      value
+      value,
+      readOnly,
+      "data-testid": valueTestId
     }
   );
 };
-var DateEditor = ({ onChange, ariaLabel, disabled: disabled2, value }) => {
+var DateEditor = ({
+  onChange,
+  ariaLabel,
+  disabled: disabled2,
+  value,
+  readOnly,
+  valueTestId
+}) => {
   return /* @__PURE__ */ jsx121(
     Input,
     {
@@ -21007,11 +21229,20 @@ var DateEditor = ({ onChange, ariaLabel, disabled: disabled2, value }) => {
       showLabel: false,
       onChange: (e) => onChange(e.currentTarget.value),
       disabled: disabled2,
-      value
+      value,
+      readOnly,
+      "data-testid": valueTestId
     }
   );
 };
-var DateRangeEditor = ({ ariaLabel, onChange, disabled: disabled2, value }) => {
+var DateRangeEditor = ({
+  ariaLabel,
+  onChange,
+  disabled: disabled2,
+  value,
+  readOnly,
+  valueTestId
+}) => {
   const [minDateValue, setMinDateValue] = useState18(value ? value[0] : "");
   const [maxDateValue, setMaxDateValue] = useState18(value ? value[1] : "");
   const [error, setError] = useState18("");
@@ -21047,30 +21278,34 @@ var DateRangeEditor = ({ ariaLabel, onChange, disabled: disabled2, value }) => {
     onChange([minDateValue, maxDateValue]);
   }, [minDateValue, maxDateValue, setError]);
   return /* @__PURE__ */ jsxs81(Fragment20, { children: [
-    /* @__PURE__ */ jsx121(
-      Input,
-      {
-        label: `${ariaLabel}-min-date`,
-        type: "date",
-        showLabel: false,
-        value: minDateValue,
-        onChange: (e) => setMinDateValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true,
-        disabled: disabled2
-      }
-    ),
-    /* @__PURE__ */ jsx121(
-      Input,
-      {
-        label: `${ariaLabel}-max-date`,
-        type: "date",
-        showLabel: false,
-        value: maxDateValue,
-        onChange: (e) => setMaxDateValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true,
-        disabled: disabled2
-      }
-    ),
+    /* @__PURE__ */ jsxs81("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ jsx121(
+        Input,
+        {
+          label: `${ariaLabel}-min-date`,
+          type: "date",
+          showLabel: false,
+          value: minDateValue,
+          onChange: (e) => setMinDateValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled: disabled2,
+          readOnly
+        }
+      ),
+      /* @__PURE__ */ jsx121(
+        Input,
+        {
+          label: `${ariaLabel}-max-date`,
+          type: "date",
+          showLabel: false,
+          value: maxDateValue,
+          onChange: (e) => setMaxDateValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled: disabled2,
+          readOnly
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx121(ErrorContainer, { errorMessage: error })
   ] });
 };
@@ -21108,6 +21343,11 @@ var ErrorContainer = ({ errorMessage }) => {
     }
   );
 };
+var twoColumnGrid = {
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: "var(--spacing-sm);"
+};
 
 // src/components/SearchAndFilter/FilterMenu.tsx
 import React24, { useEffect as useEffect20 } from "react";
@@ -21130,7 +21370,7 @@ var SearchAndFilterOptionsContainer2 = ({
     ) : null
   ] });
 };
-var FilterMenu = ({ id, filterTitle = "Show records", menuControls, children }) => {
+var FilterMenu = ({ id, filterTitle = "Show results", menuControls, children }) => {
   const { filterVisibility, setFilterVisibility } = useSearchAndFilter();
   const innerMenuRef = React24.useRef(null);
   useEffect20(() => {
@@ -21172,15 +21412,16 @@ 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 } = useMemo7(() => {
-    var _a2, _b2;
+  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly } = useMemo7(() => {
+    var _a2;
     const currentSelectedFilter = filterOptions.find((item) => {
       var _a3;
       return (_a3 = item.options) == null ? void 0 : _a3.find((op) => op.value === filters[index].field);
     });
-    const selectedFieldValue2 = (_b2 = (_a2 = currentSelectedFilter == null ? void 0 : currentSelectedFilter.options) == null ? void 0 : _a2.find((item) => {
+    const selectedFieldValue2 = (_a2 = currentSelectedFilter == null ? void 0 : currentSelectedFilter.options) == null ? void 0 : _a2.find((item) => {
       return filters[index].field === item.value;
-    })) != null ? _b2 : [];
+    });
+    const isCurrentFieldReadOnly = selectedFieldValue2 == null ? void 0 : selectedFieldValue2.readOnly;
     const selectedOperatorValue2 = operatorOptions == null ? void 0 : operatorOptions.find((item) => {
       return filters[index].operator === item.value;
     });
@@ -21193,11 +21434,18 @@ var FilterItem = ({
     return {
       selectedFieldValue: selectedFieldValue2,
       selectedOperatorValue: selectedOperatorValue2 != null ? selectedOperatorValue2 : void 0,
-      selectedMetaValue: selectedMetaValue2.length > 0 ? selectedMetaValue2 : filters[index].value
+      selectedMetaValue: selectedMetaValue2.length > 0 ? selectedMetaValue2 : filters[index].value,
+      readOnly: isCurrentFieldReadOnly
     };
   }, [filters, filterOptions, index, operatorOptions, valueOptions]);
-  return /* @__PURE__ */ jsxs83("div", { css: ConditionalFilterRow, children: [
-    /* @__PURE__ */ jsx123("span", { children: index === 0 ? "where" : "and" }),
+  const readOnlyProps = readOnly ? {
+    "aria-readonly": true,
+    isSearchable: false,
+    menuIsOpen: false,
+    isClearable: false
+  } : {};
+  return /* @__PURE__ */ jsxs83("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
+    /* @__PURE__ */ jsx123("span", { children: index === 0 ? "Where" : "and" }),
     /* @__PURE__ */ jsxs83("div", { css: ConditionalInputRow, children: [
       /* @__PURE__ */ jsx123(
         InputComboBox,
@@ -21208,7 +21456,21 @@ var FilterItem = ({
             var _a2;
             onParamChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
           },
-          value: selectedFieldValue
+          isOptionDisabled: (option) => {
+            var _a2;
+            return (_a2 = option == null ? void 0 : option.disabled) != null ? _a2 : false;
+          },
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
+          value: selectedFieldValue,
+          ...readOnlyProps,
+          id: "filter-field"
         }
       ),
       /* @__PURE__ */ jsx123(
@@ -21221,7 +21483,17 @@ var FilterItem = ({
             return onOperatorChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
           },
           isDisabled: !filters[index].field,
-          value: selectedOperatorValue
+          value: selectedOperatorValue,
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
+          ...readOnlyProps,
+          id: "filter-operator"
         }
       ),
       /* @__PURE__ */ jsx123(
@@ -21231,17 +21503,20 @@ var FilterItem = ({
           editorType: metaDataPossibleOptions,
           options: valueOptions,
           onChange: (e) => onValueChange(e != null ? e : ""),
+          readOnly,
           isDisabled: !filters[index].operator,
-          value: selectedMetaValue
+          value: selectedMetaValue,
+          valueTestId: "filter-value"
         }
       ),
-      /* @__PURE__ */ jsx123(
+      readOnly ? null : /* @__PURE__ */ jsx123(
         "button",
         {
           type: "button",
           onClick: () => handleDeleteFilter(index),
           "aria-label": "delete filter",
           css: IconBtn,
+          "data-testid": "delete-filter",
           children: /* @__PURE__ */ jsx123(Icon, { icon: "trash", iconColor: "red", size: "1rem" })
         }
       )
@@ -21252,16 +21527,9 @@ var FilterItems = ({
   addButtonText = "add condition",
   resetButtonText = "reset filters"
 }) => {
-  const {
-    filterOptions,
-    filters,
-    setFilters,
-    handleAddFilter,
-    handleResetFilters,
-    setFilterVisibility,
-    validFilterQuery
-  } = useSearchAndFilter();
+  const { filterOptions, filters, setFilters, handleAddFilter, handleResetFilters, setFilterVisibility } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
+    var _a, _b, _c, _d, _e;
     const next = [...filters];
     next[index] = { ...next[index], [prop]: value };
     if (prop === "operator") {
@@ -21274,7 +21542,11 @@ var FilterItems = ({
       }
     }
     if (prop === "field") {
-      next[index].operator = "";
+      const firstOperatorInAvailableOperators = (_e = (_d = (_c = (_b = (_a = filterOptions.find((fo) => {
+        var _a2;
+        return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === value);
+      })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((op) => op.value === next[index].field)) == null ? void 0 : _c.operatorOptions) == null ? void 0 : _d[0].value) != null ? _e : "eq";
+      next[index].operator = firstOperatorInAvailableOperators;
       next[index].value = "";
     }
     setFilters(next);
@@ -21290,14 +21562,14 @@ var FilterItems = ({
             type: "button",
             css: AddConditionalBtn,
             onClick: handleAddFilter,
-            disabled: !validFilterQuery,
+            "data-testid": "add-filter",
             children: [
-              /* @__PURE__ */ jsx123(Icon, { icon: "math-plus", iconColor: !validFilterQuery ? "currentColor" : "gray", size: "1rem" }),
+              /* @__PURE__ */ jsx123(Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
               addButtonText
             ]
           }
         ),
-        (validFilterQuery == null ? void 0 : validFilterQuery.length) ? /* @__PURE__ */ jsx123(
+        (filters == null ? void 0 : filters.length) ? /* @__PURE__ */ jsx123(
           "button",
           {
             type: "button",
@@ -21306,6 +21578,7 @@ var FilterItems = ({
               handleResetFilters();
               setFilterVisibility(void 0);
             },
+            "data-testid": "reset-filters",
             children: resetButtonText
           }
         ) : null
@@ -21552,7 +21825,7 @@ var SortItems = () => {
     var _a2;
     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);
-  return /* @__PURE__ */ jsx125(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ jsx125("div", { css: ConditionalFilterRow, children: /* @__PURE__ */ jsxs85("div", { css: ConditionalInputRow, children: [
+  return /* @__PURE__ */ jsx125(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ jsxs85("div", { css: SortFilterInputRow, children: [
     /* @__PURE__ */ jsx125(
       InputComboBox,
       {
@@ -21561,6 +21834,14 @@ var SortItems = () => {
           const fieldName = e == null ? void 0 : e.value;
           setSortBy(`${fieldName}_${sortDirection}`);
         },
+        styles: {
+          menu(base) {
+            return {
+              ...base,
+              minWidth: "max-content"
+            };
+          }
+        },
         value: currentSelectedOption
       }
     ),
@@ -21577,7 +21858,7 @@ var SortItems = () => {
         value: sortDirection
       }
     )
-  ] }) }) });
+  ] }) });
 };
 
 // src/components/SearchAndFilter/FilterModeView.tsx
@@ -21594,24 +21875,52 @@ var FilterModeView = () => {
 // src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
 import { Fragment as Fragment22, jsx as jsx127, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
 var SearchAndFilterResultContainer = ({
-  clearButtonLabel = "clear"
+  buttonText,
+  clearButtonLabel = "clear",
+  calloutTitle: calloutTitle2,
+  calloutText,
+  onHandleClear
 }) => {
-  const { searchTerm, setSearchTerm, totalResults } = useSearchAndFilter();
-  return searchTerm ? /* @__PURE__ */ jsxs86(Fragment22, { children: [
+  const { searchTerm, setSearchTerm, totalResults, setFilters, filters } = useSearchAndFilter();
+  const automateCalloutTitle = () => {
+    if (searchTerm && !filters.length) {
+      return "No search results found";
+    }
+    if (filters.length && !searchTerm) {
+      return "No results match the selected filters";
+    }
+    return "No matching results found";
+  };
+  const handleResetFilters = () => {
+    if (searchTerm && !filters.length) {
+      setSearchTerm("");
+      return;
+    } else if (!searchTerm && filters.length) {
+      setFilters([{ field: "", operator: "", value: "" }]);
+      return;
+    } else {
+      setSearchTerm("");
+      setFilters([{ field: "", operator: "", value: "" }]);
+      return;
+    }
+  };
+  if (totalResults && totalResults > 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs86(Fragment22, { children: [
     /* @__PURE__ */ jsxs86(HorizontalRhythm, { children: [
       /* @__PURE__ */ jsxs86("span", { children: [
         totalResults,
-        " results for ",
-        /* @__PURE__ */ jsxs86("strong", { children: [
-          '"',
-          searchTerm,
-          '"'
-        ] })
+        " results ",
+        searchTerm ? `for "${searchTerm}"` : null
       ] }),
-      /* @__PURE__ */ jsx127(Button, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
+      !searchTerm ? null : /* @__PURE__ */ jsx127(Button, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
     ] }),
-    totalResults === 0 ? /* @__PURE__ */ jsx127(Callout, { title: "No search results found", type: "note", children: /* @__PURE__ */ jsx127(Button, { buttonType: "tertiaryOutline", size: "sm", onClick: () => setSearchTerm(""), children: "Clear search" }) }) : null
-  ] }) : null;
+    totalResults === 0 ? /* @__PURE__ */ jsxs86(Callout, { title: calloutTitle2 != null ? calloutTitle2 : automateCalloutTitle(), type: "note", children: [
+      calloutText ? /* @__PURE__ */ jsx127(Paragraph, { children: calloutText }) : null,
+      /* @__PURE__ */ jsx127(Button, { buttonType: "tertiaryOutline", size: "xs", onClick: onHandleClear != null ? onHandleClear : handleResetFilters, children: buttonText != null ? buttonText : "Clear search" })
+    ] }) : null
+  ] });
 };
 
 // src/components/SearchAndFilter/SearchAndFilter.tsx
@@ -21619,10 +21928,12 @@ import { jsx as jsx128, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
 var SearchAndFilter = ({
   filters,
   filterOptions,
+  filterMode: filterMode3,
   sortOptions,
   defaultSortByValue,
-  filterControls = /* @__PURE__ */ jsx128(FilterControls, {}),
+  filterControls,
   viewSwitchControls,
+  resultsContainerView = /* @__PURE__ */ jsx128(SearchAndFilterResultContainer, {}),
   children = /* @__PURE__ */ jsx128(FilterModeView, {}),
   onChange,
   onSearchChange,
@@ -21634,6 +21945,7 @@ var SearchAndFilter = ({
     {
       filters,
       filterOptions,
+      filterMode: filterMode3,
       defaultSortByValue,
       sortOptions,
       onChange,
@@ -21641,17 +21953,66 @@ var SearchAndFilter = ({
       onSortChange,
       totalResults,
       children: /* @__PURE__ */ jsxs87(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
-        /* @__PURE__ */ jsxs87("div", { css: SearchAndFilterOutterControlWrapper, children: [
-          /* @__PURE__ */ jsx128("div", { css: SearchAndFilterControlsWrapper, children: filterControls }),
+        /* @__PURE__ */ jsxs87("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
+          /* @__PURE__ */ jsx128(
+            "div",
+            {
+              css: SearchAndFilterControlsWrapper(
+                viewSwitchControls ? "auto auto 1fr 0.5fr" : "auto auto 1fr"
+              ),
+              children: !filterControls ? /* @__PURE__ */ jsx128(FilterControls, { hideSearchInput: !onSearchChange, defaultSortByValue }) : filterControls
+            }
+          ),
           viewSwitchControls
         ] }),
         children,
-        /* @__PURE__ */ jsx128(SearchAndFilterResultContainer, {})
+        resultsContainerView
       ] })
     }
   );
 };
 
+// src/components/SearchAndFilter/SearchOnlyFilter.tsx
+import { createContext as createContext7, useState as useState19 } from "react";
+import { useDebounce as useDebounce4 } from "react-use";
+import { jsx as jsx129 } from "@emotion/react/jsx-runtime";
+var SearchOnlyContext = createContext7({
+  searchTerm: "",
+  setSearchTerm: () => {
+  }
+});
+var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
+  const { searchTerm, setSearchTerm } = useSearchAndFilter();
+  const [localeSearchTerm, setLocaleSearchTerm] = useState19("");
+  useDebounce4(
+    () => {
+      setSearchTerm(localeSearchTerm);
+      onSearchChange == null ? void 0 : onSearchChange(localeSearchTerm);
+    },
+    300,
+    [localeSearchTerm]
+  );
+  return /* @__PURE__ */ jsx129(
+    SearchOnlyContext.Provider,
+    {
+      value: {
+        searchTerm,
+        setSearchTerm: setLocaleSearchTerm
+      },
+      children: /* @__PURE__ */ jsx129("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ jsx129(
+        InputKeywordSearch,
+        {
+          placeholder: "Search...",
+          onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+          value: localeSearchTerm,
+          compact: true,
+          rounded: true
+        }
+      ) })
+    }
+  );
+};
+
 // src/components/Skeleton/Skeleton.styles.ts
 import { css as css96, keyframes as keyframes5 } from "@emotion/react";
 var lightFadingOut = keyframes5`
@@ -21664,7 +22025,7 @@ var skeletonStyles = css96`
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx129 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx130 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -21672,7 +22033,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx129(
+}) => /* @__PURE__ */ jsx130(
   "div",
   {
     css: [
@@ -21779,7 +22140,7 @@ var SwitchText = css97`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment23, jsx as jsx130, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx131, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
 var Switch = React26.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
@@ -21788,10 +22149,10 @@ var Switch = React26.forwardRef(
     }
     return /* @__PURE__ */ jsxs88(Fragment23, { children: [
       /* @__PURE__ */ jsxs88("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx130("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx130("span", { css: SwitchInputLabel, children: label })
+        /* @__PURE__ */ jsx131("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx131("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx130("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx131("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -21828,40 +22189,40 @@ var tableCellHead = css98`
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx131 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
 var Table = React27.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx131("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx132("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx131("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx131("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx131("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx131("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx131("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx131("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx132("td", { ref, ...otherProps, children });
   }
 );
 
@@ -21901,7 +22262,7 @@ var tabButtonGroupStyles = css99`
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
 var useCurrentTab = () => {
   const context = useAriakitTabStore();
   if (!context) {
@@ -21939,23 +22300,23 @@ var Tabs = ({
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ jsx132(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ jsx133(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx132(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx133(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx132(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx133(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx132(AriakitTabPanel, { ...props, children });
+  return /* @__PURE__ */ jsx133(AriakitTabPanel, { ...props, children });
 };
 
 // src/components/Toast/Toast.tsx
@@ -22186,9 +22547,9 @@ var toastContainerStyles = css100`
 `;
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx134 } from "@emotion/react/jsx-runtime";
 var ToastContainer = ({ limit = 4 }) => {
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx134(
     ToastifyContainer,
     {
       css: toastContainerStyles,
@@ -22324,6 +22685,7 @@ export {
   RICHTEXT_OPERATORS,
   ResolveIcon,
   RichTextToolbarIcon,
+  SYSTEM_DATE_OPERATORS,
   SYSTEM_FIELD_OPERATORS,
   ScrollableList,
   ScrollableListInputItem,
@@ -22333,6 +22695,8 @@ export {
   SearchAndFilterOptionsContainer2 as SearchAndFilterOptionsContainer,
   SearchAndFilterProvider,
   SearchAndFilterResultContainer,
+  SearchOnlyContext,
+  SearchOnlyFilter,
   SegmentedControl,
   ShortcutContext,
   ShortcutRevealer,
@@ -22362,6 +22726,7 @@ export {
   ToastContainer,
   Tooltip,
   TwoColumnLayout,
+  USER_OPERATORS,
   UniformBadge,
   UniformLogo,
   UniformLogoLarge,