@m4l/components 9.2.11 → 9.2.12

package/components/DynamicFilter/subcomponents/FilterActions/useFilterActions.js

@@ -9,17 +9,14 @@ const ASSETS = {
 function useFilterActions() {
   const { host_static_assets, environment_assets } = useEnvironment();
   const automatic = useDynamicFilterStore((state) => state.automatic);
-  const isSkeleton = useDynamicFilterStore((state) => state.ownerState.isSkeleton);
   const isValid = useDynamicFilterStore((state) => state.ownerState.isValid);
   const isDirty = useDynamicFilterStore((state) => state.ownerState.isDirty);
   const appliedFilters = useDynamicFilterStore((state) => state.appliedFilters);
-  const { hidePopoverFilter, clearFilters, fireOnChangeFilters } = useDynamicFilterStore(
+  const { clearFilters, fireOnChangeFilters } = useDynamicFilterStore(
     (state) => state.actions
   );
   function onClickClearFilters() {
-    hidePopoverFilter(false);
     clearFilters();
-    fireOnChangeFilters();
   }
   const filterIconUrl = `${host_static_assets}/${environment_assets}/${ASSETS_URL}/${automatic ? ASSETS.refresh : ASSETS.search}`;
   const clearIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/close.svg`;
@@ -28,7 +25,6 @@ function useFilterActions() {
     isValid ? isDirty ? DICCTIONARY.filter_tooltip_dirty : DICCTIONARY.filter_tooltip_refresh : DICCTIONARY.filter_tooltip_invalid
   );
   return {
-    isSkeleton,
     filterIconUrl,
     clearIconUrl,
     canShowRemoveAction,

package/components/DynamicFilter/subcomponents/InputFilter/InputFilter.d.ts

@@ -1,5 +1,5 @@
 /**
- * TODO: Documentar
+ * inputFilter: Componente encargado de mostrar el input de búsqueda y el menú de campos para filtrar
  */
 declare const InputFilter: () => import("react/jsx-runtime").JSX.Element | null;
 export default InputFilter;

package/components/DynamicFilter/subcomponents/InputFilter/InputFilter.js

@@ -1,8 +1,9 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useInputFilter } from "./useInputFilter.js";
-import { I as InputFilterSkeleton } from "./InputFilterSkeleton.js";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
-import { m as InputFilterStyled, n as InputFilterIconStyled, o as InputFilterInputStyled } from "../../slots/dynamicFilterSlots.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+import { u as useDynamicFilterBase } from "../DynamicFilterBase/useDynamicFilterBase.js";
+import { u as useInputFilter } from "./useInputFilter.js";
+import { e as InputFilterStyled, f as InputFilterInputSkeletonStyled, g as InputFilterInputStyled } from "../../slots/dynamicFilterSlots.js";
 import { P as PopoverMenuFields } from "../PopoverMenuFields/PopoverMenuFields.js";
 const InputFilter = () => {
   const {
@@ -14,33 +15,40 @@ const InputFilter = () => {
     canRender,
     filteredFields,
     selectedFieldIndex,
-    setElementRef
+    setElementRef,
+    isOpenPopoverFilter,
+    isOpenPopoverMenuFields
   } = useInputFilter();
   const elementRef = useRef(null);
+  const { ownerState, size } = useDynamicFilterBase();
   useEffect(() => {
     setElementRef(elementRef);
   }, [setElementRef, elementRef]);
   if (!canRender) {
     return null;
   }
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(InputFilterStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(InputFilterSkeleton, {}) });
-  }
-  return /* @__PURE__ */ jsxs(InputFilterStyled, { ownerState: {}, children: [
-    /* @__PURE__ */ jsx(InputFilterIconStyled, { src: iconUrl, ownerState: {} }),
-    /* @__PURE__ */ jsx(
-      InputFilterInputStyled,
-      {
-        ref: elementRef,
-        type: "text",
-        value: inputData,
-        placeholder: inputPlaceHolder,
-        ownerState: {},
-        ...inputHandlersProps
-      }
-    ),
-    /* @__PURE__ */ jsx(PopoverMenuFields, { fields: filteredFields, selectFieldIndex: selectedFieldIndex })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    InputFilterStyled,
+    {
+      ownerState: { ...ownerState },
+      "aria-expanded": isOpenPopoverMenuFields || isOpenPopoverFilter,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { size, src: iconUrl }),
+        isSkeleton ? /* @__PURE__ */ jsx(InputFilterInputSkeletonStyled, { ownerState: { ...ownerState }, variant: "rounded" }) : /* @__PURE__ */ jsx(
+          InputFilterInputStyled,
+          {
+            ref: elementRef,
+            type: "text",
+            value: inputData,
+            placeholder: inputPlaceHolder,
+            ownerState: { ...ownerState },
+            ...inputHandlersProps
+          }
+        ),
+        /* @__PURE__ */ jsx(PopoverMenuFields, { fields: filteredFields, selectFieldIndex: selectedFieldIndex })
+      ]
+    }
+  );
 };
 export {
   InputFilter as I

package/components/DynamicFilter/subcomponents/InputFilter/useInputFilter.d.ts

@@ -53,5 +53,13 @@ declare function useInputFilter(): {
      * Setter de la referencia del elemento (inputFilter)
      */
     setElementRef: (ref: import('react').MutableRefObject<HTMLElement | null>) => void;
+    /**
+     * Indica si el menú de campos está abierto
+     */
+    isOpenPopoverMenuFields: boolean | undefined;
+    /**
+     * Indica si el popoverSort está abierto
+     */
+    isOpenPopoverFilter: boolean;
 };
 export default useInputFilter;

package/components/DynamicFilter/subcomponents/InputFilter/useInputFilter.js

@@ -10,6 +10,7 @@ function useInputFilter() {
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
   const isOpenPopoverMenuFields = useDynamicFilterStore((state) => state.isOpenPopoverMenuFields);
+  const isOpenPopoverFilter = useDynamicFilterStore((state) => !!state.popoverFilterData);
   const withAllField = useDynamicFilterStore((state) => state.withAllField);
   const availableFields = useDynamicFilterStore((state) => state.availableFields);
   const inputData = useDynamicFilterStore((state) => state.inputData);
@@ -146,7 +147,15 @@ function useInputFilter() {
     /**
      * Setter de la referencia del elemento (inputFilter)
      */
-    setElementRef
+    setElementRef,
+    /**
+     * Indica si el menú de campos está abierto
+     */
+    isOpenPopoverMenuFields,
+    /**
+     * Indica si el popoverSort está abierto
+     */
+    isOpenPopoverFilter
   };
 }
 export {

package/components/DynamicFilter/subcomponents/PopoverFilter/PopoverFilter.js

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { u as usePopoverFilter } from "./usePopoverFilter.js";
 import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
-import { P as PopoverStyled, p as PopoverHeaderStyled, q as PopoverHeaderIconStyled, r as PopoverHeaderTitleStyled, s as PopoverContainerFieldsStyled, t as PopoverHeaderActionsStyled } from "../../slots/dynamicFilterSlots.js";
+import { u as useDynamicFilterBase } from "../DynamicFilterBase/useDynamicFilterBase.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+import { P as PopoverStyled, h as PopoverHeaderStyled, i as PopoverHeaderTitleStyled, C as ContentFilterStyled, j as PopoverContainerFieldsStyled, k as PopoverHeaderActionsStyled } from "../../slots/dynamicFilterSlots.js";
 import { R as RHFormProvider } from "../../../hook-form/RHFormContext/index.js";
 import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/ActionCancel.js";
 import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/ActionIntro.js";
@@ -20,6 +22,7 @@ function PopoverFilter() {
     statusLoad,
     canRender
   } = usePopoverFilter();
+  const { ownerState } = useDynamicFilterBase();
   if (!canRender) {
     return null;
   }
@@ -44,14 +47,16 @@ function PopoverFilter() {
           validationSchema: popupValidationSchema,
           statusLoad,
           children: [
-            /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: {}, children: [
-              field.urlIcon && /* @__PURE__ */ jsx(PopoverHeaderIconStyled, { src: field.urlIcon, ownerState: {} }),
+            /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: { ...ownerState }, children: [
+              field.urlIcon && /* @__PURE__ */ jsx(Icon, { src: field.urlIcon }),
               /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", ownerState: {}, children: labelField })
             ] }),
-            /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(DataTypeComponent, { formFilter, statusLoad }) }),
-            /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { ownerState: {}, children: [
-              /* @__PURE__ */ jsx(ActionCancel, { onClick: onClose, skeletonWidth: "68px" }),
-              /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "64px" })
+            /* @__PURE__ */ jsxs(ContentFilterStyled, { ownerState: { ...ownerState }, children: [
+              /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(DataTypeComponent, { formFilter, statusLoad }) }),
+              /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { ownerState: {}, children: [
+                /* @__PURE__ */ jsx(ActionCancel, { onClick: onClose, skeletonWidth: "68px" }),
+                /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "64px" })
+              ] })
             ] })
           ]
         }

package/components/DynamicFilter/subcomponents/PopoverMenuFields/PopoverMenuFields.js

@@ -1,10 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { u as usePopoverMenuFields } from "./usePopoverMenuFields.js";
-import { u as PopoverMenuStyled, v as PopoverMenuItemStyled } from "../../slots/dynamicFilterSlots.js";
+import { u as useDynamicFilterBase } from "../DynamicFilterBase/useDynamicFilterBase.js";
+import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
+import { l as PopoverMenuStyled } from "../../slots/dynamicFilterSlots.js";
 function PopoverMenuFields(props) {
   const { fields, selectFieldIndex } = props;
   const { elementRef, handleOpenPopUpClickItem, handleClosePopover, getItemLabel, isOpenPopoverMenuFields } = usePopoverMenuFields();
   const anchorEl = elementRef?.current;
+  const { size } = useDynamicFilterBase();
   return /* @__PURE__ */ jsx(
     PopoverMenuStyled,
     {
@@ -18,12 +21,12 @@ function PopoverMenuFields(props) {
       anchorEl,
       ownerState: {},
       children: isOpenPopoverMenuFields && fields.map((field, index) => /* @__PURE__ */ jsx(
-        PopoverMenuItemStyled,
+        MenuItem,
         {
           dense: true,
+          size,
           selected: index === selectFieldIndex,
           onClick: (event) => handleOpenPopUpClickItem(event, field),
-          ownerState: {},
           startIcon: field.urlIcon,
           label: getItemLabel(field)
         },

package/components/DynamicFilter/tests/DynamicFilter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DynamicFilter/tests/constants.d.ts

@@ -0,0 +1,9 @@
+import { DynamicFilterProps } from '../types';
+export declare const fields: DynamicFilterProps['fields'];
+export declare const allFields: DynamicFilterProps['fields'];
+export declare const userTypes: {
+    id: number;
+    name: string;
+    add_privilege: string;
+    user_assignable: boolean;
+}[];

package/components/DynamicFilter/types.d.ts

@@ -1,3 +1,4 @@
+import { Sizes } from '@m4l/styles';
 import { Theme } from '@mui/material/styles';
 import { Maybe } from '@m4l/core';
 import { RHFAutocompleteAsyncBaseProps } from '../hook-form/RHFAutocompleteAsync/types';
@@ -255,6 +256,10 @@ export interface DynamicFilterProps {
     onChangeFilters?: OnChangeFilters;
     /** Key único necesario para las pruebas del componente. */
     dataTestId?: string;
+    /**
+     * Size del componente
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
 }
 /**
  * Interface que define la variables que se van a usar en clases del componente
@@ -284,6 +289,10 @@ export interface OwnerState {
      *  "isEmpty" Define si existen filtros aplicados
      */
     isEmpty: boolean;
+    /**
+     * Size del componente
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
 }
 export interface DynamicFilterOwnerState extends DynamicFilterProps, OwnerState {
 }

package/components/DynamicSort/DynamicSort.styles.js

@@ -1,4 +1,3 @@
-import { c as containerQuery } from "../../utils/containerQuery.js";
 import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
 import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const CONTAINER_QUERY_NAME = "dynamic";
@@ -24,26 +23,13 @@ const dynamicSortStyles = {
     justifyContent: "flex-start",
     width: "100%",
     height: "fit-content",
-    border: "1px solid",
-    borderRadius: "4px",
-    borderColor: theme.vars.palette.border?.default,
+    border: theme.vars.size.borderStroke.container,
+    borderRadius: theme.vars.size.borderRadius.r1,
+    borderColor: ownerState.isValid ? theme.vars.palette.border?.default : theme.vars.palette.error.enabled,
     background: theme.vars.palette.background.default,
-    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
-      minHeight: "auto",
-      height: "auto",
-      gridTemplateColumns: "1fr auto",
-      gridTemplateAreas: `"input-sort  actions-sort"
-                          "applied-sorts applied-sorts"`
-    },
     '&:has([aria-expanded="true"])': {
-      borderColor: theme.vars.palette.primary.active
-    },
-    "&:focus-within": {
-      borderColor: !ownerState.isValid ? theme.vars.palette.error.enabled : theme.vars.palette.primary.active
-    },
-    ...ownerState.isValid === false ? {
-      borderColor: theme.vars.palette.error.enabled
-    } : {}
+      borderColor: ownerState.isValid ? theme.vars.palette.primary.active : theme.vars.palette.error.enabled
+    }
   }),
   /**
    * inputSort: Estilos del contenedor del campo de entrada de ordenamiento.
@@ -56,26 +42,21 @@ const dynamicSortStyles = {
     paddingRight: theme.vars.size.baseSpacings.sp1,
     height: "100%",
     overflow: "hidden",
+    maxWidth: "135px",
+    width: "100%",
+    alignItems: "center",
+    borderTopLeftRadius: theme.vars.size.borderRadius.r1,
+    borderBottomLeftRadius: theme.vars.size.borderRadius.r1,
+    borderRight: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.border?.default,
     ...getSizeStyles(
       theme,
       ownerState.size || "medium",
       "container",
       (size) => ({
-        height: size,
-        minHeight: size,
-        maxHeight: size
+        height: size
       })
-    ),
-    maxWidth: "135px",
-    width: "100%",
-    alignItems: "center",
-    borderTopLeftRadius: "4px",
-    borderBottomLeftRadius: "4px",
-    borderRight: "1px solid",
-    borderColor: theme.vars.palette.border?.default,
-    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
-      borderRight: "none"
-    }
+    )
   }),
   /**
    * inputSortInput: Estilos del campo de entrada de ordenamiento.
@@ -109,10 +90,10 @@ const dynamicSortStyles = {
     },
     "&:focus-visible": {
       color: theme.vars.palette.text.secondary,
-      border: "1px solid",
+      border: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette.primary.opacity,
       background: theme.vars.palette.primary.opacity,
-      BorderRadius: "2px",
+      BorderRadius: theme.vars.size.borderRadius["r0-5"],
       outline: "none!important"
     },
     "&:hover": {
@@ -120,7 +101,6 @@ const dynamicSortStyles = {
       background: theme.vars.palette.background?.hover
     }
   }),
-  inputSortIcon: {},
   /**
    * appliedSorts: Estilos del contenedor de los campos de ordenamiento aplicados.
    */
@@ -129,53 +109,31 @@ const dynamicSortStyles = {
     width: "100%",
     height: "fit-content",
     overflow: "hidden",
-    paddingLeft: theme.spacing(1),
     borderLeft: "none",
     margin: "0px",
-    padding: "0px 4px",
-    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
-      height: "auto",
-      display: "flex",
-      borderTop: "1px solid ",
-      borderColor: theme.vars.palette.border?.secondary,
-      "&:has(div[class*=appliedSortInnerContainer]:empty), &:empty": {
-        display: "none"
-      }
-    }
+    padding: `0px ${theme.vars.size.baseSpacings.sp1}`
   }),
   /**
    * appliedSortInnerContainer: Estilos del contenedor interno de los campos de ordenamiento aplicados.
    */
   appliedSortInnerContainer: ({ theme }) => ({
-    padding: "2px",
-    gap: "4px",
+    overflow: "overlay",
+    overflowY: "hidden",
+    padding: theme.vars.size.baseSpacings["sp0-5"],
+    gap: theme.vars.size.baseSpacings.sp1,
     height: "fit-content",
     display: "flex",
     flexWrap: "nowrap",
     width: "100%",
     justifyContent: "flex-start",
-    alignItems: "center",
-    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
-      height: "32px",
-      padding: 0,
-      margin: 0,
-      border: 0
-    },
-    [theme.breakpoints.down("sm")]: {
-      padding: 0,
-      height: "44px"
-    }
+    alignItems: "center"
   }),
-  /**
-   * appliedSortChip: Estilos del chip de ordenamiento aplicado.
-   */
-  appliedSortChip: {},
   /**
    * actions: Estilos del contenedor de los botones de acción.
    */
   actions: ({ theme }) => ({
-    overflow: "hidden",
     gridArea: "actions-sort",
+    overflow: "hidden",
     display: "flex",
     flexDirection: "row",
     gap: theme.vars.size.baseSpacings["sp0-5"],
@@ -205,19 +163,11 @@ const dynamicSortStyles = {
     "& .MuiPaper-root": {
       display: "flex",
       flexDirection: "column",
-      padding: "8px 0 !important",
-      gap: "4px",
-      borderRadius: "6px",
-      [theme.breakpoints.down("md")]: {
-        gap: "4px"
-      },
-      "& .M4LPopover-arrowStyle": {
-        display: "none"
-      }
+      padding: theme.vars.size.baseSpacings.sp3,
+      gap: theme.vars.size.baseSpacings.sp1,
+      borderRadius: theme.vars.size.borderRadius.r1
     }
   }),
-  popoverMenuItem: {},
-  popoverMenuItemIcon: {},
   /**
    * popoverSort: Estilos del menú emergente de ordenamiento.
    */
@@ -244,63 +194,62 @@ const dynamicSortStyles = {
   /**
    * popoverSortHeader: Estilos del encabezado del menú emergente de ordenamiento.
    */
-  popoverSortHeader: ({ theme }) => ({
-    backgroundColor: theme.vars.palette.background?.surface,
+  popoverSortHeader: ({ theme, ownerState }) => ({
     display: "flex",
     alignItems: "center",
-    gap: "8px",
-    padding: "4px 4px 4px 8px",
-    borderTopLeftRadius: "4px",
-    borderTopRightRadius: "4px",
-    borderBottom: "0px",
-    height: "28px",
-    [theme.breakpoints.down("sm")]: {
-      height: "36px"
-    }
+    gap: theme.vars.size.baseSpacings.sp2,
+    padding: theme.vars.size.baseSpacings.sp1,
+    paddingLeft: theme.vars.size.baseSpacings.sp2,
+    borderTopLeftRadius: theme.vars.size.borderRadius.r1,
+    borderTopRightRadius: theme.vars.size.borderRadius.r1,
+    borderBottom: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.border.secondary,
+    "& .MuiTypography-root": {
+      color: theme.vars.palette.primary.main
+    },
+    "& .M4LIcon-icon": {
+      backgroundColor: theme.vars.palette.primary.main
+    },
+    ...getSizeStyles(
+      theme,
+      ownerState.size || "medium",
+      "container",
+      (size) => ({
+        height: size
+      })
+    )
   }),
-  popoverSortHeaderIcon: {},
   /**
    * popoverSortHeaderTitle: Estilos del título del menú emergente de ordenamiento.
    */
   popoverSortHeaderTitle: ({ theme }) => ({
-    ...theme.typography.paragraphDens,
-    color: theme.vars.palette.text.primary
+    color: `${theme.vars.palette.primary.main} !important`
   }),
   /**
    * popoverSortContainerFields: Estilos del contenedor de campos del menú emergente de ordenamiento.
    */
-  popoverSortContainerFields: ({ theme }) => ({
+  popoverSortContainerFields: () => ({
     height: "fit-content",
     "& > div": {
       display: "flex",
       height: "auto",
-      flexDirection: "column",
-      padding: "12px 12px 0 12px",
-      gap: "8px",
-      [theme.breakpoints.down("sm")]: {
-        padding: "16px 16px 0 16px",
-        gap: "12px"
-      }
+      flexDirection: "column"
     }
   }),
+  /**
+   * contentSort: Estilos del contenedor entre el change sort y actions
+   */
+  contentSort: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.vars.size.baseSpacings.sp3,
+    gap: theme.vars.size.baseSpacings.sp3
+  }),
   /**
    * popoverSortActions: Estilos del contenedor de acciones del menú emergente de ordenamiento.
    */
   popoverSortActions: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "row",
-    gap: "16px",
-    padding: "16px 12px 12px 12px !important",
-    [theme.breakpoints.down("sm")]: {
-      padding: "24px 16px 16px 16px !important"
-    },
-    "& > .M4LButton-root": {
-      height: "24px",
-      minHeight: "24px",
-      [theme.breakpoints.down("sm")]: {
-        height: "36px"
-      }
-    }
+    padding: `${theme.vars.size.baseSpacings.sp3} 0px`
   }),
   /**
    * inputSortInputSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.

package/components/DynamicSort/slots/DynamicSortSlots.d.ts

@@ -10,18 +10,12 @@ export declare const InputSortStyled: import('@emotion/styled').StyledComponent<
 export declare const InputSortInputStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import('react').ClassAttributes<HTMLInputElement> | keyof import('react').InputHTMLAttributes<HTMLInputElement>>, {}>;
-export declare const InputSortIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
-}, {}, {}>;
 export declare const AppliedSortsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const AppliedSortInnerContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const AppliedSortChipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Chip').ChipProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../Chip').ChipProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
-}, {}, {}>;
 export declare const ActionsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
@@ -34,12 +28,6 @@ export declare const ActionsSubmitButtonStyled: import('@emotion/styled').Styled
 export declare const PopoverMenuStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Popover/types').PopoverProps, keyof import('../../mui_extended/Popover/types').PopoverProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const PopoverMenuItemStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/MenuItem/types').MenuItemProps, keyof import('../../mui_extended/MenuItem/types').MenuItemProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
-}, {}, {}>;
-export declare const PopoverMenuItemIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
-}, {}, {}>;
 export declare const PopoverStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Popover/types').PopoverProps, keyof import('../../mui_extended/Popover/types').PopoverProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, {}, {}>;
@@ -49,9 +37,9 @@ export declare const PopoverContainerFieldsStyled: import('@emotion/styled').Sty
 export declare const PopoverHeaderStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const PopoverHeaderIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const ContentSortStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
-}, {}, {}>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const PopoverHeaderTitleStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
 }, {}, {}>;