@carto/meridian-ds 2.7.0 → 2.8.0-alpha-empty-state.2

package/dist/components/index.js

@@ -1,14 +1,14 @@
 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, 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, Stack, Snackbar as Snackbar$1, Portal, Fade } from "@mui/material";
+import { styled, Box, Button as Button$1, CircularProgress as CircularProgress$1, 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-BHYA7By_.js";
-import { a } from "../css-utils-BHYA7By_.js";
-import { S as ScreenReaderOnly, A as Alert$1 } from "../Alert-BfDnWlbD.js";
-import { L } from "../Alert-BfDnWlbD.js";
+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";
+import { S as ScreenReaderOnly, A as Alert$1 } from "../Alert-BZPM5zpX.js";
+import { L } from "../Alert-BZPM5zpX.js";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
-import { M as MenuItem$1 } from "../MenuItem-D90EfuGS.js";
+import { M as MenuItem$1, a as getThemeColor } from "../MenuItem-Cx5lTXXm.js";
 import "cartocolor";
 import { FixedSizeList } from "react-window";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -74,7 +74,7 @@ function _Button({
     "c4r.button.opensInNewTab",
     screenReaderText
   );
-  const defaultIconLoader = /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" });
+  const defaultIconLoader = /* @__PURE__ */ jsx(CircularProgress$1, { size: 18, color: "inherit" });
   const isDefaultLoading = loading && loadingPosition === void 0;
   const isExternalLink = otherProps.href && external;
   const renderContent = () => {
@@ -223,7 +223,7 @@ function SplitButton({
     )
   ] });
 }
-const Root$5 = styled(Box)(({ theme }) => ({
+const Root$6 = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing(0.5)
@@ -257,7 +257,7 @@ function _LabelWithIndicator({
   typographyProps
 }, ref) {
   return /* @__PURE__ */ jsxs(
-    Root$5,
+    Root$6,
     {
       ref,
       "data-testid": dataTestId,
@@ -775,77 +775,8 @@ function _MultipleSelectField({
 }
 const MultipleSelectField = forwardRef(_MultipleSelectField);
 const StyledToggleButtonGroup = styled(ToggleButtonGroup$1, {
-  shouldForwardProp: (prop) => prop !== "variant" && prop !== "backgroundColor"
-})(({ variant, backgroundColor, theme }) => ({
-  // Variants
-  ...variant === "contained" && {
-    boxShadow: "none"
-  },
-  ...variant === "unbounded" && {
-    boxShadow: "none",
-    borderRadius: theme.spacing(0.5),
-    "& .MuiDivider-root": {
-      height: theme.spacing(4),
-      "&.MuiToggleButtonGroup-groupedHorizontal": {
-        height: theme.spacing(4)
-      },
-      "&.MuiToggleButtonGroup-groupedVertical": {
-        height: "auto",
-        width: theme.spacing(4),
-        margin: `${theme.spacing(0.5, 0, 1)} !important`,
-        borderRadius: "0 !important"
-      }
-    },
-    "& .MuiToggleButton-sizeSmall": {
-      margin: 0,
-      "&.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
-        margin: 0
-      },
-      "& + .MuiDivider-root.MuiToggleButtonGroup-groupedHorizontal": {
-        height: theme.spacing(3)
-      },
-      "& + .MuiDivider-root.MuiToggleButtonGroup-groupedVertical": {
-        height: "auto",
-        width: theme.spacing(3)
-      }
-    },
-    ".MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
-      margin: 0,
-      "&:first-of-type": {
-        marginLeft: 0
-      },
-      "&:not(:last-of-type)": {
-        marginRight: theme.spacing(0.5)
-      }
-    },
-    "&.MuiToggleButtonGroup-horizontal:not(.MuiDivider-root)": {
-      ".MuiToggleButtonGroup-grouped": {
-        margin: theme.spacing(0, 0.5)
-      }
-    },
-    "&.MuiToggleButtonGroup-vertical:not(.MuiDivider-root)": {
-      ".MuiToggleButtonGroup-grouped": {
-        margin: theme.spacing(0, 0, 0.5),
-        "&:not(:last-of-type)": {
-          marginRight: 0
-        },
-        "&:last-of-type": {
-          marginBottom: 0
-        }
-      }
-    }
-  },
-  // Colors
-  ...backgroundColor === "primary" && {
-    backgroundColor: theme.palette.background.paper
-  },
-  ...backgroundColor === "secondary" && {
-    backgroundColor: theme.palette.background.default
-  },
-  ...backgroundColor === "transparent" && {
-    backgroundColor: "transparent"
-  }
-}));
+  shouldForwardProp: (prop) => prop !== "backgroundColor"
+})();
 function _ToggleButtonGroup({
   children,
   variant = "floating",
@@ -861,6 +792,7 @@ function _ToggleButtonGroup({
     StyledToggleButtonGroup,
     {
       ...rest,
+      ref,
       variant,
       backgroundColor: resolvedBackgroundColor,
       orientation,
@@ -870,12 +802,107 @@ function _ToggleButtonGroup({
       "data-size": size,
       "data-background-color": resolvedBackgroundColor,
       "data-name": "toggle-button-group",
-      ref,
       children
     }
   );
 }
 const ToggleButtonGroup = forwardRef(_ToggleButtonGroup);
+function _CircularProgress({
+  color = "primary",
+  size = 40,
+  thickness = 4,
+  ...otherProps
+}, ref) {
+  const muiColor = color === "neutral" ? void 0 : color;
+  return /* @__PURE__ */ jsx(
+    CircularProgress$1,
+    {
+      ...otherProps,
+      ref,
+      size,
+      thickness,
+      color: muiColor,
+      "data-name": "circular-progress",
+      "data-color": color,
+      "data-thickness": thickness
+    }
+  );
+}
+const CircularProgress = forwardRef(
+  _CircularProgress
+);
+const Wrapper = styled(Stack, {
+  shouldForwardProp: (prop) => prop !== "contentHeight"
+})(({ contentHeight, theme }) => ({
+  alignItems: "center",
+  justifyContent: "center",
+  gap: theme.spacing(1.5),
+  width: "100%",
+  ...contentHeight && {
+    flex: 1,
+    height: contentHeight,
+    minHeight: contentHeight
+  }
+}));
+function _Loader({
+  label,
+  secondLabel,
+  contentHeight,
+  labelProps,
+  secondLabelProps,
+  iconProps,
+  sx,
+  ...otherProps
+}, ref) {
+  const labelText = useTranslationWithFallback("c4r.utils.loader.label", label);
+  const hasAnyLabel = labelText || secondLabel;
+  return /* @__PURE__ */ jsxs(
+    Wrapper,
+    {
+      contentHeight,
+      sx,
+      ...otherProps,
+      ref,
+      "aria-busy": true,
+      "data-name": "loader",
+      "data-content-height": contentHeight,
+      children: [
+        /* @__PURE__ */ jsx(
+          CircularProgress,
+          {
+            color: "primary",
+            size: 40,
+            ...iconProps,
+            "aria-labelledby": hasAnyLabel ? "loader-label" : void 0
+          }
+        ),
+        hasAnyLabel && /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", children: [
+          labelText && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              color: "textSecondary",
+              ...labelProps,
+              id: "loader-label",
+              children: labelText
+            }
+          ),
+          secondLabel && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              color: "textSecondary",
+              ...secondLabelProps,
+              id: labelText ? void 0 : "loader-label",
+              children: secondLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const Loader = forwardRef(_Loader);
 async function copyString(value) {
   return await navigator.clipboard.writeText(value);
 }
@@ -1207,7 +1234,7 @@ function _Autocomplete({
       ...props,
       ref,
       disabled: disabled || loading,
-      popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ArrowDown, {}),
+      popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress$1, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ArrowDown, {}),
       "data-name": "autocomplete",
       ListboxProps: {
         "aria-multiselectable": false,
@@ -1704,7 +1731,7 @@ function _CreatableAutocomplete({
       ListboxProps: listboxProps,
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disabled: disabled || loading,
-      popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ArrowDown, {}),
+      popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress$1, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ArrowDown, {}),
       "data-name": "creatable-autocomplete"
     }
   );
@@ -1783,7 +1810,7 @@ function _MultipleAutocomplete({
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disableCloseOnSelect,
       disabled: disabled || loading,
-      popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ArrowDown, {}),
+      popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress$1, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ArrowDown, {}),
       "data-name": "multiple-autocomplete"
     }
   );
@@ -1902,7 +1929,7 @@ function SecondaryText({ text }) {
     }
   );
 }
-const Root$4 = styled(AppBar$1)(({ theme }) => ({
+const Root$5 = styled(AppBar$1)(({ theme }) => ({
   backgroundColor: theme.palette.brand.appBarMain,
   userSelect: "none",
   "& .MuiTypography-root": {
@@ -1937,7 +1964,7 @@ function _AppBar({
   onClickMenu,
   ...otherProps
 }, ref) {
-  return /* @__PURE__ */ jsx(Root$4, { ...otherProps, ref, "data-name": "app-bar", children: /* @__PURE__ */ jsxs(Toolbar, { children: [
+  return /* @__PURE__ */ jsx(Root$5, { ...otherProps, ref, "data-name": "app-bar", children: /* @__PURE__ */ jsxs(Toolbar, { children: [
     /* @__PURE__ */ jsxs(BrandElements, { children: [
       showBurgerMenu && /* @__PURE__ */ jsx(BurgerMenu, { onClickMenu }),
       brandLogo && /* @__PURE__ */ jsx(BrandLogo, { logo: brandLogo }),
@@ -2617,7 +2644,7 @@ function CodeAreaInput({
     }
   );
 }
-const Root$3 = styled(FormControl)(() => ({
+const Root$4 = styled(FormControl)(() => ({
   display: "flex",
   flexDirection: "column",
   flex: 1
@@ -2809,7 +2836,7 @@ function CodeAreaField({
   const readOnly = (options == null ? void 0 : options.readOnly) ?? false;
   const lineNumbers = (options == null ? void 0 : options.lineNumbers) ?? true;
   return /* @__PURE__ */ jsxs(
-    Root$3,
+    Root$4,
     {
       size,
       error,
@@ -3206,6 +3233,8 @@ function DialogHeader({
   "aria-label": ariaLabel,
   closeIcon,
   closeTooltipText,
+  tooltipProps,
+  iconButtonProps,
   ...otherProps
 }) {
   const closeTooltipLabel = useTranslationWithFallback(
@@ -3231,7 +3260,15 @@ function DialogHeader({
         ] }),
         /* @__PURE__ */ jsxs(ItemsWrapper$1, { children: [
           secondaryActions,
-          onClose && /* @__PURE__ */ jsx(Tooltip, { title: closeTooltipLabel, placement: "left", children: /* @__PURE__ */ jsx(IconButton$1, { onClick: onClose, children: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { "data-testid": "CloseIcon" }) }) })
+          onClose && /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              title: closeTooltipLabel,
+              placement: "left",
+              ...tooltipProps,
+              children: /* @__PURE__ */ jsx(IconButton$1, { onClick: onClose, ...iconButtonProps, children: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { "data-testid": "CloseIcon" }) })
+            }
+          )
         ] })
       ] }),
       children
@@ -3374,7 +3411,7 @@ function DialogAlert({
 }) {
   return /* @__PURE__ */ jsx(StyledAlert, { severity, ...otherProps, "data-name": "dialog-alert", children });
 }
-const Root$2 = styled(Box, {
+const Root$3 = styled(Box, {
   shouldForwardProp: (prop) => !["dark", "hasChildren"].includes(prop)
 })(({ dark, hasChildren, theme }) => ({
   flex: "0 0 auto",
@@ -3442,7 +3479,7 @@ function DialogFooter({
     topContent,
     !!alertContent && /* @__PURE__ */ jsx(DividerTop, {}),
     /* @__PURE__ */ jsxs(
-      Root$2,
+      Root$3,
       {
         ...otherProps,
         dark,
@@ -3495,10 +3532,13 @@ function DialogConfirmation({
   opened,
   "data-testid": dataTestId,
   "aria-label": ariaLabel,
+  slideProps,
   ...alertProps
 }) {
   const containerRef = useRef(null);
   const theme = useTheme();
+  const timeout = (slideProps == null ? void 0 : slideProps.timeout) ?? 350;
+  const direction = (slideProps == null ? void 0 : slideProps.direction) ?? "up";
   const handleClickAway = () => {
     if (onClickAway) {
       onClickAway();
@@ -3515,13 +3555,17 @@ function DialogConfirmation({
       children: /* @__PURE__ */ jsx(ClickAwayListener$1, { onClickAway: handleClickAway, children: /* @__PURE__ */ jsx(
         Slide,
         {
-          direction: "up",
-          in: opened,
-          container: containerRef.current,
           mountOnEnter: true,
           unmountOnExit: true,
           easing: theme.transitions.easing.easeOut,
-          timeout: 350,
+          direction,
+          timeout,
+          ...slideProps,
+          in: opened,
+          container: containerRef.current,
+          "data-name": "dialog-confirmation-slide",
+          "data-direction": direction,
+          "data-timeout": timeout,
           children: /* @__PURE__ */ jsx(AnimationWrapper, { children: /* @__PURE__ */ jsxs(BackdropContent, { children: [
             /* @__PURE__ */ jsx(DialogAlert, { severity, ...alertProps, children }),
             /* @__PURE__ */ jsx(DialogActions, { children: actions })
@@ -3531,7 +3575,7 @@ function DialogConfirmation({
     }
   );
 }
-const Root$1 = styled(Box)(({ theme }) => ({
+const Root$2 = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -3612,7 +3656,7 @@ function DialogStepper({
   stepsLabels,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Root$1, { ...props, "data-name": "dialog-stepper", children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, children: stepsLabels.map((stepLabel, idx) => {
+  return /* @__PURE__ */ jsx(Root$2, { ...props, "data-name": "dialog-stepper", children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, children: stepsLabels.map((stepLabel, idx) => {
     const step = idx + 1;
     const isCurrent = step === currentStep;
     const isCompleted = step < currentStep;
@@ -3898,7 +3942,7 @@ function ClearButton({
     }
   ) });
 }
-const Root = styled(Box, {
+const Root$1 = styled(Box, {
   shouldForwardProp: (prop) => !["size", "variant", "readOnly"].includes(prop)
 })(({ size, variant, readOnly, theme }) => ({
   // There is no specific slot to change TextField styles at DatePicker level, so we need to wrap our component to isolate this override. https://mui.com/x/react-date-pickers/date-picker/#customization
@@ -3938,7 +3982,7 @@ function DateFieldContainer({
   readOnly,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Root, { ...props, size, variant, readOnly, children });
+  return /* @__PURE__ */ jsx(Root$1, { ...props, size, variant, readOnly, children });
 }
 function DatePicker({
   handleClear,
@@ -4622,6 +4666,121 @@ function DateTimePicker({
     }
   );
 }
+const EMPTY_STATE_WIDTH = 576;
+const Root = styled(Stack, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "spacing" && prop !== "contentHeight" && prop !== "contentWidth"
+})(
+  ({ size = "medium", spacing, contentHeight, contentWidth, theme }) => ({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.spacing(spacing ?? (size === "small" ? 1 : 2)),
+    maxWidth: contentWidth ?? EMPTY_STATE_WIDTH,
+    height: contentHeight,
+    minHeight: contentHeight,
+    margin: "0 auto"
+  })
+);
+const IconWrapper = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "iconSize" && prop !== "iconColor"
+})(({ size, iconSize, iconColor, theme }) => {
+  const finalIconSize = iconSize ?? (size === "small" ? theme.spacing(5) : theme.spacing(6));
+  const colorValue = iconColor === null || iconColor === void 0 ? void 0 : getThemeColor(iconColor, theme);
+  return {
+    display: "flex",
+    ".MuiSvgIcon-root": {
+      width: finalIconSize,
+      height: finalIconSize,
+      fontSize: finalIconSize,
+      ...colorValue && { color: colorValue }
+    }
+  };
+});
+const TextContent = styled(Stack)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  textAlign: "center"
+}));
+const Actions = styled(Stack, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "spacing"
+})(({ size = "medium", spacing, theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(spacing ?? (size === "small" ? 1 : 2)),
+  marginTop: theme.spacing(size === "small" ? 1 : 2),
+  ".MuiButton-root + .MuiButton-root": {
+    marginLeft: 0
+  }
+}));
+function _EmptyState({
+  icon,
+  title,
+  description,
+  actions,
+  children,
+  size = "medium",
+  spacing,
+  iconProps,
+  contentWidth = EMPTY_STATE_WIDTH,
+  contentHeight,
+  sx,
+  titleProps,
+  descriptionProps,
+  ...otherProps
+}, ref) {
+  const hasAnyTextContent = title || description;
+  const isSmall = size === "small";
+  const iconSize = (iconProps == null ? void 0 : iconProps.size) ?? (isSmall ? 40 : 48);
+  const iconColor = iconProps && "color" in iconProps && iconProps.color === null ? null : (iconProps == null ? void 0 : iconProps.color) ?? "text.disabled";
+  return /* @__PURE__ */ jsxs(
+    Root,
+    {
+      ref,
+      alignItems: "center",
+      size,
+      spacing,
+      contentHeight,
+      contentWidth,
+      sx,
+      ...otherProps,
+      "data-name": "empty-state",
+      "data-size": size,
+      "data-spacing": spacing,
+      "data-content-height": contentHeight,
+      "data-content-width": contentWidth,
+      "data-icon-size": iconSize,
+      "data-icon-color": iconColor ?? "null",
+      children: [
+        icon && /* @__PURE__ */ jsx(IconWrapper, { size, iconSize, iconColor, children: icon }),
+        hasAnyTextContent && /* @__PURE__ */ jsxs(TextContent, { children: [
+          title && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: isSmall ? "body2" : "body1",
+              color: "textSecondary",
+              ...titleProps,
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: isSmall ? "caption" : "body2",
+              color: "textSecondary",
+              ...descriptionProps,
+              children: description
+            }
+          )
+        ] }),
+        actions && /* @__PURE__ */ jsx(Actions, { size, spacing, children: actions }),
+        children
+      ]
+    }
+  );
+}
+const EmptyState = forwardRef(_EmptyState);
 const DEFAULT_ITEMS = [{ outlinedBullet: false, value: "" }];
 const Content$2 = styled("ul")(({ theme }) => ({
   listStyle: "none",
@@ -5056,7 +5215,7 @@ const SearchIcon = styled(Search, {
 const ClearSearchIcon = styled(Cancel)(({ theme }) => ({
   color: `${theme.palette.text.hint} !important`
 }));
-const LoadingSearchIcon = styled(CircularProgress)(({ theme }) => ({
+const LoadingSearchIcon = styled(CircularProgress$1)(({ theme }) => ({
   svg: {
     color: `${theme.palette.primary.main} !important`
   }
@@ -5071,7 +5230,10 @@ const SearchInputAdornment = styled(InputAdornment, {
       duration: theme.transitions.duration.short
     }),
     "&.MuiInputAdornment-positionStart": {
-      marginLeft: minimized ? theme.spacing(1) : void 0
+      marginLeft: minimized ? theme.spacing(2) : void 0,
+      "&.MuiInputAdornment-sizeSmall": {
+        marginLeft: minimized ? theme.spacing(1) : void 0
+      }
     },
     // End adornment
     "&.MuiInputAdornment-positionEnd": {
@@ -5714,7 +5876,7 @@ function FilesAction({
   handleOpen,
   inProgress
 }) {
-  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: inProgress ? /* @__PURE__ */ jsx(IconButton$1, { "aria-label": "Loading", disabled: true, size, children: /* @__PURE__ */ jsx(CircularProgress, { size: 18 }) }) : !hasFiles ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: inProgress ? /* @__PURE__ */ jsx(IconButton$1, { "aria-label": "Loading", disabled: true, size, children: /* @__PURE__ */ jsx(CircularProgress$1, { size: 18 }) }) : !hasFiles ? /* @__PURE__ */ jsx(
     Button$1,
     {
       onClick: handleOpen,
@@ -6109,6 +6271,7 @@ export {
   AutocompleteList,
   Avatar,
   Button,
+  CircularProgress,
   CodeAreaDialog,
   CodeAreaDialogConfirmation,
   CodeAreaDialogContent,
@@ -6135,11 +6298,13 @@ export {
   DialogPaper,
   DialogStepper,
   EllipsisWithTooltip,
+  EmptyState,
   FilterDropdown,
   FilterDropdownMenuItem,
   IconButton,
   LabelWithIndicator,
   L as Link,
+  Loader,
   Menu,
   MenuItem$1 as MenuItem,
   MenuItemFilter,

package/dist/{css-utils-DjvM17Vb.cjs → css-utils-CH7es90t.cjs}

@@ -859,6 +859,11 @@ const en = {
       changesSaved: "Changes saved successfully",
       copiedToClipboard: "Copied to clipboard"
     },
+    utils: {
+      loader: {
+        label: "Loading..."
+      }
+    },
     widgets: {
       category: {
         apply: "Apply",
@@ -1009,6 +1014,11 @@ const es = {
       changesSaved: "Cambios guardados correctamente",
       copiedToClipboard: "Copiado al portapapeles"
     },
+    utils: {
+      loader: {
+        label: "Cargando..."
+      }
+    },
     widgets: {
       category: {
         apply: "Aplicar",
@@ -1157,6 +1167,11 @@ const id = {
       changesSaved: "Changes saved successfully",
       copiedToClipboard: "Tersalin ke clipboard"
     },
+    utils: {
+      loader: {
+        label: "Memuat..."
+      }
+    },
     widgets: {
       category: {
         apply: "Terapkan",

package/dist/{css-utils-BHYA7By_.js → css-utils-CjUBRJVK.js}

@@ -858,6 +858,11 @@ const en = {
       changesSaved: "Changes saved successfully",
       copiedToClipboard: "Copied to clipboard"
     },
+    utils: {
+      loader: {
+        label: "Loading..."
+      }
+    },
     widgets: {
       category: {
         apply: "Apply",
@@ -1008,6 +1013,11 @@ const es = {
       changesSaved: "Cambios guardados correctamente",
       copiedToClipboard: "Copiado al portapapeles"
     },
+    utils: {
+      loader: {
+        label: "Cargando..."
+      }
+    },
     widgets: {
       category: {
         apply: "Aplicar",
@@ -1156,6 +1166,11 @@ const id = {
       changesSaved: "Changes saved successfully",
       copiedToClipboard: "Tersalin ke clipboard"
     },
+    utils: {
+      loader: {
+        label: "Memuat..."
+      }
+    },
     widgets: {
       category: {
         apply: "Terapkan",