@m4l/components 9.50.0 → 9.51.0-beta-m4lcom-764-device-picker.0

package/components/WindowBase/WindowBase.styles.js

@@ -1,68 +1,69 @@
-import { getTypographyStyles as e } from "../../utils/getTypographyStyles.js";
-import { getSizeStyles as r } from "../../utils/getSizeStyles/getSizeStyles.js";
-const t = {
+import { getTypographyStyles as s } from "../../utils/getTypographyStyles.js";
+import { ICON_SVG_SHAPE_SELECTOR as r } from "@m4l/base";
+import { getSizeStyles as e } from "../../utils/getSizeStyles/getSizeStyles.js";
+const d = {
   /**
    * Styles for the window base wrapper component.
    */
-  wrapperWindowBase: ({ theme: a, ownerState: o }) => ({
+  wrapperWindowBase: ({ theme: o, ownerState: a }) => ({
     "&": {
       position: "relative",
       height: "100%",
       width: "100%",
       display: "flex",
       flexDirection: "column",
-      borderRadius: o?.variant === "outlined" ? a.vars.size.borderRadius.r2 : "unset",
-      backgroundColor: a.vars.palette.background.default,
+      borderRadius: a?.variant === "outlined" ? o.vars.size.borderRadius.r2 : "unset",
+      backgroundColor: o.vars.palette.background.default,
       overflow: "hidden",
-      ...o?.variant === "outlined" && {
-        ...o?.selected ? {
-          ...o?.emergeType === "layout" ? {
+      ...a?.variant === "outlined" && {
+        ...a?.selected ? {
+          ...a?.emergeType === "layout" ? {
             background: `linear-gradient(to bottom, 
-            ${a.vars.palette.primary.opacityGradient1}, 
-            ${a.vars.palette.primary.opacityGradient2})`,
+            ${o.vars.palette.primary.opacityGradient1}, 
+            ${o.vars.palette.primary.opacityGradient2})`,
             "&::before": {
               content: '""',
               position: "absolute",
               inset: "1px",
-              background: a.vars.palette.background.default,
+              background: o.vars.palette.background.default,
               borderRadius: "6.7px"
             }
           } : {
-            boxShadow: `inset 0px 0px 0 1px ${a.vars.palette?.border.main}`
+            boxShadow: `inset 0px 0px 0 1px ${o.vars.palette?.border.main}`
           }
         } : {
-          boxShadow: o?.emergeType === "layout" ? `inset 0px 0px 0 1px ${a.vars.palette?.border.secondary}` : "unset"
+          boxShadow: a?.emergeType === "layout" ? `inset 0px 0px 0 1px ${o.vars.palette?.border.secondary}` : "unset"
         }
       },
-      ...o?.emergeType === "popup" && {
+      ...a?.emergeType === "popup" && {
         "&&&": {
-          boxShadow: a.vars.customShadows.z1,
-          border: `1px solid ${a.vars.palette?.border.secondary}`,
-          borderRadius: a.vars.size.borderRadius.r3,
-          ...o?.selected && {
-            boxShadow: a.vars.customShadows.z4,
-            border: `1px solid ${a.vars.palette?.primary.activeOpacity}`
+          boxShadow: o.vars.customShadows.z1,
+          border: `1px solid ${o.vars.palette?.border.secondary}`,
+          borderRadius: o.vars.size.borderRadius.r3,
+          ...a?.selected && {
+            boxShadow: o.vars.customShadows.z4,
+            border: `1px solid ${o.vars.palette?.primary.activeOpacity}`
           }
         }
       },
-      ...o?.emergeType === "panel" && {
+      ...a?.emergeType === "panel" && {
         "&&&": {
           // boxShadow: theme.vars.customShadows.z1,
           // border: `1px solid ${theme.vars.palette?.border.secondary}`,
-          borderRadius: a.vars.size.borderRadius.r0
+          borderRadius: o.vars.size.borderRadius.r0
           // ...(ownerState?.selected && {
           //   boxShadow: theme.vars.customShadows.z4,
           //   border: `1px solid ${theme.vars.palette?.primary.activeOpacity}`,
           // }),
         }
       },
-      ...o?.emergeType === "layout" && {
-        ...o?.selected && !o?.maximized ? {
-          boxShadow: a.vars.customShadows.primary
+      ...a?.emergeType === "layout" && {
+        ...a?.selected && !a?.maximized ? {
+          boxShadow: o.vars.customShadows.primary
         } : {}
       },
-      ...o?.emergeType === "modal" && {
-        boxShadow: `${a.vars.customShadows.z3}!important`
+      ...a?.emergeType === "modal" && {
+        boxShadow: `${o.vars.customShadows.z3}!important`
       }
     }
   }),
@@ -70,13 +71,13 @@ const t = {
   /**
    * Styles for the content of the window base component.
    */
-  contentWindowBase: ({ ownerState: a, theme: o }) => ({
-    padding: a?.emergeType === "layout" ? o.vars.size.baseSpacings.sp5 : o.vars.size.baseSpacings.sp4,
+  contentWindowBase: ({ ownerState: o, theme: a }) => ({
+    padding: o?.emergeType === "layout" ? a.vars.size.baseSpacings.sp5 : a.vars.size.baseSpacings.sp4,
     overflow: "auto",
     width: "100%",
     height: "100%",
     zIndex: 1,
-    ...a?.collapsed && {
+    ...o?.collapsed && {
       display: "none"
     }
   }),
@@ -94,31 +95,31 @@ const t = {
   /**
    * Styles for the header of the window base component.
    */
-  headerWindowComponent: ({ theme: a, ownerState: o }) => ({
+  headerWindowComponent: ({ theme: o, ownerState: a }) => ({
     width: "100%",
     display: "flex",
-    padding: a.vars.size.baseSpacings.sp1,
+    padding: o.vars.size.baseSpacings.sp1,
     marginTop: 1,
-    ...(o?.emergeType === "popup" || o?.emergeType === "modal" || o?.emergeType === "panel") && {
-      padding: `${a.vars.size.baseSpacings["sp2-5"]} ${a.vars.size.baseSpacings.sp2} 0 ${a.vars.size.baseSpacings.sp2}`
+    ...(a?.emergeType === "popup" || a?.emergeType === "modal" || a?.emergeType === "panel") && {
+      padding: `${o.vars.size.baseSpacings["sp2-5"]} ${o.vars.size.baseSpacings.sp2} 0 ${o.vars.size.baseSpacings.sp2}`
     },
     alignItems: "center",
     justifyContent: "space-between",
     flexShrink: 0,
     alignSelf: "stretch",
-    cursor: o?.draggable ? "all-scroll" : "default",
+    cursor: a?.draggable ? "all-scroll" : "default",
     position: "relative",
-    ...o?.emergeType === "layout" || o?.emergeType === "modal" ? r(
-      a,
-      o?.size || "medium",
+    ...a?.emergeType === "layout" || a?.emergeType === "modal" ? e(
+      o,
+      a?.size || "medium",
       "container",
       (i) => ({
         minHeight: i
       })
     ) : {
-      ...r(
-        a,
-        o?.size || "medium",
+      ...e(
+        o,
+        a?.size || "medium",
         "action",
         (i) => ({
           minHeight: i,
@@ -126,8 +127,8 @@ const t = {
         })
       )
     },
-    ...o?.selected && o?.emergeType === "layout" && o?.variant === "outlined" && !o?.maximized ? {
-      background: `linear-gradient(to right, ${a.vars.palette.primary.opacity}, #ffffff00);`,
+    ...a?.selected && a?.emergeType === "layout" && a?.variant === "outlined" && !a?.maximized ? {
+      background: `linear-gradient(to right, ${o.vars.palette.primary.opacity}, #ffffff00);`,
       "&::before": {
         content: '""',
         position: "absolute",
@@ -143,38 +144,38 @@ const t = {
   /**
    * Styles for the content of the header of the window base component.
    */
-  headerContentWindowBase: ({ theme: a }) => ({
+  headerContentWindowBase: ({ theme: o }) => ({
     width: "100%",
     minWidth: "20px",
     display: "flex",
     alignItems: "center",
-    paddingLeft: a.vars.size.baseSpacings.sp1,
-    paddingRight: a.vars.size.baseSpacings.sp1,
-    color: a.vars.palette.text.primary,
-    gap: a.vars.size.baseSpacings.sp0,
+    paddingLeft: o.vars.size.baseSpacings.sp1,
+    paddingRight: o.vars.size.baseSpacings.sp1,
+    color: o.vars.palette.text.primary,
+    gap: o.vars.size.baseSpacings.sp0,
     overflow: "hidden"
   }),
   /**
    * Styles for the title of the header of the window base component.
    */
-  headerTitleWindowBase: ({ theme: a, ownerState: o }) => ({
+  headerTitleWindowBase: ({ theme: o, ownerState: a }) => ({
     minWidth: "30px",
-    ...o?.selected && o?.emergeType !== "modal" ? {
-      color: `${a.vars.palette.primary.semanticText} !important`
+    ...a?.selected && a?.emergeType !== "modal" ? {
+      color: `${o.vars.palette.primary.semanticText} !important`
     } : {
-      color: `${a.vars.palette.text.secondary} !important`
+      color: `${o.vars.palette.text.secondary} !important`
     },
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    paddingLeft: a.vars.size.baseSpacings.sp2,
+    paddingLeft: o.vars.size.baseSpacings.sp2,
     userSelect: "none",
-    cursor: o?.draggable ? "all-scroll" : "default",
-    ...o?.maximized && {
+    cursor: a?.draggable ? "all-scroll" : "default",
+    ...a?.maximized && {
       "&&&": {
-        ...e(
-          a.generalSettings.isMobile,
-          o?.size || "small",
+        ...s(
+          o.generalSettings.isMobile,
+          a?.size || "small",
           "paragraphDens"
         )
       }
@@ -183,14 +184,13 @@ const t = {
   /**
    * Styles for the subtitle container of the header of the window base component.
    */
-  containerTitleSubtitle: ({ theme: a }) => ({
+  containerTitleSubtitle: ({ theme: o }) => ({
     display: "flex",
     alignItems: "center",
-    gap: a.vars.size.baseSpacings["sp0-5"],
-    "& .MuiSkeleton-root.M4LIcon-root": {
-      width: a.vars.size.baseSpacings.sp3,
-      height: a.vars.size.baseSpacings.sp3
-    },
+    gap: o.vars.size.baseSpacings["sp0-5"],
+    // The title/subtitle separator used to be an `Icon`, which rendered its own skeleton block
+    // inside this container. It is now a plain dot node (see `pointIcon`), so no icon skeleton
+    // is emitted here anymore and the sizing rule that used to target it was removed.
     overflow: "hidden",
     width: "100%",
     userSelect: "none"
@@ -198,36 +198,41 @@ const t = {
   /**
    * Styles for the subtitle of the header of the window base component.
    */
-  headerSubTitleWindowBase: ({ theme: a, ownerState: o }) => ({
+  headerSubTitleWindowBase: ({ theme: o, ownerState: a }) => ({
     width: "auto !important",
     height: "auto !important",
-    ...o?.selected && o?.emergeType !== "modal" ? {
-      color: `${a.vars.palette.primary.semanticText} !important`
+    ...a?.selected && a?.emergeType !== "modal" ? {
+      color: `${o.vars.palette.primary.semanticText} !important`
     } : {
-      color: `${a.vars.palette.text.secondary} !important`
+      color: `${o.vars.palette.text.secondary} !important`
     },
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    paddingLeft: a.vars.size.baseSpacings.sp1,
-    cursor: o?.draggable ? "all-scroll" : "default"
+    paddingLeft: o.vars.size.baseSpacings.sp1,
+    cursor: a?.draggable ? "all-scroll" : "default"
   }),
   /**
    * Styles for the icon of the header of the window base component.
    */
-  headerIconWindowBase: ({ theme: a, ownerState: o }) => ({
-    "& .M4LIcon-icon": {
-      ...o?.selected && o?.emergeType !== "modal" ? {
-        backgroundColor: `${a.vars.palette.primary.semanticText} !important`
-      } : {
-        backgroundColor: `${a.vars.palette.text.secondary} !important`
+  headerIconWindowBase: ({ theme: o, ownerState: a }) => {
+    const i = a?.selected && a?.emergeType !== "modal" ? o.vars.palette.primary.semanticText : o.vars.palette.text.secondary;
+    return {
+      "& .M4LIcon-icon": {
+        backgroundColor: `${i} !important`
+      },
+      "& .MuiSvgIcon-root": {
+        [r]: {
+          fill: `${i} !important`,
+          stroke: "none"
+        }
       }
-    }
-  }),
+    };
+  },
   /**
    * Styles for the icons wrapper of the window base component.
    */
-  iconsWrapperWindowBase: ({ theme: a, ownerState: o }) => ({
+  iconsWrapperWindowBase: ({ theme: o, ownerState: a }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end",
@@ -235,162 +240,254 @@ const t = {
     flexWrap: "nowrap",
     cursor: "pointer",
     height: "100%",
-    gap: a.vars.size.baseSpacings["sp0-5"],
+    gap: o.vars.size.baseSpacings["sp0-5"],
     // override the default styles of the icon button
     "& .window-actions.MuiSkeleton-root": {
-      ...r(
-        a,
-        o?.size || "medium",
+      ...e(
+        o,
+        a?.size || "medium",
         "base",
         (i) => ({
           height: `${i}!important`,
           width: `${i}!important`
         })
       ),
-      marginLeft: a.vars.size.baseSpacings.sp1,
-      marginRight: a.vars.size.baseSpacings.sp1,
-      marginBottom: o?.emergeType === "layout" ? "auto" : "unset"
+      marginLeft: o.vars.size.baseSpacings.sp1,
+      marginRight: o.vars.size.baseSpacings.sp1,
+      marginBottom: a?.emergeType === "layout" ? "auto" : "unset"
     },
     '& .window-actions[class*="M4LIconButton-styledMUIIconButton"]': {
-      ...r(
-        a,
-        o?.size || "medium",
+      ...e(
+        o,
+        a?.size || "medium",
         "base",
         (i) => ({
           height: `${i}!important`,
           width: `${i}!important`
         })
       ),
-      marginLeft: a.vars.size.baseSpacings.sp1,
-      marginRight: a.vars.size.baseSpacings.sp1,
-      marginBottom: o?.emergeType === "layout" ? "auto!important" : "unset!important",
+      marginLeft: o.vars.size.baseSpacings.sp1,
+      marginRight: o.vars.size.baseSpacings.sp1,
+      marginBottom: a?.emergeType === "layout" ? "auto!important" : "unset!important",
       "&.collapse-toggle": {
-        ...o?.maximized && {
+        ...a?.maximized && {
           display: "none"
         },
         "&:hover": {
-          backgroundColor: `${a.vars.palette.chips.orange.contained.backgroundColor} !important`,
+          backgroundColor: `${o.vars.palette.chips.orange.contained.backgroundColor} !important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${a.vars.palette.chips.orange.contained.backgroundColorTone} !important`
+            backgroundColor: `${o.vars.palette.chips.orange.contained.backgroundColorTone} !important`
+          },
+          "& .MuiSvgIcon-root": {
+            [r]: {
+              fill: `${o.vars.palette.chips.orange.contained.backgroundColorTone} !important`,
+              stroke: "none"
+            }
           }
         },
         "&:active": {
-          backgroundColor: `${a.vars.palette.chips.orange.contained.backgroundHover} !important`,
+          backgroundColor: `${o.vars.palette.chips.orange.contained.backgroundHover} !important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${a.vars.palette.chips.orange.contained.backgroundColorTone} !important`
+            backgroundColor: `${o.vars.palette.chips.orange.contained.backgroundColorTone} !important`
+          },
+          "& .MuiSvgIcon-root": {
+            [r]: {
+              fill: `${o.vars.palette.chips.orange.contained.backgroundColorTone} !important`,
+              stroke: "none"
+            }
           }
         }
       },
       "&.expand-toggle": {
-        ...o?.collapsed && {
+        ...a?.collapsed && {
           display: "none"
         },
         "&:hover": {
-          backgroundColor: `${a.vars.palette.chips.forest.contained.backgroundColor} !important`,
+          backgroundColor: `${o.vars.palette.chips.forest.contained.backgroundColor} !important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${a.vars.palette.chips.forest.contained.backgroundColorTone} !important`
+            backgroundColor: `${o.vars.palette.chips.forest.contained.backgroundColorTone} !important`
+          },
+          "& .MuiSvgIcon-root": {
+            [r]: {
+              fill: `${o.vars.palette.chips.forest.contained.backgroundColorTone} !important`,
+              stroke: "none"
+            }
           }
         },
         "&:active": {
-          backgroundColor: `${a.vars.palette.chips.forest.contained.backgroundHover} !important`,
+          backgroundColor: `${o.vars.palette.chips.forest.contained.backgroundHover} !important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${a.vars.palette.chips.forest.contained.backgroundColorTone} !important`
+            backgroundColor: `${o.vars.palette.chips.forest.contained.backgroundColorTone} !important`
+          },
+          "& .MuiSvgIcon-root": {
+            [r]: {
+              fill: `${o.vars.palette.chips.forest.contained.backgroundColorTone} !important`,
+              stroke: "none"
+            }
           }
         }
       },
       "&.pin-toggle": {
         "&:hover": {
-          backgroundColor: `${a.vars.palette.chips.info.contained.backgroundColor} !important`,
+          backgroundColor: `${o.vars.palette.chips.info.contained.backgroundColor} !important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${a.vars.palette.chips.info.contained.backgroundColorTone} !important`
+            backgroundColor: `${o.vars.palette.chips.info.contained.backgroundColorTone} !important`
+          },
+          "& .MuiSvgIcon-root": {
+            [r]: {
+              fill: `${o.vars.palette.chips.info.contained.backgroundColorTone} !important`,
+              stroke: "none"
+            }
           }
         },
         "&:active": {
-          backgroundColor: `${a.vars.palette.chips.info.contained.backgroundHover} !important`,
+          backgroundColor: `${o.vars.palette.chips.info.contained.backgroundHover} !important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${a.vars.palette.chips.info.contained.backgroundColorTone} !important`
+            backgroundColor: `${o.vars.palette.chips.info.contained.backgroundColorTone} !important`
+          },
+          "& .MuiSvgIcon-root": {
+            [r]: {
+              fill: `${o.vars.palette.chips.info.contained.backgroundColorTone} !important`,
+              stroke: "none"
+            }
           }
         }
       },
       "&.close-button": {
         "&:hover": {
-          backgroundColor: `${a.vars.palette.chips.error.contained.backgroundColor} !important`,
+          backgroundColor: `${o.vars.palette.chips.error.contained.backgroundColor} !important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${a.vars.palette.chips.error.contained.backgroundColorTone} !important`
+            backgroundColor: `${o.vars.palette.chips.error.contained.backgroundColorTone} !important`
+          },
+          "& .MuiSvgIcon-root": {
+            [r]: {
+              fill: `${o.vars.palette.chips.error.contained.backgroundColorTone} !important`,
+              stroke: "none"
+            }
           }
         },
         "&:active": {
-          backgroundColor: `${a.vars.palette.chips.error.contained.backgroundHover} !important`,
+          backgroundColor: `${o.vars.palette.chips.error.contained.backgroundHover} !important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${a.vars.palette.chips.error.contained.backgroundColorTone} !important`
+            backgroundColor: `${o.vars.palette.chips.error.contained.backgroundColorTone} !important`
+          },
+          "& .MuiSvgIcon-root": {
+            [r]: {
+              fill: `${o.vars.palette.chips.error.contained.backgroundColorTone} !important`,
+              stroke: "none"
+            }
           }
         }
       },
       "&.MuiButtonBase-root:not(:hover, :active, :focus, .M4LIconButton-selected) .M4LIcon-root .M4LIcon-icon": {
-        backgroundColor: `${a.vars.palette.text.disabled} !important`
+        backgroundColor: `${o.vars.palette.text.disabled} !important`
+      },
+      "&.MuiButtonBase-root:not(:hover, :active, :focus, .M4LIconButton-selected) .M4LIcon-root .MuiSvgIcon-root": {
+        [r]: {
+          fill: `${o.vars.palette.text.disabled} !important`,
+          stroke: "none"
+        }
       }
     },
     "& .window-actions:first-of-type": {
-      marginLeft: `${a.vars.size.baseSpacings.sp4} !important`
+      marginLeft: `${o.vars.size.baseSpacings.sp4} !important`
     }
   }),
   /**
-   * Styles for the dot icon of the window base component.
+   * Styles for the dot that separates the header title from the subtitle.
+   *
+   * The separator is drawn here instead of being loaded as an icon: it is a solid circle, so a
+   * `::before` pseudo-element reproduces it exactly without shipping an SVG through the icon
+   * pipeline. The wrapper keeps the `base` size box the previous `Icon` slot occupied so header
+   * spacing stays identical, and the dot keeps its original 6px diameter and secondary color.
+   *
+   * During skeleton the painted dot is suppressed and the wrapper hosts `pointIconSkeleton`
+   * instead, so the separator loads like the title and subtitle around it.
    */
-  pointIcon: ({ theme: a, ownerState: o }) => ({
-    "& .M4LIcon-icon": {
-      ...o?.selected && o?.emergeType !== "modal" && o?.variant === "outlined" ? {
-        backgroundColor: `${a.vars.palette.primary.semanticText} !important`
-      } : {
-        backgroundColor: `${a.vars.palette.text.secondary} !important`
-      }
-    },
-    ...r(
-      a,
-      o?.size || "medium",
-      "base"
-    )
+  pointIcon: ({ theme: o, ownerState: a }) => {
+    const i = a?.selected && a?.emergeType !== "modal" && a?.variant === "outlined" ? o.vars.palette.primary.semanticText : o.vars.palette.text.secondary;
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      ...!a?.isSkeleton && {
+        "&::before": {
+          content: '""',
+          display: "block",
+          width: o.vars.size.baseSpacings["sp1-5"],
+          height: o.vars.size.baseSpacings["sp1-5"],
+          borderRadius: "50%",
+          backgroundColor: i
+        }
+      },
+      ...e(
+        o,
+        a?.size || "medium",
+        "base",
+        (n) => ({
+          width: n
+        })
+      )
+    };
+  },
+  /**
+   * Styles for the circular skeleton that stands in for the separator dot while loading.
+   *
+   * The diameter matches the painted dot (`sp1-5`, 6px) so the header keeps the same spacing and
+   * the separator reads as part of the same loading state as the title and subtitle.
+   *
+   * `&&&` is required: the extended `Skeleton` forces `width`/`height: 100%` for the `circular`
+   * variant through its own `&.M4lclassCssSpecificity` rule, which would stretch the dot to the
+   * full `base` wrapper box.
+   */
+  pointIconSkeleton: ({ theme: o }) => ({
+    "&&&": {
+      width: o.vars.size.baseSpacings["sp1-5"],
+      height: o.vars.size.baseSpacings["sp1-5"],
+      flexShrink: 0
+    }
   }),
   /**
    * Styles for the menu actions of the window base component.
    */
-  menuActionsWindowBase: ({ theme: a, ownerState: o }) => ({
-    ...o?.emergeType === "layout" ? {
-      ...r(
-        a,
-        o?.size || "medium",
+  menuActionsWindowBase: ({ theme: o, ownerState: a }) => ({
+    ...a?.emergeType === "layout" ? {
+      ...e(
+        o,
+        a?.size || "medium",
         "action"
       )
     } : {
       height: "auto!important"
     },
-    ...o?.collapsed && {
+    ...a?.collapsed && {
       display: "none"
     }
   }),
   /**
    * Styles for the linear progress of the window base component.
    */
-  linearProgressIndeterminate: ({ theme: a }) => ({
-    borderBottomRightRadius: a.vars.size.borderRadius.r0,
-    borderBottomLeftRadius: a.vars.size.borderRadius.r0
+  linearProgressIndeterminate: ({ theme: o }) => ({
+    borderBottomRightRadius: o.vars.size.borderRadius.r0,
+    borderBottomLeftRadius: o.vars.size.borderRadius.r0
   }),
   /**
    * Styles for the content of the edition info.
    */
-  contentEditionInfo: ({ theme: a }) => ({
+  contentEditionInfo: ({ theme: o }) => ({
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
     justifyContent: "flex-start",
     alignSelf: "stretch",
-    gap: a.vars.size.baseSpacings.sp2,
-    color: a.vars.palette.text.secondary,
+    gap: o.vars.size.baseSpacings.sp2,
+    color: o.vars.palette.text.secondary,
     zIndex: 1,
-    paddingTop: a.vars.size.baseSpacings.sp5,
+    paddingTop: o.vars.size.baseSpacings.sp5,
     paddingBottom: 0,
-    paddingLeft: a.vars.size.baseSpacings.sp5,
-    paddingRight: a.vars.size.baseSpacings.sp5,
+    paddingLeft: o.vars.size.baseSpacings.sp5,
+    paddingRight: o.vars.size.baseSpacings.sp5,
     "& > span": {
       whiteSpace: "nowrap",
       overflow: "hidden",
@@ -410,21 +507,21 @@ const t = {
   /**
    * Styles for the container of the left actions of the window base component.
    */
-  containerLeftActions: ({ theme: a, ownerState: o }) => ({
+  containerLeftActions: ({ theme: o, ownerState: a }) => ({
     display: "flex",
-    gap: a.vars.size.baseSpacings.sp1,
+    gap: o.vars.size.baseSpacings.sp1,
     alignItems: "center",
     "& .M4LIconButton-styledMUIIconButton": {
-      ...r(a, o?.size || "medium", "case", (i) => ({
+      ...e(o, a?.size || "medium", "case", (i) => ({
         width: `${i}!important`,
         height: `${i}!important`
       }))
     },
-    ...o?.collapsed && {
+    ...a?.collapsed && {
       display: "none"
     }
   })
 };
 export {
-  t as windowBaseStyles
+  d as windowBaseStyles
 };

package/components/WindowBase/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const WINDOW_BASE_KEY_COMPONENT = "M4LWindowBase";
-export declare const windowBaseClasses: Record<"wrapperWindowBase" | "contentWindowBase" | "headerContentWindowBase" | "headerTitleWindowBase" | "headerSubTitleWindowBase" | "pointIcon" | "containerTitleSubtitle" | "headerIconWindowBase" | "menuActionsWindowBase" | "iconsWrapperWindowBase" | "headerWindowComponent" | "linearProgressIndeterminate" | "contentEditionInfo" | "windowContainerComponent" | "toastContainer" | "containerLeftActions", string>;
+export declare const windowBaseClasses: Record<"wrapperWindowBase" | "contentWindowBase" | "headerContentWindowBase" | "headerTitleWindowBase" | "headerSubTitleWindowBase" | "pointIcon" | "pointIconSkeleton" | "containerTitleSubtitle" | "headerIconWindowBase" | "menuActionsWindowBase" | "iconsWrapperWindowBase" | "headerWindowComponent" | "linearProgressIndeterminate" | "contentEditionInfo" | "windowContainerComponent" | "toastContainer" | "containerLeftActions", string>;
 //# sourceMappingURL=constants.d.ts.map

package/components/WindowBase/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/WindowBase/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,yBAAyB,kBAAkB,CAAC;AAGzD,eAAO,MAAM,iBAAiB,+ZAAoE,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/WindowBase/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,yBAAyB,kBAAkB,CAAC;AAGzD,eAAO,MAAM,iBAAiB,qbAAoE,CAAC"}

package/components/WindowBase/helpers.d.ts

@@ -8,7 +8,6 @@ type GetMenuActionsType = {
     windowId: string;
     isMobile: boolean;
     moduleActions: ModuleAction[];
-    urlPrefix: string;
     saveModuleCookies: (wd: string) => void;
     resetModuleCookies: (wd: string) => void;
     version?: string;