@carto/meridian-ds 2.7.0-alpha-loader.2 → 2.7.0-alpha-loader.4

package/dist/components/index.cjs

@@ -876,18 +876,16 @@ function _ToggleButtonGroup({
   );
 }
 const ToggleButtonGroup = React.forwardRef(_ToggleButtonGroup);
-const StyledGrid = material.styled(material.Grid, {
-  shouldForwardProp: (prop) => prop !== "fullHeight" && prop !== "height"
-})(({ fullHeight, theme }) => ({
-  display: "flex",
-  flexDirection: "column",
+const Wrapper = material.styled(material.Stack, {
+  shouldForwardProp: (prop) => prop !== "contentHeight"
+})(({ contentHeight, theme }) => ({
   alignItems: "center",
   justifyContent: "center",
   gap: theme.spacing(1.5),
-  ...fullHeight && {
+  width: "100%",
+  ...contentHeight && {
     flex: 1,
-    height: "100%",
-    width: "100%"
+    height: contentHeight
   }
 }));
 function _Loader({
@@ -895,23 +893,24 @@ function _Loader({
   secondLabel,
   color = "primary",
   size = 40,
-  fullHeight,
+  contentHeight,
   labelTypographyProps,
   secondLabelTypographyProps,
+  sx,
   ...otherProps
 }, ref) {
   const labelText = cssUtils.useTranslationWithFallback("c4r.utils.loader.label", label);
   const hasAnyLabel = labelText || secondLabel;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    StyledGrid,
+    Wrapper,
     {
-      container: true,
-      fullHeight,
+      contentHeight,
+      sx,
       ...otherProps,
       ref,
       "aria-busy": true,
       "data-name": "loader",
-      "data-full-height": fullHeight,
+      "data-content-height": contentHeight,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           material.CircularProgress,

package/dist/components/index.js

@@ -1,6 +1,6 @@
 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, Select, FormControl, InputLabel, FormHelperText, Link, Checkbox, IconButton as IconButton$1, ListItemText, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Grid, Stack, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, alpha, useTheme, AppBar as AppBar$1, Toolbar, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Snackbar as Snackbar$1, Portal, Fade } from "@mui/material";
+import { styled, Box, Button as Button$1, CircularProgress, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, Select, FormControl, InputLabel, FormHelperText, Link, Checkbox, IconButton as IconButton$1, ListItemText, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Stack, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, alpha, useTheme, AppBar as AppBar$1, Toolbar, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Snackbar as Snackbar$1, Portal, Fade } from "@mui/material";
 import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutline, ErrorOutline, CloseOutlined, Check, TodayOutlined } from "@mui/icons-material";
 import { u as useTranslationWithFallback, T as Typography, c as ICON_SIZE_SMALL, i as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, h as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, j as useImperativeIntl, b as ICON_SIZE_MEDIUM, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles } from "../css-utils-CjUBRJVK.js";
 import { a } from "../css-utils-CjUBRJVK.js";
@@ -876,18 +876,16 @@ function _ToggleButtonGroup({
   );
 }
 const ToggleButtonGroup = forwardRef(_ToggleButtonGroup);
-const StyledGrid = styled(Grid, {
-  shouldForwardProp: (prop) => prop !== "fullHeight" && prop !== "height"
-})(({ fullHeight, theme }) => ({
-  display: "flex",
-  flexDirection: "column",
+const Wrapper = styled(Stack, {
+  shouldForwardProp: (prop) => prop !== "contentHeight"
+})(({ contentHeight, theme }) => ({
   alignItems: "center",
   justifyContent: "center",
   gap: theme.spacing(1.5),
-  ...fullHeight && {
+  width: "100%",
+  ...contentHeight && {
     flex: 1,
-    height: "100%",
-    width: "100%"
+    height: contentHeight
   }
 }));
 function _Loader({
@@ -895,23 +893,24 @@ function _Loader({
   secondLabel,
   color = "primary",
   size = 40,
-  fullHeight,
+  contentHeight,
   labelTypographyProps,
   secondLabelTypographyProps,
+  sx,
   ...otherProps
 }, ref) {
   const labelText = useTranslationWithFallback("c4r.utils.loader.label", label);
   const hasAnyLabel = labelText || secondLabel;
   return /* @__PURE__ */ jsxs(
-    StyledGrid,
+    Wrapper,
     {
-      container: true,
-      fullHeight,
+      contentHeight,
+      sx,
       ...otherProps,
       ref,
       "aria-busy": true,
       "data-name": "loader",
-      "data-full-height": fullHeight,
+      "data-content-height": contentHeight,
       children: [
         /* @__PURE__ */ jsx(
           CircularProgress,

package/dist/types/components/Loader/Loader.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material';
 import { TypographyProps } from '../Typography';
 export type LoaderProps = {
     /**
@@ -33,10 +34,16 @@ export type LoaderProps = {
      */
     size?: number | string;
     /**
-     * If `true`, the component will take the full height of its container.
-     * @default false
+     * The height of the component.
+     * If using a number, the pixel unit is assumed.
+     * If using a string, you need to provide the CSS unit, for example '3rem'.
+     * @default undefined
+     */
+    contentHeight?: number | string;
+    /**
+     * The props to pass to the container element to override the default styles.
      */
-    fullHeight?: boolean;
+    sx?: SxProps<Theme>;
 };
 declare const Loader: import('react').ForwardRefExoticComponent<LoaderProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Loader;

package/dist/types/components/Loader/Loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../../src/components/Loader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAA;AAE3D,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAA;AAG3D,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,oBAAoB,CAAC,EAAE,eAAe,CAAA;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;OAEG;IACH,0BAA0B,CAAC,EAAE,eAAe,CAAA;IAC5C;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC/B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAgFD,QAAA,MAAM,MAAM,wGAAsB,CAAA;AAClC,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../../src/components/Loader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAA;AAC3D,OAAO,EAAmC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC/E,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAA;AAG3D,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,oBAAoB,CAAC,EAAE,eAAe,CAAA;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;OAEG;IACH,0BAA0B,CAAC,EAAE,eAAe,CAAA;IAC5C;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC/B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CACpB,CAAA;AA+ED,QAAA,MAAM,MAAM,wGAAsB,CAAA;AAClC,eAAe,MAAM,CAAA"}

package/dist/types/components/Loader/Loader.stories.d.ts

@@ -24,13 +24,13 @@ declare const options: {
         secondLabelTypographyProps: {
             control: "object";
         };
-        fullHeight: {
+        contentHeight: {
             table: {
                 defaultValue: {
                     summary: string;
                 };
             };
-            control: "boolean";
+            control: "text";
         };
     };
     args: {
@@ -65,8 +65,11 @@ export declare const Size: {
 export declare const LabelAndSecondLabel: {
     render: (args: LoaderProps) => import("react/jsx-runtime").JSX.Element;
 };
-export declare const FullHeight: {
+export declare const ContentHeight: {
     render: (args: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        contentHeight: number;
+    };
 };
 export declare const CustomSXStyles: {
     render: (args: LoaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Loader/Loader.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Loader/Loader.stories.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG9C,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CG,CAAA;AAChB,eAAe,OAAO,CAAA;AAqGtB,eAAO,MAAM,UAAU;mBAnGC,WAAW;;;;;;CAwGlC,CAAA;AAED,eAAO,MAAM,KAAK;mBAxGW,WAAW;CA0GvC,CAAA;AAED,eAAO,MAAM,IAAI;mBA9FW,WAAW;CAgGtC,CAAA;AAED,eAAO,MAAM,mBAAmB;mBA7EH,WAAW;CA+EvC,CAAA;AAED,eAAO,MAAM,UAAU;mBAlCO,WAAW;CAoCxC,CAAA;AAED,eAAO,MAAM,cAAc;mBA1HH,WAAW;;;;;;CA+HlC,CAAA"}
+{"version":3,"file":"Loader.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Loader/Loader.stories.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE9C,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CG,CAAA;AAChB,eAAe,OAAO,CAAA;AAsFtB,eAAO,MAAM,UAAU;mBApFC,WAAW;;;;;;CAyFlC,CAAA;AAED,eAAO,MAAM,KAAK;mBAzFW,WAAW;CA2FvC,CAAA;AAED,eAAO,MAAM,IAAI;mBA/EW,WAAW;CAiFtC,CAAA;AAED,eAAO,MAAM,mBAAmB;mBA9DH,WAAW;CAgEvC,CAAA;AAED,eAAO,MAAM,aAAa;mBAvGF,WAAW;;;;CA4GlC,CAAA;AAED,eAAO,MAAM,cAAc;mBA9GH,WAAW;;;;;;CAmHlC,CAAA"}

package/dist/types/widgets/CategoryWidgetUI/CategoryWidgetUI.styled.d.ts

@@ -1,22 +1,22 @@
 export declare const CategoriesWrapper: import('@emotion/styled').StyledComponent<import('@mui/material').GridOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-}, "typography" | "lineHeight" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "textTransform" | "color" | "left" | "right" | "bottom" | "top" | "style" | "flex" | "wrap" | "position" | "border" | "padding" | "p" | "className" | "classes" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "fontStyle" | "textAlign" | "direction" | "columns" | "container" | "children" | "sx" | "spacing" | "item" | "xs" | "sm" | "md" | "lg" | "xl" | "columnSpacing" | "rowSpacing" | "zeroMinWidth"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+}, "typography" | "lineHeight" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "textTransform" | "color" | "left" | "right" | "bottom" | "top" | "style" | "flex" | "wrap" | "position" | "border" | "padding" | "p" | "className" | "classes" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "fontStyle" | "textAlign" | "direction" | "columns" | "container" | "children" | "sx" | "spacing" | "item" | "md" | "xs" | "sm" | "lg" | "xl" | "columnSpacing" | "rowSpacing" | "zeroMinWidth"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export declare const CategoryItemGroup: import('@emotion/styled').StyledComponent<import('@mui/material').GridOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-}, "typography" | "lineHeight" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "textTransform" | "color" | "left" | "right" | "bottom" | "top" | "style" | "flex" | "wrap" | "position" | "border" | "padding" | "p" | "className" | "classes" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "fontStyle" | "textAlign" | "direction" | "columns" | "container" | "children" | "sx" | "spacing" | "item" | "xs" | "sm" | "md" | "lg" | "xl" | "columnSpacing" | "rowSpacing" | "zeroMinWidth"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+}, "typography" | "lineHeight" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "textTransform" | "color" | "left" | "right" | "bottom" | "top" | "style" | "flex" | "wrap" | "position" | "border" | "padding" | "p" | "className" | "classes" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "fontStyle" | "textAlign" | "direction" | "columns" | "container" | "children" | "sx" | "spacing" | "item" | "md" | "xs" | "sm" | "lg" | "xl" | "columnSpacing" | "rowSpacing" | "zeroMinWidth"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
     selectable?: boolean;
     name?: string;
     unselected?: boolean;
 }, {}, {}>;
 export declare const OptionsSelectedBar: import('@emotion/styled').StyledComponent<import('@mui/material').GridOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-}, "typography" | "lineHeight" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "textTransform" | "color" | "left" | "right" | "bottom" | "top" | "style" | "flex" | "wrap" | "position" | "border" | "padding" | "p" | "className" | "classes" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "fontStyle" | "textAlign" | "direction" | "columns" | "container" | "children" | "sx" | "spacing" | "item" | "xs" | "sm" | "md" | "lg" | "xl" | "columnSpacing" | "rowSpacing" | "zeroMinWidth"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+}, "typography" | "lineHeight" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "textTransform" | "color" | "left" | "right" | "bottom" | "top" | "style" | "flex" | "wrap" | "position" | "border" | "padding" | "p" | "className" | "classes" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "fontStyle" | "textAlign" | "direction" | "columns" | "container" | "children" | "sx" | "spacing" | "item" | "md" | "xs" | "sm" | "lg" | "xl" | "columnSpacing" | "rowSpacing" | "zeroMinWidth"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export declare const ProgressBar: import('@emotion/styled').StyledComponent<import('@mui/material').GridOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-}, "typography" | "lineHeight" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "textTransform" | "color" | "left" | "right" | "bottom" | "top" | "style" | "flex" | "wrap" | "position" | "border" | "padding" | "p" | "className" | "classes" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "fontStyle" | "textAlign" | "direction" | "columns" | "container" | "children" | "sx" | "spacing" | "item" | "xs" | "sm" | "md" | "lg" | "xl" | "columnSpacing" | "rowSpacing" | "zeroMinWidth"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+}, "typography" | "lineHeight" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "textTransform" | "color" | "left" | "right" | "bottom" | "top" | "style" | "flex" | "wrap" | "position" | "border" | "padding" | "p" | "className" | "classes" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "fontStyle" | "textAlign" | "direction" | "columns" | "container" | "children" | "sx" | "spacing" | "item" | "md" | "xs" | "sm" | "lg" | "xl" | "columnSpacing" | "rowSpacing" | "zeroMinWidth"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export declare const CategoryLabelWrapper: import('@emotion/styled').StyledComponent<import('@mui/material').GridOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-}, "typography" | "lineHeight" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "textTransform" | "color" | "left" | "right" | "bottom" | "top" | "style" | "flex" | "wrap" | "position" | "border" | "padding" | "p" | "className" | "classes" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "fontStyle" | "textAlign" | "direction" | "columns" | "container" | "children" | "sx" | "spacing" | "item" | "xs" | "sm" | "md" | "lg" | "xl" | "columnSpacing" | "rowSpacing" | "zeroMinWidth"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+}, "typography" | "lineHeight" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "textTransform" | "color" | "left" | "right" | "bottom" | "top" | "style" | "flex" | "wrap" | "position" | "border" | "padding" | "p" | "className" | "classes" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "fontStyle" | "textAlign" | "direction" | "columns" | "container" | "children" | "sx" | "spacing" | "item" | "md" | "xs" | "sm" | "lg" | "xl" | "columnSpacing" | "rowSpacing" | "zeroMinWidth"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
     isSelectable: boolean;
 }, {}, {}>;
 export declare const CategoryLabel: import('@emotion/styled').StyledComponent<Omit<import('../../components').TypographyProps, "ref"> & import('react').RefAttributes<HTMLElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "2.7.0-alpha-loader.2",
+  "version": "2.7.0-alpha-loader.4",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {