@carto/meridian-ds 3.1.0 → 3.1.1-alpha.7c9a0df.290

package/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+- feat(legend): add geometry-aware `symbol`, `strokeLineStyle` and `fillPattern` props to `LegendCategories` — circle/square/line symbols, solid/dashed/dotted strokes, and 8 fill patterns (incl. `solid`), each a single value or per-category array, tinted by the row color, and white/transparent values stay visible. Reuses existing `Stroke*`/`Pattern*` icons and removes the dead `isMax` ring [#446](https://github.com/CartoDB/meridian-ds/pull/446)
+- fix(figma): sync Code Connect templates with the Meridian-DS Figma renames and add templates for the new `CopiableInputText` and `PasswordField` components [#436](https://github.com/CartoDB/meridian-ds/pull/436)
+
 ## 3.0
 
 ### 3.1.0

package/dist/{ListItem-CRSS7jTs.js → ListItem-CEg234fT.js}

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { forwardRef, useState, createContext, useMemo, useContext } from "react";
-import { styled, Link as Link$1, Alert as Alert$1, Fade, AlertTitle, List as List$1, ListItemButton as ListItemButton$1, ListItem as ListItem$1 } from "@mui/material";
+import { styled, Link as Link$1, Fade, AlertTitle, Alert as Alert$1, List as List$1, ListItemButton as ListItemButton$1, ListItem as ListItem$1 } from "@mui/material";
 import { OpenInNewOutlined } from "@mui/icons-material";
 import "cartocolor";
-import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography, m as LIST_MAX_SIZE, n as LIST_OVERSCAN_ITEMS_COUNT, h as LIST_ITEM_SIZE_DENSE, i as LIST_ITEM_SIZE_DEFAULT } from "./palette-utils-B2CZD7oM.js";
+import { u as useTranslationWithFallback, f as ICON_SIZE_MEDIUM, I as ICON_SIZE_SMALL, T as Typography, n as LIST_MAX_SIZE, L as LIST_ITEM_SIZE_DENSE, k as LIST_ITEM_SIZE_DEFAULT, o as LIST_OVERSCAN_ITEMS_COUNT } from "./TablePaginationActions-Df-RJIBv.js";
 import * as ReactWindow from "react-window";
 const ScreenReaderOnly = styled("span")(() => ({
   position: "absolute",

package/dist/{ListItem-CLIaUyDV.cjs → ListItem-ajuL9fis.cjs}

@@ -4,7 +4,7 @@ const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
 require("cartocolor");
-const paletteUtils = require("./palette-utils-Ou97WiuF.cjs");
+const TablePaginationActions = require("./TablePaginationActions-Ba0wKQEf.cjs");
 const ReactWindow = require("react-window");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -53,7 +53,7 @@ const Icon = material.styled("span", {
     },
     svg: {
       // Size adapts to the text size, but make sure the icon size is at least 12px
-      fontSize: `max(1em, ${paletteUtils.ICON_SIZE_SMALL})`,
+      fontSize: `max(1em, ${TablePaginationActions.ICON_SIZE_SMALL})`,
       color: "inherit !important",
       "> path": {
         color: "inherit !important"
@@ -64,7 +64,7 @@ const Icon = material.styled("span", {
       top: "calc(1em * 1/5)",
       // 20% offset ratio
       svg: {
-        fontSize: paletteUtils.ICON_SIZE_SMALL
+        fontSize: TablePaginationActions.ICON_SIZE_SMALL
       }
     },
     // Button, body2 and body1 variants use medium-sized icons
@@ -72,7 +72,7 @@ const Icon = material.styled("span", {
       top: "calc(1em * 1/4)",
       // 25% offset ratio
       svg: {
-        fontSize: paletteUtils.ICON_SIZE_MEDIUM
+        fontSize: TablePaginationActions.ICON_SIZE_MEDIUM
       }
     }
   })
@@ -92,7 +92,7 @@ function _Link({
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const screenReaderTextValue = paletteUtils.useTranslationWithFallback(
+  const screenReaderTextValue = TablePaginationActions.useTranslationWithFallback(
     "c4r.button.opensInNewTab",
     screenReaderText
   );
@@ -139,7 +139,7 @@ const StyledAlert = material.styled(material.Alert, {
     "icon message"
     "icon actions"
     `,
-      gridTemplateColumns: hasCloseButton ? `${paletteUtils.ICON_SIZE_MEDIUM} 1fr ${theme.spacing(3)}` : `${paletteUtils.ICON_SIZE_MEDIUM}`
+      gridTemplateColumns: hasCloseButton ? `${TablePaginationActions.ICON_SIZE_MEDIUM} 1fr ${theme.spacing(3)}` : `${TablePaginationActions.ICON_SIZE_MEDIUM}`
     },
     ...isSticky && {
       borderRadius: 0
@@ -216,7 +216,7 @@ function _Alert({
       ...otherProps,
       children: [
         title && /* @__PURE__ */ jsxRuntime.jsx(material.AlertTitle, { children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx(paletteUtils.Typography, { variant: "caption", color: "inherit", component: "div", children })
+        /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", color: "inherit", component: "div", children })
       ]
     }
   ) });
@@ -236,8 +236,8 @@ function _List({
   dense = true,
   virtualized = false,
   virtualizedItemHeight,
-  virtualizedListHeight = paletteUtils.LIST_MAX_SIZE,
-  overscanCount = paletteUtils.LIST_OVERSCAN_ITEMS_COUNT,
+  virtualizedListHeight = TablePaginationActions.LIST_MAX_SIZE,
+  overscanCount = TablePaginationActions.LIST_OVERSCAN_ITEMS_COUNT,
   disableGutters = false,
   disablePadding = false,
   fixedHeight = true,
@@ -271,7 +271,7 @@ function _List({
     () => React.Children.toArray(children),
     [children]
   );
-  const defaultItemHeight = virtualizedItemHeight ?? (dense !== false ? paletteUtils.LIST_ITEM_SIZE_DENSE : paletteUtils.LIST_ITEM_SIZE_DEFAULT);
+  const defaultItemHeight = virtualizedItemHeight ?? (dense !== false ? TablePaginationActions.LIST_ITEM_SIZE_DENSE : TablePaginationActions.LIST_ITEM_SIZE_DEFAULT);
   const listHeight = React.useMemo(() => {
     const calculatedHeight = childrenArray.length * defaultItemHeight;
     return Math.min(calculatedHeight, virtualizedListHeight);

package/dist/{OpenDiagonallyRight-BUZBgnkY.cjs → OpenDiagonallyRight-BPUv8cSL.cjs}

@@ -84,5 +84,5 @@ function OpenDiagonallyRight({ width, height, sx, ...props }, ref) {
 const ForwardedComponent = React.forwardRef(OpenDiagonallyRight);
 ForwardedComponent.displayName = "OpenDiagonallyRight";
 exports.ForwardedComponent = ForwardedComponent$2;
-exports.ForwardedComponent$1 = ForwardedComponent$1;
-exports.ForwardedComponent$2 = ForwardedComponent;
+exports.ForwardedComponent$1 = ForwardedComponent;
+exports.ForwardedComponent$2 = ForwardedComponent$1;

package/dist/{OpenDiagonallyRight-DQEM4RAg.js → OpenDiagonallyRight-DuJMadZ8.js}

@@ -84,6 +84,6 @@ const ForwardedComponent = forwardRef(OpenDiagonallyRight);
 ForwardedComponent.displayName = "OpenDiagonallyRight";
 export {
   ForwardedComponent$2 as F,
-  ForwardedComponent$1 as a,
-  ForwardedComponent as b
+  ForwardedComponent as a,
+  ForwardedComponent$1 as b
 };

package/dist/SwatchSquare-B7D7xeJg.cjs

@@ -0,0 +1,296 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const Icon$b = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M9 21H3v-6h6zM21 21h-6v-6h6zM15 15H9V9h6zM9 9H3V3h6zM21 9h-6V3h6z"
+  }
+) });
+const BaseSvgIcon$b = material.createSvgIcon(Icon$b(), "PatternChecker");
+function PatternChecker({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon$b,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ForwardedComponent$b = React.forwardRef(PatternChecker);
+ForwardedComponent$b.displayName = "PatternChecker";
+const Icon$a = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "m21 5.443-.516-.515-2.828 2.828 2.828 2.828.516-.516v3.862l-.516-.516-2.827 2.828 2.828 2.828.515-.514V21h-2.444l.514-.515-2.828-2.828-2.828 2.827.516.516h-3.86l.515-.516-2.828-2.828-2.828 2.83.514.514H3v-2.443l.515.514 2.828-2.829-2.828-2.828L3 13.93V10.07l.515.515 2.828-2.827-2.83-2.83L3 5.443V3h2.443l-.514.515 2.828 2.828 2.828-2.828L10.07 3h3.859l-.515.515 2.828 2.827 2.828-2.828L18.557 3H21zm-11.828 10.8L12 19.07l2.827-2.828L12 13.414zM4.93 12l2.828 2.828L10.585 12 7.757 9.172zm8.484-.001 2.828 2.828L19.07 12l-2.828-2.828zM9.172 7.757 12 10.585l2.827-2.828L12 4.929z",
+    clipRule: "evenodd"
+  }
+) });
+const BaseSvgIcon$a = material.createSvgIcon(Icon$a(), "PatternCrossDiagonal");
+function PatternCrossDiagonal({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon$a,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ForwardedComponent$a = React.forwardRef(PatternCrossDiagonal);
+ForwardedComponent$a.displayName = "PatternCrossDiagonal";
+const Icon$9 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M4.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M9.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M19.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M4.5 8a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M9.5 8a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M19.5 8a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M4.5 18a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M9.5 18a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M19.5 18a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M14.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M14.5 8a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M14.5 18a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M4.5 13a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M9.5 13a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M19.5 13a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M14.5 13a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3"
+  }
+) });
+const BaseSvgIcon$9 = material.createSvgIcon(Icon$9(), "PatternDots");
+function PatternDots({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon$9,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ForwardedComponent$9 = React.forwardRef(PatternDots);
+ForwardedComponent$9.displayName = "PatternDots";
+const Icon$8 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M3 5V3h18v2zM3 9h18V7H3zM21 13H3v-2h18zM3 17h18v-2H3zM3 21h18v-2H3z"
+  }
+) });
+const BaseSvgIcon$8 = material.createSvgIcon(Icon$8(), "PatternHLines");
+function PatternHLines({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon$8,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ForwardedComponent$8 = React.forwardRef(PatternHLines);
+ForwardedComponent$8.displayName = "PatternHLines";
+const Icon$7 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M3 4.414 19.586 21H21v-1.414L4.414 3H3zM3 10.071 13.929 21h2.829L3 7.242zM3 15.728 8.271 21h2.83L3 12.9zM3 21h2.443L3 18.557zM21 16.758v-2.83L10.071 3H7.242zM21 11.1V8.273L15.727 3H12.9zM21 5.443V3h-2.443z"
+  }
+) });
+const BaseSvgIcon$7 = material.createSvgIcon(Icon$7(), "PatternLDiagonal");
+function PatternLDiagonal({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon$7,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ForwardedComponent$7 = React.forwardRef(PatternLDiagonal);
+ForwardedComponent$7.displayName = "PatternLDiagonal";
+const Icon$6 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M21 4.414 4.414 21H3v-1.414L19.586 3H21zM21 10.071 10.071 21H7.242L21 7.242zM21 15.728 15.729 21h-2.83L21 12.9zM21 21h-2.443L21 18.557zM3 16.758v-2.83L13.929 3h2.829zM3 11.1V8.273L8.272 3h2.829zM3 5.443V3h2.443z"
+  }
+) });
+const BaseSvgIcon$6 = material.createSvgIcon(Icon$6(), "PatternRDiagonal");
+function PatternRDiagonal({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon$6,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ForwardedComponent$6 = React.forwardRef(PatternRDiagonal);
+ForwardedComponent$6.displayName = "PatternRDiagonal";
+const Icon$5 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M3 3h18v18H3z" }) });
+const BaseSvgIcon$5 = material.createSvgIcon(Icon$5(), "PatternSolid");
+function PatternSolid({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon$5,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ForwardedComponent$5 = React.forwardRef(PatternSolid);
+ForwardedComponent$5.displayName = "PatternSolid";
+const Icon$4 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M5 21H3V3h2zm4 0V3H7v18zm4-18v18h-2V3zm4 18V3h-2v18zm4 0V3h-2v18z",
+    clipRule: "evenodd"
+  }
+) });
+const BaseSvgIcon$4 = material.createSvgIcon(Icon$4(), "PatternVLines");
+function PatternVLines({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon$4,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ForwardedComponent$4 = React.forwardRef(PatternVLines);
+ForwardedComponent$4.displayName = "PatternVLines";
+const Icon$3 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M3 11h4v2H3zM10 11h4v2h-4zM21 11h-4v2h4z" }) });
+const BaseSvgIcon$3 = material.createSvgIcon(Icon$3(), "StrokeDash");
+function StrokeDash({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon$3,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ForwardedComponent$3 = React.forwardRef(StrokeDash);
+ForwardedComponent$3.displayName = "StrokeDash";
+const Icon$2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M4 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2M8 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2M12 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2M16 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2M20 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2"
+  }
+) });
+const BaseSvgIcon$2 = material.createSvgIcon(Icon$2(), "StrokeDot");
+function StrokeDot({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon$2,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ForwardedComponent$2 = React.forwardRef(StrokeDot);
+ForwardedComponent$2.displayName = "StrokeDot";
+const Icon$1 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M21 11H3v2h18z" }) });
+const BaseSvgIcon$1 = material.createSvgIcon(Icon$1(), "StrokeSolid");
+function StrokeSolid({ 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 ForwardedComponent$1 = React.forwardRef(StrokeSolid);
+ForwardedComponent$1.displayName = "StrokeSolid";
+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 ForwardedComponent = React.forwardRef(SwatchSquare);
+ForwardedComponent.displayName = "SwatchSquare";
+exports.ForwardedComponent = ForwardedComponent$b;
+exports.ForwardedComponent$1 = ForwardedComponent$a;
+exports.ForwardedComponent$10 = ForwardedComponent$1;
+exports.ForwardedComponent$11 = ForwardedComponent;
+exports.ForwardedComponent$2 = ForwardedComponent$9;
+exports.ForwardedComponent$3 = ForwardedComponent$8;
+exports.ForwardedComponent$4 = ForwardedComponent$7;
+exports.ForwardedComponent$5 = ForwardedComponent$6;
+exports.ForwardedComponent$6 = ForwardedComponent$5;
+exports.ForwardedComponent$7 = ForwardedComponent$4;
+exports.ForwardedComponent$8 = ForwardedComponent$3;
+exports.ForwardedComponent$9 = ForwardedComponent$2;