@carto/meridian-ds 2.0.1 → 2.0.2-alpha-external-link.10

package/CHANGELOG.md

@@ -2,8 +2,14 @@
 
 ## Unreleased
 
+- New Link components and Button with externalLink behavior [#202](https://github.com/CartoDB/meridian-ds/pull/202)
+
 ## 2.0
 
+### 2.0.2
+
+- fix(TimeSeriesWidgetUI): Fix TimeSeriesWidgetUI overflowing available height [#226](https://github.com/CartoDB/meridian-ds/pull/226)
+
 ### 2.0.1
 
 - Autocomplete: fix flooding issue with console message [#225](https://github.com/CartoDB/meridian-ds/pull/225)

package/dist/{Alert-BzEgeyQJ.cjs → Alert-CVOuW60y.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,100 @@ function _IconButton({
   ) });
 }
 const IconButton = React.forwardRef(_IconButton);
+const StyledLink = material.styled(material.Link)(() => ({
+  display: "inline"
+}));
+const Icon = material.styled("span", {
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "iconPosition"
+})(
+  ({ variant, iconPosition }) => ({
+    display: "inline-flex",
+    position: "relative",
+    top: "calc(1em * 5/32)",
+    // heuristic to align icon with true perceived baseline (25% offset ratio)
+    ...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"
+      }
+    },
+    // Caption and undefined variants use smaller offset and smaller icon
+    ...variant === "caption" && {
+      top: "calc(1em * 1/5)",
+      // 20% offset ratio
+      svg: {
+        fontSize: TablePaginationActions.ICON_SIZE_SMALL
+      }
+    },
+    // Button and body2 variants use medium-sized icons
+    ...(variant === "button" || variant === "body2") && {
+      top: "calc(1em * 1/4)",
+      // 25% offset ratio
+      svg: {
+        fontSize: TablePaginationActions.ICON_SIZE_MEDIUM
+      }
+    },
+    // Body1 variant uses large icons
+    ...variant === "body1" && {
+      top: "calc(1em * 1/3)",
+      // 33% offset ratio
+      svg: {
+        fontSize: TablePaginationActions.ICON_SIZE_LARGE
+      }
+    }
+  })
+);
+function _Link({
+  children,
+  variant,
+  startIcon,
+  endIcon,
+  color,
+  external,
+  showExternalIcon = true,
+  fontWeight = 500,
+  target,
+  rel,
+  "aria-describedby": ariaDescribedby,
+  ...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" : target,
+      rel: external ? "noopener noreferrer" : rel,
+      "aria-describedby": external ? "external-hint" : ariaDescribedby,
+      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 +298,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-DlpSBkrh.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, 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,100 @@ function _IconButton({
   ) });
 }
 const IconButton = forwardRef(_IconButton);
