@m4l/components 9.16.0 → 9.17.0

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

@@ -1 +1 @@
-{"version":3,"file":"DynamicFilter.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DynamicFilter/DynamicFilter.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAInD,eAAO,MAAM,mBAAmB,EAAE,mBAwdjC,CAAC"}
+{"version":3,"file":"DynamicFilter.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DynamicFilter/DynamicFilter.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAInD,eAAO,MAAM,mBAAmB,EAAE,mBAkejC,CAAC"}

package/components/DynamicFilter/DynamicFilter.styles.js

@@ -165,7 +165,13 @@ const n = "dynamic", p = {
     overflow: "hidden",
     position: "relative",
     "& .M4LChip-root": {
-      borderRadius: r.vars.size.borderRadius.r1,
+      // Applied filter chips must use the design-system radius (r1-5 = 6px).
+      // This descendant override wins over the base Chip radius by specificity,
+      // so it has to set r1-5 explicitly to stay consistent with the design.
+      // Los chips de filtro aplicados deben usar el radio del design system
+      // (r1-5 = 6px). Este override por descendencia gana por especificidad
+      // sobre el radio base del Chip, por eso debe fijar r1-5 explícitamente.
+      borderRadius: r.vars.size.borderRadius["r1-5"],
       ...o(
         r,
         a?.size || "medium",
@@ -358,7 +364,11 @@ const n = "dynamic", p = {
   overflowMoreChip: ({ theme: r, ownerState: a }) => ({
     flexShrink: 0,
     cursor: "pointer",
-    borderRadius: r.vars.size.borderRadius.r1,
+    // Match the applied filter chips radius (r1-5 = 6px) so the "More (N)"
+    // button is visually consistent with the rest of the chip row.
+    // Igualar el radio de los chips aplicados (r1-5 = 6px) para que el botón
+    // "More (N)" sea visualmente consistente con el resto de la fila de chips.
+    borderRadius: r.vars.size.borderRadius["r1-5"],
     ...o(
       r,
       a?.size || "medium",

package/components/DynamicFilter/subcomponents/AppliedFilters/AppliedFilters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppliedFilters.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DynamicFilter/subcomponents/AppliedFilters/AppliedFilters.tsx"],"names":[],"mappings":"AAiBA;;;;GAIG;AACH,iBAAS,cAAc,qDAmEtB;AACD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"AppliedFilters.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DynamicFilter/subcomponents/AppliedFilters/AppliedFilters.tsx"],"names":[],"mappings":"AAiBA;;;;GAIG;AACH,iBAAS,cAAc,qDAyEtB;AACD,eAAe,cAAc,CAAC"}

package/components/DynamicFilter/subcomponents/AppliedFilters/AppliedFilters.js

@@ -5,44 +5,44 @@ import { DICCTIONARY as c } from "../../dictionary.js";
 import O from "../DynamicFilterBase/useDynamicFilterBase.js";
 import R from "./useAppliedFilters.js";
 import { useDynamicFilterStore as D } from "../../store/useDynamicFilterStore.js";
-import { AppliedFiltersStyled as f, AppliedFilterInnerContainerStyled as E, ChipWrapperStyled as M, EmptyStateLabelStyled as k, OverflowMoreChipStyled as I } from "../../slots/dynamicFilterSlots.js";
+import { AppliedFiltersStyled as d, AppliedFilterInnerContainerStyled as E, ChipWrapperStyled as M, EmptyStateLabelStyled as k, OverflowMoreChipStyled as I } from "../../slots/dynamicFilterSlots.js";
 import T from "../AppliedFilterChip/AppliedFilterChip.js";
 import { Typography as _ } from "../../../extended/mui/Typography/Typography.js";
 import x from "../FilterActions/FilterActions.js";
 import P from "../OverflowPopover/OverflowPopover.js";
 function K() {
-  const { visibleFilters: i, overflowFilters: r, isSkeleton: d, parentRef: m, containerRef: h, setChipRef: u, setMoreChipRef: y, setActionsRef: v } = R(), { size: l } = O(), { getLabel: n } = g(), C = D((e) => e.actions.openPopoverMenuFields), [t, p] = A(null), F = a((e) => {
+  const { visibleFilters: l, overflowFilters: r, isSkeleton: f, parentRef: m, containerRef: h, setChipRef: u, setMoreChipRef: y, setActionsRef: v } = R(), { size: i } = O(), { getLabel: n } = g(), C = D((e) => e.actions.openPopoverMenuFields), [t, p] = A(null), F = a((e) => {
     p(e.currentTarget);
-  }, []), w = a(() => {
+  }, []), S = a(() => {
     p(null);
   }, []);
-  if (d)
-    return /* @__PURE__ */ o(f, {});
-  const S = i.length === 0 && r.length === 0;
-  return /* @__PURE__ */ s(f, { ref: m, children: [
+  if (f)
+    return /* @__PURE__ */ o(d, {});
+  const w = l.length === 0 && r.length === 0;
+  return /* @__PURE__ */ s(d, { ref: m, children: [
     /* @__PURE__ */ s(E, { ref: h, children: [
-      i.map((e) => /* @__PURE__ */ o(
+      l.map((e) => /* @__PURE__ */ o(
         M,
         {
           ref: (b) => u(e.id, b),
-          ownerState: { isWarning: e.field.color === "warning" },
+          ownerState: { isWarning: e.isSet && e.field.color === "warning" },
           children: /* @__PURE__ */ o(T, { ...e })
         },
         e.id
       )),
-      S && /* @__PURE__ */ o(k, { "data-testid": "empty-state-label", component: "span", variant: "body", size: l, color: "inherit", onClick: C, children: n(c.label_no_filters_applied) })
+      w && /* @__PURE__ */ o(k, { "data-testid": "empty-state-label", component: "span", variant: "body", size: i, color: "inherit", onClick: C, children: n(c.label_no_filters_applied) })
     ] }),
     r.length > 0 && /* @__PURE__ */ o(
       I,
       {
         ref: y,
-        size: l,
+        size: i,
         variant: "contained",
         color: t ? "info" : "default",
         opacity: !0,
         dataTestId: "overflow-more-chip",
         ownerState: { selected: !!t },
-        label: /* @__PURE__ */ o(_, { component: "span", variant: "bodyDens", size: l, color: "inherit", children: `${n(c.label_more)} (${r.length})` }),
+        label: /* @__PURE__ */ o(_, { component: "span", variant: "bodyDens", size: i, color: "inherit", children: `${n(c.label_more)} (${r.length})` }),
         onClick: F
       }
     ),
@@ -52,7 +52,7 @@ function K() {
       {
         anchorEl: t,
         filters: r,
-        onClose: w
+        onClose: S
       }
     )
   ] });

package/components/DynamicSort/DynamicSort.js

@@ -1,13 +1,13 @@
 import { jsx as r } from "@emotion/react/jsx-runtime";
-import { useFlagsPresent as m, CommonFlags as n } from "@m4l/core";
-import { forwardRef as a } from "react";
+import { forwardRef as m } from "react";
+import { useFlagsPresent as n, CommonFlags as a } from "@m4l/core";
 import { DynamicSortProvider as i } from "./store/DynamicSortContext.js";
 import c from "./subcomponents/DynamicSortBase/DynamicSortBase.js";
-const h = a(
+const h = m(
   (o, s) => {
     const { className: t, ...e } = o;
-    return m([
-      n.FLAG_DICTIONARY_LOADED
+    return n([
+      a.FLAG_DICTIONARY_LOADED
     ]) ? /* @__PURE__ */ r(i, { ...e, ref: s, children: /* @__PURE__ */ r(c, { className: t }) }) : null;
   }
 );

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

@@ -1 +1 @@
-{"version":3,"file":"DynamicSort.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DynamicSort/DynamicSort.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,eAAO,MAAM,iBAAiB,EAAE,iBA8S/B,CAAC"}
+{"version":3,"file":"DynamicSort.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DynamicSort/DynamicSort.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,eAAO,MAAM,iBAAiB,EAAE,iBAwa/B,CAAC"}

package/components/DynamicSort/DynamicSort.styles.js

@@ -1,18 +1,18 @@
 import { getTypographyStyles as e } from "../../utils/getTypographyStyles.js";
 import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
-const s = "dynamic", d = {
+const s = "dynamic", p = {
   /**
    * Root: Estilos del contenedor principal del componente.
    */
-  root: ({ theme: i, ownerState: r }) => ({
+  root: ({ theme: r, ownerState: i }) => ({
     containerName: s,
     containerType: "inline-size",
     width: "100%",
     height: "auto",
     padding: 0,
     ...o(
-      i,
-      r?.size || "medium",
+      r,
+      i?.size || "medium",
       "container",
       (a) => ({
         height: a,
@@ -24,38 +24,35 @@ const s = "dynamic", d = {
   /**
    * innerContainer: Estilos del contenedor interno del componente.
    */
-  innerContainer: ({ theme: i, ownerState: r }) => ({
+  innerContainer: ({ theme: r }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-start",
+    gap: r.vars.size.baseSpacings["sp1-5"],
     width: "100%",
     height: "fit-content",
-    borderRadius: i.vars.size.borderRadius.r2,
-    background: i.vars.palette.background.default,
-    boxShadow: r?.isValid ? `inset 0px 0px 0px 1px ${i.vars.palette.border.secondary}` : `inset 0px 0px 0px 1px ${i.vars.palette.error.enabled}`,
-    overflow: "hidden",
-    '&:has([aria-expanded="true"])': {
-      boxShadow: r?.isValid ? `inset 0px 0px 0px 1.3px ${i.vars.palette.border.main}` : `inset 0px 0px 0px 1px ${i.vars.palette.error.enabled}`
-    }
+    borderRadius: r.vars.size.borderRadius.r2,
+    background: r.vars.palette.background.default,
+    overflow: "hidden"
   }),
   /**
-   * inputSort: Estilos del contenedor del campo de entrada de ordenamiento.
+   * inputSort: Contenedor del input "Ordenar por" dentro del PopoverMenuFields.
+   * Estilos idénticos al inputFilter del DynamicFilter:
+   * fondo gris enabledOpacity, borderRadius r1-5, sin borderBottom.
    */
-  inputSort: ({ theme: i, ownerState: r }) => ({
+  inputSort: ({ theme: r, ownerState: i }) => ({
     display: "flex",
     flexDirection: "row",
-    paddingLeft: i.vars.size.baseSpacings.sp2,
-    paddingRight: i.vars.size.baseSpacings.sp1,
-    height: "100%",
+    paddingLeft: r.vars.size.baseSpacings.sp2,
+    paddingRight: r.vars.size.baseSpacings.sp1,
     overflow: "hidden",
-    maxWidth: "120px",
     width: "100%",
     alignItems: "center",
-    borderTopLeftRadius: i.vars.size.borderRadius.r1,
-    borderBottomLeftRadius: i.vars.size.borderRadius.r1,
+    borderRadius: r.vars.size.borderRadius["r1-5"],
+    backgroundColor: r.vars.palette.default.enabledOpacity,
     ...o(
-      i,
-      r?.size || "medium",
+      r,
+      i?.size || "medium",
       "container",
       (a) => ({
         height: a
@@ -65,12 +62,12 @@ const s = "dynamic", d = {
   /**
    * inputSortInput: Estilos del campo de entrada de ordenamiento.
    */
-  inputSortInput: ({ theme: i, ownerState: r }) => ({
+  inputSortInput: ({ theme: r, ownerState: i }) => ({
     width: "100%",
     background: "#ffffff00",
     ...o(
-      i,
-      r?.size || "medium",
+      r,
+      i?.size || "medium",
       "action",
       (a) => ({
         height: a,
@@ -80,79 +77,92 @@ const s = "dynamic", d = {
     ),
     fontFamily: "inherit",
     ...e(
-      i.generalSettings.isMobile,
-      r?.size || "medium",
+      r.generalSettings.isMobile,
+      i?.size || "medium",
       "bodyStandard"
     ),
-    color: i.vars.palette.text.secondary,
+    color: r.vars.palette.text.secondary,
     border: 0,
     borderColor: "transparent",
-    paddingLeft: i.vars.size.baseSpacings.sp2,
-    paddingRight: i.vars.size.baseSpacings.sp2,
+    paddingLeft: r.vars.size.baseSpacings.sp2,
+    paddingRight: r.vars.size.baseSpacings.sp2,
     height: "100%",
     "&::placeholder": {
-      color: i.vars.palette.text.secondary
+      color: r.vars.palette.text.secondary
     },
     "&:focus-visible": {
-      color: i.vars.palette.text.secondary,
+      color: r.vars.palette.text.secondary,
       border: "unset",
-      borderColor: i.vars.palette.primary.opacity,
-      BorderRadius: i.vars.size.borderRadius["r0-5"],
+      borderColor: r.vars.palette.primary.opacity,
+      BorderRadius: r.vars.size.borderRadius["r0-5"],
       outline: "none!important"
     }
   }),
   /**
    * appliedSorts: Estilos del contenedor de los campos de ordenamiento aplicados.
    */
-  appliedSorts: ({ theme: i, ownerState: r }) => ({
+  appliedSorts: ({ theme: r, ownerState: i }) => ({
     width: "100%",
     height: "fit-content",
     display: "flex",
     alignItems: "center",
+    // Gap sp1 (4px) entre el contenedor de chips y el chip "Más", idéntico al
+    // DynamicFilter (appliedFilters). Sin esto el chip "Más" queda pegado a los chips.
+    gap: r.vars.size.baseSpacings.sp1,
     borderLeft: "none",
     margin: "0px",
-    padding: `0px ${i.vars.size.baseSpacings.sp1}`,
+    padding: "0px",
     flex: 1,
     overflow: "hidden",
     ...o(
-      i,
-      r?.size || "medium",
+      r,
+      i?.size || "medium",
       "container",
       (a) => ({
         height: a,
         maxHeight: a,
         minHeight: a
       })
-    )
+    ),
+    // Fuerza la misma altura en TODOS los chips del contenedor (incluido el chip "Más")
+    "& .M4LChip-root": {
+      ...o(r, i?.size || "medium", "action", (a) => ({
+        height: a,
+        minHeight: a,
+        maxHeight: a
+      }))
+    }
   }),
   /**
-   * appliedSortInnerContainer: Estilos del contenedor interno de los campos de ordenamiento aplicados.
+   * appliedSortInnerContainer: Contenedor de los chips de sorts.
+   * flex: '0 1 auto' — no crece, solo encoge. Igual que DynamicFilter.
    */
-  appliedSortInnerContainer: ({ theme: i, ownerState: r }) => ({
-    padding: i.vars.size.baseSpacings["sp0-5"],
-    gap: i.vars.size.baseSpacings.sp1,
+  appliedSortInnerContainer: ({ theme: r, ownerState: i }) => ({
+    padding: r.vars.size.baseSpacings["sp0-5"],
+    gap: r.vars.size.baseSpacings.sp1,
     height: "fit-content",
     display: "flex",
     flexWrap: "nowrap",
-    width: "100%",
+    flex: "0 1 auto",
+    minWidth: 0,
     justifyContent: "flex-start",
     alignItems: "center",
-    overflow: "auto hidden",
+    overflow: "hidden",
     position: "relative",
     "& .M4LChip-root": {
-      borderRadius: i.vars.size.borderRadius.r1,
+      borderRadius: r.vars.size.borderRadius["r1-5"],
       ...o(
-        i,
-        r?.size || "medium",
+        r,
+        i?.size || "medium",
         "action",
         (a) => ({
           height: a
         })
       ),
       "& .M4LIconButton-styledMUIIconButton:hover": {
-        backgroundColor: `${i.vars.palette.chips.error.contained.backgroundHover} !important`,
+        backgroundColor: `${r.vars.palette.chips.error.contained.backgroundHover} !important`,
         "& .M4LIcon-icon": {
-          backgroundColor: `${i.vars.palette.chips.error.contained.backgroundColorTone} !important`
+          backgroundColor: `${r.vars.palette.chips.error.contained.backgroundColorTone} !important`
         }
       }
     }
@@ -160,89 +170,96 @@ const s = "dynamic", d = {
   /**
    * actions: Estilos del contenedor de los botones de acción.
    */
-  actions: ({ theme: i, ownerState: r }) => ({
-    gridArea: "actions-filter",
+  actions: ({ theme: r, ownerState: i }) => ({
     overflow: "hidden",
     display: "flex",
     flexDirection: "row",
-    gap: i.vars.size.baseSpacings["sp0-5"],
-    padding: i.vars.size.baseSpacings.sp1,
+    gap: r.vars.size.baseSpacings["sp0-5"],
+    padding: r.vars.size.baseSpacings.sp1,
     height: "100%",
     alignItems: "center",
-    borderTopRightRadius: i.vars.size.borderRadius.r1,
-    borderBottomRightRadius: i.vars.size.borderRadius.r1,
-    boxShadow: `inset 1px 0px 0px 0px ${i.vars.palette.border.secondary}`,
-    ...!r?.visibleRefresh && !r?.isDirty && {
+    borderTopRightRadius: r.vars.size.borderRadius.r1,
+    borderBottomRightRadius: r.vars.size.borderRadius.r1,
+    flexShrink: 0,
+    // minWidth garantiza que useChipsOverflow siempre mida un ancho > 0
+    // incluso antes de que el layout del container-type:inline-size se resuelva.
+    // Se calcula como 2 botones (action size) + gap + padding horizontal.
+    ...o(r, i?.size || "medium", "action", (a) => ({
+      minWidth: `calc(${a} * 2 + ${r.vars.size.baseSpacings["sp0-5"]} + ${r.vars.size.baseSpacings.sp1} * 2)`
+    })),
+    ...!i?.visibleRefresh && !i?.isDirty && {
       display: "none"
-    },
-    ...r?.inEdition && r?.isValid && {
-      boxShadow: `inset 1px 0px 0px 0px ${i.vars.palette.border.main}`
-    },
-    ...!r?.isValid && {
-      boxShadow: `inset 1px 0px 0px 0px ${i.vars.palette.error.enabled}`
     }
   }),
   /**
    * actionsClearButton: Estilos del botón de acción de limpiar.
    */
-  actionsClearButton: ({ theme: i }) => ({
+  actionsClearButton: ({ theme: r }) => ({
     visibility: "visible",
     "&:hover": {
-      backgroundColor: `${i.vars.palette.chips.error.contained.backgroundHover} !important`,
+      backgroundColor: `${r.vars.palette.chips.error.contained.backgroundHover} !important`,
+      // mask strategy icons: color via backgroundColor
       "& .M4LIcon-icon": {
-        backgroundColor: `${i.vars.palette.chips.error.contained.backgroundColorTone} !important`
+        backgroundColor: `${r.vars.palette.error.semanticText} !important`
+      },
+      // component strategy icons (createSvgIcon): color via fill on SVG paths
+      "& .MuiSvgIcon-root svg path, & .MuiSvgIcon-root path": {
+        fill: `${r.vars.palette.error.semanticText} !important`
       }
     }
   }),
   /**
    * actionsSubmitButton: Estilos del botón de acción de envío de formulario.
    */
-  actionsSubmitButton: ({ theme: i, ownerState: r }) => ({
-    ...r?.isDirty ? {
+  actionsSubmitButton: ({ theme: r, ownerState: i }) => ({
+    ...i?.isDirty ? {
       animation: "changeBgColor 0.9s ease infinite",
       "& .M4LIcon-icon": {
-        background: `${i.vars.palette.primary.main} !important`
+        background: `${r.vars.palette.primary.main} !important`
+      },
+      "& .MuiSvgIcon-root svg path, & .MuiSvgIcon-root path": {
+        fill: `${r.vars.palette.chips.info.contained.color} !important`
       }
     } : null,
     //Create and apply animation with change background color red and green
     "@keyframes changeBgColor": {
       "0%": {
-        background: i.vars.palette.primary.hoverOpacity
+        background: r.vars.palette.primary.hoverOpacity
       },
       "50%": {
-        background: i.vars.palette.primary.activeOpacity
+        background: r.vars.palette.primary.activeOpacity
       },
       "100%": {
-        background: i.vars.palette.primary.hoverOpacity
+        background: r.vars.palette.primary.hoverOpacity
       }
     }
   }),
   /**
    * popoverMenu: Estilos del menú emergente.
    */
-  popoverMenu: ({ theme: i }) => ({
+  popoverMenu: ({ theme: r }) => ({
     "& .MuiPaper-root": {
       display: "flex",
       flexDirection: "column",
-      padding: i.vars.size.baseSpacings.sp3,
-      gap: i.vars.size.baseSpacings.sp1,
-      borderRadius: i.vars.size.borderRadius.r1,
-      backgroundColor: i.vars.palette.background.default
+      padding: r.vars.size.baseSpacings.sp3,
+      gap: r.vars.size.baseSpacings.sp1,
+      borderRadius: r.vars.size.borderRadius.r1,
+      backgroundColor: r.vars.palette.background.default
     }
   }),
   /**
    * popoverSort: Estilos del menú emergente de ordenamiento.
    */
-  popoverSort: ({ theme: i }) => ({
+  popoverSort: ({ theme: r }) => ({
     width: "auto",
     "& .MuiPaper-root": {
       padding: "0 !important",
       minWidth: "220px",
       maxWidth: "100%",
       minHeight: "auto",
-      borderRadius: `${i.vars.size.borderRadius.r3}!important`,
-      backgroundColor: i.vars.palette.background.default,
-      boxShadow: i.customShadows?.z3,
+      borderRadius: `${r.vars.size.borderRadius.r3}!important`,
+      backgroundColor: r.vars.palette.background.default,
+      boxShadow: r.customShadows?.z3,
       "& .M4LPopover-arrowStyle": {
         display: "none"
       },
@@ -255,7 +272,7 @@ const s = "dynamic", d = {
         overflow: "visible"
       },
       "& .M4LWindowBase-root": {
-        borderRadius: `${i.vars.size.borderRadius.r3} !important`,
+        borderRadius: `${r.vars.size.borderRadius.r3} !important`,
         border: "unset!important",
         "& .M4LWindowBase-headerWindowComponent": {
           cursor: "unset"
@@ -266,28 +283,28 @@ const s = "dynamic", d = {
   /**
    * popoverSortContainerFields: Estilos del contenedor de campos del menú emergente de ordenamiento.
    */
-  popoverSortContainerFields: ({ theme: i }) => ({
+  popoverSortContainerFields: ({ theme: r }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: i.vars.size.baseSpacings.sp3
+    gap: r.vars.size.baseSpacings.sp3
   }),
   /**
    * popoverSortActions: Estilos del contenedor de acciones del menú emergente de ordenamiento.
    */
-  popoverSortActions: ({ theme: i }) => ({
-    paddingTop: i.vars.size.baseSpacings.sp6
+  popoverSortActions: ({ theme: r }) => ({
+    paddingTop: r.vars.size.baseSpacings.sp6
   }),
   /**
    * inputSortSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
    */
-  inputSortSkeleton: ({ theme: i, ownerState: r }) => ({
+  inputSortSkeleton: ({ theme: r, ownerState: i }) => ({
     width: "100%",
     minWidth: "80px",
-    marginLeft: i.vars.size.baseSpacings.sp2,
-    marginRight: i.vars.size.baseSpacings.sp2,
+    marginLeft: r.vars.size.baseSpacings.sp2,
+    marginRight: r.vars.size.baseSpacings.sp2,
     ...o(
-      i,
-      r?.size || "medium",
+      r,
+      i?.size || "medium",
       "base",
       (a) => ({
         height: a,
@@ -295,8 +312,115 @@ const s = "dynamic", d = {
         maxHeight: a
       })
     )
+  }),
+  /** chipWrapper: Wrapper de cada chip — inline-flex y flexShrink:0 son críticos para useChipsOverflow. */
+  chipWrapper: () => ({
+    display: "inline-flex",
+    flexShrink: 0
+  }),
+  /**
+   * inputSortTriggerButton: Botón trigger cuadrado que reemplaza el input visible.
+   * Patrón idéntico al inputFilterTriggerButton del DynamicFilter.
+   */
+  inputSortTriggerButton: ({ theme: r, ownerState: i }) => ({
+    flexShrink: 0,
+    cursor: "pointer",
+    borderRadius: r.vars.size.borderRadius.r1,
+    ...i?.selected && {
+      backgroundColor: `${r.vars.palette.chips.info.contained.backgroundColor} !important`,
+      border: `${r.vars.size.borderStroke.container} ${r.vars.palette.info.semanticText}`,
+      outline: "none !important",
+      "&:hover, &:focus, &:focus-visible": {
+        backgroundColor: `${r.vars.palette.chips.info.contained.backgroundColor} !important`,
+        border: `${r.vars.size.borderStroke.container} ${r.vars.palette.info.semanticText}`,
+        outline: "none !important"
+      }
+    }
+  }),
+  /**
+   * emptyStateLabel: Label "Sin sorts aplicados" cuando el array de sorts está vacío.
+   */
+  // Igual que DynamicFilter.emptyStateLabel + cursor pointer para abrir el popover al hacer clic
+  emptyStateLabel: ({ theme: r }) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    color: r.vars.palette.text.secondary,
+    cursor: "pointer",
+    userSelect: "none"
+  }),
+  /**
+   * overflowMoreChip: Chip "Más (N)" que agrupa los sorts que no caben.
+   */
+  overflowMoreChip: ({ theme: r }) => ({
+    flexShrink: 0,
+    cursor: "pointer",
+    // Mismo radius que los chips aplicados (r1-5, 6px) para alinear el chip "Más".
+    borderRadius: r.vars.size.borderRadius["r1-5"]
+  }),
+  /** overflowSortPopover: Popover container for overflow sorts, identical to DynamicFilter.overflowPopover. */
+  overflowSortPopover: ({ theme: r }) => ({
+    "& .MuiPaper-root": {
+      display: "flex",
+      flexDirection: "column",
+      padding: `${r.vars.size.baseSpacings.sp3} ${r.vars.size.baseSpacings.sp2}`,
+      gap: r.vars.size.baseSpacings.sp1,
+      borderRadius: r.vars.size.borderRadius.r2,
+      backgroundColor: r.vars.palette.background.default,
+      boxShadow: r.customShadows?.z3,
+      width: "280px"
+    }
+  }),
+  /** overflowSortList: Vertical list inside the overflow popover, identical to DynamicFilter.overflowPopoverList. */
+  overflowSortList: ({ theme: r }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: r.vars.size.baseSpacings.sp2
+  }),
+  /** overflowSortItem: Clickable item row inside the overflow popover, identical to DynamicFilter.overflowPopoverItem. */
+  overflowSortItem: ({ theme: r, ownerState: i }) => ({
+    display: "flex",
+    alignItems: "center",
+    alignSelf: "stretch",
+    gap: r.vars.size.baseSpacings.sp2,
+    padding: r.vars.size.baseSpacings.sp2,
+    borderBottom: `1px solid ${r.vars.palette.border.disabled}`,
+    background: r.vars.palette.background.default,
+    borderRadius: r.vars.size.borderRadius["r1-5"],
+    cursor: "pointer",
+    transition: "background-color 0.3s ease",
+    "&:hover": {
+      backgroundColor: `${r.vars.palette.default.hoverOpacity} !important`
+    },
+    ...i?.selected && {
+      backgroundColor: `${r.vars.palette.default.hoverOpacity} !important`
+    },
+    "&:last-child": {
+      borderBottom: "none"
+    }
+  }),
+  /** overflowSortItemHeader: Center section of each overflow item showing label and direction chip. */
+  overflowSortItemHeader: ({ theme: r }) => ({
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    flex: 1,
+    minWidth: 0,
+    rowGap: r.vars.size.baseSpacings["sp0-5"],
+    columnGap: r.vars.size.baseSpacings.sp1,
+    "& > span:first-of-type": {
+      flexBasis: "100%"
+    }
+  }),
+  /** overflowSortItemLabel: Field name label text inside the overflow item. */
+  overflowSortItemLabel: ({ theme: r }) => ({
+    ...e(!1, "medium", "body"),
+    color: r.vars.palette.text.primary,
+    flex: 1,
+    whiteSpace: "normal",
+    wordBreak: "break-word"
   })
 };
 export {
-  d as dynamicSortStyles
+  p as dynamicSortStyles
 };

package/components/DynamicSort/constants.js

@@ -1,13 +1,6 @@
-const s = "M4LDynamicSort", t = "M4LDynamicSortStore", o = "frontend/components/Dynamic_sort/assets/icons", e = {
-  refresh: "restart.svg",
-  sort: "sort.svg",
-  list_bulleted: "list_bulleted.svg",
-  clean: "clean.svg"
-}, n = ["asc", "desc"];
+const c = "M4LDynamicSort", o = "M4LDynamicSortStore", t = ["asc", "desc"];
 export {
-  e as ASSETS,
-  o as ASSETS_URL,
-  s as DYNAMIC_SORT_KEY_COMPONENT,
-  t as DYNAMIC_SORT_STORE_ID,
-  n as OPERATORS
+  c as DYNAMIC_SORT_KEY_COMPONENT,
+  o as DYNAMIC_SORT_STORE_ID,
+  t as OPERATORS
 };

package/components/DynamicSort/dictionary.d.ts

@@ -16,6 +16,8 @@ export declare const DICCTIONARY: {
     readonly operator_desc: "operator_desc";
     readonly label_boolean_operand1: "label_boolean_operand1";
     readonly label_no_fields_available: "label_no_fields_available";
+    readonly label_no_sorts_applied: "label_no_sorts_applied";
+    readonly label_more: "label_more";
 };
 export type TypeDictionary = typeof DICCTIONARY;
 /**