@carto/meridian-ds 1.5.1 → 2.0.0-alpha-external-link.7

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## Unreleased
 
+- New Link components and Button with externalLink behavior [#202](https://github.com/CartoDB/meridian-ds/pull/202)
+
+## 2.0
+
+### 2.0.0
+
+- Developer API change:
+  - `groupBy` deprecation in Autocomplete, use `createAutocompleteGroupByList` instead.
+- **Breaking:** Support VirtualizedList in Autocomplete components [#215](https://github.com/CartoDB/meridian-ds/pull/215)
+- Update import path for `createSvgIcon` from `@mui/material/utils` to `@mui/material` [#219](https://github.com/CartoDB/meridian-ds/pull/219)
+
 ## 1.0
 
 ### 1.5.1

package/dist/{Alert-BiOR9aar.cjs → Alert-C-rl1sPM.cjs}

@@ -2,7 +2,21 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const TablePaginationActions = require("./TablePaginationActions-CFGXm44W.cjs");
+const reactIntl = require("react-intl");
+const iconsMaterial = require("@mui/icons-material");
+const TablePaginationActions = require("./TablePaginationActions-MwqZJoRm.cjs");
+require("cartocolor");
+const ScreenReaderOnly = material.styled("span")(() => ({
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+}));
 const Option = material.styled("div")(({ theme }) => ({
   position: "relative",
   display: "inline-flex",
@@ -61,6 +75,86 @@ function _IconButton({
   ) });
 }
 const IconButton = React.forwardRef(_IconButton);
+const StyledLink = material.styled(material.Link)(() => ({
+  display: "inline"
+}));
+const Icon = material.styled(material.Box, {
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "iconPosition"
+})(
+  ({ variant, iconPosition }) => ({
+    display: "inline-flex",
+    position: "relative",
+    top: "calc(1em * 5.0/32)",
+    // heuristic to align icon with true perceived baseline
+    ...iconPosition === "right" && {
+      marginLeft: "0.25em"
+    },
+    ...iconPosition === "left" && {
+      marginRight: "0.25em"
+    },
+    svg: {
+      // Size adapts to the text size, but make sure the icon size is at least 12px
+      fontSize: `max(1em, ${TablePaginationActions.ICON_SIZE_SMALL})`,
+      color: "inherit !important",
+      "> path": {
+        color: "inherit !important"
+      },
+      // Defined sizes in design specs
+      ...variant === "caption" && {
+        fontSize: TablePaginationActions.ICON_SIZE_SMALL
+      },
+      ...variant === "button" && {
+        fontSize: TablePaginationActions.ICON_SIZE_MEDIUM
+      },
+      ...variant === "body2" && {
+        fontSize: TablePaginationActions.ICON_SIZE_MEDIUM
+      },
+      ...variant === "body1" && {
+        fontSize: TablePaginationActions.ICON_SIZE_LARGE
+      }
+    }
+  })
+);
+function _Link({
+  children,
+  variant,
+  startIcon,
+  endIcon,
+  color,
+  external,
+  showExternalIcon = true,
+  fontWeight = 500,
+  ...otherProps
+}, ref) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const isButtonLink = otherProps.component === "button";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    StyledLink,
+    {
+      ...otherProps,
+      variant,
+      fontWeight,
+      "data-color": color,
+      "data-name": isButtonLink ? "button-link" : "link",
+      role: isButtonLink ? "button" : "link",
+      color,
+      ref,
+      target: external ? "_blank" : void 0,
+      rel: external ? "noopener noreferrer" : void 0,
+      "aria-describedby": external ? "external-hint" : void 0,
+      children: [
+        startIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { variant, iconPosition: "left", children: startIcon }),
+        children,
+        (endIcon || external && showExternalIcon) && /* @__PURE__ */ jsxRuntime.jsx(Icon, { variant, iconPosition: "right", children: endIcon || /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) }),
+        external && /* @__PURE__ */ jsxRuntime.jsx(ScreenReaderOnly, { id: "external-hint", children: `(${intlConfig.formatMessage({
+          id: "c4r.button.opensInNewTab"
+        })})` })
+      ]
+    }
+  );
+}
+const Link = React.forwardRef(_Link);
 const StyledAlert = material.styled(material.Alert, {
   shouldForwardProp: (prop) => ![
     "isNeutral",
@@ -190,3 +284,5 @@ function _Alert({
 const Alert = React.forwardRef(_Alert);
 exports.Alert = Alert;
 exports.IconButton = IconButton;
+exports.Link = Link;
+exports.ScreenReaderOnly = ScreenReaderOnly;

package/dist/{Alert-CywtIMOj.js → Alert-DmbdMf46.js}

@@ -1,7 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
-import { styled, IconButton as IconButton$1, Tooltip, CircularProgress, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
-import { b as ICON_SIZE_MEDIUM, T as Typography } from "./TablePaginationActions-KpTvhN4Y.js";
+import { styled, IconButton as IconButton$1, Tooltip, CircularProgress, Link as Link$1, Box, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
+import { useIntl } from "react-intl";
+import { OpenInNewOutlined } from "@mui/icons-material";
+import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, I as ICON_SIZE_LARGE, u as useImperativeIntl, T as Typography } from "./TablePaginationActions-BWer8cmX.js";
+import "cartocolor";
+const ScreenReaderOnly = styled("span")(() => ({
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+}));
 const Option = styled("div")(({ theme }) => ({
   position: "relative",
   display: "inline-flex",
@@ -60,6 +74,86 @@ function _IconButton({
   ) });
 }
 const IconButton = forwardRef(_IconButton);
+const StyledLink = styled(Link$1)(() => ({
+  display: "inline"
+}));
+const Icon = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "iconPosition"
+})(
+  ({ variant, iconPosition }) => ({
+    display: "inline-flex",
+    position: "relative",
+    top: "calc(1em * 5.0/32)",
+    // heuristic to align icon with true perceived baseline
+    ...iconPosition === "right" && {
+      marginLeft: "0.25em"
+    },
+    ...iconPosition === "left" && {
+      marginRight: "0.25em"
+    },
+    svg: {
+      // Size adapts to the text size, but make sure the icon size is at least 12px
+      fontSize: `max(1em, ${ICON_SIZE_SMALL})`,
+      color: "inherit !important",
+      "> path": {
+        color: "inherit !important"
+      },
+      // Defined sizes in design specs
+      ...variant === "caption" && {
+        fontSize: ICON_SIZE_SMALL
+      },
+      ...variant === "button" && {
+        fontSize: ICON_SIZE_MEDIUM
+      },
+      ...variant === "body2" && {
+        fontSize: ICON_SIZE_MEDIUM
+      },
+      ...variant === "body1" && {
+        fontSize: ICON_SIZE_LARGE
+      }
+    }
+  })
+);
+function _Link({
+  children,
+  variant,
+  startIcon,
+  endIcon,
+  color,
+  external,
+  showExternalIcon = true,
+  fontWeight = 500,
+  ...otherProps
+}, ref) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+  const isButtonLink = otherProps.component === "button";
+  return /* @__PURE__ */ jsxs(
+    StyledLink,
+    {
+      ...otherProps,
+      variant,
+      fontWeight,
+      "data-color": color,
+      "data-name": isButtonLink ? "button-link" : "link",
+      role: isButtonLink ? "button" : "link",
+      color,
+      ref,
+      target: external ? "_blank" : void 0,
+      rel: external ? "noopener noreferrer" : void 0,
+      "aria-describedby": external ? "external-hint" : void 0,
+      children: [
+        startIcon && /* @__PURE__ */ jsx(Icon, { variant, iconPosition: "left", children: startIcon }),
+        children,
+        (endIcon || external && showExternalIcon) && /* @__PURE__ */ jsx(Icon, { variant, iconPosition: "right", children: endIcon || /* @__PURE__ */ jsx(OpenInNewOutlined, {}) }),
+        external && /* @__PURE__ */ jsx(ScreenReaderOnly, { id: "external-hint", children: `(${intlConfig.formatMessage({
+          id: "c4r.button.opensInNewTab"
+        })})` })
+      ]
+    }
+  );
+}
+const Link = forwardRef(_Link);
 const StyledAlert = styled(Alert$1, {
   shouldForwardProp: (prop) => ![
     "isNeutral",
@@ -189,5 +283,7 @@ function _Alert({
 const Alert = forwardRef(_Alert);
 export {
   Alert as A,
-  IconButton as I
+  IconButton as I,
+  Link as L,
+  ScreenReaderOnly as S
 };

package/dist/{ArrowDown-8fLj23Ge.cjs → ArrowDown-DJ0vhbsw.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const utils = require("@mui/material/utils");
+const material = require("@mui/material");
 const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
@@ -11,7 +11,7 @@ const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon = utils.createSvgIcon(Icon(), "ArrowDown");
+const BaseSvgIcon = material.createSvgIcon(Icon(), "ArrowDown");
 function ArrowDown({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseSvgIcon,

package/dist/{ArrowDown-CY_wMVJT.js → ArrowDown-d6bxUL0F.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { createSvgIcon } from "@mui/material/utils";
+import { createSvgIcon } from "@mui/material";
 const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
   "path",
   {

package/dist/{MenuItem-CXnnE5lK.js → MenuItem-C8x-GasJ.js}

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { styled, MenuItem as MenuItem$1 } from "@mui/material";
+import { e as MENU_ITEM_SIZE_DENSE, f as MENU_ITEM_SIZE_EXTENDED } from "./TablePaginationActions-BWer8cmX.js";
 const StyledMenuItem = styled(MenuItem$1, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop
@@ -20,14 +21,14 @@ const StyledMenuItem = styled(MenuItem$1, {
       columnGap: 0,
       ...theme.typography.caption,
       fontWeight: 500,
-      color: theme.palette.text.secondary,
+      color: `${theme.palette.text.secondary} !important`,
       ".MuiListItemText-root .MuiTypography-root": {
         ...theme.typography.caption,
         fontWeight: 500,
         color: theme.palette.text.secondary
       },
       "&.MuiMenuItem-root": {
-        minHeight: theme.spacing(3),
+        minHeight: MENU_ITEM_SIZE_DENSE,
         paddingTop: 0,
         paddingBottom: 0,
         marginTop: theme.spacing(1),
@@ -94,7 +95,7 @@ const StyledMenuItem = styled(MenuItem$1, {
     },
     ...extended && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
-        minHeight: theme.spacing(6)
+        minHeight: MENU_ITEM_SIZE_EXTENDED
       }
     },
     ...fixed && {
@@ -105,14 +106,14 @@ const StyledMenuItem = styled(MenuItem$1, {
         bottom: 0,
         right: 0,
         zIndex: 2,
-        minHeight: theme.spacing(6),
+        minHeight: MENU_ITEM_SIZE_EXTENDED,
         marginBottom: theme.spacing(1),
         padding: theme.spacing(0.5, 1.5),
         backgroundColor: `${theme.palette.background.paper} !important`,
         borderBottom: `1px solid ${theme.palette.divider}`
       },
       ".MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type": {
-        minHeight: theme.spacing(6),
+        minHeight: MENU_ITEM_SIZE_EXTENDED,
         marginTop: 0,
         "&:hover": {
           backgroundColor: theme.palette.background.paper
@@ -126,7 +127,7 @@ const StyledMenuItem = styled(MenuItem$1, {
     },
     ...dense && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
-        minHeight: theme.spacing(3),
+        minHeight: MENU_ITEM_SIZE_DENSE,
         padding: theme.spacing(0.25, 1.5)
       }
     }
@@ -139,6 +140,7 @@ function _MenuItem({
   extended,
   fixed,
   iconColor = "primary",
+  dense,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsx(
@@ -151,10 +153,12 @@ function _MenuItem({
       subtitle,
       destructive,
       extended,
+      dense,
       fixed,
       color: iconColor,
       "data-destructive": destructive,
       "data-extended": extended,
+      "data-dense": dense,
       "data-fixed": fixed
     }
   );

package/dist/{MenuItem-Br2jY2lt.cjs → MenuItem-CyIdh2wX.cjs}

@@ -2,6 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
+const TablePaginationActions = require("./TablePaginationActions-MwqZJoRm.cjs");
 const StyledMenuItem = material.styled(material.MenuItem, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop
@@ -21,14 +22,14 @@ const StyledMenuItem = material.styled(material.MenuItem, {
       columnGap: 0,
       ...theme.typography.caption,
       fontWeight: 500,
-      color: theme.palette.text.secondary,
+      color: `${theme.palette.text.secondary} !important`,
       ".MuiListItemText-root .MuiTypography-root": {
         ...theme.typography.caption,
         fontWeight: 500,
         color: theme.palette.text.secondary
       },
       "&.MuiMenuItem-root": {
-        minHeight: theme.spacing(3),
+        minHeight: TablePaginationActions.MENU_ITEM_SIZE_DENSE,
         paddingTop: 0,
         paddingBottom: 0,
         marginTop: theme.spacing(1),
@@ -95,7 +96,7 @@ const StyledMenuItem = material.styled(material.MenuItem, {
     },
     ...extended && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
-        minHeight: theme.spacing(6)
+        minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED
       }
     },
     ...fixed && {
@@ -106,14 +107,14 @@ const StyledMenuItem = material.styled(material.MenuItem, {
         bottom: 0,
         right: 0,
         zIndex: 2,
-        minHeight: theme.spacing(6),
+        minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED,
         marginBottom: theme.spacing(1),
         padding: theme.spacing(0.5, 1.5),
         backgroundColor: `${theme.palette.background.paper} !important`,
         borderBottom: `1px solid ${theme.palette.divider}`
       },
       ".MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type": {
-        minHeight: theme.spacing(6),
+        minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED,
         marginTop: 0,
         "&:hover": {
           backgroundColor: theme.palette.background.paper
@@ -127,7 +128,7 @@ const StyledMenuItem = material.styled(material.MenuItem, {
     },
     ...dense && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
-        minHeight: theme.spacing(3),
+        minHeight: TablePaginationActions.MENU_ITEM_SIZE_DENSE,
         padding: theme.spacing(0.25, 1.5)
       }
     }
@@ -140,6 +141,7 @@ function _MenuItem({
   extended,
   fixed,
   iconColor = "primary",
+  dense,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -152,10 +154,12 @@ function _MenuItem({
       subtitle,
       destructive,
       extended,
+      dense,
       fixed,
       color: iconColor,
       "data-destructive": destructive,
       "data-extended": extended,
+      "data-dense": dense,
       "data-fixed": fixed
     }
   );

package/dist/{OpenDiagonallyRight-CSm5GYYJ.js → OpenDiagonallyRight-CGdCEXlF.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { createSvgIcon } from "@mui/material/utils";
+import { createSvgIcon } from "@mui/material";
 const Icon$2 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
   "path",
   {

package/dist/{OpenDiagonallyRight-CM1tojUq.cjs → OpenDiagonallyRight-CpL4ROwg.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const utils = require("@mui/material/utils");
+const material = require("@mui/material");
 const Icon$2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
@@ -11,7 +11,7 @@ const Icon$2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon$2 = utils.createSvgIcon(Icon$2(), "ArrowUp");
+const BaseSvgIcon$2 = material.createSvgIcon(Icon$2(), "ArrowUp");
 function ArrowUp({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseSvgIcon$2,
@@ -37,7 +37,7 @@ const Icon$1 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon$1 = utils.createSvgIcon(Icon$1(), "CloseDiagonallyRight");
+const BaseSvgIcon$1 = material.createSvgIcon(Icon$1(), "CloseDiagonallyRight");
 function CloseDiagonallyRight({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseSvgIcon$1,
@@ -63,7 +63,7 @@ const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon = utils.createSvgIcon(Icon(), "OpenDiagonallyRight");
+const BaseSvgIcon = material.createSvgIcon(Icon(), "OpenDiagonallyRight");
 function OpenDiagonallyRight({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseSvgIcon,

package/dist/{SwatchSquare-benaO55C.cjs → SwatchSquare-B8PIY3Rd.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const utils = require("@mui/material/utils");
+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(
   "path",
   {
@@ -11,7 +11,7 @@ const Icon$1 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon$1 = utils.createSvgIcon(Icon$1(), "Search");
+const BaseSvgIcon$1 = material.createSvgIcon(Icon$1(), "Search");
 function Search({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseSvgIcon$1,
@@ -29,7 +29,7 @@ function Search({ width, height, sx, ...props }, ref) {
 }
 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 = utils.createSvgIcon(Icon(), "SwatchSquare");
+const BaseSvgIcon = material.createSvgIcon(Icon(), "SwatchSquare");
 function SwatchSquare({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseSvgIcon,

package/dist/{SwatchSquare-DhaaXt53.js → SwatchSquare-CaaLsjAC.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { createSvgIcon } from "@mui/material/utils";
+import { createSvgIcon } from "@mui/material";
 const Icon$1 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
   "path",
   {

package/dist/{TablePaginationActions-KpTvhN4Y.js → TablePaginationActions-BWer8cmX.js}

@@ -777,6 +777,10 @@ const ICON_SIZE_MEDIUM = getSpacing(2.25);
 const ICON_SIZE_LARGE = getSpacing(3);
 const APPBAR_SIZE = getSpacing(6);
 const NOTIFICATION_DURATION_IN_MS = 6e3;
+const MENU_LIST_MAX_SIZE = 312;
+const MENU_ITEM_SIZE_DENSE = 24;
+const MENU_ITEM_SIZE_DEFAULT = 32;
+const MENU_ITEM_SIZE_EXTENDED = 48;
 const FontWeight = {
   regular: 400,
   medium: 500,
@@ -813,7 +817,8 @@ const en = {
       copy: "Copy",
       save: "Save",
       add: "Add",
-      showOptions: "Show options"
+      showOptions: "Show options",
+      opensInNewTab: "Opens in new tab"
     },
     form: {
       selectAll: "Select all",
@@ -961,7 +966,8 @@ const es = {
       copy: "Copiar",
       save: "Guardar",
       add: "Añadir",
-      showOptions: "Mostrar opciones"
+      showOptions: "Mostrar opciones",
+      opensInNewTab: "Abre en una nueva pestaña"
     },
     form: {
       selectAll: "Seleccionar todos",
@@ -1107,7 +1113,8 @@ const id = {
       copy: "Salin",
       save: "Simpan",
       add: "Tambah",
-      showOptions: "Tampilkan opsi"
+      showOptions: "Tampilkan opsi",
+      opensInNewTab: "Buka di tab baru"
     },
     form: {
       selectAll: "Select all",
@@ -5650,13 +5657,17 @@ export {
   APPBAR_SIZE as A,
   BREAKPOINTS as B,
   ICON_SIZE_LARGE as I,
+  MENU_ITEM_SIZE_DEFAULT as M,
   NOTIFICATION_DURATION_IN_MS as N,
   SPACING as S,
   Typography as T,
   TablePaginationActions as a,
   ICON_SIZE_MEDIUM as b,
   ICON_SIZE_SMALL as c,
-  getDefaultExportFromCjs as d,
+  MENU_LIST_MAX_SIZE as d,
+  MENU_ITEM_SIZE_DENSE as e,
+  MENU_ITEM_SIZE_EXTENDED as f,
   getSpacing as g,
+  getDefaultExportFromCjs as h,
   useImperativeIntl as u
 };

package/dist/{TablePaginationActions-CFGXm44W.cjs → TablePaginationActions-MwqZJoRm.cjs}

@@ -778,6 +778,10 @@ const ICON_SIZE_MEDIUM = getSpacing(2.25);
 const ICON_SIZE_LARGE = getSpacing(3);
 const APPBAR_SIZE = getSpacing(6);
 const NOTIFICATION_DURATION_IN_MS = 6e3;
+const MENU_LIST_MAX_SIZE = 312;
+const MENU_ITEM_SIZE_DENSE = 24;
+const MENU_ITEM_SIZE_DEFAULT = 32;
+const MENU_ITEM_SIZE_EXTENDED = 48;
 const FontWeight = {
   regular: 400,
   medium: 500,
@@ -814,7 +818,8 @@ const en = {
       copy: "Copy",
       save: "Save",
       add: "Add",
-      showOptions: "Show options"
+      showOptions: "Show options",
+      opensInNewTab: "Opens in new tab"
     },
     form: {
       selectAll: "Select all",
@@ -962,7 +967,8 @@ const es = {
       copy: "Copiar",
       save: "Guardar",
       add: "Añadir",
-      showOptions: "Mostrar opciones"
+      showOptions: "Mostrar opciones",
+      opensInNewTab: "Abre en una nueva pestaña"
     },
     form: {
       selectAll: "Seleccionar todos",
@@ -1108,7 +1114,8 @@ const id = {
       copy: "Salin",
       save: "Simpan",
       add: "Tambah",
-      showOptions: "Tampilkan opsi"
+      showOptions: "Tampilkan opsi",
+      opensInNewTab: "Buka di tab baru"
     },
     form: {
       selectAll: "Select all",
@@ -5652,6 +5659,10 @@ exports.BREAKPOINTS = BREAKPOINTS;
 exports.ICON_SIZE_LARGE = ICON_SIZE_LARGE;
 exports.ICON_SIZE_MEDIUM = ICON_SIZE_MEDIUM;
 exports.ICON_SIZE_SMALL = ICON_SIZE_SMALL;
+exports.MENU_ITEM_SIZE_DEFAULT = MENU_ITEM_SIZE_DEFAULT;
+exports.MENU_ITEM_SIZE_DENSE = MENU_ITEM_SIZE_DENSE;
+exports.MENU_ITEM_SIZE_EXTENDED = MENU_ITEM_SIZE_EXTENDED;
+exports.MENU_LIST_MAX_SIZE = MENU_LIST_MAX_SIZE;
 exports.NOTIFICATION_DURATION_IN_MS = NOTIFICATION_DURATION_IN_MS;
 exports.SPACING = SPACING;
 exports.TablePaginationActions = TablePaginationActions;