@carto/meridian-ds 2.8.0 → 2.9.0

package/CHANGELOG.md

@@ -4,6 +4,11 @@
 
 ## 2.0
 
+### 2.9.0
+
+- New EmptyState component [#330](https://github.com/CartoDB/meridian-ds/pull/330)
+- Tests: Add console mock utility and enhance test setup [#315](https://github.com/CartoDB/meridian-ds/pull/315)
+
 ### 2.8.0
 
 - New Loader and CircularProgress components [#329](https://github.com/CartoDB/meridian-ds/pull/329)
@@ -30,7 +35,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/{MenuItem-DRUK149i.js → MenuItem-Cx5lTXXm.js}

@@ -2,6 +2,18 @@ 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-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-CgF4QdGi.cjs → MenuItem-DoBJsRR_.cjs}

@@ -3,6 +3,18 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 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

@@ -8,7 +8,7 @@ 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-CgF4QdGi.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,
@@ -776,7 +776,7 @@ function _MultipleSelectField({
 const MultipleSelectField = React.forwardRef(_MultipleSelectField);
 const StyledToggleButtonGroup = material.styled(material.ToggleButtonGroup, {
   shouldForwardProp: (prop) => prop !== "backgroundColor"
-})();
+})(() => ({}));
 function _ToggleButtonGroup({
   children,
   variant = "floating",
@@ -890,7 +890,7 @@ function _Loader({
           secondLabel && /* @__PURE__ */ jsxRuntime.jsx(
             cssUtils.Typography,
             {
-              variant: "body2",
+              variant: "caption",
               color: "textSecondary",
               ...secondLabelProps,
               id: labelText ? void 0 : "loader-label",
@@ -1929,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": {
@@ -1964,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 }),
@@ -2644,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
@@ -2836,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,
@@ -3411,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",
@@ -3479,7 +3479,7 @@ function DialogFooter({
     topContent,
     !!alertContent && /* @__PURE__ */ jsxRuntime.jsx(DividerTop, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      Root$2,
+      Root$3,
       {
         ...otherProps,
         dark,
@@ -3575,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",
@@ -3656,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;
@@ -3942,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
@@ -3982,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,
@@ -4666,6 +4666,122 @@ function DateTimePicker({
     }
   );
 }
+const EMPTY_STATE_WIDTH = 592;
+const Root = material.styled(material.Stack, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "spacing" && prop !== "contentHeight"
+})(({ size = "medium", spacing, contentHeight, theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: theme.spacing(spacing ?? (size === "small" ? 1 : 2)),
+  height: contentHeight,
+  minHeight: contentHeight
+}));
+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, {
+  shouldForwardProp: (prop) => prop !== "contentWidth"
+})(({ contentWidth, theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  textAlign: "center",
+  maxWidth: contentWidth ?? EMPTY_STATE_WIDTH,
+  margin: "0 auto"
+}));
+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 ? 32 : 48);
+  const iconColor = (iconProps == null ? void 0 : iconProps.color) === null ? null : (iconProps == null ? void 0 : iconProps.color) ?? "text.disabled";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Root,
+    {
+      ref,
+      alignItems: "center",
+      size,
+      spacing,
+      contentHeight,
+      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, { contentWidth, children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx(
+            cssUtils.Typography,
+            {
+              variant: isSmall ? "body2" : "body1",
+              color: "textSecondary",
+              component: "div",
+              ...titleProps,
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsxRuntime.jsx(
+            cssUtils.Typography,
+            {
+              variant: isSmall ? "caption" : "body2",
+              color: "textSecondary",
+              component: "div",
+              ...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",
@@ -6188,6 +6304,7 @@ exports.DialogHeader = DialogHeader;
 exports.DialogPaper = DialogPaper;
 exports.DialogStepper = DialogStepper;
 exports.EllipsisWithTooltip = EllipsisWithTooltip;
+exports.EmptyState = EmptyState;
 exports.FilterDropdown = FilterDropdown;
 exports.FilterDropdownMenuItem = FilterDropdownMenuItem;
 exports.LabelWithIndicator = LabelWithIndicator;

package/dist/components/index.js

@@ -8,7 +8,7 @@ import { S as ScreenReaderOnly, A as Alert$1 } from "../Alert-BZPM5zpX.js";
 import { L } from "../Alert-BZPM5zpX.js";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
-import { M as MenuItem$1 } from "../MenuItem-DRUK149i.js";
+import { M as MenuItem$1, a as getThemeColor } from "../MenuItem-Cx5lTXXm.js";
 import "cartocolor";
 import { FixedSizeList } from "react-window";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -223,7 +223,7 @@ function SplitButton({
     )
   ] });
 }
-const Root$5 = styled(Box)(({ theme }) => ({
+const Root$6 = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing(0.5)
@@ -257,7 +257,7 @@ function _LabelWithIndicator({
   typographyProps
 }, ref) {
   return /* @__PURE__ */ jsxs(
-    Root$5,
+    Root$6,
     {
       ref,
       "data-testid": dataTestId,
@@ -776,7 +776,7 @@ function _MultipleSelectField({
 const MultipleSelectField = forwardRef(_MultipleSelectField);
 const StyledToggleButtonGroup = styled(ToggleButtonGroup$1, {
   shouldForwardProp: (prop) => prop !== "backgroundColor"
-})();
+})(() => ({}));
 function _ToggleButtonGroup({
   children,
   variant = "floating",
@@ -890,7 +890,7 @@ function _Loader({
           secondLabel && /* @__PURE__ */ jsx(
             Typography,
             {
-              variant: "body2",
+              variant: "caption",
               color: "textSecondary",
               ...secondLabelProps,
               id: labelText ? void 0 : "loader-label",
@@ -1929,7 +1929,7 @@ function SecondaryText({ text }) {
     }
   );
 }
-const Root$4 = styled(AppBar$1)(({ theme }) => ({
+const Root$5 = styled(AppBar$1)(({ theme }) => ({
   backgroundColor: theme.palette.brand.appBarMain,
   userSelect: "none",
   "& .MuiTypography-root": {
@@ -1964,7 +1964,7 @@ function _AppBar({
   onClickMenu,
   ...otherProps
 }, ref) {
-  return /* @__PURE__ */ jsx(Root$4, { ...otherProps, ref, "data-name": "app-bar", children: /* @__PURE__ */ jsxs(Toolbar, { children: [
+  return /* @__PURE__ */ jsx(Root$5, { ...otherProps, ref, "data-name": "app-bar", children: /* @__PURE__ */ jsxs(Toolbar, { children: [
     /* @__PURE__ */ jsxs(BrandElements, { children: [
       showBurgerMenu && /* @__PURE__ */ jsx(BurgerMenu, { onClickMenu }),
       brandLogo && /* @__PURE__ */ jsx(BrandLogo, { logo: brandLogo }),
@@ -2644,7 +2644,7 @@ function CodeAreaInput({
     }
   );
 }
-const Root$3 = styled(FormControl)(() => ({
+const Root$4 = styled(FormControl)(() => ({
   display: "flex",
   flexDirection: "column",
   flex: 1
@@ -2836,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__ */ jsxs(
-    Root$3,
+    Root$4,
     {
       size,
       error,
@@ -3411,7 +3411,7 @@ function DialogAlert({
 }) {
   return /* @__PURE__ */ jsx(StyledAlert, { severity, ...otherProps, "data-name": "dialog-alert", children });
 }
-const Root$2 = styled(Box, {
+const Root$3 = styled(Box, {
   shouldForwardProp: (prop) => !["dark", "hasChildren"].includes(prop)
 })(({ dark, hasChildren, theme }) => ({
   flex: "0 0 auto",
@@ -3479,7 +3479,7 @@ function DialogFooter({
     topContent,
     !!alertContent && /* @__PURE__ */ jsx(DividerTop, {}),
     /* @__PURE__ */ jsxs(
-      Root$2,
+      Root$3,
       {
         ...otherProps,
         dark,
@@ -3575,7 +3575,7 @@ function DialogConfirmation({
     }
   );
 }
-const Root$1 = styled(Box)(({ theme }) => ({
+const Root$2 = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -3656,7 +3656,7 @@ function DialogStepper({
   stepsLabels,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Root$1, { ...props, "data-name": "dialog-stepper", children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, children: stepsLabels.map((stepLabel, idx) => {
+  return /* @__PURE__ */ jsx(Root$2, { ...props, "data-name": "dialog-stepper", children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, children: stepsLabels.map((stepLabel, idx) => {
     const step = idx + 1;
     const isCurrent = step === currentStep;
     const isCompleted = step < currentStep;
@@ -3942,7 +3942,7 @@ function ClearButton({
     }
   ) });
 }
-const Root = styled(Box, {
+const Root$1 = styled(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
@@ -3982,7 +3982,7 @@ function DateFieldContainer({
   readOnly,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Root, { ...props, size, variant, readOnly, children });
+  return /* @__PURE__ */ jsx(Root$1, { ...props, size, variant, readOnly, children });
 }
 function DatePicker({
   handleClear,
@@ -4666,6 +4666,122 @@ function DateTimePicker({
     }
   );
 }
+const EMPTY_STATE_WIDTH = 592;
+const Root = styled(Stack, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "spacing" && prop !== "contentHeight"
+})(({ size = "medium", spacing, contentHeight, theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: theme.spacing(spacing ?? (size === "small" ? 1 : 2)),
+  height: contentHeight,
+  minHeight: contentHeight
+}));
+const IconWrapper = styled(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 : getThemeColor(iconColor, theme);
+  return {
+    display: "flex",
+    ".MuiSvgIcon-root": {
+      width: finalIconSize,
+      height: finalIconSize,
+      fontSize: finalIconSize,
+      ...colorValue && { color: colorValue }
+    }
+  };
+});
+const TextContent = styled(Stack, {
+  shouldForwardProp: (prop) => prop !== "contentWidth"
+})(({ contentWidth, theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  textAlign: "center",
+  maxWidth: contentWidth ?? EMPTY_STATE_WIDTH,
+  margin: "0 auto"
+}));
+const Actions = styled(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 ? 32 : 48);
+  const iconColor = (iconProps == null ? void 0 : iconProps.color) === null ? null : (iconProps == null ? void 0 : iconProps.color) ?? "text.disabled";
+  return /* @__PURE__ */ jsxs(
+    Root,
+    {
+      ref,
+      alignItems: "center",
+      size,
+      spacing,
+      contentHeight,
+      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__ */ jsx(IconWrapper, { size, iconSize, iconColor, children: icon }),
+        hasAnyTextContent && /* @__PURE__ */ jsxs(TextContent, { contentWidth, children: [
+          title && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: isSmall ? "body2" : "body1",
+              color: "textSecondary",
+              component: "div",
+              ...titleProps,
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: isSmall ? "caption" : "body2",
+              color: "textSecondary",
+              component: "div",
+              ...descriptionProps,
+              children: description
+            }
+          )
+        ] }),
+        actions && /* @__PURE__ */ jsx(Actions, { size, spacing, children: actions }),
+        children
+      ]
+    }
+  );
+}
+const EmptyState = forwardRef(_EmptyState);
 const DEFAULT_ITEMS = [{ outlinedBullet: false, value: "" }];
 const Content$2 = styled("ul")(({ theme }) => ({
   listStyle: "none",
@@ -6183,6 +6299,7 @@ export {
   DialogPaper,
   DialogStepper,
   EllipsisWithTooltip,
+  EmptyState,
   FilterDropdown,
   FilterDropdownMenuItem,
   IconButton,

package/dist/theme/index.cjs

@@ -3,12 +3,12 @@ var _a, _b, _c, _d, _e, _f, _g, _h;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const material = require("@mui/material");
 const paletteUtils = require("../palette-utils-B9ybmwiI.cjs");
+const MenuItem = require("../MenuItem-DoBJsRR_.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const cssUtils = require("../css-utils-CH7es90t.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const xDatePickers = require("@mui/x-date-pickers");
-const MenuItem = require("../MenuItem-CgF4QdGi.cjs");
 const themeShadows = [
   "none",
   // 0
@@ -44,11 +44,6 @@ const themeShadows = [
   "0px 11px 15px -7px rgba(44, 48, 50, 0.12), 0px 24px 38px 3px rgba(44, 48, 50, 0.08), 0px 9px 46px 8px rgba(44, 48, 50, 0.04)"
   // 24
 ];
-function getPixelToRem(px) {
-  const fontBase = 16;
-  const rem = 1 / fontBase * px + "rem";
-  return rem;
-}
 const baseTypography = {
   htmlFontSize: 16,
   fontFamily: "Inter, sans-serif",
@@ -62,77 +57,77 @@ const baseTypography = {
   h1: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 600,
-    fontSize: getPixelToRem(96),
+    fontSize: MenuItem.getPixelToRem(96),
     lineHeight: 1.167,
     letterSpacing: "-1.5px"
   },
   h2: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 600,
-    fontSize: getPixelToRem(60),
+    fontSize: MenuItem.getPixelToRem(60),
     lineHeight: 1.2,
     letterSpacing: "-0.5px"
   },
   h3: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 600,
-    fontSize: getPixelToRem(48),
+    fontSize: MenuItem.getPixelToRem(48),
     lineHeight: 1.167,
     letterSpacing: 0
   },
   h4: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 600,
-    fontSize: getPixelToRem(32),
+    fontSize: MenuItem.getPixelToRem(32),
     lineHeight: 1.25,
     letterSpacing: 0
   },
   h5: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 600,
-    fontSize: getPixelToRem(24),
+    fontSize: MenuItem.getPixelToRem(24),
     lineHeight: 1.167,
     letterSpacing: 0
   },
   h6: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 500,
-    fontSize: getPixelToRem(18),
+    fontSize: MenuItem.getPixelToRem(18),
     lineHeight: 1.333,
     letterSpacing: 0
   },
   subtitle1: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 500,
-    fontSize: getPixelToRem(16),
+    fontSize: MenuItem.getPixelToRem(16),
     lineHeight: 1.5,
     letterSpacing: 0
   },
   subtitle2: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 600,
-    fontSize: getPixelToRem(13),
+    fontSize: MenuItem.getPixelToRem(13),
     lineHeight: 1.538,
     letterSpacing: 0
   },
   body1: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 400,
-    fontSize: getPixelToRem(16),
+    fontSize: MenuItem.getPixelToRem(16),
     lineHeight: 1.5,
     letterSpacing: 0
   },
   body2: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 400,
-    fontSize: getPixelToRem(13),
+    fontSize: MenuItem.getPixelToRem(13),
     lineHeight: 1.538,
     letterSpacing: 0
   },
   button: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 500,
-    fontSize: getPixelToRem(13),
+    fontSize: MenuItem.getPixelToRem(13),
     lineHeight: 1.538,
     letterSpacing: 0,
     textTransform: "inherit"
@@ -140,14 +135,14 @@ const baseTypography = {
   caption: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 400,
-    fontSize: getPixelToRem(11),
+    fontSize: MenuItem.getPixelToRem(11),
     lineHeight: 1.454,
     letterSpacing: 0
   },
   overline: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 500,
-    fontSize: getPixelToRem(10),
+    fontSize: MenuItem.getPixelToRem(10),
     lineHeight: 1.2,
     letterSpacing: "1.2px",
     textTransform: "uppercase"
@@ -167,7 +162,7 @@ const customTypography = {
   code1: {
     fontFamily: '"Overpass Mono", monospace',
     fontWeight: 400,
-    fontSize: getPixelToRem(16),
+    fontSize: MenuItem.getPixelToRem(16),
     lineHeight: 1.5,
     letterSpacing: 0,
     fontVariantLigatures: "no-common-ligatures"
@@ -175,7 +170,7 @@ const customTypography = {
   code2: {
     fontFamily: '"Overpass Mono", monospace',
     fontWeight: 400,
-    fontSize: getPixelToRem(14),
+    fontSize: MenuItem.getPixelToRem(14),
     lineHeight: 1.428,
     letterSpacing: 0,
     fontVariantLigatures: "no-common-ligatures"
@@ -183,7 +178,7 @@ const customTypography = {
   code3: {
     fontFamily: '"Overpass Mono", monospace',
     fontWeight: 400,
-    fontSize: getPixelToRem(12),
+    fontSize: MenuItem.getPixelToRem(12),
     lineHeight: 1.333,
     letterSpacing: 0,
     fontVariantLigatures: "no-common-ligatures"

package/dist/theme/index.js

@@ -2,13 +2,13 @@ var _a, _b, _c, _d, _e, _f, _g, _h;
 import { alpha, Tooltip, responsiveFontSizes, createTheme } from "@mui/material";
 import { c as commonPalette } from "../palette-utils-BHqJlHm9.js";
 import { g } from "../palette-utils-BHqJlHm9.js";
+import { g as getPixelToRem, M as MenuItem } from "../MenuItem-Cx5lTXXm.js";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { T as Typography, a as TablePaginationActions, I as ICON_SIZE_LARGE, b as ICON_SIZE_MEDIUM, c as ICON_SIZE_SMALL, g as getSpacing, e as ellipsisStyles, M as MENU_ITEM_SIZE_DEFAULT, d as MENU_LIST_MAX_SIZE, f as MENU_ITEM_SIZE_DENSE, A as APPBAR_SIZE, B as BREAKPOINTS, S as SPACING } from "../css-utils-CjUBRJVK.js";
 import { h, N } from "../css-utils-CjUBRJVK.js";
 import { Cancel, EventOutlined, ChevronRightOutlined, ChevronLeftOutlined, ExpandMoreOutlined, CheckCircleOutlined, InfoOutlined } from "@mui/icons-material";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { renderDigitalClockTimeView } from "@mui/x-date-pickers";
-import { M as MenuItem } from "../MenuItem-DRUK149i.js";
 const themeShadows = [
   "none",
   // 0
@@ -44,11 +44,6 @@ const themeShadows = [
   "0px 11px 15px -7px rgba(44, 48, 50, 0.12), 0px 24px 38px 3px rgba(44, 48, 50, 0.08), 0px 9px 46px 8px rgba(44, 48, 50, 0.04)"
   // 24
 ];
-function getPixelToRem(px) {
-  const fontBase = 16;
-  const rem = 1 / fontBase * px + "rem";
-  return rem;
-}
 const baseTypography = {
   htmlFontSize: 16,
   fontFamily: "Inter, sans-serif",

package/dist/types/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,4 @@
+import { EmptyStateProps } from './types';
+declare const EmptyState: import('react').ForwardRefExoticComponent<EmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;
+export default EmptyState;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/types/components/EmptyState/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAkGzC,QAAA,MAAM,UAAU,4GAA2D,CAAA;AAC3E,eAAe,UAAU,CAAA"}

package/dist/types/components/EmptyState/EmptyState.stories.d.ts

@@ -0,0 +1,188 @@
+import { EmptyStateProps } from './types';
+type EmptyStateStoryProps = EmptyStateProps & {
+    /**
+     * The color of the icon.
+     * It supports any color from the theme (e.g., 'text.disabled', 'primary.main', 'text.secondary').
+     * @default 'text.disabled'
+     */
+    iconColor?: string;
+    /**
+     * The size of the icon.
+     * @default undefined
+     */
+    iconSize?: number | string;
+};
+declare const options: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<EmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        spacing: {
+            control: "number";
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        contentWidth: {
+            control: "number";
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        contentHeight: {
+            control: "number";
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        title: {
+            control: "text";
+        };
+        description: {
+            control: "text";
+        };
+        sx: {
+            control: "object";
+        };
+        iconProps: {
+            control: "boolean";
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        iconColor: {
+            control: "text";
+            description: string;
+            if: {
+                arg: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        iconSize: {
+            control: "select";
+            options: number[];
+            description: string;
+            if: {
+                arg: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        title: string;
+        description: string;
+    };
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+        status: {
+            type: string;
+        };
+    };
+};
+export default options;
+export declare const Playground: {
+    render: ({ iconSize, iconColor, iconProps, ...args }: EmptyStateStoryProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        title: string;
+        icon: import("react/jsx-runtime").JSX.Element;
+    };
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export declare const Size: {
+    render: (args: EmptyStateStoryProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        icon: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const Icon: {
+    render: (args: EmptyStateStoryProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        size: string;
+        title: string;
+    };
+};
+export declare const TitleAndDescription: {
+    render: (args: EmptyStateStoryProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        icon: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const Actions: {
+    render: (args: EmptyStateStoryProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        icon: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const IconProps: {
+    render: (args: EmptyStateStoryProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        icon: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const ContentDimensions: {
+    render: (args: EmptyStateStoryProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        title: string;
+        description: string;
+        actions: import("react/jsx-runtime").JSX.Element;
+        icon: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const CustomSXStyles: {
+    render: ({ iconSize, iconColor, iconProps, ...args }: EmptyStateStoryProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        sx: {
+            padding: number;
+            border: string;
+            borderRadius: number;
+        };
+        icon: import("react/jsx-runtime").JSX.Element;
+    };
+};
+//# sourceMappingURL=EmptyState.stories.d.ts.map

package/dist/types/components/EmptyState/EmptyState.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyState/EmptyState.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAKzC,KAAK,oBAAoB,GAAG,eAAe,GAAG;IAC5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B,CAAA;AAED,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FyB,CAAA;AACtC,eAAe,OAAO,CAAA;AAmXtB,eAAO,MAAM,UAAU;0DA5WpB,oBAAoB;;;;;;;;;;CAqXtB,CAAA;AAED,eAAO,MAAM,IAAI;mBAjUW,oBAAoB;;;;CAsU/C,CAAA;AAED,eAAO,MAAM,IAAI;mBAnXW,oBAAoB;;;;;CAyX/C,CAAA;AAED,eAAO,MAAM,mBAAmB;mBAlMG,oBAAoB;;;;CAuMtD,CAAA;AAED,eAAO,MAAM,OAAO;mBArJW,oBAAoB;;;;CA0JlD,CAAA;AAED,eAAO,MAAM,SAAS;mBA7TW,oBAAoB;;;;CAkUpD,CAAA;AAED,eAAO,MAAM,iBAAiB;mBA5QW,oBAAoB;;;;;;;CAyR5D,CAAA;AAED,eAAO,MAAM,cAAc;0DA1axB,oBAAoB;;;;;;;;;CAobtB,CAAA"}

package/dist/types/components/EmptyState/EmptyState.styled.d.ts

@@ -0,0 +1,38 @@
+import { EmptyStateProps } from './types';
+export declare const EMPTY_STATE_WIDTH = 592;
+/**
+ * Props for the Root styled component.
+ */
+type RootProps = {
+    size?: EmptyStateProps['size'];
+    spacing?: number;
+    contentHeight?: number | string;
+};
+/**
+ * Props for the IconWrapper styled component.
+ */
+type IconWrapperProps = {
+    size?: EmptyStateProps['size'];
+    iconSize?: number | string;
+    iconColor?: string | null;
+};
+export declare const Root: import('@emotion/styled').StyledComponent<import('@mui/material').StackOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, keyof import('@mui/material/OverridableComponent').CommonProps | keyof import('@mui/material').StackOwnProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & RootProps, {}, {}>;
+export declare const IconWrapper: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & IconWrapperProps, {}, {}>;
+type TextContentProps = {
+    contentWidth?: number | string;
+};
+export declare const TextContent: import('@emotion/styled').StyledComponent<import('@mui/material').StackOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, keyof import('@mui/material/OverridableComponent').CommonProps | keyof import('@mui/material').StackOwnProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & TextContentProps, {}, {}>;
+export declare const Actions: import('@emotion/styled').StyledComponent<import('@mui/material').StackOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, keyof import('@mui/material/OverridableComponent').CommonProps | keyof import('@mui/material').StackOwnProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    size?: EmptyStateProps["size"];
+    spacing?: number;
+}, {}, {}>;
+export {};
+//# sourceMappingURL=EmptyState.styled.d.ts.map

package/dist/types/components/EmptyState/EmptyState.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyState/EmptyState.styled.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,eAAO,MAAM,iBAAiB,MAAM,CAAA;AAEpC;;GAEG;AACH,KAAK,SAAS,GAAG;IACf,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAChC,CAAA;AAED;;GAEG;AACH,KAAK,gBAAgB,GAAG;IACtB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,IAAI;;iNAUd,CAAA;AAEH,eAAO,MAAM,WAAW;;kLAwBtB,CAAA;AAEF,KAAK,gBAAgB,GAAG;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC/B,CAAA;AAED,eAAO,MAAM,WAAW;;wNAUrB,CAAA;AAEH,eAAO,MAAM,OAAO;;;WAGX,eAAe,CAAC,MAAM,CAAC;cACpB,MAAM;UAUf,CAAA"}

package/dist/types/components/EmptyState/EmptyState.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=EmptyState.test.d.ts.map

package/dist/types/components/EmptyState/EmptyState.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.test.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyState/EmptyState.test.tsx"],"names":[],"mappings":""}

package/dist/types/components/EmptyState/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EmptyState } from './EmptyState';
+export type * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/EmptyState/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,mBAAmB,SAAS,CAAA"}

package/dist/types/components/EmptyState/types.d.ts

@@ -0,0 +1,82 @@
+import { ReactElement, ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { TypographyProps } from '../Typography';
+/**
+ * Props for the EmptyState component.
+ */
+export type EmptyStateProps = {
+    /**
+     * The icon to display in the empty state.
+     * */
+    icon?: ReactElement;
+    /**
+     * The title to display in the empty state.
+     * */
+    title?: ReactElement | string;
+    /**
+     * The Typography props to pass to the title component.
+     * */
+    titleProps?: TypographyProps;
+    /**
+     * The description to display in the empty state.
+     * */
+    description?: ReactElement | string;
+    /**
+     * The Typography props to pass to the description component.
+     * */
+    descriptionProps?: TypographyProps;
+    /**
+     * The actions to display in the empty state. Can be used to add a button, link, or other actionable elements to the empty state.
+     * */
+    actions?: ReactNode;
+    /**
+     * The children to display in the empty state. Can be used to add extra content to the empty state.
+     * */
+    children?: ReactNode;
+    /**
+     * The size affects overall design details like the icon size, typography variants, and the spacing between the icon and the content.
+     * @default 'medium'
+     * */
+    size?: 'small' | 'medium';
+    /**
+     * Overrides the default gap between content items. Accepts theme spacing values (e.g., 1, 2, 3).
+     * @default 2 (theme.spacing(2))
+     * */
+    spacing?: number;
+    /**
+     * The height of the component.
+     * If using a number, the pixel unit is assumed.
+     * If using a string, you need to provide the CSS unit, for example '3rem'.
+     * @default undefined
+     */
+    contentHeight?: number | string;
+    /**
+     * The height of the component.
+     * If using a number, the pixel unit is assumed.
+     * If using a string, you need to provide the CSS unit, for example '3rem'.
+     * @default 592
+     */
+    contentWidth?: number | string;
+    /**
+     * The props to pass to the icon wrapper component. If not provided, the icon will be sized based on the size prop.
+     * */
+    iconProps?: {
+        /**
+         * The size of the icon.
+         * @default undefined
+         * */
+        size?: number | string;
+        /**
+         * The color of the icon. It supports any color from the theme
+         * (e.g., "text.disabled", "primary.main", "text.secondary").
+         * Set to null to preserve the SVG's original color.
+         * @default 'text.disabled'
+         * */
+        color?: string | null;
+    };
+    /**
+     * The props to pass to the container element to override the default styles.
+     */
+    sx?: SxProps<Theme>;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types/components/EmptyState/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyState/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;SAEK;IACL,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB;;SAEK;IACL,KAAK,CAAC,EAAE,YAAY,GAAG,MAAM,CAAA;IAC7B;;SAEK;IACL,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B;;SAEK;IACL,WAAW,CAAC,EAAE,YAAY,GAAG,MAAM,CAAA;IACnC;;SAEK;IACL,gBAAgB,CAAC,EAAE,eAAe,CAAA;IAClC;;SAEK;IACL,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;SAEK;IACL,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;SAGK;IACL,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB;;;SAGK;IACL,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B;;SAEK;IACL,SAAS,CAAC,EAAE;QACV;;;aAGK;QACL,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;QACtB;;;;;aAKK;QACL,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KACtB,CAAA;IACD;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CACpB,CAAA"}

package/dist/types/components/Loader/Loader.stories.d.ts

@@ -122,9 +122,9 @@ export declare const ContentHeight: {
 export declare const CustomSXStyles: {
     render: ({ size, color, iconProps, ...args }: LoaderStoryProps) => import("react/jsx-runtime").JSX.Element;
     args: {
-        sx: {
-            border: string;
-        };
+        padding: number;
+        border: string;
+        borderRadius: number;
     };
 };
 //# sourceMappingURL=Loader.stories.d.ts.map

package/dist/types/components/Loader/Loader.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Loader/Loader.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAE3D,KAAK,gBAAgB,GAAG,WAAW,GAAG;IACpC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;IAC3C;;;OAGG;IACH,IAAI,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAA;CACrC,CAAA;AAED,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DqB,CAAA;AAClC,eAAe,OAAO,CAAA;AA0GtB,eAAO,MAAM,UAAU;kDAxGgC,gBAAgB;;;;;;CA6GtE,CAAA;AAED,eAAO,MAAM,KAAK;gCApGwB,gBAAgB;CAsGzD,CAAA;AAED,eAAO,MAAM,IAAI;iCAnFyB,gBAAgB;CAqFzD,CAAA;AAED,eAAO,MAAM,mBAAmB;uCAtEiB,gBAAgB;CAwEhE,CAAA;AAED,eAAO,MAAM,eAAe;kDA3H2B,gBAAgB;;;;;;CAkItE,CAAA;AAED,eAAO,MAAM,aAAa;kDApI6B,gBAAgB;;;;CAyItE,CAAA;AAED,eAAO,MAAM,cAAc;kDA3I4B,gBAAgB;;;;;;CAgJtE,CAAA"}
+{"version":3,"file":"Loader.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Loader/Loader.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAE3D,KAAK,gBAAgB,GAAG,WAAW,GAAG;IACpC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;IAC3C;;;OAGG;IACH,IAAI,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAA;CACrC,CAAA;AAED,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DqB,CAAA;AAClC,eAAe,OAAO,CAAA;AA0GtB,eAAO,MAAM,UAAU;kDAxGgC,gBAAgB;;;;;;CA6GtE,CAAA;AAED,eAAO,MAAM,KAAK;gCApGwB,gBAAgB;CAsGzD,CAAA;AAED,eAAO,MAAM,IAAI;iCAnFyB,gBAAgB;CAqFzD,CAAA;AAED,eAAO,MAAM,mBAAmB;uCAtEiB,gBAAgB;CAwEhE,CAAA;AAED,eAAO,MAAM,eAAe;kDA3H2B,gBAAgB;;;;;;CAkItE,CAAA;AAED,eAAO,MAAM,aAAa;kDApI6B,gBAAgB;;;;CAyItE,CAAA;AAED,eAAO,MAAM,cAAc;kDA3I4B,gBAAgB;;;;;;CAkJtE,CAAA"}

package/dist/types/components/index.d.ts

@@ -17,6 +17,7 @@ export * from './AppBar';
 export * from './CodeArea';
 export * from './DatePickers';
 export * from './Dialog';
+export * from './EmptyState';
 export * from './TooltipData';
 export * from './AccordionGroup';
 export * from './Alert';
@@ -49,6 +50,7 @@ export type * from './AppBar';
 export type * from './CodeArea';
 export type * from './DatePickers';
 export type * from './Dialog';
+export type * from './EmptyState';
 export type * from './TooltipData';
 export type * from './AccordionGroup';
 export type * from './Alert';

package/dist/types/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,0BAA0B,CAAA;AACxC,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AAErC,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,sBAAsB,CAAA;AACzC,mBAAmB,iBAAiB,CAAA;AACpC,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,qBAAqB,CAAA;AACxC,mBAAmB,cAAc,CAAA;AACjC,mBAAmB,cAAc,CAAA;AACjC,mBAAmB,QAAQ,CAAA;AAC3B,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,oBAAoB,CAAA;AACvC,mBAAmB,oBAAoB,CAAA;AACvC,mBAAmB,qBAAqB,CAAA;AACxC,mBAAmB,qBAAqB,CAAA;AACxC,mBAAmB,gBAAgB,CAAA;AACnC,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,YAAY,CAAA;AAC/B,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,kBAAkB,CAAA;AACrC,mBAAmB,SAAS,CAAA;AAC5B,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,kBAAkB,CAAA;AACrC,mBAAmB,QAAQ,CAAA;AAC3B,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,YAAY,CAAA;AAC/B,mBAAmB,0BAA0B,CAAA;AAC7C,mBAAmB,OAAO,CAAA;AAC1B,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,0BAA0B,CAAA;AACxC,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AAErC,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,sBAAsB,CAAA;AACzC,mBAAmB,iBAAiB,CAAA;AACpC,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,qBAAqB,CAAA;AACxC,mBAAmB,cAAc,CAAA;AACjC,mBAAmB,cAAc,CAAA;AACjC,mBAAmB,QAAQ,CAAA;AAC3B,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,oBAAoB,CAAA;AACvC,mBAAmB,oBAAoB,CAAA;AACvC,mBAAmB,qBAAqB,CAAA;AACxC,mBAAmB,qBAAqB,CAAA;AACxC,mBAAmB,gBAAgB,CAAA;AACnC,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,YAAY,CAAA;AAC/B,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,cAAc,CAAA;AACjC,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,kBAAkB,CAAA;AACrC,mBAAmB,SAAS,CAAA;AAC5B,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,kBAAkB,CAAA;AACrC,mBAAmB,QAAQ,CAAA;AAC3B,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,YAAY,CAAA;AAC/B,mBAAmB,0BAA0B,CAAA;AAC7C,mBAAmB,OAAO,CAAA;AAC1B,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,uBAAuB,CAAA"}

package/dist/types/custom-icons/__docs__/CustomIcons.stories.d.ts

@@ -43,6 +43,14 @@ declare const options: {
     };
 };
 export default options;
+export declare const SearchIcons: {
+    render: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
 export declare const AllIcons: {
     render: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/types/custom-icons/__docs__/CustomIcons.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomIcons.stories.d.ts","sourceRoot":"","sources":["../../../../src/custom-icons/__docs__/CustomIcons.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,YAAY,EAAY,MAAM,eAAe,CAAA;AAM5D,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDoB,CAAA;AACjC,eAAe,OAAO,CAAA;AA+GtB,eAAO,MAAM,QAAQ;oBA3GI,YAAY;CA6GpC,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;CAKlB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;CAKjB,CAAA"}
+{"version":3,"file":"CustomIcons.stories.d.ts","sourceRoot":"","sources":["../../../../src/custom-icons/__docs__/CustomIcons.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,YAAY,EAAiB,MAAM,eAAe,CAAA;AAKjE,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD4B,CAAA;AACzC,eAAe,OAAO,CAAA;AAiLtB,eAAO,MAAM,WAAW;oBA7KW,YAAY;;;;;;CAkL9C,CAAA;AAED,eAAO,MAAM,QAAQ;oBAlHY,YAAY;CAoH5C,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;CAKlB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;CAKjB,CAAA"}

package/dist/types/utils/theme-utils.d.ts

@@ -1,2 +1,18 @@
+import { Theme } from '@mui/material';
 export declare function getPixelToRem(px: number): string;
+/**
+ * Gets a color value from the theme palette using a string path.
+ * Supports theme color paths (e.g., 'text.disabled', 'primary.main', etc.)
+ *
+ * @param colorPath - The dot-separated path to the color in the theme palette (e.g., 'text.disabled', 'primary.main')
+ * @param theme - The MUI theme object
+ * @returns The color value as a string, or undefined if the path doesn't exist
+ *
+ * @example
+ * ```ts
+ * const color = getThemeColor('text.disabled', theme) // Returns theme.palette.text.disabled
+ * const primaryColor = getThemeColor('primary.main', theme) // Returns theme.palette.primary.main
+ * ```
+ */
+export declare function getThemeColor(colorPath: string, theme: Theme): string | undefined;
 //# sourceMappingURL=theme-utils.d.ts.map

package/dist/types/utils/theme-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/theme-utils.ts"],"names":[],"mappings":"AACA,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,UAKvC"}
+{"version":3,"file":"theme-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/theme-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAGrC,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,UAKvC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,KAAK,GACX,MAAM,GAAG,SAAS,CAYpB"}

package/dist/types/widgets/FeatureSelectionWidgetUI/FeatureSelectionWidgetUI.test.d.ts

@@ -1,2 +1 @@
-export {};
 //# sourceMappingURL=FeatureSelectionWidgetUI.test.d.ts.map

package/dist/types/widgets/FeatureSelectionWidgetUI/FeatureSelectionWidgetUI.test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureSelectionWidgetUI.test.d.ts","sourceRoot":"","sources":["../../../../src/widgets/FeatureSelectionWidgetUI/FeatureSelectionWidgetUI.test.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"FeatureSelectionWidgetUI.test.d.ts","sourceRoot":"","sources":["../../../../src/widgets/FeatureSelectionWidgetUI/FeatureSelectionWidgetUI.test.tsx"],"names":[],"mappings":"AAGA,OAAO,yBAAyB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {