@carto/meridian-ds 2.6.1 → 2.7.0-alpha-loader.1

package/CHANGELOG.md

@@ -2,8 +2,26 @@
 
 ## Unreleased
 
+- New Loader component [#329](https://github.com/CartoDB/meridian-ds/pull/329)
+
 ## 2.0
 
+### 2.7.0
+
+- New SearchField component [#308](https://github.com/CartoDB/meridian-ds/pull/308)
+- Custom Icons: ApiAccessToken, ApiBaseUrl, AppCredentials, M2mOauthClient,SpaOauthClient, WorkflowApiEndpoint [#325](https://github.com/CartoDB/meridian-ds/pull/325)
+- Avatar: move size styles to the theme [#321](https://github.com/CartoDB/meridian-ds/pull/321)
+- Alert: move neutral styles to the theme [#320](https://github.com/CartoDB/meridian-ds/pull/320)
+- Handle empty buttonFooterLabelId in CodeAreaFooter [#323](https://github.com/CartoDB/meridian-ds/pull/323)
+- Dialog: add a property to override content gap [#322](https://github.com/CartoDB/meridian-ds/pull/322)
+- Improve translations handling in Meridian (part 4) [#309](https://github.com/CartoDB/meridian-ds/pull/309)
+- Improve translations handling in Meridian (part 3) [#306](https://github.com/CartoDB/meridian-ds/pull/306)
+- Improve translations handling in Meridian (part 2) [#305](https://github.com/CartoDB/meridian-ds/pull/305)
+- Improve translations handling in Meridian (part 1) [#304](https://github.com/CartoDB/meridian-ds/pull/304)
+- FilterDropdown: improve customization [#312](https://github.com/CartoDB/meridian-ds/pull/312)
+- CopiableComponent: improve customization [#311](https://github.com/CartoDB/meridian-ds/pull/311)
+- AppBar: disallow user selection of text [#324](https://github.com/CartoDB/meridian-ds/pull/324)
+
 ### 2.6.1
 
 - Custom Icons: FoldersStackedOutlined,RedoAlt,UndoAlt [#317](https://github.com/CartoDB/meridian-ds/pull/317)

package/dist/{Alert-DHd9hCGz.js → Alert-BZPM5zpX.js}

@@ -3,8 +3,7 @@ import { forwardRef, useState } from "react";
 import { styled, Link as Link$1, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
 import { OpenInNewOutlined } from "@mui/icons-material";
 import "cartocolor";
-import { u as useImperativeIntl, c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, T as Typography } from "./css-utils-WejOmkiI.js";
-import { useIntl } from "react-intl";
+import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography } from "./css-utils-CjUBRJVK.js";
 const ScreenReaderOnly = styled("span")(() => ({
   position: "absolute",
   width: 1,
@@ -16,14 +15,6 @@ const ScreenReaderOnly = styled("span")(() => ({
   whiteSpace: "nowrap",
   border: 0
 }));
-function useTranslationFallback(translationKey, customText) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
-  if (customText !== void 0 && customText !== null) {
-    return customText;
-  }
-  return intlConfig.formatMessage({ id: translationKey });
-}
 const StyledLink = styled(Link$1)(() => ({
   display: "inline-block"
 }));
@@ -82,7 +73,7 @@ function _Link({
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const screenReaderTextValue = useTranslationFallback(
+  const screenReaderTextValue = useTranslationWithFallback(
     "c4r.button.opensInNewTab",
     screenReaderText
   );
@@ -113,7 +104,6 @@ function _Link({
 const Link = forwardRef(_Link);
 const StyledAlert = styled(Alert$1, {
   shouldForwardProp: (prop) => ![
-    "isNeutral",
     "content",
     "hasCloseButton",
     "hasAction",
@@ -121,15 +111,7 @@ const StyledAlert = styled(Alert$1, {
     "isSticky"
   ].includes(prop)
 })(
-  ({
-    isNeutral,
-    content,
-    hasCloseButton,
-    hasAction,
-    hasTitle,
-    isSticky,
-    theme
-  }) => ({
+  ({ content, hasCloseButton, hasAction, hasTitle, isSticky, theme }) => ({
     columnGap: theme.spacing(1),
     minHeight: theme.spacing(6),
     ...hasAction && {
@@ -140,10 +122,6 @@ const StyledAlert = styled(Alert$1, {
     `,
       gridTemplateColumns: hasCloseButton ? `${ICON_SIZE_MEDIUM} 1fr ${theme.spacing(3)}` : `${ICON_SIZE_MEDIUM}`
     },
-    ...isNeutral && {
-      backgroundColor: theme.palette.default.background,
-      color: theme.palette.text.primary
-    },
     ...isSticky && {
       borderRadius: 0
     },
@@ -159,14 +137,6 @@ const StyledAlert = styled(Alert$1, {
       },
       ...hasAction && {
         gridArea: "message"
-      },
-      ...isNeutral && {
-        "& :not(.MuiAlertTitle-root)": {
-          color: theme.palette.text.secondary
-        },
-        a: {
-          color: `${theme.palette.primary.main} !important`
-        }
       }
     },
     ".MuiAlert-icon": {
@@ -174,9 +144,6 @@ const StyledAlert = styled(Alert$1, {
       marginRight: 0,
       ...hasAction && {
         gridArea: "icon"
-      },
-      ...isNeutral && {
-        color: theme.palette.text.primary
       }
     },
     ".MuiAlert-action": {
@@ -210,14 +177,12 @@ function _Alert({
     onClose(ev);
     setOpen(false);
   } : void 0;
-  const isNeutral = severity === "neutral";
   const isOpen = controlledOpen ?? open;
   return /* @__PURE__ */ jsx(Fade, { in: isOpen, appear: false, children: /* @__PURE__ */ jsxs(
     StyledAlert,
     {
       ref,
-      severity: isNeutral ? "info" : severity,
-      isNeutral,
+      severity,
       content,
       action,
       onClose: handleClose,
@@ -241,6 +206,5 @@ const Alert = forwardRef(_Alert);
 export {
   Alert as A,
   Link as L,
-  ScreenReaderOnly as S,
-  useTranslationFallback as u
+  ScreenReaderOnly as S
 };

package/dist/{Alert-DOeOwxOe.cjs → Alert-C4W0H_uN.cjs}

@@ -4,8 +4,7 @@ const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
 require("cartocolor");
-const cssUtils = require("./css-utils-CCi3p7os.cjs");
-const reactIntl = require("react-intl");
+const cssUtils = require("./css-utils-CH7es90t.cjs");
 const ScreenReaderOnly = material.styled("span")(() => ({
   position: "absolute",
   width: 1,
@@ -17,14 +16,6 @@ const ScreenReaderOnly = material.styled("span")(() => ({
   whiteSpace: "nowrap",
   border: 0
 }));
-function useTranslationFallback(translationKey, customText) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
-  if (customText !== void 0 && customText !== null) {
-    return customText;
-  }
-  return intlConfig.formatMessage({ id: translationKey });
-}
 const StyledLink = material.styled(material.Link)(() => ({
   display: "inline-block"
 }));
@@ -83,7 +74,7 @@ function _Link({
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const screenReaderTextValue = useTranslationFallback(
+  const screenReaderTextValue = cssUtils.useTranslationWithFallback(
     "c4r.button.opensInNewTab",
     screenReaderText
   );
@@ -114,7 +105,6 @@ function _Link({
 const Link = React.forwardRef(_Link);
 const StyledAlert = material.styled(material.Alert, {
   shouldForwardProp: (prop) => ![
-    "isNeutral",
     "content",
     "hasCloseButton",
     "hasAction",
@@ -122,15 +112,7 @@ const StyledAlert = material.styled(material.Alert, {
     "isSticky"
   ].includes(prop)
 })(
-  ({
-    isNeutral,
-    content,
-    hasCloseButton,
-    hasAction,
-    hasTitle,
-    isSticky,
-    theme
-  }) => ({
+  ({ content, hasCloseButton, hasAction, hasTitle, isSticky, theme }) => ({
     columnGap: theme.spacing(1),
     minHeight: theme.spacing(6),
     ...hasAction && {
@@ -141,10 +123,6 @@ const StyledAlert = material.styled(material.Alert, {
     `,
       gridTemplateColumns: hasCloseButton ? `${cssUtils.ICON_SIZE_MEDIUM} 1fr ${theme.spacing(3)}` : `${cssUtils.ICON_SIZE_MEDIUM}`
     },
-    ...isNeutral && {
-      backgroundColor: theme.palette.default.background,
-      color: theme.palette.text.primary
-    },
     ...isSticky && {
       borderRadius: 0
     },
@@ -160,14 +138,6 @@ const StyledAlert = material.styled(material.Alert, {
       },
       ...hasAction && {
         gridArea: "message"
-      },
-      ...isNeutral && {
-        "& :not(.MuiAlertTitle-root)": {
-          color: theme.palette.text.secondary
-        },
-        a: {
-          color: `${theme.palette.primary.main} !important`
-        }
       }
     },
     ".MuiAlert-icon": {
@@ -175,9 +145,6 @@ const StyledAlert = material.styled(material.Alert, {
       marginRight: 0,
       ...hasAction && {
         gridArea: "icon"
-      },
-      ...isNeutral && {
-        color: theme.palette.text.primary
       }
     },
     ".MuiAlert-action": {
@@ -211,14 +178,12 @@ function _Alert({
     onClose(ev);
     setOpen(false);
   } : void 0;
-  const isNeutral = severity === "neutral";
   const isOpen = controlledOpen ?? open;
   return /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: isOpen, appear: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
     StyledAlert,
     {
       ref,
-      severity: isNeutral ? "info" : severity,
-      isNeutral,
+      severity,
       content,
       action,
       onClose: handleClose,
@@ -242,4 +207,3 @@ const Alert = React.forwardRef(_Alert);
 exports.Alert = Alert;
 exports.Link = Link;
 exports.ScreenReaderOnly = ScreenReaderOnly;
-exports.useTranslationFallback = useTranslationFallback;

package/dist/{MenuItem-CYJN2OVU.cjs → MenuItem-CgF4QdGi.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const cssUtils = require("./css-utils-CCi3p7os.cjs");
+const cssUtils = require("./css-utils-CH7es90t.cjs");
 const StyledMenuItem = material.styled(material.MenuItem, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop
@@ -109,10 +109,13 @@ const StyledMenuItem = material.styled(material.MenuItem, {
         zIndex: 2,
         minHeight: cssUtils.MENU_ITEM_SIZE_EXTENDED,
         marginBottom: theme.spacing(1),
-        padding: theme.spacing(0.5, 1.5),
+        padding: theme.spacing(0.5, 0),
         backgroundColor: `${theme.palette.background.paper} !important`,
         borderBottom: `1px solid ${theme.palette.divider}`
       },
+      "&.MuiMenuItem-gutters": {
+        padding: theme.spacing(0.5, 1.5)
+      },
       ".MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type": {
         minHeight: cssUtils.MENU_ITEM_SIZE_EXTENDED,
         marginTop: 0,
@@ -129,6 +132,9 @@ const StyledMenuItem = material.styled(material.MenuItem, {
     ...dense && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
         minHeight: cssUtils.MENU_ITEM_SIZE_DENSE,
+        padding: theme.spacing(0.25, 0)
+      },
+      "&.MuiButtonBase-root.MuiMenuItem-gutters": {
         padding: theme.spacing(0.25, 1.5)
       }
     }
@@ -142,6 +148,7 @@ function _MenuItem({
   fixed,
   iconColor = "primary",
   dense,
+  disableGutters,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -157,11 +164,13 @@ function _MenuItem({
       dense,
       fixed,
       iconColor,
+      disableGutters,
       "data-destructive": destructive,
       "data-extended": extended,
       "data-dense": dense,
       "data-fixed": fixed,
-      "data-icon-color": iconColor
+      "data-icon-color": iconColor,
+      "data-disable-gutters": disableGutters
     }
   );
 }

package/dist/{MenuItem-MUmADf3e.js → MenuItem-DRUK149i.js}

@@ -1,7 +1,7 @@
 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-WejOmkiI.js";
+import { f as MENU_ITEM_SIZE_DENSE, h as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-CjUBRJVK.js";
 const StyledMenuItem = styled(MenuItem$1, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop
@@ -108,10 +108,13 @@ const StyledMenuItem = styled(MenuItem$1, {
         zIndex: 2,
         minHeight: MENU_ITEM_SIZE_EXTENDED,
         marginBottom: theme.spacing(1),
-        padding: theme.spacing(0.5, 1.5),
+        padding: theme.spacing(0.5, 0),
         backgroundColor: `${theme.palette.background.paper} !important`,
         borderBottom: `1px solid ${theme.palette.divider}`
       },
+      "&.MuiMenuItem-gutters": {
+        padding: theme.spacing(0.5, 1.5)
+      },
       ".MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type": {
         minHeight: MENU_ITEM_SIZE_EXTENDED,
         marginTop: 0,
@@ -128,6 +131,9 @@ const StyledMenuItem = styled(MenuItem$1, {
     ...dense && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
         minHeight: MENU_ITEM_SIZE_DENSE,
+        padding: theme.spacing(0.25, 0)
+      },
+      "&.MuiButtonBase-root.MuiMenuItem-gutters": {
         padding: theme.spacing(0.25, 1.5)
       }
     }
@@ -141,6 +147,7 @@ function _MenuItem({
   fixed,
   iconColor = "primary",
   dense,
+  disableGutters,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsx(
@@ -156,11 +163,13 @@ function _MenuItem({
       dense,
       fixed,
       iconColor,
+      disableGutters,
       "data-destructive": destructive,
       "data-extended": extended,
       "data-dense": dense,
       "data-fixed": fixed,
-      "data-icon-color": iconColor
+      "data-icon-color": iconColor,
+      "data-disable-gutters": disableGutters
     }
   );
 }

package/dist/{SwatchSquare-CaaLsjAC.js → Search-C7wkXu3f.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { createSvgIcon } from "@mui/material";
-const Icon$1 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
+const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
   "path",
   {
     fill: "currentColor",
@@ -10,26 +10,8 @@ const Icon$1 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon$1 = createSvgIcon(Icon$1(), "Search");
+const BaseSvgIcon = createSvgIcon(Icon(), "Search");
 function Search({ width, height, sx, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    BaseSvgIcon$1,
-    {
-      ref,
-      viewBox: "0 0 24 24",
-      sx: {
-        width,
-        height: height || width,
-        ...sx
-      },
-      ...props
-    }
-  );
-}
-const Search$1 = forwardRef(Search);
-const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
-const BaseSvgIcon = createSvgIcon(Icon(), "SwatchSquare");
-function SwatchSquare({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     BaseSvgIcon,
     {
@@ -44,8 +26,7 @@ function SwatchSquare({ width, height, sx, ...props }, ref) {
     }
   );
 }
-const SwatchSquare$1 = forwardRef(SwatchSquare);
+const Search$1 = forwardRef(Search);
 export {
-  Search$1 as S,
-  SwatchSquare$1 as a
+  Search$1 as S
 };

package/dist/{SwatchSquare-B8PIY3Rd.cjs → Search-CMWbM9nD.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const Icon$1 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
     fill: "currentColor",
@@ -11,26 +11,8 @@ const Icon$1 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon$1 = material.createSvgIcon(Icon$1(), "Search");
+const BaseSvgIcon = material.createSvgIcon(Icon(), "Search");
 function Search({ width, height, sx, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    BaseSvgIcon$1,
-    {
-      ref,
-      viewBox: "0 0 24 24",
-      sx: {
-        width,
-        height: height || width,
-        ...sx
-      },
-      ...props
-    }
-  );
-}
-const Search$1 = React.forwardRef(Search);
-const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
-const BaseSvgIcon = material.createSvgIcon(Icon(), "SwatchSquare");
-function SwatchSquare({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseSvgIcon,
     {
@@ -45,6 +27,5 @@ function SwatchSquare({ width, height, sx, ...props }, ref) {
     }
   );
 }
-const SwatchSquare$1 = React.forwardRef(SwatchSquare);
+const Search$1 = React.forwardRef(Search);
 exports.Search = Search$1;
-exports.SwatchSquare = SwatchSquare$1;

package/dist/SwatchSquare-B6KYVoqV.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { createSvgIcon } from "@mui/material";
+const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
+const BaseSvgIcon = createSvgIcon(Icon(), "SwatchSquare");
+function SwatchSquare({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    BaseSvgIcon,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const SwatchSquare$1 = forwardRef(SwatchSquare);
+export {
+  SwatchSquare$1 as S
+};

package/dist/SwatchSquare-DuXPIL7t.cjs

@@ -0,0 +1,23 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
+const BaseSvgIcon = material.createSvgIcon(Icon(), "SwatchSquare");
+function SwatchSquare({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const SwatchSquare$1 = React.forwardRef(SwatchSquare);
+exports.SwatchSquare = SwatchSquare$1;