@m4l/components 9.57.1-beta-hotfix-semantic-width-dynamicform.1 → 9.57.1

package/components/DynamicForm/subcomponents/DynamicFormContent/DynamicFormContent.js

@@ -1,9 +1,9 @@
-import { jsx as r, jsxs as C } from "@emotion/react/jsx-runtime";
-import { forwardRef as E, useMemo as L, memo as A } from "react";
-import R from "clsx";
-import { useModuleDictionary as W, useEnvironment as g } from "@m4l/core";
-import { NotificationCheckCircleFill as O, NotificationWarningFill as T } from "@m4l/icons";
-import { Icon as H } from "@m4l/base";
+import { jsx as o, jsxs as C } from "@emotion/react/jsx-runtime";
+import { forwardRef as A, useMemo as g, memo as L } from "react";
+import N from "clsx";
+import { useModuleDictionary as R, useEnvironment as O } from "@m4l/core";
+import { NotificationCheckCircleFill as T, NotificationWarningFill as H } from "@m4l/icons";
+import { Icon as W } from "@m4l/base";
 import { TEST_PROP_ID as z } from "../../../../test/constants_no_mock.js";
 import { ActionsContainer as G } from "../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
 import { ActionFormIntro as k } from "../../../CommonActions/components/ActionFormIntro/ActionFormIntro.js";
@@ -11,136 +11,123 @@ import { PropertyValue as x } from "../../../PropertyValue/PropertyValue.js";
 import { useDynamicFormConditionals as P } from "../../hooks/useDynamicFormConditionals/useDynamicFormConditionals.js";
 import { resolveFieldRenderHelperMessage as V } from "../../helpers/resolveFieldRenderHelperMessage/resolveFieldRenderHelperMessage.js";
 import { resolveFieldInputLabel as j } from "../../helpers/resolveFieldInputLabel/resolveFieldInputLabel.js";
