@uniformdev/mesh-sdk-react 19.142.0 → 19.142.1

package/dist/index.js

@@ -33,10 +33,10 @@ var src_exports = {};
 __export(src_exports, {
   $createVariableNode: () => $createVariableNode,
   $isVariableNode: () => $isVariableNode,
-  AddListButton: () => import_design_system51.AddListButton,
-  Button: () => import_design_system51.Button,
+  AddListButton: () => import_design_system53.AddListButton,
+  Button: () => import_design_system53.Button,
   CHECKBOX_OPERATORS: () => CHECKBOX_OPERATORS,
-  Callout: () => import_design_system51.Callout,
+  Callout: () => import_design_system53.Callout,
   ControlledValuePlugin: () => ControlledValuePlugin,
   DATE_OPERATORS: () => DATE_OPERATORS,
   DISCONNECT_VARIABLE_COMMAND: () => DISCONNECT_VARIABLE_COMMAND,
@@ -51,7 +51,7 @@ __export(src_exports, {
   DateRangeEditor: () => DateRangeEditor,
   DefaultSearchRow: () => DefaultSearchRow,
   DefaultSelectedItem: () => DefaultSelectedItem,
-  DrawerContent: () => import_design_system51.DrawerContent,
+  DrawerContent: () => import_design_system53.DrawerContent,
   EDIT_VARIABLE_COMMAND: () => EDIT_VARIABLE_COMMAND,
   EntrySearch: () => EntrySearch,
   FilterButton: () => FilterButton2,
@@ -62,21 +62,21 @@ __export(src_exports, {
   FilterMenu: () => FilterMenu,
   FilterMultiChoiceEditor: () => FilterMultiChoiceEditor,
   FilterSingleChoiceEditor: () => FilterSingleChoiceEditor,
-  Heading: () => import_design_system51.Heading,
+  Heading: () => import_design_system53.Heading,
   INSERT_VARIABLE_COMMAND: () => INSERT_VARIABLE_COMMAND,
   Icons: () => icons_exports,
-  Input: () => import_design_system51.Input,
-  InputComboBox: () => import_design_system51.InputComboBox,
-  InputKeywordSearch: () => import_design_system51.InputKeywordSearch,
-  InputSelect: () => import_design_system51.InputSelect,
-  InputToggle: () => import_design_system51.InputToggle,
+  Input: () => import_design_system53.Input,
+  InputComboBox: () => import_design_system53.InputComboBox,
+  InputKeywordSearch: () => import_design_system53.InputKeywordSearch,
+  InputSelect: () => import_design_system53.InputSelect,
+  InputToggle: () => import_design_system53.InputToggle,
   InputVariables: () => InputVariables,
-  Label: () => import_design_system51.Label,
+  Label: () => import_design_system53.Label,
   LinkButton: () => LinkButton,
-  LoadingIndicator: () => import_design_system51.LoadingIndicator,
-  LoadingOverlay: () => import_design_system51.LoadingOverlay,
-  Menu: () => import_design_system51.Menu,
-  MenuItem: () => import_design_system51.MenuItem,
+  LoadingIndicator: () => import_design_system53.LoadingIndicator,
+  LoadingOverlay: () => import_design_system53.LoadingOverlay,
+  Menu: () => import_design_system53.Menu,
+  MenuItem: () => import_design_system53.MenuItem,
   MeshApp: () => MeshApp,
   NUMBER_OPERATORS: () => NUMBER_OPERATORS,
   NumberEditor: () => NumberEditor,
@@ -94,22 +94,22 @@ __export(src_exports, {
   PUBLISH_STATUS_FIELD_OPERATORS: () => PUBLISH_STATUS_FIELD_OPERATORS,
   ParamTypeDynamicDataProvider: () => ParamTypeDynamicDataProvider,
   ParameterConnectionIndicator: () => ParameterConnectionIndicator,
-  ParameterGroup: () => import_design_system51.ParameterGroup,
-  ParameterImage: () => import_design_system51.ParameterImage,
-  ParameterImageInner: () => import_design_system51.ParameterImageInner,
-  ParameterInput: () => import_design_system51.ParameterInput,
-  ParameterInputInner: () => import_design_system51.ParameterInputInner,
-  ParameterLabel: () => import_design_system51.ParameterLabel,
-  ParameterMenuButton: () => import_design_system51.ParameterMenuButton,
+  ParameterGroup: () => import_design_system53.ParameterGroup,
+  ParameterImage: () => import_design_system53.ParameterImage,
+  ParameterImageInner: () => import_design_system53.ParameterImageInner,
+  ParameterInput: () => import_design_system53.ParameterInput,
+  ParameterInputInner: () => import_design_system53.ParameterInputInner,
+  ParameterLabel: () => import_design_system53.ParameterLabel,
+  ParameterMenuButton: () => import_design_system53.ParameterMenuButton,
   ParameterOrSingleVariable: () => ParameterOrSingleVariable,
-  ParameterSelect: () => import_design_system51.ParameterSelect,
-  ParameterSelectInner: () => import_design_system51.ParameterSelectInner,
-  ParameterShell: () => import_design_system51.ParameterShell,
+  ParameterSelect: () => import_design_system53.ParameterSelect,
+  ParameterSelectInner: () => import_design_system53.ParameterSelectInner,
+  ParameterShell: () => import_design_system53.ParameterShell,
   ParameterShellContext: () => import_design_system14.ParameterShellContext,
-  ParameterTextarea: () => import_design_system51.ParameterTextarea,
-  ParameterTextareaInner: () => import_design_system51.ParameterTextareaInner,
-  ParameterToggle: () => import_design_system51.ParameterToggle,
-  ParameterToggleInner: () => import_design_system51.ParameterToggleInner,
+  ParameterTextarea: () => import_design_system53.ParameterTextarea,
+  ParameterTextareaInner: () => import_design_system53.ParameterTextareaInner,
+  ParameterToggle: () => import_design_system53.ParameterToggle,
+  ParameterToggleInner: () => import_design_system53.ParameterToggleInner,
   ParameterVariables: () => ParameterVariables,
   ProductPreviewList: () => ProductPreviewList,
   ProductQuery: () => ProductQuery,
@@ -131,8 +131,8 @@ __export(src_exports, {
   ResolvableLoadingValue: () => ResolvableLoadingValue,
   SYSTEM_DATE_OPERATORS: () => SYSTEM_DATE_OPERATORS,
   SYSTEM_FIELD_OPERATORS: () => SYSTEM_FIELD_OPERATORS,
-  ScrollableList: () => import_design_system51.ScrollableList,
-  ScrollableListItem: () => import_design_system51.ScrollableListItem,
+  ScrollableList: () => import_design_system53.ScrollableList,
+  ScrollableListItem: () => import_design_system53.ScrollableListItem,
   SearchAndFilter: () => SearchAndFilter,
   SearchAndFilterContext: () => SearchAndFilterContext,
   SearchAndFilterOptionsContainer: () => SearchAndFilterOptionsContainer2,
@@ -141,14 +141,15 @@ __export(src_exports, {
   SearchOnlyContext: () => SearchOnlyContext,
   SearchOnlyFilter: () => SearchOnlyFilter,
   SelectionField: () => SelectionField,
+  SortItems: () => SortItems,
   StatusMultiEditor: () => StatusMultiEditor,
   StatusSingleEditor: () => StatusSingleEditor,
-  Switch: () => import_design_system51.Switch,
+  Switch: () => import_design_system53.Switch,
   TEXTBOX_OPERATORS: () => TEXTBOX_OPERATORS,
   TextEditor: () => TextEditor,
   TextVariableRenderer: () => TextVariableRenderer,
-  Textarea: () => import_design_system51.Textarea,
-  Theme: () => import_design_system51.Theme,
+  Textarea: () => import_design_system53.Textarea,
+  Theme: () => import_design_system53.Theme,
   USER_OPERATORS: () => USER_OPERATORS,
   VariableEditor: () => VariableEditor,
   VariableNode: () => VariableNode,
@@ -4920,7 +4921,7 @@ var import_lexical9 = require("lexical");
 var import_react50 = require("react");
 var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
 function VariablesComposerInput({
-  css: css39,
+  css: css40,
   placeholder,
   ...contentEditableProps
 }) {
@@ -7784,6 +7785,33 @@ var SearchInput = import_react76.css`
   max-height: 40px;
   min-height: unset;
 `;
+var BindableKeywordSearchInputStyles = import_react76.css`
+  position: relative;
+  width: 100%;
+
+  & [data-lexical-editor='true'] {
+    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
+    font-size: var(--fs-sm);
+    border-radius: var(--rounded-full);
+    max-height: 40px;
+    min-height: unset;
+    width: 100%;
+    position: relative;
+    white-space: nowrap;
+  }
+`;
+var ClearSearchButtonContainer = import_react76.css`
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0 var(--spacing-lg) 0 auto;
+`;
+var ClearSearchButtonStyles = import_react76.css`
+  background: none;
+  border: none;
+  padding: 0;
+  pointer-events: all;
+`;
 var FilterButton = import_react76.css`
   align-items: center;
   background: var(--white);
@@ -7951,9 +7979,12 @@ var FilterButton2 = ({
 };
 
 // src/components/SearchAndFilter/FilterControls.tsx
+var import_CgClose5 = require("@react-icons/all-files/cg/CgClose");
 var import_design_system45 = require("@uniformdev/design-system");
+var import_lexical11 = require("lexical");
 var import_react79 = require("react");
 var import_react_use6 = require("react-use");
+var import_uuid3 = require("uuid");
 
 // src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
 var import_design_system44 = require("@uniformdev/design-system");
@@ -8375,6 +8406,52 @@ var filterMapper = {
   statusSingleChoice: StatusSingleEditor,
   empty: null
 };
+function withInputVariables(WrappedComponent) {
+  const WithInputVariables = (props) => {
+    if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
+      return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(WrappedComponent, { ...props });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      InputVariables,
+      {
+        disableInlineMenu: true,
+        showMenuPosition: "inline-right",
+        onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
+        value: props.value,
+        disabled: props.disabled,
+        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(WrappedComponent, { ...props })
+      }
+    );
+  };
+  return WithInputVariables;
+}
+function withInputVariablesForMultiValue(WrappedComponent) {
+  const WithInputVariables = (props) => {
+    var _a;
+    if (!props.bindable || props.disabled || props.readOnly) {
+      return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(WrappedComponent, { ...props });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      InputVariables,
+      {
+        disableInlineMenu: true,
+        showMenuPosition: "inline-right",
+        onChange: (newValue) => props.onChange(newValue ? [newValue] : []),
+        value: (_a = props.value) == null ? void 0 : _a[0],
+        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(WrappedComponent, { ...props })
+      }
+    );
+  };
+  return WithInputVariables;
+}
+var bindableFiltersMapper = {
+  ...filterMapper,
+  multiChoice: withInputVariablesForMultiValue(FilterMultiChoiceEditor),
+  singleChoice: withInputVariables(FilterSingleChoiceEditor),
+  date: withInputVariables(DateEditor),
+  text: withInputVariables(TextEditor),
+  number: withInputVariables(NumberEditor)
+};
 var ErrorContainer = ({ errorMessage }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     "div",
@@ -8508,17 +8585,21 @@ var FilterControls = ({
   hideSearchInput
 }) => {
   const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm } = useSearchAndFilter();
-  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react79.useState)("");
+  const editorRef = (0, import_react79.useRef)(null);
+  const hasVariableInSearchTerm = hasReferencedVariables(searchTerm);
+  const [idToResetInputVariables, setIdToResetInputVariables] = (0, import_react79.useState)("data-resource-search-term-input");
+  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react79.useState)(searchTerm);
   (0, import_react_use6.useDebounce)(
     () => {
       setSearchTerm(localeSearchTerm);
     },
     300,
-    [localeSearchTerm, searchTerm]
+    [localeSearchTerm]
   );
   (0, import_react79.useEffect)(() => {
     if (searchTerm === "") {
       setLocaleSearchTerm("");
+      setIdToResetInputVariables(`data-resource-search-term-input-${(0, import_uuid3.v4)()}`);
     }
   }, [searchTerm]);
   return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
@@ -8535,17 +8616,47 @@ var FilterControls = ({
         dataTestId: "filters-button"
       }
     ),
-    hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-      import_design_system45.InputKeywordSearch,
-      {
-        placeholder: "Search...",
-        onSearchTextChanged: (e) => setLocaleSearchTerm(e),
-        value: localeSearchTerm,
-        compact: true,
-        rounded: true,
-        css: SearchInput
-      }
-    ),
+    hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { css: BindableKeywordSearchInputStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        InputVariables,
+        {
+          label: "",
+          id: idToResetInputVariables,
+          showMenuPosition: "inline-right",
+          editorRef,
+          value: localeSearchTerm,
+          onChange: (value) => setLocaleSearchTerm(value != null ? value : ""),
+          inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+            import_design_system45.InputKeywordSearch,
+            {
+              placeholder: "Search...",
+              onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+              value: localeSearchTerm,
+              compact: true,
+              rounded: true,
+              css: SearchInput
+            }
+          )
+        }
+      ),
+      hasVariableInSearchTerm ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { css: ClearSearchButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        "button",
+        {
+          css: ClearSearchButtonStyles,
+          onClick: () => {
+            setLocaleSearchTerm("");
+            if (editorRef.current) {
+              if (editorRef.current.getRootElement() !== document.activeElement) {
+                editorRef.current.dispatchCommand(import_lexical11.CLEAR_EDITOR_COMMAND, void 0);
+              }
+            }
+          },
+          type: "button",
+          "data-testid": "keyword-search-clear-button",
+          children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_design_system45.Icon, { icon: import_CgClose5.CgClose, iconColor: "red", size: "1rem" })
+        }
+      ) }) : null
+    ] }),
     children
   ] });
 };
@@ -8975,53 +9086,366 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
   );
 };
 
-// src/components/SearchAndFilter2/filtersMapper.tsx
-var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
-function withInputVariables(WrappedComponent) {
-  const WithInputVariables = (props) => {
-    if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(WrappedComponent, { ...props });
+// src/components/SearchAndFilter/SortItems.tsx
+var import_design_system52 = require("@uniformdev/design-system");
+
+// src/components/SearchAndFilter/styles/SortItems.styles.ts
+var import_react83 = require("@emotion/react");
+var import_design_system51 = require("@uniformdev/design-system");
+var ConditionalFilterRow2 = import_react83.css`
+  display: grid;
+  grid-template-columns: 35px 1fr;
+  gap: var(--spacing-sm);
+  margin-left: var(--spacing-base);
+
+  ${(0, import_design_system51.cq)("380px")} {
+    align-items: center;
+
+    &:after {
+      content: '';
+      display: block;
+      height: 1px;
+      background: var(--gray-300);
+      width: calc(100% - var(--spacing-base));
+      margin-left: var(--spacing-base);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-      InputVariables,
-      {
-        disableInlineMenu: true,
-        showMenuPosition: "inline-right",
-        onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
-        value: props.value,
-        disabled: props.disabled,
-        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(WrappedComponent, { ...props })
-      }
-    );
-  };
-  return WithInputVariables;
-}
-function withInputVariablesForMultiValue(WrappedComponent) {
-  const WithInputVariables = (props) => {
-    var _a;
-    if (!props.bindable || props.disabled || props.readOnly) {
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(WrappedComponent, { ...props });
+    &:last-of-type:after {
+      display: none;
+    }
+  }
+
+  &:nth-of-type(2) {
+    margin-left: 0;
+    grid-template-columns: 50px 1fr;
+  }
+
+  ${(0, import_design_system51.cq)("580px")} {
+    &:after {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${import_design_system51.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
+  }
+`;
+var ConditionalInputRow2 = import_react83.css`
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+
+  ${(0, import_design_system51.cq)("380px")} {
+    & > div:nth-child(-n + 2) {
+      width: calc(50% - var(--spacing-sm));
+    }
+
+    & > div:nth-child(n + 3) {
+      width: calc(100% - 48px);
+    }
+  }
+  ${(0, import_design_system51.cq)("580px")} {
+    display: grid;
+    grid-template-columns: 200px 160px 1fr 32px;
+
+    & > div:nth-child(n) {
+      width: auto;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  }
+`;
+var SearchInput2 = import_react83.css`
+  max-height: 40px;
+  min-height: unset;
+`;
+var FilterButton3 = import_react83.css`
+  align-items: center;
+  background: var(--white);
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-full);
+  color: var(--typography-base);
+  display: flex;
+  font-size: var(--fs-sm);
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-base);
+  max-height: 40px;
+  transition: color var(--duration-fast) var(--timing-ease-out),
+    background-color var(--duration-fast) var(--timing-ease-out),
+    border-color var(--duration-fast) var(--timing-ease-out),
+    box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  svg {
+    color: var(--gray-300);
+    transition: color var(--duration-fast) var(--timing-ease-out);
+  }
+
+  &:hover,
+  :where([aria-expanded='true']) {
+    outline: none;
+    background: var(--gray-200);
+    border-color: var(--gray-300);
+
+    svg {
+      color: var(--typography-base);
+    }
+  }
+
+  &:disabled {
+    opacity: var(--opacity-50);
+  }
+`;
+var FilterButtonText2 = import_react83.css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 14ch;
+`;
+var FilterButtonSelected2 = import_react83.css`
+  background: var(--gray-100);
+  border-color: var(--gray-300);
+
+  svg {
+    color: var(--accent-dark);
+  }
+`;
+var FilterButtonWithOptions2 = import_react83.css`
+  :where([aria-expanded='true']) {
+    background: var(--purple-rain-100);
+    border-color: var(--accent-light);
+    color: var(--typography-base);
+    box-shadow: var(--elevation-100);
+
+    svg {
+      color: var(--accent-dark);
+    }
+  }
+`;
+var SearchIcon2 = import_react83.css`
+  color: var(--icon-color);
+  position: absolute;
+  inset: 0 var(--spacing-base) 0 auto;
+  margin: auto;
+  transition: color var(--duration-fast) var(--timing-ease-out);
+`;
+var AddConditionalBtn2 = import_react83.css`
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--primary-action-default);
+  display: flex;
+  gap: var(--spacing-sm);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  padding: 0;
+
+  &:hover,
+  &:focus {
+    color: var(--primary-action-hover);
+  }
+
+  &:disabled {
+    color: var(--gray-400);
+  }
+`;
+var Title2 = import_react83.css`
+  color: var(--typography-light);
+
+  &:focus {
+    outline: none;
+  }
+`;
+var ResetConditionsBtn2 = import_react83.css`
+  background: transparent;
+  border: none;
+  color: var(--action-destructive-default);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  padding: 0;
+
+  &:hover,
+  &:focus {
+    color: var(--action-destructive-hover);
+  }
+`;
+var IconBtn2 = import_react83.css`
+  background: transparent;
+  border: none;
+  padding: var(--spacing-sm);
+`;
+var SearchAndFilterOptionsContainer3 = import_react83.css`
+  background: var(--gray-50);
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-base);
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md) 0 var(--spacing-base);
+  will-change: height;
+  position: relative;
+  z-index: 1;
+`;
+var SearchAndFilterOptionsInnerContainer2 = import_react83.css`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding-inline: var(--spacing-md);
+`;
+var SearchAndFilterButtonGroup2 = import_react83.css`
+  margin-top: var(--spacing-xs);
+  margin-left: calc(56px + var(--spacing-md));
+`;
+var SortFilterWrapper = (hiddenLocaleInput) => import_react83.css`
+  align-items: center;
+  border-top: 1px solid var(--gray-300);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-base);
+  padding: var(--spacing-base) var(--spacing-md) 0;
+  position: relative;
+  z-index: 0;
+
+  ${(0, import_design_system51.cq)("420px")} {
+    display: grid;
+    grid-template-columns: ${hiddenLocaleInput ? "1fr" : "1fr minmax(140px, 0.25fr)"};
+  }
+`;
+var SortFilterInputRow = import_react83.css`
+  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--spacing-base);
+`;
+var InputVariableWrapper = import_react83.css`
+  flex-grow: 1;
+
+  // we need to override label styles nested within the input variable
+  // as these are slightly different from the default label styles
+  label > span {
+    color: var(--typography-light);
+  }
+`;
+
+// src/components/SearchAndFilter/SortItems.tsx
+var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
+var SortItems = ({
+  sortByLabel = "Sort by",
+  localeLabel = "Show locale",
+  sortOptions,
+  sortByValue,
+  onSortChange,
+  localeValue,
+  localeOptions,
+  onLocaleChange,
+  disableSortBinding
+}) => {
+  var _a, _b;
+  const hideLocaleOptions = !localeOptions || !onLocaleChange;
+  const values = sortByValue == null ? void 0 : sortByValue.split("_");
+  const sortDirection = values == null ? void 0 : values.pop();
+  const sortField = values == null ? void 0 : values.join("_");
+  const currentSelectedOption = (_b = (_a = sortOptions.find((item) => {
+    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);
+  const localeLabelValue = sortOptions.length > 1 ? localeLabel : `${localeLabel}s`;
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_design_system52.VerticalRhythm, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { css: Title2, children: sortByLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { css: SortFilterInputRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          InputVariables,
+          {
+            disableInlineMenu: disableSortBinding,
+            showMenuPosition: disableSortBinding ? void 0 : "inline-right",
+            value: sortField,
+            valueToResetTo: "created_at",
+            onChange: (e) => onSortChange(`${e}_${sortDirection}`),
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+              import_design_system52.InputComboBox,
+              {
+                id: "sort-by-field",
+                "aria-label": "Sort by",
+                options: sortOptions,
+                onChange: (e) => {
+                  const fieldName = e == null ? void 0 : e.value;
+                  onSortChange(`${fieldName}_${sortDirection}`);
+                },
+                styles: {
+                  menu(base) {
+                    return {
+                      ...base,
+                      minWidth: "max-content"
+                    };
+                  }
+                },
+                value: currentSelectedOption
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          InputVariables,
+          {
+            disableInlineMenu: disableSortBinding,
+            value: sortDirection,
+            valueToResetTo: "DESC",
+            showMenuPosition: disableSortBinding ? void 0 : "inline-right",
+            onChange: (e) => onSortChange(`${sortField}_${e}`),
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+              import_design_system52.SegmentedControl,
+              {
+                noCheckmark: true,
+                name: "sortBy",
+                hideOptionText: true,
+                iconSize: "1rem",
+                size: "xl",
+                options: [
+                  {
+                    label: "Ascending",
+                    icon: "arrow-up",
+                    value: `ASC`,
+                    tooltip: "Ascending (e.g. A-Z, oldest to newest)",
+                    "data-testid": "sort-ascending"
+                  },
+                  {
+                    label: "Descending",
+                    icon: "arrow-down",
+                    value: `DESC`,
+                    tooltip: "Descending (e.g. Z-A, newest to oldest)",
+                    "data-testid": "sort-descending"
+                  }
+                ],
+                onChange: (e) => onSortChange(`${sortField}_${e}`),
+                value: sortDirection
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    hideLocaleOptions ? null : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_design_system52.VerticalRhythm, { gap: "xs", css: InputVariableWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       InputVariables,
       {
-        disableInlineMenu: true,
+        label: localeLabelValue,
+        value: localeValue,
         showMenuPosition: "inline-right",
-        onChange: (newValue) => props.onChange(newValue ? [newValue] : []),
-        value: (_a = props.value) == null ? void 0 : _a[0],
-        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(WrappedComponent, { ...props })
+        onChange: (e) => onLocaleChange(e != null ? e : ""),
+        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          import_design_system52.InputSelect,
+          {
+            name: "localeReturned",
+            "aria-label": localeLabelValue,
+            label: localeLabelValue,
+            showLabel: false,
+            "data-testid": "context-locale",
+            onChange: (e) => {
+              var _a2;
+              return onLocaleChange((_a2 = e.currentTarget.value) != null ? _a2 : "");
+            },
+            options: localeOptions,
+            value: localeValue
+          }
+        )
       }
-    );
-  };
-  return WithInputVariables;
-}
-var bindableFiltersMapper = {
-  ...filterMapper,
-  multiChoice: withInputVariablesForMultiValue(FilterMultiChoiceEditor),
-  singleChoice: withInputVariables(FilterSingleChoiceEditor),
-  date: withInputVariables(DateEditor),
-  text: withInputVariables(TextEditor),
-  number: withInputVariables(NumberEditor)
+    ) })
+  ] });
 };
 
 // src/utils/createLocationValidator.ts
@@ -9034,19 +9458,19 @@ function createLocationValidator(setValue, validate) {
 
 // src/utils/useContentDataResourceLocaleInfo.ts
 var import_canvas10 = require("@uniformdev/canvas");
-var import_react83 = require("react");
+var import_react84 = require("react");
 function useContentDataResourceLocaleInfo({
   locale,
   setLocale,
   dynamicInputs
 }) {
   var _a;
-  const setLocaleRef = (0, import_react83.useRef)(setLocale);
+  const setLocaleRef = (0, import_react84.useRef)(setLocale);
   setLocaleRef.current = setLocale;
   const { flatVariables } = useVariables();
   const effectiveLocale = locale != null ? locale : dynamicInputs[import_canvas10.LOCALE_DYNAMIC_INPUT_NAME] ? (0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME) : "";
   const boundLocale = (_a = (0, import_canvas10.bindVariables)({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
-  (0, import_react83.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
       setLocaleRef.current((0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME));
     }
@@ -9055,7 +9479,7 @@ function useContentDataResourceLocaleInfo({
 }
 
 // src/index.ts
-var import_design_system51 = require("@uniformdev/design-system");
+var import_design_system53 = require("@uniformdev/design-system");
 __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -9169,6 +9593,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   SearchOnlyContext,
   SearchOnlyFilter,
   SelectionField,
+  SortItems,
   StatusMultiEditor,
   StatusSingleEditor,
   Switch,