@carto/meridian-ds 2.6.2-alpha.0 → 2.7.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 2.0
+
+### 2.7.0
+
+- New SearchField component [#308](https://github.com/CartoDB/meridian-ds/pull/308)
+- Custom Icons: ApiAccessToken, ApiBaseUrl, AppCredentials, M2mOauthClient,SpaOauthClient, WorkflowApiEndpoint [#325](https://github.com/CartoDB/meridian-ds/pull/325)
 - Avatar: move size styles to the theme [#321](https://github.com/CartoDB/meridian-ds/pull/321)
 - Alert: move neutral styles to the theme [#320](https://github.com/CartoDB/meridian-ds/pull/320)
 - Handle empty buttonFooterLabelId in CodeAreaFooter [#323](https://github.com/CartoDB/meridian-ds/pull/323)
@@ -13,9 +19,6 @@
 - FilterDropdown: improve customization [#312](https://github.com/CartoDB/meridian-ds/pull/312)
 - CopiableComponent: improve customization [#311](https://github.com/CartoDB/meridian-ds/pull/311)
 - AppBar: disallow user selection of text [#324](https://github.com/CartoDB/meridian-ds/pull/324)
-- Custom Icons: ApiAccessToken, ApiBaseUrl, AppCredentials, M2mOauthClient,SpaOauthClient, WorkflowApiEndpoint [#325](https://github.com/CartoDB/meridian-ds/pull/325)
-
-## 2.0
 
 ### 2.6.1
 

package/dist/{Alert-1A6BG2aO.js → Alert-BfDnWlbD.js}

@@ -3,7 +3,7 @@ import { forwardRef, useState } from "react";
 import { styled, Link as Link$1, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
 import { OpenInNewOutlined } from "@mui/icons-material";
 import "cartocolor";
-import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography } from "./css-utils-lmkjeCdF.js";
+import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography } from "./css-utils-BHYA7By_.js";
 const ScreenReaderOnly = styled("span")(() => ({
   position: "absolute",
   width: 1,

package/dist/{Alert-eVzJvC47.cjs → Alert-CPvYAHO_.cjs}

@@ -4,7 +4,7 @@ const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
 require("cartocolor");
-const cssUtils = require("./css-utils-BNXxLCyb.cjs");
+const cssUtils = require("./css-utils-DjvM17Vb.cjs");
 const ScreenReaderOnly = material.styled("span")(() => ({
   position: "absolute",
   width: 1,

package/dist/{MenuItem-DgHhHW-j.js → MenuItem-D90EfuGS.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { styled, MenuItem as MenuItem$1 } from "@mui/material";
-import { f as MENU_ITEM_SIZE_DENSE, h as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-lmkjeCdF.js";
+import { f as MENU_ITEM_SIZE_DENSE, h as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-BHYA7By_.js";
 const StyledMenuItem = styled(MenuItem$1, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop
@@ -108,10 +108,13 @@ const StyledMenuItem = styled(MenuItem$1, {
         zIndex: 2,
         minHeight: MENU_ITEM_SIZE_EXTENDED,
         marginBottom: theme.spacing(1),
-        padding: theme.spacing(0.5, 1.5),
+        padding: theme.spacing(0.5, 0),
         backgroundColor: `${theme.palette.background.paper} !important`,
         borderBottom: `1px solid ${theme.palette.divider}`
       },
+      "&.MuiMenuItem-gutters": {
+        padding: theme.spacing(0.5, 1.5)
+      },
       ".MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type": {
         minHeight: MENU_ITEM_SIZE_EXTENDED,
         marginTop: 0,
@@ -128,6 +131,9 @@ const StyledMenuItem = styled(MenuItem$1, {
     ...dense && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
         minHeight: MENU_ITEM_SIZE_DENSE,
+        padding: theme.spacing(0.25, 0)
+      },
+      "&.MuiButtonBase-root.MuiMenuItem-gutters": {
         padding: theme.spacing(0.25, 1.5)
       }
     }
@@ -141,6 +147,7 @@ function _MenuItem({
   fixed,
   iconColor = "primary",
   dense,
+  disableGutters,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsx(
@@ -156,11 +163,13 @@ function _MenuItem({
       dense,
       fixed,
       iconColor,
+      disableGutters,
       "data-destructive": destructive,
       "data-extended": extended,
       "data-dense": dense,
       "data-fixed": fixed,
-      "data-icon-color": iconColor
+      "data-icon-color": iconColor,
+      "data-disable-gutters": disableGutters
     }
   );
 }

package/dist/{MenuItem-6ZIV5V7a.cjs → MenuItem-ZSYcQBtg.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const cssUtils = require("./css-utils-BNXxLCyb.cjs");
+const cssUtils = require("./css-utils-DjvM17Vb.cjs");
 const StyledMenuItem = material.styled(material.MenuItem, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop
@@ -109,10 +109,13 @@ const StyledMenuItem = material.styled(material.MenuItem, {
         zIndex: 2,
         minHeight: cssUtils.MENU_ITEM_SIZE_EXTENDED,
         marginBottom: theme.spacing(1),
-        padding: theme.spacing(0.5, 1.5),
+        padding: theme.spacing(0.5, 0),
         backgroundColor: `${theme.palette.background.paper} !important`,
         borderBottom: `1px solid ${theme.palette.divider}`
       },
+      "&.MuiMenuItem-gutters": {
+        padding: theme.spacing(0.5, 1.5)
+      },
       ".MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type": {
         minHeight: cssUtils.MENU_ITEM_SIZE_EXTENDED,
         marginTop: 0,
@@ -129,6 +132,9 @@ const StyledMenuItem = material.styled(material.MenuItem, {
     ...dense && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
         minHeight: cssUtils.MENU_ITEM_SIZE_DENSE,
+        padding: theme.spacing(0.25, 0)
+      },
+      "&.MuiButtonBase-root.MuiMenuItem-gutters": {
         padding: theme.spacing(0.25, 1.5)
       }
     }
@@ -142,6 +148,7 @@ function _MenuItem({
   fixed,
   iconColor = "primary",
   dense,
+  disableGutters,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -157,11 +164,13 @@ function _MenuItem({
       dense,
       fixed,
       iconColor,
+      disableGutters,
       "data-destructive": destructive,
       "data-extended": extended,
       "data-dense": dense,
       "data-fixed": fixed,
-      "data-icon-color": iconColor
+      "data-icon-color": iconColor,
+      "data-disable-gutters": disableGutters
     }
   );
 }

package/dist/{SwatchSquare-CaaLsjAC.js → Search-C7wkXu3f.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { createSvgIcon } from "@mui/material";
-const Icon$1 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
+const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
   "path",
   {
     fill: "currentColor",
@@ -10,26 +10,8 @@ const Icon$1 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon$1 = createSvgIcon(Icon$1(), "Search");
+const BaseSvgIcon = createSvgIcon(Icon(), "Search");
 function Search({ width, height, sx, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    BaseSvgIcon$1,
-    {
-      ref,
-      viewBox: "0 0 24 24",
-      sx: {
-        width,
-        height: height || width,
-        ...sx
-      },
-      ...props
-    }
-  );
-}
-const Search$1 = forwardRef(Search);
-const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
-const BaseSvgIcon = createSvgIcon(Icon(), "SwatchSquare");
-function SwatchSquare({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     BaseSvgIcon,
     {
@@ -44,8 +26,7 @@ function SwatchSquare({ width, height, sx, ...props }, ref) {
     }
   );
 }
-const SwatchSquare$1 = forwardRef(SwatchSquare);
+const Search$1 = forwardRef(Search);
 export {
-  Search$1 as S,
-  SwatchSquare$1 as a
+  Search$1 as S
 };

package/dist/{SwatchSquare-B8PIY3Rd.cjs → Search-CMWbM9nD.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const Icon$1 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
     fill: "currentColor",
@@ -11,26 +11,8 @@ const Icon$1 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon$1 = material.createSvgIcon(Icon$1(), "Search");
+const BaseSvgIcon = material.createSvgIcon(Icon(), "Search");
 function Search({ width, height, sx, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    BaseSvgIcon$1,
-    {
-      ref,
-      viewBox: "0 0 24 24",
-      sx: {
-        width,
-        height: height || width,
-        ...sx
-      },
-      ...props
-    }
-  );
-}
-const Search$1 = React.forwardRef(Search);
-const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
-const BaseSvgIcon = material.createSvgIcon(Icon(), "SwatchSquare");
-function SwatchSquare({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseSvgIcon,
     {
@@ -45,6 +27,5 @@ function SwatchSquare({ width, height, sx, ...props }, ref) {
     }
   );
 }
-const SwatchSquare$1 = React.forwardRef(SwatchSquare);
+const Search$1 = React.forwardRef(Search);
 exports.Search = Search$1;
-exports.SwatchSquare = SwatchSquare$1;

package/dist/SwatchSquare-B6KYVoqV.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { createSvgIcon } from "@mui/material";
+const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
+const BaseSvgIcon = createSvgIcon(Icon(), "SwatchSquare");
+function SwatchSquare({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    BaseSvgIcon,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const SwatchSquare$1 = forwardRef(SwatchSquare);
+export {
+  SwatchSquare$1 as S
+};

package/dist/SwatchSquare-DuXPIL7t.cjs

@@ -0,0 +1,23 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
+const BaseSvgIcon = material.createSvgIcon(Icon(), "SwatchSquare");
+function SwatchSquare({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const SwatchSquare$1 = React.forwardRef(SwatchSquare);
+exports.SwatchSquare = SwatchSquare$1;

package/dist/components/index.cjs

@@ -4,11 +4,11 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const cssUtils = require("../css-utils-BNXxLCyb.cjs");
-const Alert$1 = require("../Alert-eVzJvC47.cjs");
+const cssUtils = require("../css-utils-DjvM17Vb.cjs");
+const Alert$1 = require("../Alert-CPvYAHO_.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
-const MenuItem = require("../MenuItem-6ZIV5V7a.cjs");
+const MenuItem = require("../MenuItem-ZSYcQBtg.cjs");
 require("cartocolor");
 const reactWindow = require("react-window");
 const reactCodemirror2 = require("react-codemirror2");
@@ -41,6 +41,7 @@ const reactIntl = require("react-intl");
 const xDatePickers = require("@mui/x-date-pickers");
 const TimePicker$1 = require("@mui/x-date-pickers/TimePicker");
 const DateTimePicker$1 = require("@mui/x-date-pickers/DateTimePicker");
+const Search = require("../Search-CMWbM9nD.cjs");
 const DOMPurify = require("dompurify");
 const IndicatorIcon = material.styled(material.Box)({
   position: "absolute",
@@ -5039,6 +5040,291 @@ function _FilterDropdown({
 const FilterDropdown = React.forwardRef(
   _FilterDropdown
 );
+const SearchIcon = material.styled(Search.Search, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "disabled"
+})(
+  ({ theme, minimized, disabled }) => ({
+    cursor: !disabled && minimized ? "pointer" : "inherit",
+    width: cssUtils.ICON_SIZE_MEDIUM,
+    height: cssUtils.ICON_SIZE_MEDIUM,
+    path: {
+      fillOpacity: 1,
+      fill: disabled ? theme.palette.text.disabled : theme.palette.text.secondary
+    }
+  })
+);
+const ClearSearchIcon = material.styled(iconsMaterial.Cancel)(({ theme }) => ({
+  color: `${theme.palette.text.hint} !important`
+}));
+const LoadingSearchIcon = material.styled(material.CircularProgress)(({ theme }) => ({
+  svg: {
+    color: `${theme.palette.primary.main} !important`
+  }
+}));
+const SearchInputAdornment = material.styled(material.InputAdornment, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "expanded"
+})(
+  ({ theme, minimized, expanded }) => ({
+    // Start adornment
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.short
+    }),
+    "&.MuiInputAdornment-positionStart": {
+      marginLeft: minimized ? theme.spacing(1) : void 0
+    },
+    // End adornment
+    "&.MuiInputAdornment-positionEnd": {
+      minWidth: theme.spacing(4),
+      "&.MuiInputAdornment-sizeSmall": {
+        minWidth: theme.spacing(3)
+      }
+    },
+    ...expanded && !minimized && {
+      "&.MuiInputAdornment-root": {
+        minWidth: theme.spacing(9),
+        "&.MuiInputAdornment-sizeSmall": {
+          minWidth: theme.spacing(7)
+        }
+      }
+    }
+  })
+);
+const SearchFieldBase = material.styled(material.TextField, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "isInputFocused" && prop !== "emphasis"
+})(({ theme, emphasis = "filled", minimized, isInputFocused }) => ({
+  "&.MuiTextField-root .MuiInputBase-root": {
+    paddingRight: theme.spacing(1),
+    transition: theme.transitions.create(["width", "padding"], {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.standard
+    }),
+    "&.MuiInputBase-sizeSmall": {
+      paddingRight: theme.spacing(0.5)
+    },
+    "&:before": {
+      border: "none !important",
+      "&:hover": {
+        border: "none !important"
+      }
+    },
+    // Input
+    "& .MuiInputBase-input": {
+      pointerEvents: isInputFocused ? "auto" : "none",
+      // Fix Chrome scroll issue https://issues.chromium.org/issues/41245282
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.easeInOut,
+        duration: theme.transitions.duration.standard
+      })
+    },
+    // Error state
+    "&.Mui-error": {
+      "&::after": {
+        borderColor: "transparent !important"
+      }
+    },
+    ...minimized && {
+      display: "flex",
+      alignItems: "center",
+      padding: 0,
+      width: theme.spacing(6),
+      cursor: "pointer",
+      "& .MuiInputBase-input": {
+        width: 0
+      },
+      "&.MuiInputBase-sizeSmall": {
+        padding: 0,
+        width: theme.spacing(4)
+      }
+    }
+  },
+  // Variants
+  ...emphasis === "filled" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: minimized ? "transparent !important" : void 0,
+      "&:hover": {
+        backgroundColor: `${theme.palette.action.hover} !important`
+      },
+      // not disabled
+      "&:not(.Mui-disabled):hover": {
+        backgroundColor: `${theme.palette.action.hover} !important`
+      }
+    }
+  },
+  ...emphasis === "transparent" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: "transparent !important",
+      "&:hover": {
+        backgroundColor: minimized ? `${theme.palette.action.hover} !important` : "transparent !important"
+      },
+      "&.Mui-disabled": {
+        backgroundColor: "transparent !important"
+      }
+    }
+  },
+  ...emphasis === "floating" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: `${theme.palette.background.paper} !important`,
+      boxShadow: theme.shadows[1],
+      "&:hover": {
+        backgroundColor: minimized ? `${theme.palette.action.hover} !important` : `${theme.palette.background.paper} !important`
+      },
+      "&.Mui-disabled": {
+        backgroundColor: `${theme.palette.background.paper} !important`
+      }
+    }
+  }
+}));
+const SearchFieldEndAdornment = ({
+  disabled,
+  showClearButton = true,
+  loading,
+  size,
+  endAdornment,
+  clearButton,
+  clearButtonLabel,
+  onClear
+}) => {
+  if (!showClearButton && !endAdornment && !loading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SearchInputAdornment,
+    {
+      position: "end",
+      expanded: Boolean(endAdornment && showClearButton),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        material.Stack,
+        {
+          direction: "row",
+          spacing: 1,
+          sx: {
+            alignItems: "center"
+          },
+          children: [
+            loading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSearchIcon, { size: cssUtils.ICON_SIZE_MEDIUM }) : showClearButton ? clearButton ?? /* @__PURE__ */ jsxRuntime.jsx(
+              cssUtils.IconButton,
+              {
+                onClick: onClear,
+                size,
+                color: "default",
+                disabled,
+                tooltip: clearButtonLabel,
+                "aria-label": clearButtonLabel,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(ClearSearchIcon, {})
+              }
+            ) : null,
+            endAdornment
+          ]
+        }
+      )
+    }
+  );
+};
+const SearchFieldStartAdornment = ({
+  minimized,
+  loading,
+  startAdornment,
+  disabled
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SearchInputAdornment, { position: "start", minimized, children: loading && minimized ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSearchIcon, { size: cssUtils.ICON_SIZE_MEDIUM }) : startAdornment || /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { disabled, minimized }) });
+};
+function _SearchField({
+  value,
+  defaultValue,
+  placeholder,
+  disabled,
+  minimized = false,
+  loading = false,
+  variant = "filled",
+  size = "small",
+  InputProps,
+  inputProps,
+  startAdornment,
+  endAdornment,
+  onFocus,
+  onBlur,
+  onChange,
+  onClick,
+  onResetSearch,
+  showClearButton = true,
+  clearButtonLabel,
+  clearButton,
+  ...otherProps
+}, ref) {
+  const [isInputFocused, setIsInputFocused] = React.useState(false);
+  const clearButtonVisibility = !disabled && Boolean(value ?? defaultValue) && showClearButton;
+  const clearButtonLabelValue = cssUtils.useTranslationWithFallback(
+    "c4r.button.clear",
+    clearButtonLabel
+  );
+  const handleFocus = (event) => {
+    setIsInputFocused(true);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleBlur = (event) => {
+    setIsInputFocused(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleClear = () => {
+    onResetSearch == null ? void 0 : onResetSearch();
+    onChange == null ? void 0 : onChange({ target: { value: "" } });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SearchFieldBase,
+    {
+      defaultValue,
+      value: minimized ? "" : value,
+      placeholder: minimized ? "" : placeholder,
+      onChange,
+      onClick,
+      variant: "filled",
+      emphasis: variant,
+      size,
+      focused: false,
+      isInputFocused,
+      disabled,
+      minimized,
+      InputProps: {
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        startAdornment: /* @__PURE__ */ jsxRuntime.jsx(
+          SearchFieldStartAdornment,
+          {
+            minimized,
+            loading,
+            disabled,
+            startAdornment
+          }
+        ),
+        endAdornment: !minimized && /* @__PURE__ */ jsxRuntime.jsx(
+          SearchFieldEndAdornment,
+          {
+            disabled,
+            loading,
+            showClearButton: clearButtonVisibility,
+            clearButton,
+            clearButtonLabel: clearButtonLabelValue,
+            onClear: handleClear,
+            size,
+            endAdornment
+          }
+        ),
+        ...InputProps
+      },
+      inputProps: {
+        role: "searchbox",
+        ...inputProps
+      },
+      role: "search",
+      "data-variant": variant,
+      "data-name": "search-field",
+      ref,
+      ...otherProps
+    }
+  );
+}
+const SearchField = React.forwardRef(_SearchField);
 const MAX_WIDTH = 480;
 const SnackbarRoot = material.styled(material.Snackbar)(({ theme }) => ({
   bottom: theme.spacing(2),
@@ -5863,6 +6149,7 @@ exports.MenuList = MenuList;
 exports.MultipleAutocomplete = MultipleAutocomplete;
 exports.MultipleSelectField = MultipleSelectField;
 exports.PasswordField = PasswordField;
+exports.SearchField = SearchField;
 exports.SelectField = SelectField;
 exports.Snackbar = Snackbar;
 exports.SplitButton = SplitButton;