@carto/meridian-ds 2.7.0-alpha-loader.1 → 2.7.0-alpha-loader.3

package/dist/components/index.cjs

@@ -876,34 +876,36 @@ function _ToggleButtonGroup({
   );
 }
 const ToggleButtonGroup = React.forwardRef(_ToggleButtonGroup);
-const StyledGrid = material.styled(material.Grid, {
-  shouldForwardProp: (prop) => prop !== "fullHeight" && prop !== "height"
+const Wrapper = material.styled(material.Stack, {
+  shouldForwardProp: (prop) => prop !== "fullHeight"
 })(({ fullHeight, theme }) => ({
-  display: "flex",
-  flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
   gap: theme.spacing(1.5),
+  width: "100%",
   ...fullHeight && {
     flex: 1,
-    height: "100%",
-    width: "100%"
+    height: "100%"
   }
 }));
 function _Loader({
   label,
   secondLabel,
   color = "primary",
+  size = 40,
   fullHeight,
+  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,
+      sx,
       ...otherProps,
       ref,
       "aria-busy": true,
@@ -914,16 +916,27 @@ function _Loader({
           material.CircularProgress,
           {
             color,
+            size,
             "aria-labelledby": hasAnyLabel ? "loader-label" : void 0
           }
         ),
         hasAnyLabel && /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "column", alignItems: "center", children: [
-          labelText && /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "body2", color: "textSecondary", id: "loader-label", children: labelText }),
+          labelText && /* @__PURE__ */ jsxRuntime.jsx(
+            cssUtils.Typography,
+            {
+              variant: "body2",
+              color: "textSecondary",
+              ...labelTypographyProps,
+              id: "loader-label",
+              children: labelText
+            }
+          ),
           secondLabel && /* @__PURE__ */ jsxRuntime.jsx(
             cssUtils.Typography,
             {
               variant: "body2",
               color: "textSecondary",
+              ...secondLabelTypographyProps,
               id: labelText ? void 0 : "loader-label",
               children: secondLabel
             }

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,34 +876,36 @@ function _ToggleButtonGroup({
   );
 }
 const ToggleButtonGroup = forwardRef(_ToggleButtonGroup);
-const StyledGrid = styled(Grid, {
-  shouldForwardProp: (prop) => prop !== "fullHeight" && prop !== "height"
+const Wrapper = styled(Stack, {
+  shouldForwardProp: (prop) => prop !== "fullHeight"
 })(({ fullHeight, theme }) => ({
-  display: "flex",
-  flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
   gap: theme.spacing(1.5),
+  width: "100%",
   ...fullHeight && {
     flex: 1,
-    height: "100%",
-    width: "100%"
+    height: "100%"
   }
 }));
 function _Loader({
   label,
   secondLabel,
   color = "primary",
+  size = 40,
   fullHeight,
+  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,
+      sx,
       ...otherProps,
       ref,
       "aria-busy": true,
@@ -914,16 +916,27 @@ function _Loader({
           CircularProgress,
           {
             color,
+            size,
             "aria-labelledby": hasAnyLabel ? "loader-label" : void 0
           }
         ),
         hasAnyLabel && /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", children: [
-          labelText && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", id: "loader-label", children: labelText }),
+          labelText && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              color: "textSecondary",
+              ...labelTypographyProps,
+              id: "loader-label",
+              children: labelText
+            }
+          ),
           secondLabel && /* @__PURE__ */ jsx(
             Typography,
             {
               variant: "body2",
               color: "textSecondary",
+              ...secondLabelTypographyProps,
               id: labelText ? void 0 : "loader-label",
               children: secondLabel
             }

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

@@ -1,9 +1,47 @@
 import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { TypographyProps } from '../Typography';
 export type LoaderProps = {
+    /**
+     * The label to display.
+     * If not provided, the default label 'Loading...' will be displayed.
+     */
     label?: ReactNode;
+    /**
+     * The props to pass to the label Typography component to override the default styles.
+     */
+    labelTypographyProps?: TypographyProps;
+    /**
+     * The second label to display.
+     * If not provided, no second label will be displayed.
+     */
     secondLabel?: ReactNode;
+    /**
+     * The props to pass to the second label Typography component to override the default styles.
+     */
+    secondLabelTypographyProps?: TypographyProps;
+    /**
+     * The color of the circular progress.
+     * It supports both primary and secondary colors.
+     * @default 'primary'
+     */
     color?: 'primary' | 'secondary';
+    /**
+     * The size 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 40
+     */
+    size?: number | string;
+    /**
+     * If `true`, the component will take the full height of its container.
+     * @default false
+     */
     fullHeight?: boolean;
+    /**
+     * The props to pass to the container element to override the default styles.
+     */
+    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;AAK3D,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAsED,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;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;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

@@ -8,12 +8,34 @@ declare const options: {
             control: "select";
             options: string[];
         };
+        size: {
+            control: "select";
+            options: number[];
+        };
+        label: {
+            control: "text";
+        };
+        secondLabel: {
+            control: "text";
+        };
+        labelTypographyProps: {
+            control: "object";
+        };
+        secondLabelTypographyProps: {
+            control: "object";
+        };
+        fullHeight: {
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: "boolean";
+        };
     };
     args: {
-        variant: string;
         color: string;
-        disabled: boolean;
-        loading: boolean;
+        fullHeight: boolean;
     };
     parameters: {
         design: {
@@ -37,6 +59,9 @@ export declare const Playground: {
 export declare const Color: {
     render: (args: LoaderProps) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const Size: {
+    render: (args: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+};
 export declare const LabelAndSecondLabel: {
     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;;;;;;;;;;;;;;;;;;;;;;;;;CAyBG,CAAA;AAChB,eAAe,OAAO,CAAA;AA6DtB,eAAO,MAAM,UAAU;mBA3DC,WAAW;;;;;;CAgElC,CAAA;AAED,eAAO,MAAM,KAAK;mBAhEW,WAAW;CAkEvC,CAAA;AAED,eAAO,MAAM,mBAAmB;mBAtDH,WAAW;CAwDvC,CAAA;AAED,eAAO,MAAM,UAAU;mBA9BO,WAAW;CAgCxC,CAAA;AAED,eAAO,MAAM,cAAc;mBA9EH,WAAW;;;;;;CAmFlC,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;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"}

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.1",
+  "version": "2.7.0-alpha-loader.3",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {