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

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");
@@ -4683,23 +4683,16 @@ const Root = material.styled(material.Stack, {
 );
 const IconWrapper = material.styled(material.Box, {
   shouldForwardProp: (prop) => prop !== "size" && prop !== "iconSize" && prop !== "iconColor"
-})(({ size, iconSize, iconColor = "default", theme }) => {
+})(({ 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,
-      ...iconColor === "primary" && {
-        color: theme.palette.primary.relatedLight
-      },
-      ...iconColor === "secondary" && {
-        color: theme.palette.secondary.relatedLight
-      },
-      ...iconColor === "default" && {
-        color: theme.palette.text.disabled
-      }
+      ...colorValue && { color: colorValue }
     }
   };
 });
@@ -4733,12 +4726,14 @@ function _EmptyState({
   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 == null ? void 0 : iconProps.color) ?? "default";
+  const iconColor = iconProps && "color" in iconProps && iconProps.color === null ? null : (iconProps == null ? void 0 : iconProps.color) ?? "text.disabled";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Root,
     {
@@ -4748,15 +4743,15 @@ function _EmptyState({
       spacing,
       contentHeight,
       contentWidth,
-      "data-name": "empty-state",
       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,
+      "data-icon-color": iconColor ?? "null",
       children: [
         icon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { size, iconSize, iconColor, children: icon }),
         hasAnyTextContent && /* @__PURE__ */ jsxRuntime.jsxs(TextContent, { children: [
@@ -4765,6 +4760,7 @@ function _EmptyState({
             {
               variant: isSmall ? "body2" : "body1",
               color: "textSecondary",
+              ...titleProps,
               children: title
             }
           ),
@@ -4773,6 +4769,7 @@ function _EmptyState({
             {
               variant: isSmall ? "caption" : "body2",
               color: "textSecondary",
+              ...descriptionProps,
               children: description
             }
           )

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";
@@ -4683,23 +4683,16 @@ const Root = styled(Stack, {
 );
 const IconWrapper = styled(Box, {
   shouldForwardProp: (prop) => prop !== "size" && prop !== "iconSize" && prop !== "iconColor"
-})(({ size, iconSize, iconColor = "default", theme }) => {
+})(({ 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,
-      ...iconColor === "primary" && {
-        color: theme.palette.primary.relatedLight
-      },
-      ...iconColor === "secondary" && {
-        color: theme.palette.secondary.relatedLight
-      },
-      ...iconColor === "default" && {
-        color: theme.palette.text.disabled
-      }
+      ...colorValue && { color: colorValue }
     }
   };
 });
@@ -4733,12 +4726,14 @@ function _EmptyState({
   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 == null ? void 0 : iconProps.color) ?? "default";
+  const iconColor = iconProps && "color" in iconProps && iconProps.color === null ? null : (iconProps == null ? void 0 : iconProps.color) ?? "text.disabled";
   return /* @__PURE__ */ jsxs(
     Root,
     {
@@ -4748,15 +4743,15 @@ function _EmptyState({
       spacing,
       contentHeight,
       contentWidth,
-      "data-name": "empty-state",
       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,
+      "data-icon-color": iconColor ?? "null",
       children: [
         icon && /* @__PURE__ */ jsx(IconWrapper, { size, iconSize, iconColor, children: icon }),
         hasAnyTextContent && /* @__PURE__ */ jsxs(TextContent, { children: [
@@ -4765,6 +4760,7 @@ function _EmptyState({
             {
               variant: isSmall ? "body2" : "body1",
               color: "textSecondary",
+              ...titleProps,
               children: title
             }
           ),
@@ -4773,6 +4769,7 @@ function _EmptyState({
             {
               variant: isSmall ? "caption" : "body2",
               color: "textSecondary",
+              ...descriptionProps,
               children: description
             }
           )

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.map

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

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

@@ -2,10 +2,10 @@ import { EmptyStateProps } from './types';
 type EmptyStateStoryProps = EmptyStateProps & {
     /**
      * The color of the icon.
-     * It supports primary, secondary and default colors.
-     * @default 'default'
+     * It supports any color from the theme (e.g., 'text.disabled', 'primary.main', 'text.secondary').
+     * @default 'text.disabled'
      */
-    iconColor?: 'primary' | 'secondary' | 'default';
+    iconColor?: string;
     /**
      * The size of the icon.
      * @default undefined
@@ -76,8 +76,7 @@ declare const options: {
             };
         };
         iconColor: {
-            control: "select";
-            options: string[];
+            control: "text";
             description: string;
             if: {
                 arg: string;
@@ -151,7 +150,9 @@ export declare const CustomSXStyles: {
     render: ({ iconSize, iconColor, iconProps, ...args }: EmptyStateStoryProps) => import("react/jsx-runtime").JSX.Element;
     args: {
         sx: {
+            padding: number;
             border: string;
+            borderRadius: number;
         };
     };
 };

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

@@ -1 +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,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B,CAAA;AAED,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FyB,CAAA;AACtC,eAAe,OAAO,CAAA;AAoStB,eAAO,MAAM,UAAU;0DA7RpB,oBAAoB;;;;;;CAkStB,CAAA;AAED,eAAO,MAAM,WAAW;mBA3JW,oBAAoB;CA6JtD,CAAA;AAED,eAAO,MAAM,OAAO;mBA3HW,oBAAoB;CA6HlD,CAAA;AAED,eAAO,MAAM,IAAI;mBAjSW,oBAAoB;CAmS/C,CAAA;AAED,eAAO,MAAM,SAAS;mBApQW,oBAAoB;CAsQpD,CAAA;AAED,eAAO,MAAM,iBAAiB;mBA5NW,oBAAoB;CA8N5D,CAAA;AAED,eAAO,MAAM,cAAc;0DAxTxB,oBAAoB;;;;;;CA6TtB,CAAA"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FyB,CAAA;AACtC,eAAe,OAAO,CAAA;AA4StB,eAAO,MAAM,UAAU;0DArSpB,oBAAoB;;;;;;CA0StB,CAAA;AAED,eAAO,MAAM,WAAW;mBAvKW,oBAAoB;CAyKtD,CAAA;AAED,eAAO,MAAM,OAAO;mBA3HW,oBAAoB;CA6HlD,CAAA;AAED,eAAO,MAAM,IAAI;mBAzSW,oBAAoB;CA2S/C,CAAA;AAED,eAAO,MAAM,SAAS;mBA5QW,oBAAoB;CA8QpD,CAAA;AAED,eAAO,MAAM,iBAAiB;mBAxOW,oBAAoB;CA0O5D,CAAA;AAED,eAAO,MAAM,cAAc;0DAhUxB,oBAAoB;;;;;;;;CAyUtB,CAAA"}

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

@@ -15,14 +15,7 @@ type RootProps = {
 type IconWrapperProps = {
     size?: EmptyStateProps['size'];
     iconSize?: number | string;
-    iconColor?: NonNullable<EmptyStateProps['iconProps']>['color'];
-};
-/**
- * Props for the Actions styled component.
- */
-type ActionsProps = {
-    size?: EmptyStateProps['size'];
-    spacing?: number;
+    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;
@@ -35,6 +28,9 @@ export declare const TextContent: import('@emotion/styled').StyledComponent<impo
 }, keyof import('@mui/material/OverridableComponent').CommonProps | keyof import('@mui/material').StackOwnProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 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> & ActionsProps, {}, {}>;
+}, 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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyState/EmptyState.styled.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,eAAO,MAAM,iBAAiB,MAAM,CAAA;AACpC;;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;IAC/B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC/B,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,WAAW,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;CAC/D,CAAA;AAED;;GAEG;AACH,KAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,IAAI;;iNAiBhB,CAAA;AAED,eAAO,MAAM,WAAW;;kLA2BtB,CAAA;AAEF,eAAO,MAAM,WAAW;;qMAMrB,CAAA;AAEH,eAAO,MAAM,OAAO;;oNAWjB,CAAA"}
+{"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;IAC/B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC/B,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;;iNAiBhB,CAAA;AAED,eAAO,MAAM,WAAW;;kLAwBtB,CAAA;AAEF,eAAO,MAAM,WAAW;;qMAMrB,CAAA;AAEH,eAAO,MAAM,OAAO;;;WAGX,eAAe,CAAC,MAAM,CAAC;cACpB,MAAM;UAUf,CAAA"}

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

@@ -1,5 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import { SxProps, Theme } from '@mui/material';
+import { TypographyProps } from '../Typography';
 /**
  * Props for the EmptyState component.
  */
@@ -12,10 +13,18 @@ export type EmptyStateProps = {
      * 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.
      * */
@@ -58,10 +67,12 @@ export type EmptyStateProps = {
          * */
         size?: number | string;
         /**
-         * The color of the icon.
-         * @default 'default'
+         * 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?: 'primary' | 'secondary' | 'default';
+        color?: string | null;
     };
     /**
      * The props to pass to the container element to override the default styles.

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

@@ -1 +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;AAE9C;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;SAEK;IACL,IAAI,EAAE,YAAY,CAAA;IAClB;;SAEK;IACL,KAAK,CAAC,EAAE,YAAY,GAAG,MAAM,CAAA;IAC7B;;SAEK;IACL,WAAW,CAAC,EAAE,YAAY,GAAG,MAAM,CAAA;IACnC;;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;;;aAGK;QACL,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;KAC5C,CAAA;IACD;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CACpB,CAAA"}
+{"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,EAAE,YAAY,CAAA;IAClB;;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/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/package.json

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