@gridsuite/commons-ui 0.295.0 → 0.297.0

package/dist/features/parameters/voltage-init/equipment-selection-parameters.js

@@ -61,13 +61,25 @@ function EquipmentSelectionParameters() {
       /* @__PURE__ */ jsx("br", {}),
       /* @__PURE__ */ jsx(FormattedMessage, { id: "VoltageInitParametersBatteriesAlert" })
     ] }),
-    /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid, { size: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
-      RadioInput,
+    /* @__PURE__ */ jsx(
+      Grid,
       {
-        name: GENERATORS_SELECTION_TYPE,
-        options: Object.values(initialEquipmentsSelectionType)
+        container: true,
+        sx: [
+          {
+            justifyContent: "flex-end"
+          },
+          equipmentsSelectionStyles.choiceContainer
+        ],
+        children: /* @__PURE__ */ jsx(Grid, { size: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
+          RadioInput,
+          {
+            name: GENERATORS_SELECTION_TYPE,
+            options: Object.values(initialEquipmentsSelectionType)
+          }
+        ) })
       }
-    ) }) }),
+    ),
     /* @__PURE__ */ jsx(
       ParameterLineDirectoryItemsInput,
       {
@@ -78,13 +90,25 @@ function EquipmentSelectionParameters() {
         hideErrorMessage: true
       }
     ),
-    /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid, { size: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
-      RadioInput,
+    /* @__PURE__ */ jsx(
+      Grid,
       {
-        name: TRANSFORMERS_SELECTION_TYPE,
-        options: Object.values(initialEquipmentsSelectionType)
+        container: true,
+        sx: [
+          {
+            justifyContent: "flex-end"
+          },
+          equipmentsSelectionStyles.choiceContainer
+        ],
+        children: /* @__PURE__ */ jsx(Grid, { size: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
+          RadioInput,
+          {
+            name: TRANSFORMERS_SELECTION_TYPE,
+            options: Object.values(initialEquipmentsSelectionType)
+          }
+        ) })
       }
-    ) }) }),
+    ),
     /* @__PURE__ */ jsx(
       ParameterLineDirectoryItemsInput,
       {
@@ -95,13 +119,25 @@ function EquipmentSelectionParameters() {
         hideErrorMessage: true
       }
     ),
-    /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid, { size: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
-      RadioInput,
+    /* @__PURE__ */ jsx(
+      Grid,
       {
-        name: SHUNT_COMPENSATORS_SELECTION_TYPE,
-        options: Object.values(initialEquipmentsSelectionType)
+        container: true,
+        sx: [
+          {
+            justifyContent: "flex-end"
+          },
+          equipmentsSelectionStyles.choiceContainer
+        ],
+        children: /* @__PURE__ */ jsx(Grid, { size: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
+          RadioInput,
+          {
+            name: SHUNT_COMPENSATORS_SELECTION_TYPE,
+            options: Object.values(initialEquipmentsSelectionType)
+          }
+        ) })
       }
-    ) }) }),
+    ),
     /* @__PURE__ */ jsx(
       ParameterLineDirectoryItemsInput,
       {

package/dist/features/parameters/voltage-init/general-parameters.js

@@ -68,7 +68,15 @@ function GeneralParameters({ withApplyModifications }) {
           onChange: setApplyModificationsValue
         }
       ),
-      /* @__PURE__ */ jsx(Box, { my: 2, children: /* @__PURE__ */ jsx(LineSeparator, {}) })
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            my: 2
+          },
+          children: /* @__PURE__ */ jsx(LineSeparator, {})
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx(
       ParameterSwitch,

package/dist/features/process-configs/common/FormSubSection.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Stack, Typography } from "@mui/material";
 function FormSubSection({ children, id, title }) {
-  return /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, component: "section", "aria-labelledby": id, children: [
-    /* @__PURE__ */ jsx(Typography, { id, variant: "subtitle1", fontWeight: 600, children: title }),
+  return /* @__PURE__ */ jsxs(Stack, { component: "section", "aria-labelledby": id, children: [
+    /* @__PURE__ */ jsx(Typography, { sx: { paddingBottom: 1, fontWeight: 600 }, id, variant: "subtitle1", children: title }),
     children
   ] });
 }

package/dist/features/process-configs/common/GeneralInformationSection.js

@@ -84,7 +84,7 @@ function GeneralInformationSection({
       )
     ] }),
     withFolderField && /* @__PURE__ */ jsxs(Grid, { size: { xs: 12, sm: 12 }, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "processConfigSaveDirectory" }) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", sx: { fontWeight: 600, paddingBottom: 0.5 }, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "processConfigSaveDirectory" }) }),
       /* @__PURE__ */ jsx(
         DirectoryItemInput,
         {

package/dist/features/process-configs/common/SpecificInformationSection.js

@@ -9,10 +9,18 @@ function SpecificInformationSection({ control, onPrefill }) {
     FormSection,
     {
       id: "specific-information-heading",
-      title: /* @__PURE__ */ jsxs(Stack, { component: "span", direction: "row", alignItems: "center", justifyContent: "space-between", width: "100%", children: [
-        /* @__PURE__ */ jsx(FormattedMessage, { id: "processConfigSpecificInformation" }),
-        onPrefill && /* @__PURE__ */ jsx(Button, { variant: "outlined", sx: { textTransform: "none" }, onClick: onPrefill, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "processConfigPrefill" }) })
-      ] }),
+      title: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          component: "span",
+          direction: "row",
+          sx: { alignItems: "center", justifyContent: "space-between", width: "100%" },
+          children: [
+            /* @__PURE__ */ jsx(FormattedMessage, { id: "processConfigSpecificInformation" }),
+            onPrefill && /* @__PURE__ */ jsx(Button, { variant: "outlined", sx: { textTransform: "none" }, onClick: onPrefill, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "processConfigPrefill" }) })
+          ]
+        }
+      ),
       children: [
         /* @__PURE__ */ jsx(ModificationsSubSection, {}),
         /* @__PURE__ */ jsx(ProvidersParametersSubSection, { control })

package/dist/features/process-configs/common/process-config-modifications-edition.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useFieldArray } from "react-hook-form";
 import { useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
-import "@mui/material";
+import { Box } from "@mui/material";
 import "@mui/icons-material";
 import "../../../components/ui/overflowableText/OverflowableText.js";
 import "../../../utils/conversionUtils.js";
@@ -105,7 +105,7 @@ function ProcessConfigModificationsEdition({ name }) {
     () => [{ ...getDefaultRowData(columnsDefinition), modification: [] }],
     [columnsDefinition]
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { sx: { paddingTop: 1 }, children: /* @__PURE__ */ jsx(
     DndTable,
     {
       name,
@@ -114,7 +114,7 @@ function ProcessConfigModificationsEdition({ name }) {
       columnsDefinition,
       withAddRowsDialog: false
     }
-  );
+  ) });
 }
 export {
   ProcessConfigModificationsEdition

package/dist/features/process-configs/form/components/ProcessTypeChangeDialog.js

@@ -6,8 +6,11 @@ function ProcessTypeChangeDialog({ open, onCancel, onConfirm }) {
     Dialog,
     {
       open,
-      onClose: onCancel,
-      disableEscapeKeyDown: true,
+      onClose: (_, reason) => {
+        if (reason !== "escapeKeyDown") {
+          onCancel();
+        }
+      },
       maxWidth: "xs",
       slotProps: { paper: { sx: { minWidth: 320 } } },
       "aria-labelledby": "process-type-change-warning-title",

package/dist/features/side-bar/AppSideBarHeader.js

@@ -29,27 +29,47 @@ function AppSideBarHeader({
       },
       spacing: 1,
       children: [
-        /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: isMinimized ? "center" : "flex-start", children: [
-          /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", display: "inline-block" }, children: [
-            appLogo,
-            isMinimized && /* @__PURE__ */ jsx(EnvironmentChip, { environment, variant: "minimized" })
-          ] }),
-          !isMinimized && /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", display: "inline-block" }, children: [
-            /* @__PURE__ */ jsxs(Typography, { fontSize: 18, children: [
-              /* @__PURE__ */ jsx(Box, { component: "span", style: { fontWeight: "bold" }, children: "Grid" }),
-              /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: appNameColor }, children: appName })
-            ] }),
-            /* @__PURE__ */ jsx(EnvironmentChip, { environment, variant: "expanded" })
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "row",
+            sx: {
+              alignItems: "center",
+              justifyContent: isMinimized ? "center" : "flex-start"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", display: "inline-block" }, children: [
+                appLogo,
+                isMinimized && /* @__PURE__ */ jsx(EnvironmentChip, { environment, variant: "minimized" })
+              ] }),
+              !isMinimized && /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", display: "inline-block" }, children: [
+                /* @__PURE__ */ jsxs(
+                  Typography,
+                  {
+                    sx: {
+                      fontSize: 18
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Box, { component: "span", style: { fontWeight: "bold" }, children: "Grid" }),
+                      /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: appNameColor }, children: appName })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(EnvironmentChip, { environment, variant: "expanded" })
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           Stack,
           {
             direction: "row",
-            visibility: isLoggedIn ? "inherit" : "hidden",
-            alignItems: "center",
-            justifyContent: isMinimized ? "center" : "end",
             spacing: 1,
+            sx: {
+              visibility: isLoggedIn ? "inherit" : "hidden",
+              alignItems: "center",
+              justifyContent: isMinimized ? "center" : "end"
+            },
             children: /* @__PURE__ */ jsxs(Fragment, { children: [
               !isMinimized && /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
                 "V",

package/dist/features/side-bar/footer/AppSideBarFooter.js

@@ -18,44 +18,52 @@ function AppSideBarFooter({
   onLogoutClick
 }) {
   const isUserLoggedIn = !!userProfile;
-  return /* @__PURE__ */ jsx(Stack, { p: 1, children: /* @__PURE__ */ jsxs(MenuList, { disablePadding: true, children: [
-    isUserLoggedIn && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ApplicationMenu, { isMinimized, appsAndUrls }),
-      /* @__PURE__ */ jsx(ProfileMenu, { isMinimized, userProfile }),
-      /* @__PURE__ */ jsx(
-        SettingsMenu,
-        {
-          isMinimized,
-          currentTheme,
-          setTheme,
-          selectedLanguage,
-          setSelectedLanguage
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        SideBarMenuItem,
-        {
-          tooltip: isMinimized ? "top-bar/logout" : void 0,
-          label: "top-bar/logout",
-          icon: /* @__PURE__ */ jsx(Logout, {}),
-          onClick: onLogoutClick,
-          showLabel: !isMinimized
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(
-      SideBarMenuItem,
-      {
-        tooltip: isMinimized ? "top-bar/expand" : void 0,
-        label: "top-bar/minimize",
-        icon: isMinimized ? /* @__PURE__ */ jsx(KeyboardDoubleArrowRight, {}) : /* @__PURE__ */ jsx(KeyboardDoubleArrowLeft, {}),
-        onClick: toggleSideBarMinimized,
-        showLabel: !isMinimized,
-        disabled: isSmallScreen
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      sx: {
+        p: 1
+      },
+      children: /* @__PURE__ */ jsxs(MenuList, { disablePadding: true, children: [
+        isUserLoggedIn && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ApplicationMenu, { isMinimized, appsAndUrls }),
+          /* @__PURE__ */ jsx(ProfileMenu, { isMinimized, userProfile }),
+          /* @__PURE__ */ jsx(
+            SettingsMenu,
+            {
+              isMinimized,
+              currentTheme,
+              setTheme,
+              selectedLanguage,
+              setSelectedLanguage
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SideBarMenuItem,
+            {
+              tooltip: isMinimized ? "top-bar/logout" : void 0,
+              label: "top-bar/logout",
+              icon: /* @__PURE__ */ jsx(Logout, {}),
+              onClick: onLogoutClick,
+              showLabel: !isMinimized
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsx(
+          SideBarMenuItem,
+          {
+            tooltip: isMinimized ? "top-bar/expand" : void 0,
+            label: "top-bar/minimize",
+            icon: isMinimized ? /* @__PURE__ */ jsx(KeyboardDoubleArrowRight, {}) : /* @__PURE__ */ jsx(KeyboardDoubleArrowLeft, {}),
+            onClick: toggleSideBarMinimized,
+            showLabel: !isMinimized,
+            disabled: isSmallScreen
+          }
+        )
+      ] })
+    }
+  );
 }
 export {
   AppSideBarFooter

package/dist/features/side-bar/footer/applications/OtherAppRedirection.js

@@ -53,23 +53,25 @@ function OtherAppRedirection({ app }) {
   return /* @__PURE__ */ jsx(CustomMenuItem, { sx: submenuFooterStyle.subMenuChildren, children: /* @__PURE__ */ jsx(
     Box,
     {
-      sx: {
-        textDecoration: "none",
-        color: "inherit"
-      },
       component: "a",
       href: app.url.toString(),
       target: "_blank",
       rel: "noopener noreferrer",
-      width: "100%",
+      sx: {
+        width: "100%",
+        textDecoration: "none",
+        color: "inherit"
+      },
       children: /* @__PURE__ */ jsxs(
         Stack,
         {
           spacing: 2,
           direction: "row",
-          alignContent: "center",
-          alignItems: "center",
-          justifyContent: "space-between",
+          sx: {
+            alignContent: "center",
+            alignItems: "center",
+            justifyContent: "space-between"
+          },
           children: [
             /* @__PURE__ */ jsxs(Typography, { children: [
               "Grid",

package/dist/features/side-bar/footer/common/SideBarMenuItem.js

@@ -61,7 +61,15 @@ function SideBarMenuItem({
   return /* @__PURE__ */ jsx(Tooltip, { placement: "right-start", title: tooltip && intl.formatMessage({ id: tooltip }), children: /* @__PURE__ */ jsxs(CustomMenuItem, { disabled, onClick, sx: submenuFooterStyle.subMenu, children: [
     icon,
     " ",
-    showLabel && /* @__PURE__ */ jsx(Typography, { px: 1, children: intl.formatMessage({ id: label }) })
+    showLabel && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        sx: {
+          px: 1
+        },
+        children: intl.formatMessage({ id: label })
+      }
+    )
   ] }) });
 }
 export {

package/dist/features/side-bar/footer/profile/ProfileInfos.js

@@ -15,12 +15,21 @@ function ProfileInfos({ userProfile }) {
         disabled: true,
         children: [
           /* @__PURE__ */ jsx(Person, {}),
-          /* @__PURE__ */ jsxs(Box, { component: "span", px: 1, children: [
-            userProfile?.name,
-            " ",
-            /* @__PURE__ */ jsx("br", {}),
-            /* @__PURE__ */ jsx(Box, { component: "span", children: userProfile?.email })
-          ] })
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              component: "span",
+              sx: {
+                px: 1
+              },
+              children: [
+                userProfile?.name,
+                " ",
+                /* @__PURE__ */ jsx("br", {}),
+                /* @__PURE__ */ jsx(Box, { component: "span", children: userProfile?.email })
+              ]
+            }
+          )
         ]
       }
     ),

package/dist/features/side-bar/footer/settings/DarkModeToggle.js

@@ -56,10 +56,22 @@ function DarkModeToggle({ currentTheme, setTheme }) {
     const targetModeValue = event.target.checked ? DARK_THEME : LIGHT_THEME;
     setTheme(targetModeValue);
   };
-  return /* @__PURE__ */ jsx(CustomMenuItem, { sx: submenuFooterStyle.subMenuChildren, children: /* @__PURE__ */ jsxs(Stack, { width: "100%", direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, children: [
-    /* @__PURE__ */ jsx(FormattedMessage, { id: "top-bar/darkMode" }),
-    /* @__PURE__ */ jsx(Switch, { checked: isDarkMode, onChange: toggleMode })
-  ] }) });
+  return /* @__PURE__ */ jsx(CustomMenuItem, { sx: submenuFooterStyle.subMenuChildren, children: /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      spacing: 2,
+      sx: {
+        width: "100%",
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(FormattedMessage, { id: "top-bar/darkMode" }),
+        /* @__PURE__ */ jsx(Switch, { checked: isDarkMode, onChange: toggleMode })
+      ]
+    }
+  ) });
 }
 export {
   DarkModeToggle

package/dist/features/side-bar/footer/settings/SettingsMenu.js

@@ -77,12 +77,22 @@ function SettingsMenu({
             sx: submenuFooterStyle.subMenuChildren,
             renderLabel: () => /* @__PURE__ */ jsxs(Box, { children: [
               intl.formatMessage({ id: "top-bar/language" }),
-              /* @__PURE__ */ jsxs(Typography, { component: "span", fontSize: 12, sx: { color: "text.secondary" }, children: [
-                " - ",
-                intl.formatMessage({
-                  id: `top-bar/language/${selectedLanguage}`
-                })
-              ] })
+              /* @__PURE__ */ jsxs(
+                Typography,
+                {
+                  component: "span",
+                  sx: {
+                    fontSize: 12,
+                    color: "text.secondary"
+                  },
+                  children: [
+                    " - ",
+                    intl.formatMessage({
+                      id: `top-bar/language/${selectedLanguage}`
+                    })
+                  ]
+                }
+              )
             ] }),
             children: availableLanguages.map((language) => /* @__PURE__ */ jsx(
               LanguageSelection,

package/dist/features/topBar/AboutDialog.js

@@ -153,22 +153,41 @@ function Module({ type, name, version, gitTag }) {
               ] })
             ] })
           ] }),
-          children: /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "flex-start", alignItems: "baseline", spacing: 1, children: [
-            ModuleTypesIcons[type] || ModuleTypesIcons.other,
-            /* @__PURE__ */ jsx(Typography, { display: "inline", noWrap: true, children: name || "<?>" }),
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "caption",
-                sx: mergeSx(moduleStyles.version, (theme) => ({
-                  color: theme.palette.text.secondary
-                })),
-                display: "inline",
-                noWrap: true,
-                children: gitTag || version || null
-              }
-            )
-          ] })
+          children: /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: "row",
+              spacing: 1,
+              sx: {
+                justifyContent: "flex-start",
+                alignItems: "baseline"
+              },
+              children: [
+                ModuleTypesIcons[type] || ModuleTypesIcons.other,
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    noWrap: true,
+                    sx: {
+                      display: "inline"
+                    },
+                    children: name || "<?>"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "caption",
+                    noWrap: true,
+                    sx: mergeSx({ display: "inline" }, moduleStyles.version, (theme) => ({
+                      color: theme.palette.text.secondary
+                    })),
+                    children: gitTag || version || null
+                  }
+                )
+              ]
+            }
+          )
         }
       )
     }
@@ -329,7 +348,17 @@ function AboutDialog({
                   /* @__PURE__ */ jsx(Apps, { fontSize: "small" }),
                   /* @__PURE__ */ jsx(FormattedMessage, { id: "about-dialog/modules-section" })
                 ] }),
-                /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsx(Grid, { container: true, sx: { pl: 2 }, spacing: 1, children: loadingAdditionalModules ? /* @__PURE__ */ jsx(Grid, { size: "grow", display: "inline-flex", justifyContent: "center", children: /* @__PURE__ */ jsx(CircularProgress, { color: "inherit" }) }) : Array.isArray(modules) && /* @__PURE__ */ jsx(Fragment, { children: [...modules].sort(compareModules).map((module, idx) => /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsx(Grid, { container: true, sx: { pl: 2 }, spacing: 1, children: loadingAdditionalModules ? /* @__PURE__ */ jsx(
+                  Grid,
+                  {
+                    size: "grow",
+                    sx: {
+                      display: "inline-flex",
+                      justifyContent: "center"
+                    },
+                    children: /* @__PURE__ */ jsx(CircularProgress, { color: "inherit" })
+                  }
+                ) : Array.isArray(modules) && /* @__PURE__ */ jsx(Fragment, { children: [...modules].sort(compareModules).map((module, idx) => /* @__PURE__ */ jsx(
                   Module,
                   {
                     type: module.type,

package/dist/features/topBar/TopBar.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { styled, Menu, MenuItem, ListItemIcon, AppBar, Toolbar, Box, IconButton, ListItemText, Button, Popper, Paper, ClickAwayListener, MenuList, Typography, ToggleButtonGroup, ToggleButton } from "@mui/material";
-import { Apps, ArrowDropUp, ArrowDropDown, Person, Badge, ManageAccounts, HelpOutline, WbSunny, Brightness3, Computer, ExitToApp } from "@mui/icons-material";
+import { Apps, ArrowDropUp, ArrowDropDown, Person, Badge, ManageAccounts, HelpOutlined, WbSunny, Brightness3, Computer, ExitToApp } from "@mui/icons-material";
 import { GridLogo } from "./GridLogo.js";
 import { AboutDialog } from "./AboutDialog.js";
 import { useStateBoolean } from "../../hooks/customStates/useStateBoolean.js";
@@ -343,7 +343,7 @@ function TopBar({
                   style: { opacity: "1" },
                   onClick: onAboutClicked,
                   children: [
-                    /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small" }) }),
+                    /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(HelpOutlined, { fontSize: "small" }) }),
                     /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Typography, { sx: styles.sizeLabel, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "top-bar/about", defaultMessage: "About" }) }) })
                   ]
                 }