@uniformdev/mesh-sdk-react 19.186.2-alpha.14 → 19.186.4-alpha.29

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { SVGProps, ReactNode, MutableRefObject, ComponentType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes } from 'react';
+import React__default, { SVGProps, ReactNode, MutableRefObject, ComponentType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 import { TDate } from 'timeago.js';
 import * as _emotion_react from '@emotion/react';
 import { Interpolation, Theme, SerializedStyles } from '@emotion/react';
@@ -1997,12 +1997,14 @@ type FilterButtonProps = {
     hasSelectedValue?: boolean;
     /** sets the data-testid attribute on the button */
     dataTestId?: string;
-} & HTMLAttributes<HTMLButtonElement>;
+    /** sets whether to show the dropdown icon, we do not recommend using this option when filterCount is enabled */
+    showDropdownIcon?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
 /**
  * @deprecated beta - A filter button component used to display filter menu options
  * @example <FilterButton text="Filters" filterCount={3} />
  */
-declare const FilterButton: ({ text, icon, filterCount, hasSelectedValue, dataTestId, ...props }: FilterButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const FilterButton: ({ text, icon, filterCount, hasSelectedValue, dataTestId, showDropdownIcon, ...props }: FilterButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /**
  * @deprecated beta - Default filter controls for search and filter

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { SVGProps, ReactNode, MutableRefObject, ComponentType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes } from 'react';
+import React__default, { SVGProps, ReactNode, MutableRefObject, ComponentType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 import { TDate } from 'timeago.js';
 import * as _emotion_react from '@emotion/react';
 import { Interpolation, Theme, SerializedStyles } from '@emotion/react';
@@ -1997,12 +1997,14 @@ type FilterButtonProps = {
     hasSelectedValue?: boolean;
     /** sets the data-testid attribute on the button */
     dataTestId?: string;
-} & HTMLAttributes<HTMLButtonElement>;
+    /** sets whether to show the dropdown icon, we do not recommend using this option when filterCount is enabled */
+    showDropdownIcon?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
 /**
  * @deprecated beta - A filter button component used to display filter menu options
  * @example <FilterButton text="Filters" filterCount={3} />
  */
-declare const FilterButton: ({ text, icon, filterCount, hasSelectedValue, dataTestId, ...props }: FilterButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const FilterButton: ({ text, icon, filterCount, hasSelectedValue, dataTestId, showDropdownIcon, ...props }: FilterButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /**
  * @deprecated beta - Default filter controls for search and filter

package/dist/index.esm.js

@@ -2813,7 +2813,9 @@ function serializeVariablesEditorState(editorState) {
 }
 function serializeVariablesEditorSerializedState(serializedEditorState) {
   const buf = [];
-  serializeRecursive(serializedEditorState, buf);
+  if (serializedEditorState) {
+    serializeRecursive(serializedEditorState, buf);
+  }
   const result = buf.join("");
   return result.length > 0 ? result : void 0;
 }
@@ -2829,6 +2831,9 @@ function serializeRecursive(node, buffer) {
   }
   if ("children" in node && node.children) {
     for (const child of node.children) {
+      if (!child) {
+        continue;
+      }
       serializeRecursive(child, buffer);
     }
   }
@@ -5266,6 +5271,7 @@ function hasReferencedVariables2(value) {
 
 // src/components/Variables/VariablesList.tsx
 import { css as css27 } from "@emotion/react";
+import { CgTrash } from "@react-icons/all-files/cg/CgTrash";
 import {
   AddListButton,
   button,
@@ -5400,7 +5406,7 @@ function VariablesList() {
                         ],
                         "aria-controls": text,
                         onClick: () => dispatch({ type: "remove", variable: name }),
-                        children: /* @__PURE__ */ jsx44(Icon5, { icon: "trash", iconColor: "red" })
+                        children: /* @__PURE__ */ jsx44(Icon5, { icon: CgTrash, iconColor: "red" })
                       }
                     ) })
                   ]
