@carto/meridian-ds 1.5.1-alpha-virtual-autocomplete.10 → 2.0.0-alpha-external-link.6

package/CHANGELOG.md

@@ -2,7 +2,16 @@
 
 ## Unreleased
 
-- Support VirtualizedList in Autocomplete components [#215](https://github.com/CartoDB/meridian-ds/pull/215)
+- 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
 

package/dist/{Alert-BzEgeyQJ.cjs → Alert-CmglMdw_.cjs}

@@ -2,7 +2,21 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const TablePaginationActions = require("./TablePaginationActions-mbbjzV6Y.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,85 @@ 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);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    StyledLink,
+    {
+      ...otherProps,
+      variant,
+      fontWeight,
+      "data-color": color,
+      "data-name": "link",
+      role: "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 +283,5 @@ function _Alert({
 const Alert = React.forwardRef(_Alert);
 exports.Alert = Alert;
 exports.IconButton = IconButton;
+exports.Link = Link;
+exports.ScreenReaderOnly = ScreenReaderOnly;

package/dist/{Alert-CnaTtNJd.js → Alert-DWK8eGnD.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-Cz5Hbi6N.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,85 @@ 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);
+  return /* @__PURE__ */ jsxs(
+    StyledLink,
+    {
+      ...otherProps,
+      variant,
+      fontWeight,
+      "data-color": color,
+      "data-name": "link",
+      role: "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 +282,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-C1DvWMry.js → MenuItem-C8x-GasJ.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 { e as MENU_ITEM_SIZE_DENSE, f as MENU_ITEM_SIZE_EXTENDED } from "./TablePaginationActions-Cz5Hbi6N.js";
+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

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

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const TablePaginationActions = require("./TablePaginationActions-mbbjzV6Y.cjs");
+const TablePaginationActions = require("./TablePaginationActions-MwqZJoRm.cjs");
 const StyledMenuItem = material.styled(material.MenuItem, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop

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-Cz5Hbi6N.js → TablePaginationActions-BWer8cmX.js}

@@ -817,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",
@@ -965,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",
@@ -1111,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",

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

@@ -818,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",
@@ -966,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",
@@ -1112,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",

package/dist/components/index.cjs

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const material = require("@mui/material");
-const TablePaginationActions = require("../TablePaginationActions-mbbjzV6Y.cjs");
-const ArrowDown = require("../ArrowDown-8fLj23Ge.cjs");
-const OpenDiagonallyRight = require("../OpenDiagonallyRight-CM1tojUq.cjs");
 const reactIntl = require("react-intl");
+const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const Alert$1 = require("../Alert-BzEgeyQJ.cjs");
+const TablePaginationActions = require("../TablePaginationActions-MwqZJoRm.cjs");
+const Alert$1 = require("../Alert-CmglMdw_.cjs");
+const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
+const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
 require("cartocolor");
-const MenuItem = require("../MenuItem-C4bG5WHw.cjs");
+const MenuItem = require("../MenuItem-CyIdh2wX.cjs");
 const reactWindow = require("react-window");
 const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
 const xDatePickers = require("@mui/x-date-pickers");
@@ -62,10 +62,15 @@ function _Button({
   startIcon,
   endIcon,
   loadingPosition,
+  external,
+  showExternalIcon = true,
   ...otherProps
 }, ref) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   const defaultIconLoader = /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" });
   const isDefaultLoading = loading && loadingPosition === void 0;
+  const isExternalLink = otherProps.href && external;
   const renderContent = () => {
     if (isDefaultLoading) {
       return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative" }, children: [
@@ -73,6 +78,14 @@ function _Button({
         /* @__PURE__ */ jsxRuntime.jsx(HiddenText, { children })
       ] });
     }
+    if (isExternalLink) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(Alert$1.ScreenReaderOnly, { id: "external-hint", children: `(${intlConfig.formatMessage({
+          id: "c4r.button.opensInNewTab"
+        })})` })
+      ] });
+    }
     return children;
   };
   const getIconForPosition = (position) => {
@@ -85,7 +98,11 @@ function _Button({
       }
       return void 0;
     }
-    return position === "start" ? startIcon : endIcon;
+    if (position === "start") {
+      return startIcon;
+    } else {
+      return endIcon || (isExternalLink && showExternalIcon ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) : void 0);
+    }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Button,
@@ -95,7 +112,12 @@ function _Button({
       endIcon: getIconForPosition("end"),
       ...otherProps,
       role: otherProps.href ? "link" : "button",
+      ...isExternalLink && {
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
       ref,
+      "aria-describedby": isExternalLink ? "external-hint" : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
     }
   );
@@ -5067,6 +5089,8 @@ exports.TablePaginationActions = TablePaginationActions.TablePaginationActions;
 exports.Typography = TablePaginationActions.Typography;
 exports.Alert = Alert$1.Alert;
 exports.IconButton = Alert$1.IconButton;
+exports.Link = Alert$1.Link;
+exports.ScreenReaderOnly = Alert$1.ScreenReaderOnly;
 exports.MenuItem = MenuItem.MenuItem;
 exports.AUTOCOMPLETE_GROUP_HEADER_PROPERTY = AUTOCOMPLETE_GROUP_HEADER_PROPERTY;
 exports.AccordionGroup = AccordionGroup;

package/dist/components/index.js

@@ -1,15 +1,16 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useState, useRef, useEffect, useMemo, createElement, Fragment as Fragment$1, useCallback, useImperativeHandle } from "react";
-import { styled, Box, Button as Button$1, CircularProgress, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, IconButton, Tooltip, Select, FormControl, InputLabel, FormHelperText, ToggleButtonGroup as ToggleButtonGroup$1, Menu as Menu$2, Link, Checkbox, ListItemText, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Snackbar as Snackbar$1, Portal, Fade, Slide, alpha, useTheme, Toolbar, AppBar as AppBar$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1 } from "@mui/material";
-import { T as Typography, c as ICON_SIZE_SMALL, u as useImperativeIntl, f as MENU_ITEM_SIZE_EXTENDED, e as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, M as MENU_ITEM_SIZE_DEFAULT, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-Cz5Hbi6N.js";
-import { a } from "../TablePaginationActions-Cz5Hbi6N.js";
-import { A as ArrowDown } from "../ArrowDown-CY_wMVJT.js";
-import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CSm5GYYJ.js";
 import { useIntl } from "react-intl";
-import { VisibilityOffOutlined, VisibilityOutlined, Cancel, AddCircleOutlineOutlined, ContentCopyOutlined, CloseOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
-import { I as IconButton$1, A as Alert$1 } from "../Alert-CnaTtNJd.js";
+import { styled, Box, Button as Button$1, CircularProgress, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, IconButton, Tooltip, Select, FormControl, InputLabel, FormHelperText, ToggleButtonGroup as ToggleButtonGroup$1, Menu as Menu$2, Link, Checkbox, ListItemText, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Snackbar as Snackbar$1, Portal, Fade, Slide, alpha, useTheme, Toolbar, AppBar as AppBar$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1 } from "@mui/material";
+import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, AddCircleOutlineOutlined, ContentCopyOutlined, CloseOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
+import { u as useImperativeIntl, T as Typography, c as ICON_SIZE_SMALL, f as MENU_ITEM_SIZE_EXTENDED, e as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, M as MENU_ITEM_SIZE_DEFAULT, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-BWer8cmX.js";
+import { a } from "../TablePaginationActions-BWer8cmX.js";
+import { S as ScreenReaderOnly, I as IconButton$1, A as Alert$1 } from "../Alert-DWK8eGnD.js";
+import { L } from "../Alert-DWK8eGnD.js";
+import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
+import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
 import "cartocolor";
-import { M as MenuItem$1 } from "../MenuItem-C1DvWMry.js";
+import { M as MenuItem$1 } from "../MenuItem-C8x-GasJ.js";
 import { FixedSizeList } from "react-window";
 import { DatePicker as DatePicker$1 } from "@mui/x-date-pickers/DatePicker";
 import { PickersDay as PickersDay$1 } from "@mui/x-date-pickers";
@@ -61,10 +62,15 @@ function _Button({
   startIcon,
   endIcon,
   loadingPosition,
+  external,
+  showExternalIcon = true,
   ...otherProps
 }, ref) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
   const defaultIconLoader = /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" });
   const isDefaultLoading = loading && loadingPosition === void 0;
+  const isExternalLink = otherProps.href && external;
   const renderContent = () => {
     if (isDefaultLoading) {
       return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
@@ -72,6 +78,14 @@ function _Button({
         /* @__PURE__ */ jsx(HiddenText, { children })
       ] });
     }
+    if (isExternalLink) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        /* @__PURE__ */ jsx(ScreenReaderOnly, { id: "external-hint", children: `(${intlConfig.formatMessage({
+          id: "c4r.button.opensInNewTab"
+        })})` })
+      ] });
+    }
     return children;
   };
   const getIconForPosition = (position) => {
@@ -84,7 +98,11 @@ function _Button({
       }
       return void 0;
     }
-    return position === "start" ? startIcon : endIcon;
+    if (position === "start") {
+      return startIcon;
+    } else {
+      return endIcon || (isExternalLink && showExternalIcon ? /* @__PURE__ */ jsx(OpenInNewOutlined, {}) : void 0);
+    }
   };
   return /* @__PURE__ */ jsx(
     Button$1,
@@ -94,7 +112,12 @@ function _Button({
       endIcon: getIconForPosition("end"),
       ...otherProps,
       role: otherProps.href ? "link" : "button",
+      ...isExternalLink && {
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
       ref,
+      "aria-describedby": isExternalLink ? "external-hint" : void 0,
       children: /* @__PURE__ */ jsx(Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
     }
   );
@@ -5097,6 +5120,7 @@ export {
   DialogStepper,
   IconButton$1 as IconButton,
   LabelWithIndicator,
+  L as Link,
   Menu$1 as Menu,
   MenuItem$1 as MenuItem,
   MenuItemFilter,
@@ -5104,6 +5128,7 @@ export {
   MultipleAutocomplete,
   MultipleSelectField,
   PasswordField,
+  ScreenReaderOnly,
   SelectField,
   Snackbar,
   SplitButton,