-import { resolveAdaptiveFieldLayout as B } from "../../helpers/resolveAdaptiveFieldLayout/resolveAdaptiveFieldLayout.js";
-import { DYNAMIC_FORM_DICTIONARY as N } from "../../dictionary.js";
-import { DYNAMIC_FORM_CLASSES as u } from "../../constants.js";
-import { DynamicFormSubmitFeedbackStyled as U, DynamicFormContentRootStyled as Y, DynamicFormFormHeaderStyled as q, DynamicFormFormTitleStyled as K, DynamicFormFormDescriptionStyled as $, DynamicFormFieldsFlowStyled as J, DynamicFormActionsRowStyled as Q, DynamicFormFieldWrapperStyled as X } from "../../slots/DynamicFormSlots.js";
-import { resolveFormHeader as Z } from "../../helpers/resolveFormHeader/resolveFormHeader.js";
-import { resolveFieldMandatory as ee, resolveFieldSymbol as oe } from "../../helpers/resolveFieldContractAliases/resolveFieldContractAliases.js";
-import { resolveFieldComponent as re } from "../../helpers/resolveFieldComponent/resolveFieldComponent.js";
-import { Chip as te } from "../../../Chip/Chip.js";
-const ie = /* @__PURE__ */ new Set([
+import { DYNAMIC_FORM_DICTIONARY as w } from "../../dictionary.js";
+import { DYNAMIC_FORM_CLASSES as c } from "../../constants.js";
+import { DynamicFormSubmitFeedbackStyled as U, DynamicFormContentRootStyled as Y, DynamicFormFormHeaderStyled as B, DynamicFormFormTitleStyled as K, DynamicFormFormDescriptionStyled as $, DynamicFormFieldsFlowStyled as q, DynamicFormActionsRowStyled as J, DynamicFormFieldWrapperStyled as Q } from "../../slots/DynamicFormSlots.js";
+import { resolveFormHeader as X } from "../../helpers/resolveFormHeader/resolveFormHeader.js";
+import { resolveFieldComponent as Z } from "../../helpers/resolveFieldComponent/resolveFieldComponent.js";
+import { resolveFieldSymbol as ee, resolveFieldMandatory as oe } from "../../helpers/resolveFieldContractAliases/resolveFieldContractAliases.js";
+import { Chip as re } from "../../../Chip/Chip.js";
+const te = /* @__PURE__ */ new Set([
   "RHFCheckableList"
 ]);
-function le(c) {
-  const t = c.fieldType?.componentId;
-  return t && ie.has(t) ? "verticalGrow" : "default";
+function ie(a) {
+  const t = a.fieldType?.componentId;
+  return t && te.has(t) ? "verticalGrow" : "default";
 }
-function ae(c) {
+function ne(a) {
   const t = [];
   let e = [];
-  return c.forEach((o) => {
-    const a = le(o);
-    if (a === "verticalGrow") {
+  return a.forEach((r) => {
+    const s = ie(r);
+    if (s === "verticalGrow") {
       e.length > 0 && (t.push({
         layout: "default",
         fields: e
       }), e = []), t.push({
-        layout: a,
-        fields: [o]
+        layout: s,
+        fields: [r]
       });
       return;
     }
-    e.push(o);
+    e.push(r);
   }), e.length > 0 && t.push({
     layout: "default",
     fields: e
   }), t;
 }
-const b = A(function(t) {
+const D = L(function(t) {
   const {
     field: e,
-    currentSize: o,
-    fieldWrapperClassName: a,
-    fieldFlow: D,
-    layout: f,
-    readOnly: y = !1
-  } = t, { getLabel: F } = W(), { host_api_remote: h } = g(), s = f === "verticalGrow";
+    currentSize: r,
+    fieldWrapperClassName: s,
+    fieldFlow: S,
+    layout: d,
+    readOnly: p = !1
+  } = t, { getLabel: u } = R(), { host_api_remote: f } = O(), l = d === "verticalGrow";
   if (typeof e.name != "string" || e.name.trim() === "")
     return null;
-  const S = V(
+  const h = V(
     e,
-    F
-  ), i = j(e, F), n = ee(e), v = oe(e), d = B({
-    hasHelperMessage: !!S,
-    label: i,
-    mandatory: n,
-    requestedSemanticWidth: e.metadata?.semanticWidth,
-    size: o,
-    symbol: v
-  }), m = re(e, {
-    size: o,
-    getLabel: F,
-    hostApiRemote: h,
-    readOnly: y,
+    u
+  ), i = Z(e, {
+    size: r,
+    getLabel: u,
+    hostApiRemote: f,
+    readOnly: p,
     suppressLabel: !0
   });
-  return m ? /* @__PURE__ */ r(
-    X,
+  return i ? /* @__PURE__ */ o(
+    Q,
     {
       ownerState: {
-        readOnly: y,
-        fieldFlow: D,
-        layout: f,
-        isFullWidth: d.isFullWidth,
-        semanticWidth: e.metadata?.semanticWidth,
-        wrapperWidth: d.wrapperWidth
+        readOnly: p,
+        fieldFlow: S,
+        layout: d,
+        semanticWidth: e.metadata?.semanticWidth
       },
-      className: R(
-        a,
-        u.fieldWrapper
+      className: N(
+        s,
+        c.fieldWrapper
       ),
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ o(
         x,
         {
-          controlWidth: d.controlWidth,
-          labelOverflow: "visible",
-          labelWidth: d.labelWidth,
-          property: i,
-          value: m,
+          property: j(e, u),
+          value: i,
           isForm: !0,
-          mandatory: n,
-          helperMessage: S,
-          symbol: v,
-          valueHeight: s ? "100%" : void 0
+          mandatory: oe(e),
+          helperMessage: h,
+          symbol: ee(e),
+          valueHeight: l ? "100%" : void 0
         }
       )
     }
   ) : null;
 });
-b.displayName = "DynamicFormFieldRow";
-const se = E((c, t) => {
+D.displayName = "DynamicFormFieldRow";
+const se = A((a, t) => {
   const {
     data: e,
-    currentSize: o,
-    fieldWrapperClassName: a,
-    dataTestId: D,
-    dataMeta: f,
-    coupled: y = !1,
-    actionFormIntroProps: F,
-    renderActions: h,
-    readOnly: s = !1,
-    suppressFormHeader: S = !0,
+    currentSize: r,
+    fieldWrapperClassName: s,
+    dataTestId: S,
+    dataMeta: d,
+    coupled: p = !1,
+    actionFormIntroProps: u,
+    renderActions: f,
+    readOnly: l = !1,
+    suppressFormHeader: h = !0,
     submitFeedbackStatus: i,
-    fieldFlow: n = "responsiveWrap"
-  } = c, { getLabel: v } = W(), { visibleFields: d } = P(e), m = S ? null : Z(e.form), I = ae(d), w = L(
+    fieldFlow: y = "responsiveWrap"
+  } = a, { getLabel: I } = R(), { visibleFields: _ } = P(e), F = h ? null : X(e.form), b = ne(_), v = g(
     () => ({
-      size: o,
-      readOnly: s,
-      fieldFlow: n
+      size: r,
+      readOnly: l,
+      fieldFlow: y
     }),
-    [o, n, s]
-  ), M = !y && i ? /* @__PURE__ */ r(U, { children: /* @__PURE__ */ r(
-    te,
+    [r, y, l]
+  ), M = !p && i ? /* @__PURE__ */ o(U, { children: /* @__PURE__ */ o(
+    re,
     {
-      size: o,
-      label: v(
-        i === "success" ? N.SUBMIT_SUCCESS_MESSAGE : N.SUBMIT_ERROR_MESSAGE
+      size: r,
+      label: I(
+        i === "success" ? w.SUBMIT_SUCCESS_MESSAGE : w.SUBMIT_ERROR_MESSAGE
       ),
-      startIcon: /* @__PURE__ */ r(
-        H,
+      startIcon: /* @__PURE__ */ o(
+        W,
         {
-          src: i === "success" ? /* @__PURE__ */ r(O, {}) : /* @__PURE__ */ r(T, {}),
+          src: i === "success" ? /* @__PURE__ */ o(T, {}) : /* @__PURE__ */ o(H, {}),
           color: i === "success" ? "chips.success.contained.color" : "chips.error.contained.color"
         }
       ),
@@ -152,85 +139,85 @@ const se = E((c, t) => {
     Y,
     {
       ref: t,
-      ownerState: w,
-      className: R(u.contentRoot),
-      ...typeof f == "string" ? { "data-meta": f } : {},
-      ...process.env.NODE_ENV !== "production" ? { [z]: D } : {},
+      ownerState: v,
+      className: N(c.contentRoot),
+      ...typeof d == "string" ? { "data-meta": d } : {},
+      ...process.env.NODE_ENV !== "production" ? { [z]: S } : {},
       children: [
-        m?.title && /* @__PURE__ */ C(
-          q,
+        F?.title && /* @__PURE__ */ C(
+          B,
           {
-            className: u.formHeader,
+            className: c.formHeader,
             children: [
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ o(
                 K,
                 {
-                  className: u.formTitle,
+                  className: c.formTitle,
                   component: "h2",
-                  size: o,
+                  size: r,
                   variant: "paragraphDens",
-                  children: m.title
+                  children: F.title
                 }
               ),
-              m.description && /* @__PURE__ */ r(
+              F.description && /* @__PURE__ */ o(
                 $,
                 {
-                  className: u.formDescription,
+                  className: c.formDescription,
                   color: "text.secondary",
                   component: "p",
-                  size: o,
+                  size: r,
                   variant: "bodyStandard",
-                  children: m.description
+                  children: F.description
                 }
               )
             ]
           }
         ),
         M,
-        I.map((p) => {
-          if (p.layout === "verticalGrow") {
-            const l = p.fields[0];
-            return l ? /* @__PURE__ */ r(
-              b,
+        b.map((m) => {
+          if (m.layout === "verticalGrow") {
+            const n = m.fields[0];
+            return n ? /* @__PURE__ */ o(
+              D,
               {
-                field: l,
-                currentSize: o,
-                fieldWrapperClassName: a,
-                fieldFlow: n,
-                layout: p.layout,
-                readOnly: s
+                field: n,
+                currentSize: r,
+                fieldWrapperClassName: s,
+                fieldFlow: y,
+                layout: m.layout,
+                readOnly: l
               },
-              l.id
+              n.id
             ) : null;
           }
-          const _ = p.fields.map((l) => l.id).join("-");
-          return /* @__PURE__ */ r(
-            J,
+          const E = m.fields.map((n) => n.id).join("-");
+          return /* @__PURE__ */ o(
+            q,
             {
-              ownerState: w,
-              className: u.fieldsFlow,
-              children: p.fields.map((l) => /* @__PURE__ */ r(
-                b,
+              ownerState: v,
+              className: c.fieldsFlow,
+              children: m.fields.map((n) => /* @__PURE__ */ o(
+                D,
                 {
-                  field: l,
-                  currentSize: o,
-                  fieldWrapperClassName: a,
-                  fieldFlow: n,
-                  layout: p.layout,
-                  readOnly: s
+                  field: n,
+                  currentSize: r,
+                  fieldWrapperClassName: s,
+                  fieldFlow: y,
+                  layout: m.layout,
+                  readOnly: l
                 },
-                l.id
+                n.id
               ))
             },
-            `flow-${_}`
+            `flow-${E}`
           );
         }),
-        !y && !s && /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ r(G, { children: h ? h() : /* @__PURE__ */ r(
+        !p && !l && /* @__PURE__ */ o(J, { children: /* @__PURE__ */ o(G, { children: f ? f() : /* @__PURE__ */ o(
           k,
           {
-            size: o,
+            size: r,
             color: "default",
-            ...F
+            ...u
           }
         ) }) })
       ]

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;AAatD;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,qDAsFtC,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,48 +1,34 @@
-import { jsx as a, jsxs as n, Fragment as S } from "@emotion/react/jsx-runtime";
-import { useModuleSkeleton as w } from "@m4l/core";
+import { jsx as a, jsxs as l, Fragment as p } from "@emotion/react/jsx-runtime";
+import { useModuleSkeleton as N } from "@m4l/core";
 import L from "clsx";
-import { LABEL_KEY_COMPONENT as z, classLabelRoot as v, LAB_SPECIFY as k } from "./constants.js";
-import { useComponentSize as C } from "../../hooks/useComponentSize/index.js";
-import { NotificationInformationOutlined as I } from "@m4l/icons";
-import { LabelRootStyled as x, TypographyStyled as E, TypographyMandatoryMessageStyled as O, IconHelperMessageStyled as j, SkeletonStyled as i } from "./slots/LabelSlots.js";
-const R = (y) => {
-  const {
-    helperMessage: r,
-    label: h,
-    labelOverflow: u = "ellipsis",
-    symbol: c,
-    mandatory: m,
-    mandatoryMessage: o,
-    htmlFor: b,
-    id: f,
-    error: g,
-    size: d = "medium",
+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: 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,
-    className: M
-  } = y, N = w(), { currentSize: l } = C(d), p = typeof r == "string" && r.length > 0, s = l === "small" || l === "medium" ? l : "medium", e = {
-    disabled: t,
-    labelOverflow: u,
     size: d
   };
   return /* @__PURE__ */ a(
-    x,
+    I,
     {
-      "aria-label": z,
+      "aria-label": w,
       ownerState: { ...e },
-      htmlFor: b,
-      id: f,
-      children: N ? /* @__PURE__ */ n(S, { 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" }),
-        p && /* @__PURE__ */ a(i, { ownerState: { ...e }, variant: "circular", className: "HelperIconLabel" })
-      ] }) : /* @__PURE__ */ n(S, { children: [
-        /* @__PURE__ */ n(
-          E,
+        S && /* @__PURE__ */ a(i, { ownerState: { ...e }, variant: "circular", className: "HelperIconLabel" })
+      ] }) : /* @__PURE__ */ l(p, { children: [
+        /* @__PURE__ */ l(
+          x,
           {
-            className: L(v, k, "M4lclassCssSpecificity", M),
+            className: L(z, k, "M4lclassCssSpecificity", g),
             ownerState: { ...e },
             variant: "bodyStandard",
-            size: s,
+            size: n,
             disabled: t,
             children: [
               h,
@@ -51,26 +37,26 @@ const R = (y) => {
           }
         ),
         m && /* @__PURE__ */ a(
-          O,
+          E,
           {
             ownerState: { ...e },
             variant: "bodyStandard",
             className: o ? "mandatoryMessage" : "mandatoryAsterisk",
-            size: s,
+            size: n,
             disabled: t,
             children: o || "*"
           }
         ),
-        p && /* @__PURE__ */ a(
+        S && /* @__PURE__ */ a(
           j,
           {
             tooltipContent: r,
             ownerState: { ...e },
             placement: "right",
-            size: s,
-            className: g ? "helper-icon-error" : "helper-icon",
+            size: n,
+            className: f ? "helper-icon-error" : "helper-icon",
             disabled: t,
-            src: /* @__PURE__ */ a(I, {})
+            src: /* @__PURE__ */ a(C, {})
           }
         )
       ] })
@@ -78,5 +64,5 @@ const R = (y) => {
   );
 };
 export {
-  R as Label
+  P as Label
 };

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":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAU3D,eAAO,MAAM,WAAW,EAAE,WA8IzB,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,7 +1,7 @@
-import { getIconPaintStyles as o } from "@m4l/base";
+import { getIconPaintStyles as t } from "@m4l/base";
 import { getHeightSizeStyles as i } from "../../utils/getSizeStyles/getSizeStyles.js";
-function a(e) {
-  return o(e);
+function l(s) {
+  return t(s);
 }
 const n = {
   /**
@@ -10,25 +10,25 @@ const n = {
    * @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",
-      (l) => ({
-        minHeight: l,
+      (a) => ({
+        minHeight: a,
         height: "auto",
         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"
       }
@@ -37,17 +37,17 @@ const n = {
   /**
    * 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,
-      overflow: s?.labelOverflow === "visible" ? "visible" : "hidden",
-      textOverflow: s?.labelOverflow === "visible" ? "clip" : "ellipsis",
+      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
         }
       }
     }
@@ -55,17 +55,17 @@ const n = {
   /**
    * 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: s?.labelOverflow === "visible" ? "visible" : "hidden",
-      textOverflow: s?.labelOverflow === "visible" ? "clip" : "ellipsis",
+      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
         }
       }
     }
@@ -73,16 +73,16 @@ const n = {
   /**
    * Estilos para el slot Icon del Label.
    */
-  iconHelperMessageStyled: ({ theme: e, ownerState: s }) => {
-    const l = s?.disabled ? e.vars.palette.text.disabled : e.vars.palette.info.enabled, r = s?.disabled ? e.vars.palette.text.disabled : e.vars.palette.info.hover;
+  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: e.vars.size.borderRadius.r1,
-      cursor: s?.disabled ? "default" : "pointer",
-      ...a(l),
-      "&:hover": a(r),
+      borderRadius: s.vars.size.borderRadius.r1,
+      cursor: e?.disabled ? "default" : "pointer",
+      ...l(a),
+      "&:hover": l(r),
       ...i(
-        e.generalSettings.isMobile,
-        s?.size || "small",
+        s.generalSettings.isMobile,
+        e?.size || "small",
         "base"
       )
     };
@@ -90,44 +90,44 @@ const n = {
   /**
    * 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",
-        (l) => ({
-          width: l
+        (a) => ({
+          width: a
         })
       )
     }