@@ -6323,7 +6329,7 @@ var DataRefreshButton = ({
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
 import { css as css33 } from "@emotion/react";
 import { bindVariables } from "@uniformdev/canvas";
-import { Callout as Callout5, Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
+import { Callout as Callout5, Container, ScrollableList, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
@@ -6642,7 +6648,7 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ jsx61(IconsProvider, { children: /* @__PURE__ */ jsxs35(VerticalRhythm3, { children: [
+  return /* @__PURE__ */ jsxs35(VerticalRhythm3, { children: [
     /* @__PURE__ */ jsx61(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx61(
       InputVariables,
       {
@@ -6659,7 +6665,7 @@ var ObjectSearchContainer = ({
       }
     ) : body }),
     children
-  ] }) });
+  ] });
 };
 var DefaultResultList = () => {
   var _a;
@@ -8323,7 +8329,7 @@ var TextMultiChoiceEditor = ({
 };
 
 // src/components/SearchAndFilter/FilterButton.tsx
-import { Counter as Counter2, Icon as Icon6 } from "@uniformdev/design-system";
+import { Counter as Counter2, customIcons, Icon as Icon6 } from "@uniformdev/design-system";
 
 // src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
 import { css as css38 } from "@emotion/react";
@@ -8574,15 +8580,26 @@ var SearchAndFilterButtonGroup = css38`
   margin-top: var(--spacing-xs);
   margin-left: calc(56px + var(--spacing-md));
 `;
+var SearchAndFilterAdditionalContainer = css38`
+  align-items: center;
+  border-top: 1px solid var(--gray-300);
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--spacing-base);
+  padding: var(--spacing-base) var(--spacing-md) 0;
+  position: relative;
+  z-index: 0;
+`;
 
 // src/components/SearchAndFilter/FilterButton.tsx
 import { jsx as jsx81, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
 var FilterButton2 = ({
   text = "Filters",
-  icon = "filter-add",
+  icon = customIcons["filter-add"],
   filterCount,
   hasSelectedValue,
   dataTestId,
+  showDropdownIcon,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs44(
@@ -8599,7 +8616,8 @@ var FilterButton2 = ({
       children: [
         /* @__PURE__ */ jsx81(Icon6, { icon, iconColor: "currentColor", size: "1rem" }),
         /* @__PURE__ */ jsx81("span", { css: FilterButtonText, children: text }),
-        filterCount ? /* @__PURE__ */ jsx81(Counter2, { count: filterCount, bgColor: "var(--white)" }) : null
+        filterCount ? /* @__PURE__ */ jsx81(Counter2, { count: filterCount, bgColor: "var(--white)" }) : null,
+        showDropdownIcon ? /* @__PURE__ */ jsx81(Icon6, { icon: "chevron-down", iconColor: "currentColor", size: "1rem" }) : null
       ]
     }
   );
@@ -8906,6 +8924,7 @@ var FilterControls = ({
 };
 
 // src/components/SearchAndFilter/FilterItem.tsx
+import { CgTrash as CgTrash2 } from "@react-icons/all-files/cg/CgTrash";
 import { Icon as Icon8, InputComboBox as InputComboBox5 } from "@uniformdev/design-system";
 import { useMemo as useMemo23 } from "react";
 
@@ -9051,7 +9070,7 @@ var FilterItem = ({
           css: IconBtn,
           "data-testid": "delete-filter",
           disabled: filters.length === 1,
-          children: /* @__PURE__ */ jsx85(Icon8, { icon: "trash", iconColor: filters.length === 1 ? "gray" : "red", size: "1rem" })
+          children: /* @__PURE__ */ jsx85(Icon8, { icon: CgTrash2, iconColor: filters.length === 1 ? "gray" : "red", size: "1rem" })
         }
       )
     ] })
@@ -9059,6 +9078,7 @@ var FilterItem = ({
 };
 
 // src/components/SearchAndFilter/FilterItems.tsx
+import { CgMathPlus } from "@react-icons/all-files/cg/CgMathPlus";
 import { Icon as Icon9 } from "@uniformdev/design-system";
 
 // src/components/SearchAndFilter/FilterMenu.tsx
@@ -9082,7 +9102,7 @@ var SearchAndFilterOptionsContainer2 = ({
         children: buttonRow
       }
     ) : null,
-    additionalFiltersContainer ? /* @__PURE__ */ jsx86("div", { children: additionalFiltersContainer }) : null
+    additionalFiltersContainer ? /* @__PURE__ */ jsx86("div", { css: SearchAndFilterAdditionalContainer, children: additionalFiltersContainer }) : null
   ] });
 };
 var FilterMenu = ({
@@ -9271,7 +9291,7 @@ var FilterItems = ({
           onClick: handleAddFilter,
           "data-testid": "add-filter",
           children: [
-            /* @__PURE__ */ jsx87(Icon9, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+            /* @__PURE__ */ jsx87(Icon9, { icon: CgMathPlus, iconColor: "currentColor", size: "1rem" }),
             addButtonText
           ]
         }
@@ -9666,13 +9686,9 @@ var SearchAndFilterButtonGroup2 = css39`
 `;
 var SortFilterWrapper = (hiddenLocaleInput) => css39`
   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;
+  flex-grow: 1;
 
   ${cq2("420px")} {
     display: grid;

package/dist/index.js

@@ -3055,7 +3055,9 @@ function serializeVariablesEditorState(editorState) {
 }
 function serializeVariablesEditorSerializedState(serializedEditorState) {
   const buf = [];
-  serializeRecursive(serializedEditorState, buf);
+  if (serializedEditorState) {
+    serializeRecursive(serializedEditorState, buf);
+  }
   const result = buf.join("");
   return result.length > 0 ? result : void 0;
 }
@@ -3071,6 +3073,9 @@ function serializeRecursive(node, buffer) {
   }
   if ("children" in node && node.children) {
     for (const child of node.children) {
+      if (!child) {
+        continue;
+      }
       serializeRecursive(child, buffer);
     }
   }
@@ -5461,6 +5466,7 @@ function hasReferencedVariables2(value) {
 
 // src/components/Variables/VariablesList.tsx
 var import_react58 = require("@emotion/react");
+var import_CgTrash = require("@react-icons/all-files/cg/CgTrash");
 var import_design_system25 = require("@uniformdev/design-system");
 var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 
@@ -5585,7 +5591,7 @@ function VariablesList() {
                         ],
                         "aria-controls": text,
                         onClick: () => dispatch({ type: "remove", variable: name }),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_design_system25.Icon, { icon: "trash", iconColor: "red" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_design_system25.Icon, { icon: import_CgTrash.CgTrash, iconColor: "red" })
                       }
                     ) })
                   ]
@@ -6800,7 +6806,7 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system35.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_design_system35.VerticalRhythm, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_design_system35.VerticalRhythm, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system35.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       InputVariables,
       {
@@ -6817,7 +6823,7 @@ var ObjectSearchContainer = ({
       }
     ) : body }),
     children
-  ] }) });
+  ] });
 };
 var DefaultResultList = () => {
   var _a;
@@ -8714,15 +8720,26 @@ var SearchAndFilterButtonGroup = import_react86.css`
   margin-top: var(--spacing-xs);
   margin-left: calc(56px + var(--spacing-md));
 `;
+var SearchAndFilterAdditionalContainer = import_react86.css`
+  align-items: center;
+  border-top: 1px solid var(--gray-300);
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--spacing-base);
+  padding: var(--spacing-base) var(--spacing-md) 0;
+  position: relative;
+  z-index: 0;
+`;
 
 // src/components/SearchAndFilter/FilterButton.tsx
 var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
 var FilterButton2 = ({
   text = "Filters",
-  icon = "filter-add",
+  icon = import_design_system54.customIcons["filter-add"],
   filterCount,
   hasSelectedValue,
   dataTestId,
+  showDropdownIcon,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
@@ -8739,7 +8756,8 @@ var FilterButton2 = ({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_design_system54.Icon, { icon, iconColor: "currentColor", size: "1rem" }),
         /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { css: FilterButtonText, children: text }),
-        filterCount ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_design_system54.Counter, { count: filterCount, bgColor: "var(--white)" }) : null
+        filterCount ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_design_system54.Counter, { count: filterCount, bgColor: "var(--white)" }) : null,
+        showDropdownIcon ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_design_system54.Icon, { icon: "chevron-down", iconColor: "currentColor", size: "1rem" }) : null
       ]
     }
   );
@@ -9038,6 +9056,7 @@ var FilterControls = ({
 };
 
 // src/components/SearchAndFilter/FilterItem.tsx
+var import_CgTrash2 = require("@react-icons/all-files/cg/CgTrash");
 var import_design_system57 = require("@uniformdev/design-system");
 var import_react89 = require("react");
 
@@ -9183,7 +9202,7 @@ var FilterItem = ({
           css: IconBtn,
           "data-testid": "delete-filter",
           disabled: filters.length === 1,
-          children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_design_system57.Icon, { icon: "trash", iconColor: filters.length === 1 ? "gray" : "red", size: "1rem" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_design_system57.Icon, { icon: import_CgTrash2.CgTrash, iconColor: filters.length === 1 ? "gray" : "red", size: "1rem" })
         }
       )
     ] })
@@ -9191,6 +9210,7 @@ var FilterItem = ({
 };
 
 // src/components/SearchAndFilter/FilterItems.tsx
+var import_CgMathPlus = require("@react-icons/all-files/cg/CgMathPlus");
 var import_design_system59 = require("@uniformdev/design-system");
 
 // src/components/SearchAndFilter/FilterMenu.tsx
@@ -9214,7 +9234,7 @@ var SearchAndFilterOptionsContainer2 = ({
         children: buttonRow
       }
     ) : null,
-    additionalFiltersContainer ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { children: additionalFiltersContainer }) : null
+    additionalFiltersContainer ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { css: SearchAndFilterAdditionalContainer, children: additionalFiltersContainer }) : null
   ] });
 };
 var FilterMenu = ({
@@ -9403,7 +9423,7 @@ var FilterItems = ({
           onClick: handleAddFilter,
           "data-testid": "add-filter",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_design_system59.Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_design_system59.Icon, { icon: import_CgMathPlus.CgMathPlus, iconColor: "currentColor", size: "1rem" }),
             addButtonText
           ]
         }
@@ -9798,13 +9818,9 @@ var SearchAndFilterButtonGroup2 = import_react92.css`
 `;
 var SortFilterWrapper = (hiddenLocaleInput) => import_react92.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;
+  flex-grow: 1;
 
   ${(0, import_design_system63.cq)("420px")} {
     display: grid;

package/dist/index.mjs

@@ -2813,7 +2813,9 @@ function serializeVariablesEditorState(editorState) {
 }
 function serializeVariablesEditorSerializedState(serializedEditorState) {
   const buf = [];
-  serializeRecursive(serializedEditorState, buf);
+  if (serializedEditorState) {
+    serializeRecursive(serializedEditorState, buf);
+  }
   const result = buf.join("");
   return result.length > 0 ? result : void 0;
 }
@@ -2829,6 +2831,9 @@ function serializeRecursive(node, buffer) {
   }
   if ("children" in node && node.children) {
     for (const child of node.children) {
+      if (!child) {
+        continue;
+      }
       serializeRecursive(child, buffer);
     }
   }
@@ -5266,6 +5271,7 @@ function hasReferencedVariables2(value) {
 
 // src/components/Variables/VariablesList.tsx
 import { css as css27 } from "@emotion/react";
+import { CgTrash } from "@react-icons/all-files/cg/CgTrash";
 import {
   AddListButton,
   button,
@@ -5400,7 +5406,7 @@ function VariablesList() {
                         ],
                         "aria-controls": text,
                         onClick: () => dispatch({ type: "remove", variable: name }),
-                        children: /* @__PURE__ */ jsx44(Icon5, { icon: "trash", iconColor: "red" })
+                        children: /* @__PURE__ */ jsx44(Icon5, { icon: CgTrash, iconColor: "red" })
                       }
                     ) })
                   ]
@@ -6323,7 +6329,7 @@ var DataRefreshButton = ({
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
 import { css as css33 } from "@emotion/react";
 import { bindVariables } from "@uniformdev/canvas";
-import { Callout as Callout5, Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
+import { Callout as Callout5, Container, ScrollableList, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
@@ -6642,7 +6648,7 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ jsx61(IconsProvider, { children: /* @__PURE__ */ jsxs35(VerticalRhythm3, { children: [
+  return /* @__PURE__ */ jsxs35(VerticalRhythm3, { children: [
     /* @__PURE__ */ jsx61(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx61(
       InputVariables,
       {
@@ -6659,7 +6665,7 @@ var ObjectSearchContainer = ({
       }
     ) : body }),
     children
-  ] }) });
+  ] });
 };
 var DefaultResultList = () => {
   var _a;
@@ -8323,7 +8329,7 @@ var TextMultiChoiceEditor = ({
 };
 
 // src/components/SearchAndFilter/FilterButton.tsx
-import { Counter as Counter2, Icon as Icon6 } from "@uniformdev/design-system";
+import { Counter as Counter2, customIcons, Icon as Icon6 } from "@uniformdev/design-system";
 
 // src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
 import { css as css38 } from "@emotion/react";
@@ -8574,15 +8580,26 @@ var SearchAndFilterButtonGroup = css38`
   margin-top: var(--spacing-xs);
   margin-left: calc(56px + var(--spacing-md));
 `;
+var SearchAndFilterAdditionalContainer = css38`
+  align-items: center;
+  border-top: 1px solid var(--gray-300);
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--spacing-base);
+  padding: var(--spacing-base) var(--spacing-md) 0;
+  position: relative;
+  z-index: 0;
+`;
 
 // src/components/SearchAndFilter/FilterButton.tsx
 import { jsx as jsx81, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
 var FilterButton2 = ({
   text = "Filters",
-  icon = "filter-add",
+  icon = customIcons["filter-add"],
   filterCount,
   hasSelectedValue,
   dataTestId,
+  showDropdownIcon,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs44(
@@ -8599,7 +8616,8 @@ var FilterButton2 = ({
       children: [
         /* @__PURE__ */ jsx81(Icon6, { icon, iconColor: "currentColor", size: "1rem" }),
         /* @__PURE__ */ jsx81("span", { css: FilterButtonText, children: text }),
-        filterCount ? /* @__PURE__ */ jsx81(Counter2, { count: filterCount, bgColor: "var(--white)" }) : null
+        filterCount ? /* @__PURE__ */ jsx81(Counter2, { count: filterCount, bgColor: "var(--white)" }) : null,
+        showDropdownIcon ? /* @__PURE__ */ jsx81(Icon6, { icon: "chevron-down", iconColor: "currentColor", size: "1rem" }) : null
       ]
     }
   );
@@ -8906,6 +8924,7 @@ var FilterControls = ({
 };
 
 // src/components/SearchAndFilter/FilterItem.tsx
+import { CgTrash as CgTrash2 } from "@react-icons/all-files/cg/CgTrash";
 import { Icon as Icon8, InputComboBox as InputComboBox5 } from "@uniformdev/design-system";
 import { useMemo as useMemo23 } from "react";
 
@@ -9051,7 +9070,7 @@ var FilterItem = ({
           css: IconBtn,
           "data-testid": "delete-filter",
           disabled: filters.length === 1,
-          children: /* @__PURE__ */ jsx85(Icon8, { icon: "trash", iconColor: filters.length === 1 ? "gray" : "red", size: "1rem" })
+          children: /* @__PURE__ */ jsx85(Icon8, { icon: CgTrash2, iconColor: filters.length === 1 ? "gray" : "red", size: "1rem" })
         }
       )
     ] })
@@ -9059,6 +9078,7 @@ var FilterItem = ({
 };
 
 // src/components/SearchAndFilter/FilterItems.tsx
+import { CgMathPlus } from "@react-icons/all-files/cg/CgMathPlus";
 import { Icon as Icon9 } from "@uniformdev/design-system";
 
 // src/components/SearchAndFilter/FilterMenu.tsx
@@ -9082,7 +9102,7 @@ var SearchAndFilterOptionsContainer2 = ({
         children: buttonRow
       }
     ) : null,
-    additionalFiltersContainer ? /* @__PURE__ */ jsx86("div", { children: additionalFiltersContainer }) : null
+    additionalFiltersContainer ? /* @__PURE__ */ jsx86("div", { css: SearchAndFilterAdditionalContainer, children: additionalFiltersContainer }) : null
   ] });
 };
 var FilterMenu = ({
@@ -9271,7 +9291,7 @@ var FilterItems = ({
           onClick: handleAddFilter,
           "data-testid": "add-filter",
           children: [
-            /* @__PURE__ */ jsx87(Icon9, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+            /* @__PURE__ */ jsx87(Icon9, { icon: CgMathPlus, iconColor: "currentColor", size: "1rem" }),
             addButtonText
           ]
         }
@@ -9666,13 +9686,9 @@ var SearchAndFilterButtonGroup2 = css39`
 `;
 var SortFilterWrapper = (hiddenLocaleInput) => css39`
   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;
+  flex-grow: 1;
 
   ${cq2("420px")} {
     display: grid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "19.186.2-alpha.14+2868049c36",
+  "version": "19.186.4-alpha.29+03de47b2a8",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -50,10 +50,10 @@
     "@lexical/selection": "0.17.1",
     "@lexical/utils": "0.17.1",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v5.2.1/react-icons-all-files-5.2.1.tgz",
-    "@uniformdev/canvas": "19.186.2-alpha.14+2868049c36",
-    "@uniformdev/design-system": "19.186.2-alpha.14+2868049c36",
-    "@uniformdev/mesh-sdk": "19.186.2-alpha.14+2868049c36",
-    "@uniformdev/richtext": "19.186.2-alpha.14+2868049c36",
+    "@uniformdev/canvas": "19.186.4-alpha.29+03de47b2a8",
+    "@uniformdev/design-system": "19.186.4-alpha.29+03de47b2a8",
+    "@uniformdev/mesh-sdk": "19.186.4-alpha.29+03de47b2a8",
+    "@uniformdev/richtext": "19.186.4-alpha.29+03de47b2a8",
     "dequal": "^2.0.3",
     "lexical": "0.17.1",
     "mitt": "3.0.1",
@@ -87,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2868049c365d370abc91762e89dc845c61c02b78"
+  "gitHead": "03de47b2a82e853fe3a989a5a60f352c74ed2777"
 }