+const StyledLink = styled(Link$1)(() => ({
+  display: "inline"
+}));
+const Icon = styled("span", {
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "iconPosition"
+})(
+  ({ variant, iconPosition }) => ({
+    display: "inline-flex",
+    position: "relative",
+    top: "calc(1em * 5/32)",
+    // heuristic to align icon with true perceived baseline (25% offset ratio)
+    ...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"
+      }
+    },
+    // Caption and undefined variants use smaller offset and smaller icon
+    ...variant === "caption" && {
+      top: "calc(1em * 1/5)",
+      // 20% offset ratio
+      svg: {
+        fontSize: ICON_SIZE_SMALL
+      }
+    },
+    // Button and body2 variants use medium-sized icons
+    ...(variant === "button" || variant === "body2") && {
+      top: "calc(1em * 1/4)",
+      // 25% offset ratio
+      svg: {
+        fontSize: ICON_SIZE_MEDIUM
+      }
+    },
+    // Body1 variant uses large icons
+    ...variant === "body1" && {
+      top: "calc(1em * 1/3)",
+      // 33% offset ratio
+      svg: {
+        fontSize: ICON_SIZE_LARGE
+      }
+    }
+  })
+);
+function _Link({
+  children,
+  variant,
+  startIcon,
+  endIcon,
+  color,
+  external,
+  showExternalIcon = true,
+  fontWeight = 500,
+  target,
+  rel,
+  "aria-describedby": ariaDescribedby,
+  ...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" : target,
+      rel: external ? "noopener noreferrer" : rel,
+      "aria-describedby": external ? "external-hint" : ariaDescribedby,
+      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 +297,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/{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/{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 reactIntl = require("react-intl");
 const material = require("@mui/material");
-const TablePaginationActions = require("../TablePaginationActions-mbbjzV6Y.cjs");
+const iconsMaterial = require("@mui/icons-material");
+const TablePaginationActions = require("../TablePaginationActions-MwqZJoRm.cjs");
+const Alert$1 = require("../Alert-CVOuW60y.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
-const reactIntl = require("react-intl");
-const iconsMaterial = require("@mui/icons-material");
-const Alert$1 = require("../Alert-BzEgeyQJ.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,16 @@ function _Button({
   startIcon,
   endIcon,
   loadingPosition,
+  external,
+  showExternalIcon = true,
+  "aria-describedby": ariaDescribedby,
   ...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 +79,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 +99,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 +113,12 @@ function _Button({
       endIcon: getIconForPosition("end"),
       ...otherProps,
       role: otherProps.href ? "link" : "button",
+      ...isExternalLink && {
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
       ref,
+      "aria-describedby": isExternalLink ? "external-hint" : ariaDescribedby,
       children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
     }
   );
@@ -5059,6 +5082,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 { useIntl } from "react-intl";
 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 { 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-DlpSBkrh.js";
+import { L } from "../Alert-DlpSBkrh.js";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.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 "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,16 @@ function _Button({
   startIcon,
   endIcon,
   loadingPosition,
+  external,
+  showExternalIcon = true,
+  "aria-describedby": ariaDescribedby,
   ...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 +79,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 +99,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 +113,12 @@ function _Button({
       endIcon: getIconForPosition("end"),
       ...otherProps,
       role: otherProps.href ? "link" : "button",
+      ...isExternalLink && {
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
       ref,
+      "aria-describedby": isExternalLink ? "external-hint" : ariaDescribedby,
       children: /* @__PURE__ */ jsx(Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
     }
   );
@@ -5089,6 +5113,7 @@ export {
   DialogStepper,
   IconButton$1 as IconButton,
   LabelWithIndicator,
+  L as Link,
   Menu$1 as Menu,
   MenuItem$1 as MenuItem,
   MenuItemFilter,
@@ -5096,6 +5121,7 @@ export {
   MultipleAutocomplete,
   MultipleSelectField,
   PasswordField,
+  ScreenReaderOnly,
   SelectField,
   Snackbar,
   SplitButton,

package/dist/theme/index.cjs

@@ -3,11 +3,11 @@ var _a, _b, _c, _d, _e, _f, _g, _h;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const material = require("@mui/material");
 const jsxRuntime = require("react/jsx-runtime");
-const TablePaginationActions = require("../TablePaginationActions-mbbjzV6Y.cjs");
+const TablePaginationActions = require("../TablePaginationActions-MwqZJoRm.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const xDatePickers = require("@mui/x-date-pickers");
-const MenuItem = require("../MenuItem-C4bG5WHw.cjs");
+const MenuItem = require("../MenuItem-CyIdh2wX.cjs");
 const paletteUtils = require("../paletteUtils-B9ybmwiI.cjs");
 const tooltipArrowSize = 1;
 const tooltipSeparation = 0.5;

package/dist/theme/index.js

@@ -1,12 +1,12 @@
 var _a, _b, _c, _d, _e, _f, _g, _h;
 import { alpha, Tooltip, responsiveFontSizes, createTheme } from "@mui/material";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { T as Typography, a as TablePaginationActions, I as ICON_SIZE_LARGE, b as ICON_SIZE_MEDIUM, c as ICON_SIZE_SMALL, g as getSpacing, M as MENU_ITEM_SIZE_DEFAULT, d as MENU_LIST_MAX_SIZE, e as MENU_ITEM_SIZE_DENSE, A as APPBAR_SIZE, B as BREAKPOINTS, S as SPACING } from "../TablePaginationActions-Cz5Hbi6N.js";
-import { f, N } from "../TablePaginationActions-Cz5Hbi6N.js";
+import { T as Typography, a as TablePaginationActions, I as ICON_SIZE_LARGE, b as ICON_SIZE_MEDIUM, c as ICON_SIZE_SMALL, g as getSpacing, M as MENU_ITEM_SIZE_DEFAULT, d as MENU_LIST_MAX_SIZE, e as MENU_ITEM_SIZE_DENSE, A as APPBAR_SIZE, B as BREAKPOINTS, S as SPACING } from "../TablePaginationActions-BWer8cmX.js";
+import { f, N } from "../TablePaginationActions-BWer8cmX.js";
 import { Cancel, EventOutlined, ChevronRightOutlined, ChevronLeftOutlined, ExpandMoreOutlined, CheckCircleOutlined } from "@mui/icons-material";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { renderDigitalClockTimeView } from "@mui/x-date-pickers";
-import { M as MenuItem } from "../MenuItem-C1DvWMry.js";
+import { M as MenuItem } from "../MenuItem-C8x-GasJ.js";
 import { c as commonPalette } from "../paletteUtils-BHqJlHm9.js";
 import { g } from "../paletteUtils-BHqJlHm9.js";
 const tooltipArrowSize = 1;

package/dist/types/components/atoms/Button.d.ts

@@ -9,6 +9,17 @@ export type ButtonProps = MUIButtonProps<React.ElementType, {
      * - 'end': Shows spinner at the end position, replacing the endIcon
      */
     loadingPosition?: 'start' | 'end';
+    /**
+     * Whether the button is external. If true, the button will open in a new tab.
+     * Needs to have a href prop to be considered external.
+     */
+    external?: boolean;
+    /**
+     * Whether to show the external icon when external is true. Defaults to true.
+     * Needs to have a href prop to be considered external.
+     */
+    showExternalIcon?: boolean;
+    'aria-describedby'?: string;
 }>;
 declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/types/components/atoms/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,IAAI,cAAc,EAK9B,MAAM,eAAe,CAAA;AAmBtB,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,KAAK,CAAC,WAAW,EACjB;IACE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAClC,CACF,CAAA;AAoED,QAAA,MAAM,MAAM,wHAAsB,CAAA;AAClC,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,WAAW,IAAI,cAAc,EAK9B,MAAM,eAAe,CAAA;AAuBtB,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,KAAK,CAAC,WAAW,EACjB;IACE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CACF,CAAA;AAoGD,QAAA,MAAM,MAAM,wHAAsB,CAAA;AAClC,eAAe,MAAM,CAAA"}

package/dist/types/components/atoms/Link.d.ts

@@ -0,0 +1,39 @@
+import { LinkProps as MUILinkProps } from '@mui/material';
+export type LinkProps = MUILinkProps<React.ElementType, {
+    endIcon?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    /**
+     * Whether the link is external. If true, the link will open in a new tab.
+     */
+    external?: boolean;
+    /**
+     * Whether to show the external icon when external is true. Defaults to true.
+     */
+    showExternalIcon?: boolean;
+    /**
+     * For target="_blank", use the `external` prop instead for better consistency and accessibility.
+     *
+     * Instead of: `<Link target="_blank" rel="noopener noreferrer" href="...">Link text</Link>`
+     *
+     * Use: `<Link external href="...">Link text</Link>`
+     *
+     * The `external` prop automatically handles target="_blank", rel="noopener noreferrer",
+     * and adds proper accessibility attributes and visual indicators.
+     */
+    target?: string;
+    /**
+     * For rel="noopener noreferrer", use the `external` prop instead for better consistency and accessibility.
+     *
+     * Instead of: `<Link target="_blank" rel="noopener noreferrer" href="...">Link text</Link>`
+     *
+     * Use: `<Link external href="...">Link text</Link>`
+     *
+     * The `external` prop automatically handles target="_blank", rel="noopener noreferrer",
+     * and adds proper accessibility attributes and visual indicators.
+     */
+    rel?: string;
+    'aria-describedby'?: string;
+}>;
+declare const Link: import('react').ForwardRefExoticComponent<Omit<LinkProps, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
+export default Link;
+//# sourceMappingURL=Link.d.ts.map

package/dist/types/components/atoms/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,SAAS,IAAI,YAAY,EAG1B,MAAM,eAAe,CAAA;AAkEtB,MAAM,MAAM,SAAS,GAAG,YAAY,CAClC,KAAK,CAAC,WAAW,EACjB;IACE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CACF,CAAA;AA6DD,QAAA,MAAM,IAAI,sHAAoB,CAAA;AAC9B,eAAe,IAAI,CAAA"}

package/dist/types/components/atoms/ScreenReaderOnly.d.ts

@@ -0,0 +1,3 @@
+declare const ScreenReaderOnly: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export default ScreenReaderOnly;
+//# sourceMappingURL=ScreenReaderOnly.d.ts.map

package/dist/types/components/atoms/ScreenReaderOnly.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenReaderOnly.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/ScreenReaderOnly.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,gBAAgB,+NAUnB,CAAA;AAEH,eAAe,gBAAgB,CAAA"}

package/dist/types/components/atoms/index.d.ts

@@ -6,6 +6,8 @@ export { default as SelectField } from './SelectField';
 export { default as ToggleButtonGroup } from './ToggleButtonGroup';
 export { default as Typography } from './Typography';
 export { default as IconButton } from './IconButton';
+export { default as Link } from './Link';
+export { default as ScreenReaderOnly } from './ScreenReaderOnly';
 export type * from './Button';
 export type * from './SplitButton';
 export type * from './LabelWithIndicator';
@@ -14,4 +16,5 @@ export type * from './SelectField';
 export type * from './ToggleButtonGroup';
 export type * from './Typography';
 export type * from './IconButton';
+export type * from './Link';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/atoms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AAEpD,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,sBAAsB,CAAA;AACzC,mBAAmB,iBAAiB,CAAA;AACpC,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,qBAAqB,CAAA;AACxC,mBAAmB,cAAc,CAAA;AACjC,mBAAmB,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAEhE,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,sBAAsB,CAAA;AACzC,mBAAmB,iBAAiB,CAAA;AACpC,mBAAmB,eAAe,CAAA;AAClC,mBAAmB,qBAAqB,CAAA;AACxC,mBAAmB,cAAc,CAAA;AACjC,mBAAmB,cAAc,CAAA;AACjC,mBAAmB,QAAQ,CAAA"}

package/dist/types/localization/en.d.ts

@@ -10,6 +10,7 @@ declare const _default: {
             save: string;
             add: string;
             showOptions: string;
+            opensInNewTab: string;
         };
         form: {
             selectAll: string;

package/dist/types/localization/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/localization/en.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAsJ0B"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/localization/en.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAuJ0B"}

package/dist/types/localization/es.d.ts

@@ -10,6 +10,7 @@ declare const _default: {
             save: string;
             add: string;
             showOptions: string;
+            opensInNewTab: string;
         };
         form: {
             selectAll: string;

package/dist/types/localization/es.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../../src/localization/es.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAwJ0B"}
+{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../../src/localization/es.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAyJ0B"}

package/dist/types/localization/id.d.ts

@@ -10,6 +10,7 @@ declare const _default: {
             save: string;
             add: string;
             showOptions: string;
+            opensInNewTab: string;
         };
         form: {
             selectAll: string;

package/dist/types/localization/id.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"id.d.ts","sourceRoot":"","sources":["../../../src/localization/id.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAsJ0B"}
+{"version":3,"file":"id.d.ts","sourceRoot":"","sources":["../../../src/localization/id.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAuJ0B"}

package/dist/types/localization/index.d.ts

@@ -11,6 +11,7 @@ export declare const messages: {
                 save: string;
                 add: string;
                 showOptions: string;
+                opensInNewTab: string;
             };
             form: {
                 selectAll: string;
@@ -159,6 +160,7 @@ export declare const messages: {
                 save: string;
                 add: string;
                 showOptions: string;
+                opensInNewTab: string;
             };
             form: {
                 selectAll: string;
@@ -305,6 +307,7 @@ export declare const messages: {
                 save: string;
                 add: string;
                 showOptions: string;
+                opensInNewTab: string;
             };
             form: {
                 selectAll: string;

package/dist/types/localization/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/localization/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/localization/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiB,CAAA"}

package/dist/types/widgets/ChartLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/widgets/ChartLegend.tsx"],"names":[],"mappings":"AAoEA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,kBAAkB,EAClB,MAAkB,EAClB,eAAe,GAChB,EAAE;IACD,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACzD,kBAAkB,EAAE,MAAM,EAAE,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD,2CAkJA"}
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/widgets/ChartLegend.tsx"],"names":[],"mappings":"AAmEA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,kBAAkB,EAClB,MAAkB,EAClB,eAAe,GAChB,EAAE;IACD,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACzD,kBAAkB,EAAE,MAAM,EAAE,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD,2CAsJA"}

package/dist/types/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComparativeCategoryWidgetUI.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,UAAU,EAAwB,MAAM,wBAAwB,CAAA;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAGtE,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAA;AAU1E,MAAM,MAAM,gCAAgC,GAAG;IAC7C,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,IAAI,EAAE,YAAY,EAAE,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gBAAgB,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAA;IACjD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,0BAA0B,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC3D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IAC9C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,EAClD,KAA+B,EAC/B,IAAsC,EACtC,MAAgC,EAChC,MAAgC,EAChC,QAAY,EACZ,KAAwB,EACxB,SAAgB,EAChB,gBAAgB,EAChB,UAAiB,EACjB,UAAiB,EACjB,kBAA4C,EAC5C,0BAAqC,EACrC,SAAyD,EACzD,gBAAgE,EAChE,OAAc,EACd,SAAiB,GAClB,EAAE,gCAAgC,2CAwSlC"}
+{"version":3,"file":"ComparativeCategoryWidgetUI.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAwB,MAAM,wBAAwB,CAAA;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAGtE,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAA;AAW1E,MAAM,MAAM,gCAAgC,GAAG;IAC7C,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,IAAI,EAAE,YAAY,EAAE,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gBAAgB,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAA;IACjD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,0BAA0B,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC3D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IAC9C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,EAClD,KAA+B,EAC/B,IAAsC,EACtC,MAAgC,EAChC,MAAgC,EAChC,QAAY,EACZ,KAAwB,EACxB,SAAgB,EAChB,gBAAgB,EAChB,UAAiB,EACjB,UAAiB,EACjB,kBAA4C,EAC5C,0BAAqC,EACrC,SAAyD,EACzD,gBAAgE,EAChE,OAAc,EACd,SAAiB,GAClB,EAAE,gCAAgC,2CAwSlC"}

package/dist/widgets/index.cjs

@@ -4,12 +4,12 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const reactIntl = require("react-intl");
-const TablePaginationActions = require("../TablePaginationActions-mbbjzV6Y.cjs");
+const TablePaginationActions = require("../TablePaginationActions-MwqZJoRm.cjs");
 const _ReactEcharts = require("echarts-for-react");
 const reactWindow = require("react-window");
 const SwatchSquare = require("../SwatchSquare-B8PIY3Rd.cjs");
 const iconsMaterial = require("@mui/icons-material");
-const Alert = require("../Alert-BzEgeyQJ.cjs");
+const Alert = require("../Alert-CVOuW60y.cjs");
 const paletteUtils = require("../paletteUtils-B9ybmwiI.cjs");
 function detectTouchscreen() {
   let result = false;
@@ -2016,7 +2016,7 @@ function PieSkeleton({ height }) {
 }
 const Legend$1 = material.styled(material.Box)(({ theme }) => ({
   position: "relative",
-  padding: theme.spacing(1.25, 1, 0, 1),
+  padding: theme.spacing(0.75, 0.75, 0, 0.75),
   width: "100%"
 }));
 const ItemsContainer = material.styled(material.Box)(({ theme }) => ({
@@ -2025,9 +2025,8 @@ const ItemsContainer = material.styled(material.Box)(({ theme }) => ({
   flexDirection: "row",
   overflowX: "hidden",
   gap: theme.spacing(2),
-  // Accessibility tweak to display focus indicator properly
-  padding: theme.spacing(0.5),
-  margin: theme.spacing(-0.5)
+  // a11y: padding prevents clipping focus outline
+  padding: theme.spacing(0.25)
 }));
 const Item = material.styled(material.Box)(({ theme }) => ({
   display: "flex",
@@ -2081,6 +2080,9 @@ function ChartLegend({
   const legendRef = React.useRef(null);
   const containerRef = React.useRef(null);
   const showMoreButtonsRef = React.useRef(null);
+  if (series.length === 0) {
+    series = [{ name: "", color: theme.palette.text.disabled }];
+  }
   const intl = reactIntl.useIntl();
   const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   function handleClickRight() {
@@ -2141,7 +2143,7 @@ function ChartLegend({
           return /* @__PURE__ */ jsxRuntime.jsxs(
             Item,
             {
-              tabIndex: 0,
+              tabIndex: onCategoryClick ? 0 : void 0,
               onClick: onCategoryClick ? () => onCategoryClick(category.name) : void 0,
               onKeyDown: onCategoryClick ? (e) => onCategoryPress(e, category.name) : void 0,
               style: {
@@ -2159,7 +2161,7 @@ function ChartLegend({
                   {
                     variant: "overline",
                     color: selected ? void 0 : "text.disabled",
-                    children: label
+                    children: label || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " })
                   }
                 )
               ]
@@ -4764,7 +4766,7 @@ function TimeSeriesWidgetUIContent({
   );
   const isLegendVisible = Boolean(showLegend ?? series.length > 1);
   const header = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { color: "textSecondary", variant: "caption", children: currentDate ?? "-" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { color: "textSecondary", variant: "caption", children: currentDate || "-" }) }),
     filterable && showClearButton && /* @__PURE__ */ jsxRuntime.jsx(
       material.Link,
       {
@@ -5269,7 +5271,7 @@ function ComparativeCategoryWidgetUI({
         { id: "c4r.widgets.category.selectedItems" },
         { items: selectedCategories.length }
       ) : intlConfig.formatMessage({ id: "c4r.widgets.category.all" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", component: "div", children: searchActive ? /* @__PURE__ */ jsxRuntime.jsx(material.Link, { onClick: applyTempSelection, children: intlConfig.formatMessage({ id: "c4r.widgets.category.apply" }) }) : blockingActive ? /* @__PURE__ */ jsxRuntime.jsx(material.Link, { onClick: disableBlocking, children: intlConfig.formatMessage({
+      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", component: "div", children: searchActive ? /* @__PURE__ */ jsxRuntime.jsx(Alert.Link, { onClick: applyTempSelection, children: intlConfig.formatMessage({ id: "c4r.widgets.category.apply" }) }) : blockingActive ? /* @__PURE__ */ jsxRuntime.jsx(Alert.Link, { onClick: disableBlocking, children: intlConfig.formatMessage({
         id: "c4r.widgets.category.unlock"
       }) }) : selectedCategories.length ? /* @__PURE__ */ jsxRuntime.jsxs(
         material.Box,
@@ -5280,11 +5282,11 @@ function ComparativeCategoryWidgetUI({
             gap: theme.spacing(1)
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(material.Link, { onClick: enableBlocking, children: intlConfig.formatMessage({
+            /* @__PURE__ */ jsxRuntime.jsx(Alert.Link, { onClick: enableBlocking, children: intlConfig.formatMessage({
               id: "c4r.widgets.category.lock"
             }) }),
             /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { orientation: "vertical", flexItem: true }),
-            /* @__PURE__ */ jsxRuntime.jsx(material.Link, { onClick: clearSelection, children: intlConfig.formatMessage({
+            /* @__PURE__ */ jsxRuntime.jsx(Alert.Link, { onClick: clearSelection, children: intlConfig.formatMessage({
               id: "c4r.widgets.category.clear"
             }) })
           ]

package/dist/widgets/index.js

@@ -2,12 +2,12 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React, { useMemo, useState, useEffect, useCallback, useRef, createContext, useContext, useLayoutEffect, createRef } from "react";
 import { useTheme, styled, Box, Skeleton, Grid, Link, darken, Button, Divider, TextField, InputAdornment, Checkbox, Tooltip, debounce, Slider, TableCell, Table, TableHead, TableRow, TableBody, TableContainer, TableSortLabel, TablePagination, IconButton as IconButton$1, Menu, MenuItem, SvgIcon, lighten, Typography as Typography$1, ClickAwayListener, ToggleButton, capitalize, ListItem, Chip, List, Paper, Popover, Select, ListItemText, Collapse, Drawer, Icon, LinearProgress } from "@mui/material";
 import { useIntl } from "react-intl";
-import { h as getDefaultExportFromCjs, u as useImperativeIntl, T as Typography, S as SPACING, B as BREAKPOINTS, a as TablePaginationActions, b as ICON_SIZE_MEDIUM } from "../TablePaginationActions-Cz5Hbi6N.js";
+import { h as getDefaultExportFromCjs, u as useImperativeIntl, T as Typography, S as SPACING, B as BREAKPOINTS, a as TablePaginationActions, b as ICON_SIZE_MEDIUM } from "../TablePaginationActions-BWer8cmX.js";
 import _ReactEcharts from "echarts-for-react";
 import { FixedSizeList } from "react-window";
 import { S as Search, a as SwatchSquare } from "../SwatchSquare-CaaLsjAC.js";
 import { ChevronLeft, ChevronRight, KeyboardArrowDown, ErrorOutline, Cancel, VisibilityOutlined, VisibilityOffOutlined, ExpandLess, ExpandMore, Close, LayersOutlined, MoreVert } from "@mui/icons-material";
-import { I as IconButton, A as Alert } from "../Alert-CnaTtNJd.js";
+import { I as IconButton, L as Link$1, A as Alert } from "../Alert-DlpSBkrh.js";
 import { a as getColorByCategory, c as commonPalette, b as getPalette } from "../paletteUtils-BHqJlHm9.js";
 function detectTouchscreen() {
   let result = false;
@@ -2014,7 +2014,7 @@ function PieSkeleton({ height }) {
 }
 const Legend$1 = styled(Box)(({ theme }) => ({
   position: "relative",
-  padding: theme.spacing(1.25, 1, 0, 1),
+  padding: theme.spacing(0.75, 0.75, 0, 0.75),
   width: "100%"
 }));
 const ItemsContainer = styled(Box)(({ theme }) => ({
@@ -2023,9 +2023,8 @@ const ItemsContainer = styled(Box)(({ theme }) => ({
   flexDirection: "row",
   overflowX: "hidden",
   gap: theme.spacing(2),
-  // Accessibility tweak to display focus indicator properly
-  padding: theme.spacing(0.5),
-  margin: theme.spacing(-0.5)
+  // a11y: padding prevents clipping focus outline
+  padding: theme.spacing(0.25)
 }));
 const Item = styled(Box)(({ theme }) => ({
   display: "flex",
@@ -2079,6 +2078,9 @@ function ChartLegend({
   const legendRef = useRef(null);
   const containerRef = useRef(null);
   const showMoreButtonsRef = useRef(null);
+  if (series.length === 0) {
+    series = [{ name: "", color: theme.palette.text.disabled }];
+  }
   const intl = useIntl();
   const intlConfig = useImperativeIntl(intl);
   function handleClickRight() {
@@ -2139,7 +2141,7 @@ function ChartLegend({
           return /* @__PURE__ */ jsxs(
             Item,
             {
-              tabIndex: 0,
+              tabIndex: onCategoryClick ? 0 : void 0,
               onClick: onCategoryClick ? () => onCategoryClick(category.name) : void 0,
               onKeyDown: onCategoryClick ? (e) => onCategoryPress(e, category.name) : void 0,
               style: {
@@ -2157,7 +2159,7 @@ function ChartLegend({
                   {
                     variant: "overline",
                     color: selected ? void 0 : "text.disabled",
-                    children: label
+                    children: label || /* @__PURE__ */ jsx(Fragment, { children: " " })
                   }
                 )
               ]
@@ -4762,7 +4764,7 @@ function TimeSeriesWidgetUIContent({
   );
   const isLegendVisible = Boolean(showLegend ?? series.length > 1);
   const header = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { color: "textSecondary", variant: "caption", children: currentDate ?? "-" }) }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { color: "textSecondary", variant: "caption", children: currentDate || "-" }) }),
     filterable && showClearButton && /* @__PURE__ */ jsx(
       Link,
       {
@@ -5267,7 +5269,7 @@ function ComparativeCategoryWidgetUI({
         { id: "c4r.widgets.category.selectedItems" },
         { items: selectedCategories.length }
       ) : intlConfig.formatMessage({ id: "c4r.widgets.category.all" }) }),
-      /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "div", children: searchActive ? /* @__PURE__ */ jsx(Link, { onClick: applyTempSelection, children: intlConfig.formatMessage({ id: "c4r.widgets.category.apply" }) }) : blockingActive ? /* @__PURE__ */ jsx(Link, { onClick: disableBlocking, children: intlConfig.formatMessage({
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "div", children: searchActive ? /* @__PURE__ */ jsx(Link$1, { onClick: applyTempSelection, children: intlConfig.formatMessage({ id: "c4r.widgets.category.apply" }) }) : blockingActive ? /* @__PURE__ */ jsx(Link$1, { onClick: disableBlocking, children: intlConfig.formatMessage({
         id: "c4r.widgets.category.unlock"
       }) }) : selectedCategories.length ? /* @__PURE__ */ jsxs(
         Box,
@@ -5278,11 +5280,11 @@ function ComparativeCategoryWidgetUI({
             gap: theme.spacing(1)
           },
           children: [
-            /* @__PURE__ */ jsx(Link, { onClick: enableBlocking, children: intlConfig.formatMessage({
+            /* @__PURE__ */ jsx(Link$1, { onClick: enableBlocking, children: intlConfig.formatMessage({
               id: "c4r.widgets.category.lock"
             }) }),
             /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true }),
-            /* @__PURE__ */ jsx(Link, { onClick: clearSelection, children: intlConfig.formatMessage({
+            /* @__PURE__ */ jsx(Link$1, { onClick: clearSelection, children: intlConfig.formatMessage({
               id: "c4r.widgets.category.clear"
             }) })
           ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "2.0.1",
+  "version": "2.0.2-alpha-external-link.10",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {