@moderneinc/design-system-components 7.6.0-next.f37256 → 7.6.1-next.3dd0ae

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import MuiAvatar from '@mui/material/Avatar';
 import SvgIcon from '@mui/material/SvgIcon';
 import Alert, { alertClasses } from '@mui/material/Alert';
 import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { BadgeInfo, WifiOff, TriangleAlert, CircleAlert, CircleCheckBig, X, ChevronRight, Square, SquareCheck, SquareMinus, Search, ChevronDown, Plus, Trash2, ArrowUp, ArrowDown, ChevronsUpDown, Columns3, ListFilter, HelpCircle, CalendarDays, Minus, ChevronLeft, AlertCircle, ChevronUp } from 'lucide-react';
+import { Info, WifiOff, TriangleAlert, CircleAlert, CircleCheckBig, X, ChevronRight, Square, SquareCheck, SquareMinus, Search, ChevronDown, Plus, Trash2, ArrowUp, ArrowDown, ChevronsUpDown, Columns3, ListFilter, HelpCircle, CalendarDays, Minus, ChevronLeft, AlertCircle, ChevronUp } from 'lucide-react';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
 import React, { useState, useRef, useCallback, useMemo, forwardRef, useEffect, createContext, useContext, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
 import Breadcrumbs, { breadcrumbsClasses } from '@mui/material/Breadcrumbs';
@@ -557,7 +557,7 @@ const iconMap = {
     error: jsx(CircleAlert, { size: 24 }),
     warning: jsx(TriangleAlert, { size: 24 }),
     offline: jsx(WifiOff, { size: 24 }),
-    info: jsx(BadgeInfo, { size: 24 }),
+    info: jsx(Info, { size: 24 }),
 };
 /**
  * ModAlert - Alert component for displaying contextual status messages
@@ -943,8 +943,9 @@ function useTabAriaSync() {
             observerRef.current.disconnect();
             observerRef.current = null;
         }
-        if (!node)
+        if (!node) {
             return;
+        }
         const sync = () => {
             node.setAttribute('role', 'tab');
             node.setAttribute('aria-selected', String(node.classList.contains('Mui-selected')));
@@ -1764,8 +1765,9 @@ sx: _sx, theme: _theme, ...props }) => {
     const [searchText, setSearchText] = useState('');
     // Filter columns based on search
     const filteredColumns = useMemo(() => {
-        if (!searchText)
+        if (!searchText) {
             return columns;
+        }
         const search = searchText.toLowerCase();
         return columns.filter(col => {
             const headerName = col.headerName || col.field;
@@ -1798,8 +1800,9 @@ sx: _sx, theme: _theme, ...props }) => {
                             disableUnderline: true,
                         },
                     } })), filteredColumns.map(column => {
-                    if (column.hideable === false)
+                    if (column.hideable === false) {
                         return null;
+                    }
                     const isVisible = columnVisibilityModel[column.field] !== false;
                     const headerName = column.headerName || column.field;
                     return (jsx(ColumnItemContainer, { onClick: () => handleColumnToggle(column.field), children: jsxs(MenuItemContent$1, { children: [jsx(ModCheckbox, { checked: isVisible, size: "small", disableRipple: true }), jsx(MenuItemLabel, { children: headerName })] }) }, column.field));
@@ -1853,6 +1856,10 @@ const IconWrapper$1 = styled('span')(({ theme }) => ({
     flexShrink: 0,
     fontSize: theme.typography.pxToRem(iconSize.lg),
     color: semanticColors.color.icon.default,
+    '& > svg': {
+        width: iconSize.lg,
+        height: iconSize.lg,
+    },
 }));
 const LabelContainer$3 = styled('div')({
     flex: 1,
@@ -3087,11 +3094,13 @@ const ActionButton = styled(IconButton)({
  */
 const ModDownloadToast = ({ title, fileName, progress, showClose = true, showPause = true, onClose, onPause, actions, ...props }) => {
     const renderActions = () => {
-        if (actions)
+        if (actions) {
             return actions;
+        }
         const hasActions = showPause || showClose;
-        if (!hasActions)
+        if (!hasActions) {
             return null;
+        }
         return (jsxs(Stack, { direction: "row", sx: { alignItems: 'center', gap: `${spacing.spacing_2}px` }, children: [showPause && (jsx(ActionButton, { size: "small", onClick: onPause, "aria-label": "Pause download", children: jsx(Minus, { size: spacing.spacing_2 }) })), showClose && (jsx(ActionButton, { size: "small", onClick: onClose, "aria-label": "Close", children: jsx(X, { size: spacing.spacing_2 }) }))] }));
     };
     return (jsxs(StyledRoot$1, { elevation: 0, role: "status", ...props, children: [jsxs(Stack, { direction: "row", sx: {
@@ -4445,8 +4454,9 @@ const CellRoot = styled('div', {
  * ModIconCell — Icon cell for DataGrid. Renders an icon centered in the cell.
  */
 const ModIconCell = ({ icon, ariaLabel, disabled = false }) => {
-    if (!icon)
+    if (!icon) {
         return null;
+    }
     return (jsx(CellRoot, { disabled: disabled, "aria-label": ariaLabel, children: jsx(ModIconWrapper, { size: 16, children: icon }) }));
 };
 ModIconCell.displayName = 'ModIconCell';
@@ -4936,8 +4946,9 @@ function ModPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = fal
     const containerRef = useRef(null);
     // Intersection observer for back to top button
     useEffect(() => {
-        if (!showBackToTop || !headerRef.current)
+        if (!showBackToTop || !headerRef.current) {
             return;
+        }
         const observer = new IntersectionObserver(([entry]) => {
             setShowBackToTopButton(!entry.isIntersecting);
         }, {