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

package/components/ImageText/constants.d.ts

@@ -1,17 +1,17 @@
 /**
- * Clave del componente ImageTextContainer.
+ * ImageTextContainer component key.
  */
 export declare const IMAGE_TEXT_KEY_COMPONENT = "M4LImageText";
 /**
- * Clases del componente ImageTextContainer.
+ * ImageTextContainer component classes.
  */
 export declare const IMAGE_TEXT_CLASSES: Record<"root" | "img" | "title" | "message" | "imageContainer" | "wrapperTitleMessage", string>;
 /**
- * URL de la imagen por defecto.
+ * Default image URL.
  */
-export declare const DEFAULT_IMAGE_URL = "frontend/components/no_item_privileges/assets/img/ImageTextDefault.svg";
+export declare const DEFAULT_IMAGE_URL: import("@emotion/react/jsx-runtime").JSX.Element;
 /**
- * Alt de la imagen.
+ * Image alt text.
  */
 export declare const IMG_ALT = "illustration";
 //# sourceMappingURL=constants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/ImageText/constants.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,eAAO,MAAM,wBAAwB,iBAAiB,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,kBAAkB,iGAAiE,CAAC;AAEjG;;GAEG;AACH,eAAO,MAAM,iBAAiB,2EAA2E,CAAC;AAE1G;;GAEG;AACH,eAAO,MAAM,OAAO,iBAAiB,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/ImageText/constants.tsx"],"names":[],"mappings":"AAMA;;GAEG;AACH,eAAO,MAAM,wBAAwB,iBAAiB,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,kBAAkB,iGAAiE,CAAC;AAEjG;;GAEG;AAEH,eAAO,MAAM,iBAAiB,kDAAgF,CAAC;AAE/G;;GAEG;AACH,eAAO,MAAM,OAAO,iBAAiB,CAAC"}

package/components/ImageText/constants.js

@@ -1,8 +1,10 @@
+import "@emotion/react/jsx-runtime";
+import "@m4l/icons";
 import { getComponentClasses as t } from "../../utils/getComponentSlotRoot.js";
 import { ImageTextSlots as o } from "./slots/ImageTextEnum.js";
-const e = "M4LImageText", m = t(e, o), E = "illustration";
+const m = "M4LImageText", E = t(m, o), i = "illustration";
 export {
-  m as IMAGE_TEXT_CLASSES,
-  e as IMAGE_TEXT_KEY_COMPONENT,
-  E as IMG_ALT
+  E as IMAGE_TEXT_CLASSES,
+  m as IMAGE_TEXT_KEY_COMPONENT,
+  i as IMG_ALT
 };

package/components/ImageText/types.d.ts

@@ -3,6 +3,7 @@ import { M4LOverridesStyleRules } from '../../@types/augmentations';
 import { IMAGE_TEXT_KEY_COMPONENT } from './constants';
 import { Theme } from '@mui/material';
 import { Sizes } from '@m4l/styles';
+import { IconProps } from '@m4l/base';
 export interface ImageTextProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Clase del componente.
@@ -15,7 +16,7 @@ export interface ImageTextProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * URL de la imagen.
      */
-    imageUrl: string;
+    imageUrl: NonNullable<IconProps['src']>;
     /**
      * Título del componente.
      */

package/components/ImageText/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/ImageText/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;CAC3C;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,cAAc,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG,sBAAsB,CAAC,kBAAkB,EAAE,OAAO,wBAAwB,EAAE,KAAK,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/ImageText/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IACxC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;CAC3C;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,cAAc,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG,sBAAsB,CAAC,kBAAkB,EAAE,OAAO,wBAAwB,EAAE,KAAK,CAAC,CAAC"}

package/components/Label/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Label/Label.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,UAAU,EAAE,MAAM,SAAS,CAAC;AAYtD;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,qDAyEtC,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Label/Label.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,UAAU,EAAE,MAAM,SAAS,CAAC;AAatD;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,qDAwEtC,CAAC"}

package/components/Label/Label.js

@@ -1,30 +1,31 @@
 import { jsx as a, jsxs as l, Fragment as p } from "@emotion/react/jsx-runtime";
