@carto/meridian-ds 2.8.0-alpha-empty-state.3 → 2.8.0-alpha-empty-state.4

package/dist/components/index.cjs

@@ -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",
@@ -4668,19 +4668,15 @@ 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"
-  })
-);
+  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 }) => {
@@ -4696,12 +4692,16 @@ const IconWrapper = material.styled(material.Box, {
     }
   };
 });
-const TextContent = material.styled(material.Stack)(({ theme }) => ({
+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"
+  textAlign: "center",
+  maxWidth: contentWidth ?? EMPTY_STATE_WIDTH,
+  margin: "0 auto"
 }));
 const Actions = material.styled(material.Stack, {
   shouldForwardProp: (prop) => prop !== "size" && prop !== "spacing"
@@ -4733,7 +4733,7 @@ function _EmptyState({
   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";
+  const iconColor = (iconProps == null ? void 0 : iconProps.color) === null ? null : (iconProps == null ? void 0 : iconProps.color) ?? "text.disabled";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Root,
     {
@@ -4742,7 +4742,6 @@ function _EmptyState({
       size,
       spacing,
       contentHeight,
-      contentWidth,
       sx,
       ...otherProps,
       "data-name": "empty-state",
@@ -4754,7 +4753,7 @@ function _EmptyState({
       "data-icon-color": iconColor ?? "null",
       children: [
         icon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { size, iconSize, iconColor, children: icon }),
-        hasAnyTextContent && /* @__PURE__ */ jsxRuntime.jsxs(TextContent, { children: [
+        hasAnyTextContent && /* @__PURE__ */ jsxRuntime.jsxs(TextContent, { contentWidth, children: [
           title && /* @__PURE__ */ jsxRuntime.jsx(
             cssUtils.Typography,
             {

package/dist/components/index.js

@@ -890,7 +890,7 @@ function _Loader({
           secondLabel && /* @__PURE__ */ jsx(
             Typography,
             {
-              variant: "body2",
+              variant: "caption",
               color: "textSecondary",
               ...secondLabelProps,
               id: labelText ? void 0 : "loader-label",
@@ -4668,19 +4668,15 @@ function DateTimePicker({
 }
 const EMPTY_STATE_WIDTH = 576;
 const Root = styled(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"
-  })
-);
+  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 }) => {
@@ -4696,12 +4692,16 @@ const IconWrapper = styled(Box, {
     }
   };
 });
-const TextContent = styled(Stack)(({ theme }) => ({
+const TextContent = styled(Stack, {
+  shouldForwardProp: (prop) => prop !== "contentWidth"
+})(({ contentWidth, theme }) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   gap: theme.spacing(0.5),
-  textAlign: "center"
+  textAlign: "center",
+  maxWidth: contentWidth ?? EMPTY_STATE_WIDTH,
+  margin: "0 auto"
 }));
 const Actions = styled(Stack, {
   shouldForwardProp: (prop) => prop !== "size" && prop !== "spacing"
@@ -4733,7 +4733,7 @@ function _EmptyState({
   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";
+  const iconColor = (iconProps == null ? void 0 : iconProps.color) === null ? null : (iconProps == null ? void 0 : iconProps.color) ?? "text.disabled";
   return /* @__PURE__ */ jsxs(
     Root,
     {
@@ -4742,7 +4742,6 @@ function _EmptyState({
       size,
       spacing,
       contentHeight,
-      contentWidth,
       sx,
       ...otherProps,
       "data-name": "empty-state",
@@ -4754,7 +4753,7 @@ function _EmptyState({
       "data-icon-color": iconColor ?? "null",
       children: [
         icon && /* @__PURE__ */ jsx(IconWrapper, { size, iconSize, iconColor, children: icon }),
-        hasAnyTextContent && /* @__PURE__ */ jsxs(TextContent, { children: [
+        hasAnyTextContent && /* @__PURE__ */ jsxs(TextContent, { contentWidth, children: [
           title && /* @__PURE__ */ jsx(
             Typography,
             {

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;AAmGzC,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;AAgGzC,QAAA,MAAM,UAAU,4GAA2D,CAAA;AAC3E,eAAe,UAAU,CAAA"}

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

@@ -124,32 +124,36 @@ declare const options: {
 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 Icon: {
+export declare const Size: {
     render: (args: EmptyStateStoryProps) => import("react/jsx-runtime").JSX.Element;
     args: {
-        size: string;
-        title: string;
+        icon: import("react/jsx-runtime").JSX.Element;
     };
 };
-export declare const TextContent: {
+export declare const Icon: {
     render: (args: EmptyStateStoryProps) => import("react/jsx-runtime").JSX.Element;
     args: {
-        icon: import("react/jsx-runtime").JSX.Element;
+        size: string;
+        title: string;
     };
 };
-export declare const Actions: {
+export declare const TitleAndDescription: {
     render: (args: EmptyStateStoryProps) => import("react/jsx-runtime").JSX.Element;
     args: {
         icon: import("react/jsx-runtime").JSX.Element;
     };
 };
-export declare const Size: {
+export declare const Actions: {
     render: (args: EmptyStateStoryProps) => import("react/jsx-runtime").JSX.Element;
     args: {
         icon: import("react/jsx-runtime").JSX.Element;
@@ -164,6 +168,9 @@ export declare const IconProps: {
 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;
     };
 };

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,MAAM,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B,CAAA;AAED,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FyB,CAAA;AACtC,eAAe,OAAO,CAAA;AA2VtB,eAAO,MAAM,UAAU;0DApVpB,oBAAoB;;;;;;CAyVtB,CAAA;AAED,eAAO,MAAM,IAAI;mBAhVW,oBAAoB;;;;;CAsV/C,CAAA;AAED,eAAO,MAAM,WAAW;mBAnLW,oBAAoB;;;;CAwLtD,CAAA;AAED,eAAO,MAAM,OAAO;mBA1IW,oBAAoB;;;;CA+IlD,CAAA;AAED,eAAO,MAAM,IAAI;mBA3TW,oBAAoB;;;;CAgU/C,CAAA;AAED,eAAO,MAAM,SAAS;mBAjSW,oBAAoB;;;;CAsSpD,CAAA;AAED,eAAO,MAAM,iBAAiB;mBAhQW,oBAAoB;;;;CAqQ5D,CAAA;AAED,eAAO,MAAM,cAAc;0DAtYxB,oBAAoB;;;;;;;;;CAgZtB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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

@@ -7,7 +7,6 @@ type RootProps = {
     size?: EmptyStateProps['size'];
     spacing?: number;
     contentHeight?: number | string;
-    contentWidth?: number | string;
 };
 /**
  * Props for the IconWrapper styled component.
@@ -23,9 +22,12 @@ export declare const Root: import('@emotion/styled').StyledComponent<import('@mu
 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>, {}, {}>;
+}, 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> & {

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":"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"}
+{"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/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/package.json

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