@carto/meridian-ds 2.7.0 → 2.8.0-alpha-empty-state.2

package/CHANGELOG.md

@@ -2,8 +2,17 @@
 
 ## Unreleased
 
+- New EmptyState component [#330](https://github.com/CartoDB/meridian-ds/pull/330)
+
 ## 2.0
 
+### 2.8.0
+
+- New Loader and CircularProgress components [#329](https://github.com/CartoDB/meridian-ds/pull/329)
+- Dialog: improve customization [#313](https://github.com/CartoDB/meridian-ds/pull/313)
+- ToggleButtonGroup: move styles to the theme [#319](https://github.com/CartoDB/meridian-ds/pull/319)
+- Custom Icons: CreateFolder,FolderEmpty [#331](https://github.com/CartoDB/meridian-ds/pull/331)
+
 ### 2.7.0
 
 - New SearchField component [#308](https://github.com/CartoDB/meridian-ds/pull/308)
@@ -23,7 +32,7 @@
 ### 2.6.1
 
 - Custom Icons: FoldersStackedOutlined,RedoAlt,UndoAlt [#317](https://github.com/CartoDB/meridian-ds/pull/317)
-- Tabs: remove box-shadow in vertical mode[#302](https://github.com/CartoDB/meridian-ds/pull/302)
+- Tabs: remove box-shadow in vertical mode [#302](https://github.com/CartoDB/meridian-ds/pull/302)
 
 ### 2.6.0
 

package/dist/{Alert-BfDnWlbD.js → Alert-BZPM5zpX.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-BHYA7By_.js";
+import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography } from "./css-utils-CjUBRJVK.js";
 const ScreenReaderOnly = styled("span")(() => ({
   position: "absolute",
   width: 1,

package/dist/{Alert-CPvYAHO_.cjs → Alert-C4W0H_uN.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-DjvM17Vb.cjs");
+const cssUtils = require("./css-utils-CH7es90t.cjs");
 const ScreenReaderOnly = material.styled("span")(() => ({
   position: "absolute",
   width: 1,

package/dist/{MenuItem-D90EfuGS.js → MenuItem-Cx5lTXXm.js}

@@ -1,7 +1,19 @@
 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-BHYA7By_.js";
+import { f as MENU_ITEM_SIZE_DENSE, h as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-CjUBRJVK.js";
+function getPixelToRem(px) {
+  const fontBase = 16;
+  const rem = 1 / fontBase * px + "rem";
+  return rem;
+}
+function getThemeColor(colorPath, theme) {
+  const colorValue = colorPath.split(".").reduce(
+    (acc, part) => acc && typeof acc === "object" && part in acc ? acc[part] : void 0,
+    theme.palette
+  );
+  return typeof colorValue === "string" ? colorValue : void 0;
+}
 const StyledMenuItem = styled(MenuItem$1, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop
@@ -175,5 +187,7 @@ function _MenuItem({
 }
 const MenuItem = forwardRef(_MenuItem);
 export {
-  MenuItem as M
+  MenuItem as M,
+  getThemeColor as a,
+  getPixelToRem as g
 };

package/dist/{MenuItem-ZSYcQBtg.cjs → MenuItem-DoBJsRR_.cjs}

@@ -2,7 +2,19 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const cssUtils = require("./css-utils-DjvM17Vb.cjs");
+const cssUtils = require("./css-utils-CH7es90t.cjs");
+function getPixelToRem(px) {
+  const fontBase = 16;
+  const rem = 1 / fontBase * px + "rem";
+  return rem;
+}
+function getThemeColor(colorPath, theme) {
+  const colorValue = colorPath.split(".").reduce(
+    (acc, part) => acc && typeof acc === "object" && part in acc ? acc[part] : void 0,
+    theme.palette
+  );
+  return typeof colorValue === "string" ? colorValue : void 0;
+}
 const StyledMenuItem = material.styled(material.MenuItem, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop
@@ -176,3 +188,5 @@ function _MenuItem({
 }
 const MenuItem = React.forwardRef(_MenuItem);
 exports.MenuItem = MenuItem;
+exports.getPixelToRem = getPixelToRem;
+exports.getThemeColor = getThemeColor;

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-DjvM17Vb.cjs");
-const Alert$1 = require("../Alert-CPvYAHO_.cjs");
+const cssUtils = require("../css-utils-CH7es90t.cjs");
+const Alert$1 = require("../Alert-C4W0H_uN.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
-const MenuItem = require("../MenuItem-ZSYcQBtg.cjs");
+const MenuItem = require("../MenuItem-DoBJsRR_.cjs");
 require("cartocolor");
 const reactWindow = require("react-window");
 const reactCodemirror2 = require("react-codemirror2");
@@ -223,7 +223,7 @@ function SplitButton({
     )
   ] });
 }
-const Root$5 = material.styled(material.Box)(({ theme }) => ({
+const Root$6 = material.styled(material.Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing(0.5)
@@ -257,7 +257,7 @@ function _LabelWithIndicator({
   typographyProps
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Root$5,
+    Root$6,
     {
       ref,
       "data-testid": dataTestId,
@@ -775,77 +775,8 @@ function _MultipleSelectField({
 }
 const MultipleSelectField = React.forwardRef(_MultipleSelectField);
 const StyledToggleButtonGroup = material.styled(material.ToggleButtonGroup, {
-  shouldForwardProp: (prop) => prop !== "variant" && prop !== "backgroundColor"
-})(({ variant, backgroundColor, theme }) => ({
-  // Variants
-  ...variant === "contained" && {
-    boxShadow: "none"
-  },
-  ...variant === "unbounded" && {
-    boxShadow: "none",
-    borderRadius: theme.spacing(0.5),
-    "& .MuiDivider-root": {
-      height: theme.spacing(4),
-      "&.MuiToggleButtonGroup-groupedHorizontal": {
-        height: theme.spacing(4)
-      },
-      "&.MuiToggleButtonGroup-groupedVertical": {
-        height: "auto",
-        width: theme.spacing(4),
-        margin: `${theme.spacing(0.5, 0, 1)} !important`,
-        borderRadius: "0 !important"
-      }
-    },
-    "& .MuiToggleButton-sizeSmall": {
-      margin: 0,
-      "&.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
-        margin: 0
-      },
-      "& + .MuiDivider-root.MuiToggleButtonGroup-groupedHorizontal": {
-        height: theme.spacing(3)
-      },
-      "& + .MuiDivider-root.MuiToggleButtonGroup-groupedVertical": {
-        height: "auto",
-        width: theme.spacing(3)
-      }
-    },
-    ".MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
-      margin: 0,
-      "&:first-of-type": {
-        marginLeft: 0
-      },
-      "&:not(:last-of-type)": {
-        marginRight: theme.spacing(0.5)
-      }
-    },
-    "&.MuiToggleButtonGroup-horizontal:not(.MuiDivider-root)": {
-      ".MuiToggleButtonGroup-grouped": {
-        margin: theme.spacing(0, 0.5)
-      }
-    },
-    "&.MuiToggleButtonGroup-vertical:not(.MuiDivider-root)": {
-      ".MuiToggleButtonGroup-grouped": {
-        margin: theme.spacing(0, 0, 0.5),
-        "&:not(:last-of-type)": {
-          marginRight: 0
-        },
-        "&:last-of-type": {
-          marginBottom: 0
-        }
-      }
-    }
-  },
-  // Colors
-  ...backgroundColor === "primary" && {
-    backgroundColor: theme.palette.background.paper
-  },
-  ...backgroundColor === "secondary" && {
-    backgroundColor: theme.palette.background.default
-  },
-  ...backgroundColor === "transparent" && {
-    backgroundColor: "transparent"
-  }
-}));
+  shouldForwardProp: (prop) => prop !== "backgroundColor"
+})();
 function _ToggleButtonGroup({
   children,
   variant = "floating",
@@ -861,6 +792,7 @@ function _ToggleButtonGroup({
     StyledToggleButtonGroup,
     {
       ...rest,
+      ref,
       variant,
       backgroundColor: resolvedBackgroundColor,
       orientation,
@@ -870,12 +802,107 @@ function _ToggleButtonGroup({
       "data-size": size,
       "data-background-color": resolvedBackgroundColor,
       "data-name": "toggle-button-group",
-      ref,
       children
     }
   );
 }
 const ToggleButtonGroup = React.forwardRef(_ToggleButtonGroup);
+function _CircularProgress({
+  color = "primary",
+  size = 40,
+  thickness = 4,
+  ...otherProps
+}, ref) {
+  const muiColor = color === "neutral" ? void 0 : color;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.CircularProgress,
+    {
+      ...otherProps,
+      ref,
+      size,
+      thickness,
+      color: muiColor,
+      "data-name": "circular-progress",
+      "data-color": color,
+      "data-thickness": thickness
+    }
+  );
+}
+const CircularProgress = React.forwardRef(
+  _CircularProgress
+);
+const Wrapper = material.styled(material.Stack, {
+  shouldForwardProp: (prop) => prop !== "contentHeight"
+})(({ contentHeight, theme }) => ({
+  alignItems: "center",
+  justifyContent: "center",
+  gap: theme.spacing(1.5),
+  width: "100%",
+  ...contentHeight && {
+    flex: 1,
+    height: contentHeight,
+    minHeight: contentHeight
+  }
+}));
+function _Loader({
+  label,
+  secondLabel,
+  contentHeight,
+  labelProps,
+  secondLabelProps,
+  iconProps,
+  sx,
+  ...otherProps
+}, ref) {
+  const labelText = cssUtils.useTranslationWithFallback("c4r.utils.loader.label", label);
+  const hasAnyLabel = labelText || secondLabel;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Wrapper,
+    {
+      contentHeight,
+      sx,
+      ...otherProps,
+      ref,
+      "aria-busy": true,
+      "data-name": "loader",
+      "data-content-height": contentHeight,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CircularProgress,
+          {
+            color: "primary",
+            size: 40,
+            ...iconProps,
+            "aria-labelledby": hasAnyLabel ? "loader-label" : void 0
+          }
+        ),
+        hasAnyLabel && /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "column", alignItems: "center", children: [
+          labelText && /* @__PURE__ */ jsxRuntime.jsx(
+            cssUtils.Typography,
+            {
+              variant: "body2",
+              color: "textSecondary",
+              ...labelProps,
+              id: "loader-label",
+              children: labelText
+            }
+          ),
+          secondLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            cssUtils.Typography,
+            {
+              variant: "body2",
+              color: "textSecondary",
+              ...secondLabelProps,
+              id: labelText ? void 0 : "loader-label",
+              children: secondLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const Loader = React.forwardRef(_Loader);
 async function copyString(value) {
   return await navigator.clipboard.writeText(value);
 }
@@ -1902,7 +1929,7 @@ function SecondaryText({ text }) {
     }
   );
 }
-const Root$4 = material.styled(material.AppBar)(({ theme }) => ({
+const Root$5 = material.styled(material.AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.brand.appBarMain,
   userSelect: "none",
   "& .MuiTypography-root": {
@@ -1937,7 +1964,7 @@ function _AppBar({
   onClickMenu,
   ...otherProps
 }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$4, { ...otherProps, ref, "data-name": "app-bar", children: /* @__PURE__ */ jsxRuntime.jsxs(material.Toolbar, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$5, { ...otherProps, ref, "data-name": "app-bar", children: /* @__PURE__ */ jsxRuntime.jsxs(material.Toolbar, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(BrandElements, { children: [
       showBurgerMenu && /* @__PURE__ */ jsxRuntime.jsx(BurgerMenu, { onClickMenu }),
       brandLogo && /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo: brandLogo }),
@@ -2617,7 +2644,7 @@ function CodeAreaInput({
     }
   );
 }
-const Root$3 = material.styled(material.FormControl)(() => ({
+const Root$4 = material.styled(material.FormControl)(() => ({
   display: "flex",
   flexDirection: "column",
   flex: 1
@@ -2809,7 +2836,7 @@ function CodeAreaField({
   const readOnly = (options == null ? void 0 : options.readOnly) ?? false;
   const lineNumbers = (options == null ? void 0 : options.lineNumbers) ?? true;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Root$3,
+    Root$4,
     {
       size,
       error,
@@ -3206,6 +3233,8 @@ function DialogHeader({
   "aria-label": ariaLabel,
   closeIcon,
   closeTooltipText,
+  tooltipProps,
+  iconButtonProps,
   ...otherProps
 }) {
   const closeTooltipLabel = cssUtils.useTranslationWithFallback(
@@ -3231,7 +3260,15 @@ function DialogHeader({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(ItemsWrapper$1, { children: [
           secondaryActions,
-          onClose && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: closeTooltipLabel, placement: "left", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: onClose, children: closeIcon || /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { "data-testid": "CloseIcon" }) }) })
+          onClose && /* @__PURE__ */ jsxRuntime.jsx(
+            material.Tooltip,
+            {
+              title: closeTooltipLabel,
+              placement: "left",
+              ...tooltipProps,
+              children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: onClose, ...iconButtonProps, children: closeIcon || /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { "data-testid": "CloseIcon" }) })
+            }
+          )
         ] })
       ] }),
       children
@@ -3374,7 +3411,7 @@ function DialogAlert({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledAlert, { severity, ...otherProps, "data-name": "dialog-alert", children });
 }
-const Root$2 = material.styled(material.Box, {
+const Root$3 = material.styled(material.Box, {
   shouldForwardProp: (prop) => !["dark", "hasChildren"].includes(prop)
 })(({ dark, hasChildren, theme }) => ({
   flex: "0 0 auto",
@@ -3442,7 +3479,7 @@ function DialogFooter({
     topContent,
     !!alertContent && /* @__PURE__ */ jsxRuntime.jsx(DividerTop, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      Root$2,
+      Root$3,
       {
         ...otherProps,
         dark,
@@ -3495,10 +3532,13 @@ function DialogConfirmation({
   opened,
   "data-testid": dataTestId,
   "aria-label": ariaLabel,
+  slideProps,
   ...alertProps
 }) {
   const containerRef = React.useRef(null);
   const theme = material.useTheme();
+  const timeout = (slideProps == null ? void 0 : slideProps.timeout) ?? 350;
+  const direction = (slideProps == null ? void 0 : slideProps.direction) ?? "up";
   const handleClickAway = () => {
     if (onClickAway) {
       onClickAway();
@@ -3515,13 +3555,17 @@ function DialogConfirmation({
       children: /* @__PURE__ */ jsxRuntime.jsx(ClickAwayListener, { onClickAway: handleClickAway, children: /* @__PURE__ */ jsxRuntime.jsx(
         material.Slide,
         {
-          direction: "up",
-          in: opened,
-          container: containerRef.current,
           mountOnEnter: true,
           unmountOnExit: true,
           easing: theme.transitions.easing.easeOut,
-          timeout: 350,
+          direction,
+          timeout,
+          ...slideProps,
+          in: opened,
+          container: containerRef.current,
+          "data-name": "dialog-confirmation-slide",
+          "data-direction": direction,
+          "data-timeout": timeout,
           children: /* @__PURE__ */ jsxRuntime.jsx(AnimationWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(BackdropContent, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(DialogAlert, { severity, ...alertProps, children }),
             /* @__PURE__ */ jsxRuntime.jsx(DialogActions, { children: actions })
@@ -3531,7 +3575,7 @@ function DialogConfirmation({
     }
   );
 }
-const Root$1 = material.styled(material.Box)(({ theme }) => ({
+const Root$2 = material.styled(material.Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -3612,7 +3656,7 @@ function DialogStepper({
   stepsLabels,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$1, { ...props, "data-name": "dialog-stepper", children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex" }, children: stepsLabels.map((stepLabel, idx) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$2, { ...props, "data-name": "dialog-stepper", children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex" }, children: stepsLabels.map((stepLabel, idx) => {
     const step = idx + 1;
     const isCurrent = step === currentStep;
     const isCompleted = step < currentStep;
@@ -3898,7 +3942,7 @@ function ClearButton({
     }
   ) });
 }
-const Root = material.styled(material.Box, {
+const Root$1 = material.styled(material.Box, {
   shouldForwardProp: (prop) => !["size", "variant", "readOnly"].includes(prop)
 })(({ size, variant, readOnly, theme }) => ({
   // There is no specific slot to change TextField styles at DatePicker level, so we need to wrap our component to isolate this override. https://mui.com/x/react-date-pickers/date-picker/#customization
@@ -3938,7 +3982,7 @@ function DateFieldContainer({
   readOnly,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root, { ...props, size, variant, readOnly, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$1, { ...props, size, variant, readOnly, children });
 }
 function DatePicker({
   handleClear,
@@ -4622,6 +4666,121 @@ function DateTimePicker({
     }
   );
 }
+const EMPTY_STATE_WIDTH = 576;
+const Root = material.styled(material.Stack, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "spacing" && prop !== "contentHeight" && prop !== "contentWidth"
+})(
+  ({ size = "medium", spacing, contentHeight, contentWidth, theme }) => ({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.spacing(spacing ?? (size === "small" ? 1 : 2)),
+    maxWidth: contentWidth ?? EMPTY_STATE_WIDTH,
+    height: contentHeight,
+    minHeight: contentHeight,
+    margin: "0 auto"
+  })
+);
+const IconWrapper = material.styled(material.Box, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "iconSize" && prop !== "iconColor"
+})(({ size, iconSize, iconColor, theme }) => {
+  const finalIconSize = iconSize ?? (size === "small" ? theme.spacing(5) : theme.spacing(6));
+  const colorValue = iconColor === null || iconColor === void 0 ? void 0 : MenuItem.getThemeColor(iconColor, theme);
+  return {
+    display: "flex",
+    ".MuiSvgIcon-root": {
+      width: finalIconSize,
+      height: finalIconSize,
+      fontSize: finalIconSize,
+      ...colorValue && { color: colorValue }
+    }
+  };
+});
+const TextContent = material.styled(material.Stack)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  textAlign: "center"
+}));
+const Actions = material.styled(material.Stack, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "spacing"
+})(({ size = "medium", spacing, theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(spacing ?? (size === "small" ? 1 : 2)),
+  marginTop: theme.spacing(size === "small" ? 1 : 2),
+  ".MuiButton-root + .MuiButton-root": {
+    marginLeft: 0
+  }
+}));
+function _EmptyState({
+  icon,
+  title,
+  description,
+  actions,
+  children,
+  size = "medium",
+  spacing,
+  iconProps,
+  contentWidth = EMPTY_STATE_WIDTH,
+  contentHeight,
+  sx,
+  titleProps,
+  descriptionProps,
+  ...otherProps
+}, ref) {
+  const hasAnyTextContent = title || description;
+  const isSmall = size === "small";
+  const iconSize = (iconProps == null ? void 0 : iconProps.size) ?? (isSmall ? 40 : 48);
+  const iconColor = iconProps && "color" in iconProps && iconProps.color === null ? null : (iconProps == null ? void 0 : iconProps.color) ?? "text.disabled";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Root,
+    {
+      ref,
+      alignItems: "center",
+      size,
+      spacing,
+      contentHeight,
+      contentWidth,
+      sx,
+      ...otherProps,
+      "data-name": "empty-state",
+      "data-size": size,
+      "data-spacing": spacing,
+      "data-content-height": contentHeight,
+      "data-content-width": contentWidth,
+      "data-icon-size": iconSize,
+      "data-icon-color": iconColor ?? "null",
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { size, iconSize, iconColor, children: icon }),
+        hasAnyTextContent && /* @__PURE__ */ jsxRuntime.jsxs(TextContent, { children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx(
+            cssUtils.Typography,
+            {
+              variant: isSmall ? "body2" : "body1",
+              color: "textSecondary",
+              ...titleProps,
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsxRuntime.jsx(
+            cssUtils.Typography,
+            {
+              variant: isSmall ? "caption" : "body2",
+              color: "textSecondary",
+              ...descriptionProps,
+              children: description
+            }
+          )
+        ] }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx(Actions, { size, spacing, children: actions }),
+        children
+      ]
+    }
+  );
+}
+const EmptyState = React.forwardRef(_EmptyState);
 const DEFAULT_ITEMS = [{ outlinedBullet: false, value: "" }];
 const Content$2 = material.styled("ul")(({ theme }) => ({
   listStyle: "none",
@@ -5071,7 +5230,10 @@ const SearchInputAdornment = material.styled(material.InputAdornment, {
       duration: theme.transitions.duration.short
     }),
     "&.MuiInputAdornment-positionStart": {
-      marginLeft: minimized ? theme.spacing(1) : void 0
+      marginLeft: minimized ? theme.spacing(2) : void 0,
+      "&.MuiInputAdornment-sizeSmall": {
+        marginLeft: minimized ? theme.spacing(1) : void 0
+      }
     },
     // End adornment
     "&.MuiInputAdornment-positionEnd": {
@@ -6114,6 +6276,7 @@ exports.Autocomplete = Autocomplete;
 exports.AutocompleteList = AutocompleteList;
 exports.Avatar = Avatar;
 exports.Button = Button;
+exports.CircularProgress = CircularProgress;
 exports.CodeAreaDialog = CodeAreaDialog;
 exports.CodeAreaDialogConfirmation = CodeAreaDialogConfirmation;
 exports.CodeAreaDialogContent = CodeAreaDialogContent;
@@ -6140,9 +6303,11 @@ exports.DialogHeader = DialogHeader;
 exports.DialogPaper = DialogPaper;
 exports.DialogStepper = DialogStepper;
 exports.EllipsisWithTooltip = EllipsisWithTooltip;
+exports.EmptyState = EmptyState;
 exports.FilterDropdown = FilterDropdown;
 exports.FilterDropdownMenuItem = FilterDropdownMenuItem;
 exports.LabelWithIndicator = LabelWithIndicator;
+exports.Loader = Loader;
 exports.Menu = Menu;
 exports.MenuItemFilter = MenuItemFilter;
 exports.MenuList = MenuList;