-import { useEnvironment as v, useModuleSkeleton as w } from "@m4l/core";
-import z from "clsx";
-import { LABEL_KEY_COMPONENT as _, classLabelRoot as k, LAB_SPECIFY as C } from "./constants.js";
-import { useComponentSize as E } from "../../hooks/useComponentSize/index.js";
-import { LabelRootStyled as x, TypographyStyled as I, TypographyMandatoryMessageStyled as j, IconHelperMessageStyled as A, SkeletonStyled as i } from "./slots/LabelSlots.js";
+import { useModuleSkeleton as N } from "@m4l/core";
+import L from "clsx";
+import { LABEL_KEY_COMPONENT as w, classLabelRoot as z, LAB_SPECIFY as k } from "./constants.js";
+import { useComponentSize as v } from "../../hooks/useComponentSize/index.js";
+import { NotificationInformationOutlined as C } from "@m4l/icons";
+import { LabelRootStyled as I, TypographyStyled as x, TypographyMandatoryMessageStyled as E, IconHelperMessageStyled as j, SkeletonStyled as i } from "./slots/LabelSlots.js";
 const P = (y) => {
-  const { helperMessage: s, label: h, symbol: c, mandatory: m, mandatoryMessage: r, htmlFor: g, id: u, error: b, size: d = "medium", disabled: t, className: f } = y, { host_static_assets: M, environment_assets: L } = v(), N = w(), { currentSize: o } = E(d), S = typeof s == "string" && s.length > 0, n = o === "small" || o === "medium" ? o : "medium", e = {
+  const { helperMessage: r, label: h, symbol: c, mandatory: m, mandatoryMessage: o, htmlFor: u, id: b, error: f, size: d = "medium", disabled: t, className: g } = y, M = N(), { currentSize: s } = v(d), S = typeof r == "string" && r.length > 0, n = s === "small" || s === "medium" ? s : "medium", e = {
     disabled: t,
     size: d
   };
   return /* @__PURE__ */ a(
-    x,
+    I,
     {
-      "aria-label": _,
+      "aria-label": w,
       ownerState: { ...e },
-      htmlFor: g,
-      id: u,
-      children: N ? /* @__PURE__ */ l(p, { children: [
+      htmlFor: u,
+      id: b,
+      children: M ? /* @__PURE__ */ l(p, { children: [
         /* @__PURE__ */ a(i, { ownerState: { ...e }, variant: "rectangular", className: "SkeletonWidthLabel" }),
         m && /* @__PURE__ */ a(i, { ownerState: { ...e }, variant: "circular", className: "MandatoryLabel" }),
         S && /* @__PURE__ */ a(i, { ownerState: { ...e }, variant: "circular", className: "HelperIconLabel" })
       ] }) : /* @__PURE__ */ l(p, { children: [
         /* @__PURE__ */ l(
-          I,
+          x,
           {
-            className: z(k, C, "M4lclassCssSpecificity", f),
+            className: L(z, k, "M4lclassCssSpecificity", g),
             ownerState: { ...e },
             variant: "bodyStandard",
             size: n,
@@ -36,26 +37,26 @@ const P = (y) => {
           }
         ),
         m && /* @__PURE__ */ a(
-          j,
+          E,
           {
             ownerState: { ...e },
             variant: "bodyStandard",
-            className: r ? "mandatoryMessage" : "mandatoryAsterisk",
+            className: o ? "mandatoryMessage" : "mandatoryAsterisk",
             size: n,
             disabled: t,
-            children: r || "*"
+            children: o || "*"
           }
         ),
         S && /* @__PURE__ */ a(
-          A,
+          j,
           {
-            tooltipContent: s,
+            tooltipContent: r,
             ownerState: { ...e },
             placement: "right",
             size: n,
-            className: b ? "helper-icon-error" : "helper-icon",
+            className: f ? "helper-icon-error" : "helper-icon",
             disabled: t,
-            src: `${M}/${L}/frontend/components/LabelMessage/assets/icons/infoSmall.svg`
+            src: /* @__PURE__ */ a(C, {})
           }
         )
       ] })

package/components/Label/Label.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Label/Label.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,eAAO,MAAM,WAAW,EAAE,WAqIzB,CAAC"}
+{"version":3,"file":"Label.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Label/Label.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAU3D,eAAO,MAAM,WAAW,EAAE,WA0IzB,CAAC"}

package/components/Label/Label.styles.js

@@ -1,19 +1,23 @@
+import { getIconPaintStyles as t } from "@m4l/base";
 import { getHeightSizeStyles as i } from "../../utils/getSizeStyles/getSizeStyles.js";
-const l = {
+function l(s) {
+  return t(s);
+}
+const n = {
   /**
    * Estilos para el contenedor raíz del Label 🏷️
    * @param {object} theme - El tema de MUI.
    * @param {object} ownerState - El estado del componente.
    * @returns {object} - Los estilos aplicados al root del Label.
    */
-  root: ({ theme: e, ownerState: s }) => ({
+  root: ({ theme: s, ownerState: e }) => ({
     width: "100%",
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
     ...i(
-      e.generalSettings.isMobile,
-      s?.size || "small",
+      s.generalSettings.isMobile,
+      e?.size || "small",
       "base",
       (a) => ({
         minHeight: a,
@@ -21,10 +25,10 @@ const l = {
         maxHeight: "none"
       })
     ),
-    gap: e.size.baseSpacings.sp1,
+    gap: s.size.baseSpacings.sp1,
     /** Estilos para el estado disabled del Label 😶‍🌫️ */
-    ...s?.disabled && {
-      color: e.vars.palette.text.disabled,
+    ...e?.disabled && {
+      color: s.vars.palette.text.disabled,
       '& > [class*="M4LIcon-icon"]': {
         PointerEvents: "none"
       }
@@ -33,17 +37,17 @@ const l = {
   /**
    * Estilos para el slot Typography del Label.
    */
-  typographyStyled: ({ theme: e, ownerState: s }) => ({
+  typographyStyled: ({ theme: s, ownerState: e }) => ({
     "&.MuiTypography-root": {
       width: "fit-content",
-      minWidth: e.vars.size.baseSpacings.sp2,
+      minWidth: s.vars.size.baseSpacings.sp2,
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap",
       "&.M4lclassCssSpecificity": {
-        color: e.vars.palette.text.secondary,
-        ...s?.disabled === !0 && {
-          color: e.vars.palette.text.disabled
+        color: s.vars.palette.text.secondary,
+        ...e?.disabled === !0 && {
+          color: s.vars.palette.text.disabled
         }
       }
     }
@@ -51,17 +55,17 @@ const l = {
   /**
    * Estilos para el slot Typography del mensaje obligatorio del Label.
    */
-  typographyMandatoryMessageStyled: ({ theme: e, ownerState: s }) => ({
+  typographyMandatoryMessageStyled: ({ theme: s, ownerState: e }) => ({
     "&.MuiTypography-root": {
       width: "fit-content",
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap",
-      minWidth: e.vars.size.baseSpacings.sp2,
+      minWidth: s.vars.size.baseSpacings.sp2,
       "&.M4lclassCssSpecificity": {
-        color: e.vars.palette.text.primary,
-        ...s?.disabled && {
-          color: e.vars.palette.text.disabled
+        color: s.vars.palette.text.primary,
+        ...e?.disabled && {
+          color: s.vars.palette.text.disabled
         }
       }
     }
@@ -69,59 +73,58 @@ const l = {
   /**
    * Estilos para el slot Icon del Label.
    */
-  iconHelperMessageStyled: ({ theme: e, ownerState: s }) => ({
-    borderRadius: e.vars.size.borderRadius.r1,
-    cursor: s?.disabled ? "default" : "pointer",
-    '&:hover > [class*="M4LIcon-icon"]': {
-      backgroundColor: e.vars.palette.info.hover
-    },
-    '& > [class*="M4LIcon-icon"]': {
-      backgroundColor: e.vars.palette.info.enabled
-    },
-    ...i(
-      e.generalSettings.isMobile,
-      s?.size || "small",
-      "base"
-    )
-  }),
+  iconHelperMessageStyled: ({ theme: s, ownerState: e }) => {
+    const a = e?.disabled ? s.vars.palette.text.disabled : s.vars.palette.info.enabled, r = e?.disabled ? s.vars.palette.text.disabled : s.vars.palette.info.hover;
+    return {
+      borderRadius: s.vars.size.borderRadius.r1,
+      cursor: e?.disabled ? "default" : "pointer",
+      ...l(a),
+      "&:hover": l(r),
+      ...i(
+        s.generalSettings.isMobile,
+        e?.size || "small",
+        "base"
+      )
+    };
+  },
   /**
    * Estilos para el slot Skeleton del Label.
    */
-  skeletonStyled: ({ ownerState: e, theme: s }) => ({
+  skeletonStyled: ({ ownerState: s, theme: e }) => ({
     width: "100%",
-    borderRadius: s.vars.size.borderRadius.r1,
+    borderRadius: e.vars.size.borderRadius.r1,
     display: "flex",
     alignItems: "center",
-    backgroundColor: s.vars.palette.skeleton.default,
+    backgroundColor: e.vars.palette.skeleton.default,
     ...i(
-      s.generalSettings.isMobile,
-      e?.size || "medium",
+      e.generalSettings.isMobile,
+      s?.size || "medium",
       "base"
     ),
     "&.MandatoryLabel": {
-      width: s.vars.size.baseSpacings["sp0-5"],
-      paddingLeft: s.vars.size.baseSpacings.sp1,
-      paddingRight: s.vars.size.baseSpacings.sp1
+      width: e.vars.size.baseSpacings["sp0-5"],
+      paddingLeft: e.vars.size.baseSpacings.sp1,
+      paddingRight: e.vars.size.baseSpacings.sp1
     },
     "&.SkeletonWidthLabel": {
-      width: s.vars.size.baseSpacings.sp14,
-      borderRadius: s.vars.size.borderRadius.r1,
+      width: e.vars.size.baseSpacings.sp14,
+      borderRadius: e.vars.size.borderRadius.r1,
       ...i(
-        s.generalSettings.isMobile,
-        e?.size || "medium",
+        e.generalSettings.isMobile,
+        s?.size || "medium",
         "base"
       ),
       ...i(
-        s.generalSettings.isMobile,
-        e?.size || "small",
+        e.generalSettings.isMobile,
+        s?.size || "small",
         "base"
       )
     },
     "&.HelperIconLabel": {
-      borderRadius: s.vars.size.borderRadius.r4,
+      borderRadius: e.vars.size.borderRadius.r4,
       ...i(
-        s.generalSettings.isMobile,
-        e?.size || "small",
+        e.generalSettings.isMobile,
+        s?.size || "small",
         "base",
         (a) => ({
           width: a
@@ -131,5 +134,5 @@ const l = {
   })
 };
 export {
-  l as labelStyles
+  n as labelStyles
 };

package/components/LanguagePopover/LanguagePopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LanguagePopover.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/LanguagePopover/LanguagePopover.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAI/C;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,oDA2G1D"}
+{"version":3,"file":"LanguagePopover.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/LanguagePopover/LanguagePopover.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAI/C;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,oDA+H1D"}

package/components/LanguagePopover/LanguagePopover.js

@@ -1,72 +1,78 @@
-import { jsx as o } from "@emotion/react/jsx-runtime";
-import { useState as a, useEffect as v } from "react";
-import { useFirstRender as R, useLocales as k } from "@m4l/graphics";
-import { useEnvironment as y, useNetwork as z } from "@m4l/core";
-import { getPropDataTestId as A } from "../../test/getNameDataTestId.js";
-import { getComponentSlotRoot as M } from "../../utils/getComponentSlotRoot.js";
-import { useComponentSize as N } from "../../hooks/useComponentSize/index.js";
-import { Image as i } from "../Image/Image.js";
-import { LanguagePopoverRootStyled as T, PaperStyled as _ } from "./slots/LanguagePopoverSlots.js";
-import { LANGUAGE_POPOVER_KEY_COMPONENT as c } from "./constants.js";
-import { LanguagePopoverSlots as w } from "./slots/LanguagePopoverEnum.js";
-function H(l) {
+import { jsx as a } from "@emotion/react/jsx-runtime";
+import { useState as i, useEffect as I, isValidElement as R, cloneElement as k } from "react";
+import { useFirstRender as v, useLocales as z } from "@m4l/graphics";
+import { useEnvironment as A, useNetwork as M } from "@m4l/core";
+import { getPropDataTestId as N } from "../../test/getNameDataTestId.js";
+import { getComponentSlotRoot as T } from "../../utils/getComponentSlotRoot.js";
+import { useComponentSize as w } from "../../hooks/useComponentSize/index.js";
+import { Image as _ } from "../Image/Image.js";
+import { LanguagePopoverRootStyled as x, PaperStyled as G } from "./slots/LanguagePopoverSlots.js";
+import { LANGUAGE_POPOVER_KEY_COMPONENT as l } from "./constants.js";
+import { LanguagePopoverSlots as F } from "./slots/LanguagePopoverEnum.js";
+function W(m) {
   const {
-    anchorOrigin: m,
+    anchorOrigin: c,
     disabled: u,
     size: p,
     transformOrigin: f
-  } = l, { currentSize: t } = N(p), g = R(), { currentLocale: d, onChangeLocale: O } = k(), { domainToken: L } = y(), { networkOperation: I } = z(), [r, P] = a([]), [n, b] = a(!1), h = (e) => {
-    e && b(!0);
+  } = m, { currentSize: o } = w(p), d = v(), { currentLocale: g, onChangeLocale: O } = z(), { domainToken: h } = A(), { networkOperation: L } = M(), [t, E] = i([]), [n, P] = i(!1), r = (e) => typeof e == "string" ? /* @__PURE__ */ a(_, { src: e, enableIntersectionObserver: !1 }) : R(e) ? k(e, {
+    sx: {
+      width: 24,
+      height: 24
+    },
+    "aria-hidden": !0
+  }) : null, C = (e) => {
+    e && P(!0);
   };
-  v(() => {
+  I(() => {
     let e = !0;
-    return n && I({
+    return n && L({
       method: "GET",
       endPoint: "na/locales",
-      parms: { domain_token: L },
+      parms: { domain_token: h },
       responseToCamelCase: !0
     }).then((s) => {
       if (e)
         try {
-          P(s.data);
-        } catch (E) {
-          console.error(E);
+          E(s.data);
+        } catch (y) {
+          console.error(y);
         }
     }), function() {
       e = !1;
     };
-  }, [n, g]);
-  const C = () => r?.length === 0 ? [{
+  }, [n, d]);
+  const S = () => t?.length === 0 ? [{
     type: "loader"
-  }] : r?.map((e) => ({
+  }] : t?.map((e) => ({
     type: "menuItem",
     label: e?.name,
-    startIcon: /* @__PURE__ */ o(i, { src: e?.urlIcon, enableIntersectionObserver: !1 }),
+    startIcon: r(e?.urlIcon),
     onClick: () => O(e)
-  })), S = M(c);
-  return /* @__PURE__ */ o(
-    T,
+  })), b = T(l);
+  return /* @__PURE__ */ a(
+    x,
     {
       ownerState: {
-        size: t
+        size: o
       },
       role: "button",
       "aria-label": "Language selector",
-      size: t,
-      className: S,
-      anchorOrigin: m,
-      ...A(c, w.root),
+      size: o,
+      className: b,
+      anchorOrigin: c,
+      ...N(l, F.root),
       disabled: u,
-      icon: /* @__PURE__ */ o(i, { src: d?.urlIcon, enableIntersectionObserver: !1 }),
-      menuActions: C(),
-      onOpen: h,
+      icon: r(g?.urlIcon),
+      menuActions: S(),
+      onOpen: C,
       slots: {
-        paper: _
+        paper: G
       },
       transformOrigin: f
     }
   );
 }
 export {
-  H as LanguagePopover
+  W as LanguagePopover
 };

package/components/LoadingError/LoadingError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingError.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/LoadingError/LoadingError.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAA0B,MAAM,SAAS,CAAC;AAazE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,sBAAsB,qDA6EzD,CAAC"}
+{"version":3,"file":"LoadingError.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/LoadingError/LoadingError.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAA0B,MAAM,SAAS,CAAC;AAiCzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,sBAAsB,qDAyEzD,CAAC"}

package/components/LoadingError/LoadingError.js

@@ -1,64 +1,69 @@
-import { jsx as r, jsxs as n } from "@emotion/react/jsx-runtime";
-import { useEnvironment as O, useModuleDictionary as T } from "@m4l/core";
-import { Typography as f } from "@m4l/base";
-import { LoadingErrorRootStyled as C, LoadingErrorStyled as x, LinearProgressIndeterminateStyled as N, LoadingErrorContainerStyled as D, LoadingErrorContentStyled as z, LoadingErrorImageStyled as B, LoadingErrorTextContainerStyled as A, LoadingErrorTitleDescriptionStyled as P, LoadingErrorButtonContainerStyled as $ } from "./slots/LoadingErrorSlots.js";
+import { jsx as r, jsxs as i } from "@emotion/react/jsx-runtime";
+import { useModuleDictionary as C } from "@m4l/core";
+import { Typography as p, Icon as _ } from "@m4l/base";
+import { LoadingErrorRootStyled as x, LoadingErrorStyled as v, LinearProgressIndeterminateStyled as N, LoadingErrorContainerStyled as D, LoadingErrorContentStyled as z, LoadingErrorImageStyled as A, LoadingErrorTextContainerStyled as B, LoadingErrorTitleDescriptionStyled as M, LoadingErrorButtonContainerStyled as P } from "./slots/LoadingErrorSlots.js";
 import { getComponentSlotRoot as k } from "../../utils/getComponentSlotRoot.js";
-import { getPropDataTestId as M } from "../../test/getNameDataTestId.js";
-import { LOADING_ERROR_KEY_COMPONENT as E } from "./constants.js";
-import j from "clsx";
-import { dictionary as i } from "./dictionary.js";
-import { useComponentSize as w } from "../../hooks/useComponentSize/index.js";
-import { useRef as V, useState as W, useEffect as G } from "react";
-import { LoadingErrorSlots as K } from "./slots/LoadingErrorEnum.js";
-import { Button as Y } from "../extended/mui/Button/Button.js";
-const ir = (g) => {
-  const { status: L, action: u, title: s, description: a, introMessage: c, errorIcon: d, className: R, dataTestId: S, size: o = "medium" } = g, { host_static_assets: l, environment_assets: m } = O(), { getLabel: t } = T(), { currentSize: h } = w(o), y = {
-    size: h
-  }, e = V(null), [_, I] = W(!0);
+import { getPropDataTestId as E } from "../../test/getNameDataTestId.js";
+import { LOADING_ERROR_KEY_COMPONENT as a } from "./constants.js";
+import w from "clsx";
+import { dictionary as s } from "./dictionary.js";
+import { useComponentSize as V } from "../../hooks/useComponentSize/index.js";
+import { useRef as j, useState as W, useEffect as G, isValidElement as K } from "react";
+import { ArrowRefreshMdOutlined as Y, LegacyS3LoadingErrorLoadingErrorOutlined as q } from "@m4l/icons";
+import { LoadingErrorSlots as g } from "./slots/LoadingErrorEnum.js";
+import { Button as F } from "../extended/mui/Button/Button.js";
+import { Image as H } from "../Image/Image.js";
+function J(e) {
+  return typeof e == "string" && e !== "" ? /* @__PURE__ */ r(H, { src: e, enableIntersectionObserver: !1 }) : K(e) ? e : /* @__PURE__ */ r(q, {});
+}
+const cr = (e) => {
+  const { status: u, action: L, title: d, description: l, introMessage: c, errorIcon: R, className: y, dataTestId: m, size: t = "medium" } = e, { getLabel: o } = C(), { currentSize: S } = V(t), h = {
+    size: S
+  }, n = j(null), [I, O] = W(!0);
   return G(() => {
-    const p = new ResizeObserver((b) => {
-      for (const v of b)
-        I(v.contentRect.height >= 200);
+    const f = new ResizeObserver((b) => {
+      for (const T of b)
+        O(T.contentRect.height >= 200);
     });
-    return e.current && p.observe(e.current), () => p.disconnect();
+    return n.current && f.observe(n.current), () => f.disconnect();
   }, []), /* @__PURE__ */ r(
-    C,
+    x,
     {
-      ref: e,
-      ownerState: y,
-      className: j(k(E), R),
-      ...M(E, K.root, S),
-      children: L !== "error" ? /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(N, {}) }) : /* @__PURE__ */ r(D, { children: /* @__PURE__ */ n(z, { children: [
-        _ && /* @__PURE__ */ r(
-          B,
+      ref: n,
+      ownerState: h,
+      className: w(k(a), y),
+      ...E(a, g.root, m),
+      children: u !== "error" ? /* @__PURE__ */ r(v, { children: /* @__PURE__ */ r(N, {}) }) : /* @__PURE__ */ r(D, { children: /* @__PURE__ */ i(z, { children: [
+        I && /* @__PURE__ */ r(
+          A,
           {
-            size: o,
-            src: d || `${l}/${m}/frontend/components/loading_error/assets/icons/LoadingError.svg`
+            ...E(a, g.loadingErrorImage, m),
+            children: J(R)
           }
         ),
-        /* @__PURE__ */ n(A, { children: [
-          /* @__PURE__ */ n(P, { children: [
-            /* @__PURE__ */ r(f, { size: o, variant: "subtitleDens", skeletonWidth: "100px", children: s || t(i.LABEL_ERROR_TITLE) }),
+        /* @__PURE__ */ i(B, { children: [
+          /* @__PURE__ */ i(M, { children: [
+            /* @__PURE__ */ r(p, { size: t, variant: "subtitleDens", skeletonWidth: "100px", children: d || o(s.LABEL_ERROR_TITLE) }),
             /* @__PURE__ */ r(
-              f,
+              p,
               {
-                size: o,
+                size: t,
                 variant: "captionSlim",
                 skeletonWidth: "100px",
                 color: "text.secondary",
-                children: a || t(i.LABEL_ERROR_DESCRIPTION)
+                children: l || o(s.LABEL_ERROR_DESCRIPTION)
               }
             )
           ] }),
-          /* @__PURE__ */ r($, { children: /* @__PURE__ */ r(
-            Y,
+          /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(
+            F,
             {
-              size: o,
+              size: t,
               variant: "contained",
               color: "primary",
-              startIcon: `${l}/${m}/frontend/components/loading_error/assets/icons/refresh.svg`,
-              onClick: u,
-              label: c || t(i.LABEL_ERROR_INTRO),
+              startIcon: /* @__PURE__ */ r(_, { src: /* @__PURE__ */ r(Y, {}) }),
+              onClick: L,
+              label: c || o(s.LABEL_ERROR_INTRO),
               "aria-label": "button action"
             }
           ) })
@@ -68,5 +73,5 @@ const ir = (g) => {
   );
 };
 export {
-  ir as LoadingError
+  cr as LoadingError
 };

package/components/LoadingError/LoadingError.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingError.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/LoadingError/LoadingError.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,eAAO,MAAM,kBAAkB,EAAE,kBAwHhC,CAAC"}
+{"version":3,"file":"LoadingError.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/LoadingError/LoadingError.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,eAAO,MAAM,kBAAkB,EAAE,kBAuIhC,CAAC"}

package/components/LoadingError/LoadingError.styles.js

@@ -53,12 +53,27 @@ const i = {
   }),
   /**
    * Styles for loadingErrorImage.
+   *
+   * The artwork fills the box without any color override so multi-tone illustrations,
+   * such as the default gradient error icon, keep their original palette.
    */
   loadingErrorImage: () => ({
     width: "80px",
     height: "80px",
     maxHeight: "80px",
-    minHeight: "60px"
+    minHeight: "60px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "& .MuiSvgIcon-root": {
+      width: "100%",
+      height: "100%"
+    },
+    "& img": {
+      width: "100%",
+      height: "100%",
+      objectFit: "contain"
+    }
   }),
   /**
    * Styles for LoadingErrorDivider.