@carto/meridian-ds 2.5.5-alpha-translations.1 → 2.6.0-alpha-searchfield.1

package/dist/components/index.cjs

@@ -4,12 +4,12 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const Alert$1 = require("../Alert-Dyw7Z9wJ.cjs");
-const TablePaginationActions = require("../TablePaginationActions-CMC_ZxDN.cjs");
+const Alert$1 = require("../Alert-F8G9P271.cjs");
+const cssUtils = require("../css-utils-CqIN_t7x.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
 const reactIntl = require("react-intl");
-const MenuItem = require("../MenuItem-o51jnNjL.cjs");
+const MenuItem = require("../MenuItem-Bssr5qGq.cjs");
 require("cartocolor");
 const reactWindow = require("react-window");
 const reactCodemirror2 = require("react-codemirror2");
@@ -41,6 +41,7 @@ const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
 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",
@@ -121,7 +122,7 @@ function _Button({
       },
       ref,
       "aria-describedby": isExternalLink ? "external-hint" : ariaDescribedby,
-      children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
+      children: /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
     }
   );
 }
@@ -227,7 +228,7 @@ const Root$5 = material.styled(material.Box)(({ theme }) => ({
   alignItems: "center",
   gap: theme.spacing(0.5)
 }));
-const Indicator = material.styled(TablePaginationActions.Typography)(({ theme }) => ({
+const Indicator = material.styled(cssUtils.Typography)(({ theme }) => ({
   ".Mui-disabled &": {
     color: theme.palette.text.disabled
   }
@@ -235,9 +236,9 @@ const Indicator = material.styled(TablePaginationActions.Typography)(({ theme })
 const Icon = material.styled(material.Box)(({ theme }) => ({
   display: "flex",
   svg: {
-    width: TablePaginationActions.ICON_SIZE_SMALL,
-    height: TablePaginationActions.ICON_SIZE_SMALL,
-    fontSize: TablePaginationActions.ICON_SIZE_SMALL,
+    width: cssUtils.ICON_SIZE_SMALL,
+    height: cssUtils.ICON_SIZE_SMALL,
+    fontSize: cssUtils.ICON_SIZE_SMALL,
     path: {
       fill: theme.palette.text.secondary,
       ".Mui-disabled &": {
@@ -284,7 +285,7 @@ function _LabelWithIndicator({
 const LabelWithIndicator = React.forwardRef(_LabelWithIndicator);
 function _PasswordField({ InputProps, size = "small", disabled, ...otherProps }, ref) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const [showPassword, setShowPassword] = React.useState(false);
   const handleClickShowPassword = () => setShowPassword(!showPassword);
   const showPasswordLabel = intlConfig.formatMessage({
@@ -305,7 +306,7 @@ function _PasswordField({ InputProps, size = "small", disabled, ...otherProps },
           role: "textbox"
         },
         endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
-          TablePaginationActions.IconButton,
+          cssUtils.IconButton,
           {
             size,
             disabled,
@@ -421,7 +422,7 @@ function _SelectField({
             },
             children: [
               placeholder && /* @__PURE__ */ jsxRuntime.jsx(PlaceholderItem, { disabled: true, value: "", children: /* @__PURE__ */ jsxRuntime.jsx(
-                TablePaginationActions.Typography,
+                cssUtils.Typography,
                 {
                   variant: isSmall ? "body2" : "body1",
                   color: "text.hint",
@@ -526,7 +527,7 @@ function _MenuItemFilter({
   "data-testid": dataTestId
 }, ref) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledMenuItem$1,
     {
@@ -618,14 +619,14 @@ function _MultipleSelectField({
   const isSmall = size === "small";
   const paddingSize = isSmall || variant === "standard" ? 0 : 2;
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const counterText = `${currentOptions.length} ${intlConfig.formatMessage({
     id: "c4r.form.selected"
   })}`;
   const renderValue = React.useMemo(() => {
     if (areAllSelected) {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        TablePaginationActions.Typography,
+        cssUtils.Typography,
         {
           component: "span",
           variant: isSmall ? "body2" : "body1",
@@ -637,7 +638,7 @@ function _MultipleSelectField({
     }
     if (areAnySelected) {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        TablePaginationActions.Typography,
+        cssUtils.Typography,
         {
           component: "span",
           variant: isSmall ? "body2" : "body1",
@@ -648,7 +649,7 @@ function _MultipleSelectField({
       );
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      TablePaginationActions.Typography,
+      cssUtils.Typography,
       {
         component: "span",
         variant: isSmall ? "body2" : "body1",
@@ -879,7 +880,7 @@ const _CopiableComponent = ({
 }, ref) => {
   const [open, setOpen] = React.useState(false);
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const copyTooltipText = copyText === null ? null : copyText || intlConfig.formatMessage({ id: "c4r.button.copy" });
   const copySuccessMessage = copiedText || intlConfig.formatMessage({
     id: "c4r.notifications.copiedToClipboard"
@@ -910,7 +911,7 @@ const _CopiableComponent = ({
             children: [
               children,
               button && /* @__PURE__ */ jsxRuntime.jsx(
-                TablePaginationActions.IconButton,
+                cssUtils.IconButton,
                 {
                   ...buttonProps,
                   disabled,
@@ -980,7 +981,7 @@ function _CopiableInputText({
   ...rest
 }, ref) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const [showText, setShowText] = React.useState(false);
   const [isInputFocused, setIsInputFocused] = React.useState(false);
   const inputType = !password ? "text" : showText ? "text" : "password";
@@ -996,7 +997,7 @@ function _CopiableInputText({
     onBlur == null ? void 0 : onBlur(event);
   };
   const passwordAdornment = /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
-    TablePaginationActions.IconButton,
+    cssUtils.IconButton,
     {
       edge: variant !== "standard" ? "end" : void 0,
       onClick: () => setShowText(!showText),
@@ -1081,7 +1082,7 @@ function createCounterRenderTags({
       getOptionLabel
     });
     return /* @__PURE__ */ jsxRuntime.jsx(
-      TablePaginationActions.Typography,
+      cssUtils.Typography,
       {
         variant: size === "small" ? "body2" : "body1",
         component: "span",
@@ -1250,7 +1251,7 @@ function useAutocompleteRenderOption() {
                 title
               ),
               secondaryText && /* @__PURE__ */ jsxRuntime.jsx(
-                TablePaginationActions.Typography,
+                cssUtils.Typography,
                 {
                   component: "p",
                   variant: "caption",
@@ -1274,7 +1275,7 @@ function useCreatableAutocomplete({
   multiple
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const filter = material.createFilterOptions();
   const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
   const creatableFilterOptions = (options, params) => {
@@ -1339,7 +1340,7 @@ function useMultipleAutocomplete({
   allSelectedText
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const defaultCounterText = counterText || intlConfig.formatMessage({ id: "c4r.form.selected" });
   const defaultAllSelectedText = allSelectedText || intlConfig.formatMessage({ id: "c4r.form.allSelected" });
   const [multipleValue, setMultipleValue] = React.useState(
@@ -1417,8 +1418,8 @@ const List = material.styled("ul")(
 const ItemWrapper = material.styled("div")(({ style, theme, isSubtitle, isExtended, isMultiple }) => {
   const getSubtitleStyles = () => {
     const baseStyles = {
-      height: TablePaginationActions.MENU_ITEM_SIZE_DENSE,
-      minHeight: TablePaginationActions.MENU_ITEM_SIZE_DENSE,
+      height: cssUtils.MENU_ITEM_SIZE_DENSE,
+      minHeight: cssUtils.MENU_ITEM_SIZE_DENSE,
       marginTop: `${theme.spacing(1)} !important`,
       alignItems: "flex-end",
       ...theme.typography.caption,
@@ -1475,7 +1476,7 @@ function _AutocompleteList({
   multiple,
   extended,
   itemHeight,
-  maxListHeight = TablePaginationActions.MENU_LIST_MAX_SIZE,
+  maxListHeight = cssUtils.MENU_LIST_MAX_SIZE,
   ...otherProps
 }, ref) {
   const childrenArray = React.useMemo(() => {
@@ -1497,9 +1498,9 @@ function _AutocompleteList({
       };
     });
   }, [children, multiple]);
-  const defaultItemHeight = itemHeight ?? (extended ? TablePaginationActions.MENU_ITEM_SIZE_EXTENDED : TablePaginationActions.MENU_ITEM_SIZE_DEFAULT);
+  const defaultItemHeight = itemHeight ?? (extended ? cssUtils.MENU_ITEM_SIZE_EXTENDED : cssUtils.MENU_ITEM_SIZE_DEFAULT);
   const listboxHeight = React.useMemo(() => {
-    const filterHeight = showFilters && multiple ? TablePaginationActions.MENU_ITEM_SIZE_EXTENDED : 0;
+    const filterHeight = showFilters && multiple ? cssUtils.MENU_ITEM_SIZE_EXTENDED : 0;
     const availableHeight = maxListHeight - filterHeight;
     const calculatedHeight = Math.min(
       childrenArray.length * defaultItemHeight,
@@ -1765,7 +1766,7 @@ function useAutocomplete({
 const Menu$1 = material.styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
-  height: TablePaginationActions.APPBAR_SIZE,
+  height: cssUtils.APPBAR_SIZE,
   marginRight: theme.spacing(1.5)
 }));
 const MenuButton = material.styled(material.IconButton)(({ theme }) => ({
@@ -1811,7 +1812,7 @@ const Logo = material.styled("div")(({ theme }) => ({
 function BrandLogo({ logo }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Logo, { children: logo });
 }
-const Text$1 = material.styled(TablePaginationActions.Typography)({
+const Text$1 = material.styled(cssUtils.Typography)({
   display: "flex",
   alignItems: "center",
   whiteSpace: "nowrap"
@@ -1828,7 +1829,7 @@ function BrandText({ text }) {
     }
   );
 }
-const Text = material.styled(TablePaginationActions.Typography)(({ theme }) => ({
+const Text = material.styled(cssUtils.Typography)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   "&::before": {
@@ -1869,7 +1870,7 @@ const BrandElements = material.styled("div")(({ theme }) => ({
     minWidth: "192px"
   }
 }));
-const Content$4 = material.styled("div")(({ theme }) => ({
+const Content$5 = material.styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -1892,7 +1893,7 @@ function _AppBar({
       brandText && /* @__PURE__ */ jsxRuntime.jsx(BrandText, { text: brandText }),
       secondaryText && /* @__PURE__ */ jsxRuntime.jsx(SecondaryText, { text: secondaryText })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content$4, { children })
+    /* @__PURE__ */ jsxRuntime.jsx(Content$5, { children })
   ] }) });
 }
 const AppBar = React.forwardRef(_AppBar);
@@ -1927,7 +1928,7 @@ function CodeAreaFooter({
   ...props
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   if (!onClickFooter) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Footer,
@@ -1985,7 +1986,7 @@ function CodeAreaHeader({
   size
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const showExpandButton = !!onClickExpand;
   const showCopyButton = copyValue !== void 0;
   const showMenu = showExpandButton && showCopyButton;
@@ -2014,7 +2015,7 @@ function CodeAreaHeader({
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          TablePaginationActions.IconButton,
+          cssUtils.IconButton,
           {
             color: "default",
             size,
@@ -2078,7 +2079,7 @@ function CodeAreaHeader({
       }
     ),
     showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
-      TablePaginationActions.IconButton,
+      cssUtils.IconButton,
       {
         color: "default",
         size,
@@ -2700,8 +2701,8 @@ const InputWrapper = material.styled(material.Box, {
   }
 }));
 const HelpIcon = material.styled(iconsMaterial.HelpOutline)(({ theme }) => ({
-  width: TablePaginationActions.ICON_SIZE_SMALL,
-  height: TablePaginationActions.ICON_SIZE_SMALL,
+  width: cssUtils.ICON_SIZE_SMALL,
+  height: cssUtils.ICON_SIZE_SMALL,
   fill: theme.palette.text.secondary
 }));
 function CodeAreaField({
@@ -3137,13 +3138,13 @@ function DialogHeader({
   ...otherProps
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { component: "div", "data-name": "dialog-header", ...otherProps, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Main$1, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(ItemsWrapper$1, { flex: 1, maxWidth: 0.8, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            TablePaginationActions.Typography,
+            cssUtils.Typography,
             {
               component: "h2",
               variant: "inherit",
@@ -3172,7 +3173,7 @@ function DialogHeader({
     children && /* @__PURE__ */ jsxRuntime.jsx(DividerBottom, {})
   ] });
 }
-const Content$3 = material.styled(material.DialogContent, {
+const Content$4 = material.styled(material.DialogContent, {
   shouldForwardProp: (prop) => !["scrollableContent", "withGutter", "withBottomGutter"].includes(prop)
 })(({ theme, scrollableContent, withGutter, withBottomGutter }) => ({
   display: "flex",
@@ -3249,7 +3250,7 @@ function _DialogContent({
     return () => resizeObserver.disconnect();
   }, [contentRef, updateBorders]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Content$3,
+    Content$4,
     {
       ref: setContentRef,
       onScroll: handleScroll,
@@ -3541,14 +3542,14 @@ function DialogStepper({
         "data-state": isCompleted ? "completed" : isCurrent ? "current" : "uncompleted",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(StepNumber, { completed: isCompleted, current: isCurrent, children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Check, { fontSize: "small", "aria-label": "Completed step" }) : step }),
-          /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", component: "div", color: labelColor, children: stepLabel })
+          /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", component: "div", color: labelColor, children: stepLabel })
         ]
       },
       idx
     );
   }) }) });
 }
-const Content$2 = material.styled(DialogContent, {
+const Content$3 = material.styled(DialogContent, {
   shouldForwardProp: (prop) => !["error", "withBorder"].includes(prop)
 })(
   ({ error, withBorder, theme }) => ({
@@ -3577,7 +3578,7 @@ function CodeAreaDialogContent({
   withGutter = false
 }) {
   if (!children) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Content$2, { withGutter, error, withBorder, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Content$3, { withGutter, error, withBorder, children });
 }
 function CodeAreaDialogConfirmation({
   onClose,
@@ -3591,7 +3592,7 @@ function CodeAreaDialogConfirmation({
   content
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   if (!onClose || !onCancel) {
     return null;
   }
@@ -3792,7 +3793,7 @@ function ClearButton({
   ...props
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   return /* @__PURE__ */ jsxRuntime.jsx(Container, { size, variant, children: /* @__PURE__ */ jsxRuntime.jsx(
     material.IconButton,
     {
@@ -3865,7 +3866,7 @@ function DatePicker({
   ...props
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   return (
     // Don't remove className, it's used for styling
     /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "CartoDatePicker-root", "data-testid": "date-picker", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4153,7 +4154,7 @@ function DateRangePicker({
   ...props
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const [isEndDateOpen, setIsEndDateOpen] = React.useState(false);
   const [isStartDateOpen, setIsStartDateOpen] = React.useState(false);
   const [startDate, setStartDate] = React.useState(
@@ -4341,7 +4342,7 @@ function TimePicker({
   ...props
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const inputRef = React.useRef(null);
   const [inputWidth, setInputWidth] = React.useState(0);
   React.useEffect(() => {
@@ -4452,7 +4453,7 @@ function DateTimePicker({
   ...props
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DateFieldContainer,
     {
@@ -4517,7 +4518,7 @@ function DateTimePicker({
   );
 }
 const DEFAULT_ITEMS = [{ outlinedBullet: false, value: "" }];
-const Content$1 = material.styled("ul")(({ theme }) => ({
+const Content$2 = material.styled("ul")(({ theme }) => ({
   listStyle: "none",
   paddingLeft: 0,
   margin: theme.spacing(0.5, 0, 0, 0)
@@ -4538,7 +4539,7 @@ const Bullet = material.styled("span")(({ theme }) => ({
   borderRadius: "50%",
   backgroundColor: theme.palette.qualitative.bold[1]
 }));
-const Category = material.styled(TablePaginationActions.Typography)(({ theme }) => ({
+const Category = material.styled(cssUtils.Typography)(({ theme }) => ({
   minWidth: theme.spacing(10),
   marginRight: theme.spacing(1.5)
 }));
@@ -4547,8 +4548,8 @@ function TooltipData({
   title
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { color: "inherit", variant: "caption", weight: "medium", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content$1, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(Entry, { children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { color: "inherit", variant: "caption", weight: "medium", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(Content$2, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(Entry, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Bullet,
         {
@@ -4561,7 +4562,7 @@ function TooltipData({
         }
       ),
       item.category && /* @__PURE__ */ jsxRuntime.jsx(Category, { color: "inherit", variant: "caption", children: item.category }),
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { color: "inherit", variant: "caption", weight: "medium", children: item.value })
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { color: "inherit", variant: "caption", weight: "medium", children: item.value })
     ] }, index)) })
   ] });
 }
@@ -4639,8 +4640,8 @@ const StyledAvatar = material.styled(material.Avatar, {
     ...theme.typography.caption,
     fontWeight: 500,
     svg: {
-      width: TablePaginationActions.ICON_SIZE_SMALL,
-      height: TablePaginationActions.ICON_SIZE_SMALL
+      width: cssUtils.ICON_SIZE_SMALL,
+      height: cssUtils.ICON_SIZE_SMALL
     }
   },
   ...disabled && {
@@ -4675,7 +4676,7 @@ const StyledMenu = material.styled(material.Menu, {
 })(({ extended, width, height }) => ({
   ...extended && {
     ".MuiMenuItem-root": {
-      minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED
+      minHeight: cssUtils.MENU_ITEM_SIZE_EXTENDED
     }
   },
   ...width && {
@@ -4718,7 +4719,7 @@ const StyledMenuList = material.styled(material.MenuList, {
 })(({ extended, width, height }) => ({
   ...extended && {
     ".MuiMenuItem-root": {
-      minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED
+      minHeight: cssUtils.MENU_ITEM_SIZE_EXTENDED
     }
   },
   "&.MuiList-root": {
@@ -4889,7 +4890,7 @@ function _FilterDropdown({
     "data-color": buttonColor
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: tooltipLabel, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.IconButton, { ...commonButtonProps, icon }) : /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: tooltipLabel, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsxRuntime.jsx(cssUtils.IconButton, { ...commonButtonProps, icon }) : /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
         ...commonButtonProps,
@@ -4946,6 +4947,152 @@ 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 CancelIcon = material.styled(iconsMaterial.Cancel)(({ theme }) => ({
+  fill: theme.palette.text.hint,
+  cursor: "pointer"
+}));
+const CircularProgressIcon = material.styled(material.CircularProgress)(({ theme }) => ({
+  svg: {
+    color: theme.palette.primary.main
+  }
+}));
+const SearchFieldBase = material.styled(material.TextField, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "isInputFocused"
+})(
+  ({ theme, disabled, minimized, isInputFocused }) => ({
+    "& .MuiInputBase-input": {
+      cursor: disabled ? "not-allowed" : "text",
+      pointerEvents: isInputFocused ? "auto" : "none"
+      // Fix Chrome scroll issue https://issues.chromium.org/issues/41245282
+    },
+    "&.MuiTextField-root .MuiInputBase-root": {
+      paddingRight: theme.spacing(1),
+      "&.MuiInputBase-sizeSmall": {
+        paddingRight: theme.spacing(0.5)
+      },
+      "&:before": {
+        border: `none !important`,
+        "&:hover": {
+          border: `none !important`
+        }
+      },
+      width: minimized ? theme.spacing(4) : "100%",
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.easeInOut,
+        duration: theme.transitions.duration.shortest
+      })
+    },
+    // Input Adornment
+    "& .MuiInputAdornment-positionStart": {
+      marginLeft: minimized ? theme.spacing(0.125) : void 0
+    },
+    "& .MuiInputAdornment-positionEnd": {
+      minWidth: theme.spacing(4),
+      "&.MuiInputAdornment-sizeSmall": {
+        minWidth: theme.spacing(3)
+      }
+    },
+    // Variants
+    "& .MuiFilledInput-root": {
+      transition: theme.transitions.create("background-color", {
+        easing: theme.transitions.easing.easeInOut,
+        duration: theme.transitions.duration.shortest
+      }),
+      backgroundColor: `${minimized ? "inherit" : theme.palette.default.background} !important`,
+      "&:hover": {
+        backgroundColor: `${disabled ? "inherit" : theme.palette.action.hover} !important`
+      }
+    }
+  })
+);
+function _SearchField({
+  value,
+  defaultValue,
+  placeholder,
+  onChange,
+  onClick,
+  onResetSearch,
+  disabled,
+  minimized = false,
+  loading = false,
+  variant = "filled",
+  size = "small",
+  InputProps,
+  startAdornment,
+  endAdornment,
+  onFocus,
+  onBlur,
+  clearTextLabel,
+  ...otherProps
+}, ref) {
+  const [isInputFocused, setIsInputFocused] = React.useState(false);
+  const clearTextLabelValue = Alert$1.useTranslationFallback(
+    "c4r.button.clear",
+    clearTextLabel
+  );
+  const handleFocus = (event) => {
+    setIsInputFocused(true);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleBlur = (event) => {
+    setIsInputFocused(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleClearText = () => {
+    onResetSearch == null ? void 0 : onResetSearch();
+    onChange == null ? void 0 : onChange({ target: { value: "" } });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SearchFieldBase,
+    {
+      value: minimized ? "" : value,
+      defaultValue,
+      placeholder: minimized ? "" : placeholder,
+      onChange,
+      onClick,
+      variant,
+      size,
+      focused: false,
+      isInputFocused,
+      disabled,
+      minimized,
+      InputProps: {
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        startAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "inline-flex", ml: minimized ? -0.75 : 0 }, children: loading && minimized ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgressIcon, { size: cssUtils.ICON_SIZE_MEDIUM }) : startAdornment || /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { disabled, minimized }) }) }),
+        endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgressIcon, { size: cssUtils.ICON_SIZE_MEDIUM }) : !disabled && !minimized && (value ?? defaultValue) ? endAdornment || /* @__PURE__ */ jsxRuntime.jsx(
+          cssUtils.IconButton,
+          {
+            icon: /* @__PURE__ */ jsxRuntime.jsx(CancelIcon, {}),
+            onClick: handleClearText,
+            size,
+            color: "default",
+            disabled,
+            tooltip: clearTextLabelValue
+          }
+        ) : void 0 }),
+        ...InputProps
+      },
+      "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),
@@ -4959,7 +5106,7 @@ const SnackbarRoot = material.styled(material.Snackbar)(({ theme }) => ({
     maxWidth: `${MAX_WIDTH}px`
   }
 }));
-const Content = material.styled(material.Box, {
+const Content$1 = material.styled(material.Box, {
   shouldForwardProp: (prop) => prop !== "autoWidth"
 })(({ autoWidth, theme }) => ({
   minWidth: "100%",
@@ -5041,7 +5188,7 @@ const CloseButtonWrapper = material.styled(material.Box)(({ theme }) => ({
 }));
 function Snackbar({
   severity = "neutral",
-  autoHideDuration = TablePaginationActions.NOTIFICATION_DURATION_IN_MS,
+  autoHideDuration = cssUtils.NOTIFICATION_DURATION_IN_MS,
   closeable = true,
   children,
   title,
@@ -5053,11 +5200,11 @@ function Snackbar({
   ...rest
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const isNeutral = severity === "neutral";
   const disabledIcon = icon === false || isNeutral && !icon;
   const disabledAutoHide = autoHideDuration === null;
-  const duration = disabledAutoHide ? null : autoHideDuration || TablePaginationActions.NOTIFICATION_DURATION_IN_MS;
+  const duration = disabledAutoHide ? null : autoHideDuration || cssUtils.NOTIFICATION_DURATION_IN_MS;
   return /* @__PURE__ */ jsxRuntime.jsx(material.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     SnackbarRoot,
     {
@@ -5068,7 +5215,7 @@ function Snackbar({
       TransitionComponent: autoWidth ? material.Fade : material.Slide,
       "data-auto-width": autoWidth,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        Content,
+        Content$1,
         {
           sx: {
             position: "relative"
@@ -5089,7 +5236,7 @@ function Snackbar({
               }
             ),
             closeable && /* @__PURE__ */ jsxRuntime.jsx(CloseButtonWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              TablePaginationActions.IconButton,
+              cssUtils.IconButton,
               {
                 color: "default",
                 onClick: (e) => onClose(e, "timeout"),
@@ -5217,6 +5364,7 @@ const TagRoot = material.styled("div", {
     padding: theme.spacing(0, 0.5),
     borderRadius: theme.spacing(0.25),
     gap: theme.spacing(0.5),
+    maxWidth: "100%",
     height: theme.spacing(2),
     borderWidth: "1px",
     borderStyle: "solid",
@@ -5235,8 +5383,8 @@ const TagIcon = material.styled("div")(({ theme }) => ({
   justifyContent: "center",
   alignItems: "center",
   "& svg": {
-    width: theme.spacing(TablePaginationActions.ICON_SIZE_SMALL),
-    height: theme.spacing(TablePaginationActions.ICON_SIZE_SMALL),
+    width: theme.spacing(cssUtils.ICON_SIZE_SMALL),
+    height: theme.spacing(cssUtils.ICON_SIZE_SMALL),
     "& g": {
       fill: "currentColor"
     }
@@ -5247,6 +5395,7 @@ const TagLabel = material.styled("div", {
 })(({ type, theme }) => ({
   display: "flex",
   alignItems: "center",
+  ...cssUtils.ellipsisStyles,
   paddingTop: type === "code" ? theme.spacing(0.25) : void 0
 }));
 function _Tag({
@@ -5278,7 +5427,7 @@ function _Tag({
       children: [
         icon && /* @__PURE__ */ jsxRuntime.jsx(TagIcon, { children: icon }),
         /* @__PURE__ */ jsxRuntime.jsx(TagLabel, { type, children: /* @__PURE__ */ jsxRuntime.jsx(
-          TablePaginationActions.Typography,
+          cssUtils.Typography,
           {
             component: "span",
             color: "inherit",
@@ -5420,7 +5569,7 @@ function useFileUpload({
   uploadInputRef
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const [filesText, setFilesText] = React.useState("");
   const [dragOver, setDragOver] = React.useState(false);
   React.useEffect(() => {
@@ -5575,12 +5724,155 @@ function _UploadField({
   ] });
 }
 const UploadField = React.forwardRef(_UploadField);
+const TooltipRoot = material.styled(material.Tooltip)(() => ({
+  whiteSpace: "nowrap",
+  maxWidth: 999,
+  pointerEvents: "auto"
+}));
+const Content = material.styled("span", {
+  shouldForwardProp: (prop) => !["ellipsisTarget", "lines", "content"].includes(prop)
+})(({ ellipsisTarget = "all", lines = 1, content = "block" }) => {
+  if (lines > 1) {
+    return {
+      display: "-webkit-box",
+      ...cssUtils.ellipsisStyles,
+      whiteSpace: "initial !important",
+      WebkitLineClamp: lines,
+      WebkitBoxOrient: "vertical",
+      "& > *": { display: "block" }
+    };
+  }
+  if (ellipsisTarget === "first-child") {
+    return {
+      display: "flex",
+      flex: "1",
+      overflow: "hidden",
+      "& > *:nth-of-type(1)": {
+        display: "block",
+        ...cssUtils.ellipsisStyles,
+        marginRight: "-0.15em"
+        // Prevent ellipsis separation
+      }
+    };
+  }
+  if (content === "flex") {
+    return {
+      display: "flex",
+      flex: "1",
+      "& > *": {
+        display: "block",
+        ...cssUtils.ellipsisStyles
+      }
+    };
+  }
+  return {
+    display: "block",
+    ...cssUtils.ellipsisStyles,
+    fontWeight: "inherit",
+    "& > *": { display: "inline" }
+  };
+});
+function _EllipsisWithTooltip({
+  children,
+  tooltipText,
+  alwaysShowTooltip,
+  content = "block",
+  textRef: inputTextRef,
+  ellipsisTarget = "all",
+  lines = 1,
+  "aria-label": ariaLabel,
+  contentProps,
+  ...otherProps
+}, ref) {
+  var _a;
+  const textElementRef = React.useRef(null);
+  const [overflowing, setOverflowing] = React.useState(false);
+  const textRef = React.useMemo(
+    () => inputTextRef || textElementRef,
+    [inputTextRef, textElementRef]
+  );
+  const getTextContent = (node) => {
+    if (typeof node === "string") return node;
+    if (typeof node === "number") return String(node);
+    if (React.isValidElement(node)) {
+      const props = node.props;
+      if (props.children) {
+        return getTextContent(props.children);
+      }
+    }
+    return "";
+  };
+  const elementTitle = tooltipText || ((_a = textElementRef.current) == null ? void 0 : _a.innerText) || (alwaysShowTooltip || overflowing ? getTextContent(children) : "");
+  React.useEffect(() => {
+    const container = textRef.current;
+    if (!container || !children) return;
+    if (alwaysShowTooltip) {
+      setOverflowing(true);
+      return;
+    }
+    let isOverflowing = false;
+    if (lines > 1) {
+      isOverflowing = container.scrollHeight > container.clientHeight;
+    } else if (ellipsisTarget === "first-child") {
+      const children2 = Array.from(container.children);
+      const totalWidth = children2.reduce(
+        (sum, child) => sum + ((child == null ? void 0 : child.scrollWidth) || 0),
+        0
+      );
+      isOverflowing = totalWidth > container.clientWidth;
+    } else {
+      const hasContainerOverflow = container.scrollWidth > container.clientWidth;
+      const children2 = Array.from(container.children);
+      const hasChildOverflow = children2.some(
+        (child) => child.scrollWidth > child.clientWidth
+      );
+      isOverflowing = hasContainerOverflow || hasChildOverflow;
+    }
+    setOverflowing(isOverflowing);
+  }, [textRef, alwaysShowTooltip, children, ellipsisTarget, lines, content]);
+  React.useEffect(() => {
+    if (typeof ref === "function") {
+      ref(textElementRef.current);
+    } else if (ref) {
+      ref.current = textElementRef.current;
+    }
+  }, [ref]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TooltipRoot,
+    {
+      disableFocusListener: !overflowing && !alwaysShowTooltip,
+      disableHoverListener: !overflowing && !alwaysShowTooltip,
+      disableTouchListener: !overflowing && !alwaysShowTooltip,
+      title: elementTitle,
+      describeChild: true,
+      ...otherProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Content,
+        {
+          "aria-label": ariaLabel ?? elementTitle,
+          ref: textElementRef,
+          ellipsisTarget,
+          lines,
+          content,
+          "data-name": "ellipsis-with-tooltip",
+          "data-overflowing": overflowing,
+          "data-lines": lines,
+          "data-content": content,
+          "data-ellipsis-target": ellipsisTarget,
+          ...contentProps,
+          children
+        }
+      )
+    }
+  );
+}
+const EllipsisWithTooltip = React.forwardRef(_EllipsisWithTooltip);
 exports.Alert = Alert$1.Alert;
 exports.Link = Alert$1.Link;
 exports.ScreenReaderOnly = Alert$1.ScreenReaderOnly;
-exports.IconButton = TablePaginationActions.IconButton;
-exports.TablePaginationActions = TablePaginationActions.TablePaginationActions;
-exports.Typography = TablePaginationActions.Typography;
+exports.IconButton = cssUtils.IconButton;
+exports.TablePaginationActions = cssUtils.TablePaginationActions;
+exports.Typography = cssUtils.Typography;
 exports.MenuItem = MenuItem.MenuItem;
 exports.AUTOCOMPLETE_GROUP_HEADER_PROPERTY = AUTOCOMPLETE_GROUP_HEADER_PROPERTY;
 exports.AccordionGroup = AccordionGroup;
@@ -5614,6 +5906,7 @@ exports.DialogFooter = DialogFooter;
 exports.DialogHeader = DialogHeader;
 exports.DialogPaper = DialogPaper;
 exports.DialogStepper = DialogStepper;
+exports.EllipsisWithTooltip = EllipsisWithTooltip;
 exports.FilterDropdown = FilterDropdown;
 exports.FilterDropdownMenuItem = FilterDropdownMenuItem;
 exports.LabelWithIndicator = LabelWithIndicator;
@@ -5623,6 +5916,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;