@m4l/components 9.2.54 → 9.2.56-beta.2

package/components/PropertyValue/PropertyValue.js

@@ -31,7 +31,6 @@ function PropertyValue(props) {
   const uniqueId = useId();
   const inputId = `property-value-${uniqueId}`;
   const { currentSize } = useComponentSize(size);
-  const normalizedSize = currentSize === "large" ? "medium" : currentSize;
   const ownerState = {
     propertyWidth,
     disabled: isForm && disabled ? disabled : false,
@@ -56,10 +55,10 @@ function PropertyValue(props) {
   };
   const renderValue = () => {
     if (typeof value === "string" || typeof value === "number" || value === null || value === void 0) {
-      return /* @__PURE__ */ jsx(Typography, { id: inputId, size: normalizedSize, variant: "body", style: { wordBreak: "break-word" }, children: getNullGuard(value) });
+      return /* @__PURE__ */ jsx(Typography, { id: inputId, size: currentSize, variant: "body", style: { wordBreak: "break-word" }, children: getNullGuard(value) });
     }
     if (React.isValidElement(value)) {
-      return React.cloneElement(value, { size: normalizedSize, id: inputId });
+      return React.cloneElement(value, { size: currentSize, id: inputId });
     }
     return value;
   };
@@ -80,7 +79,7 @@ function PropertyValue(props) {
           /* @__PURE__ */ jsx(
             Label,
             {
-              size: normalizedSize,
+              size: currentSize,
               label: property,
               mandatory,
               mandatoryMessage,

package/components/PropertyValue/PropertyValue.styles.js

@@ -35,7 +35,7 @@ const propertyValueStyles = {
         maxWidth: "100%"
       }
     };
-    const semanticStyle = ownerState?.semanticWidth && semanticStylesMap[ownerState.semanticWidth] ? semanticStylesMap[ownerState.semanticWidth] : {};
+    const semanticStyle = ownerState?.semanticWidth && semanticStylesMap[ownerState?.semanticWidth] ? semanticStylesMap[ownerState?.semanticWidth] : {};
     return {
       display: "flex",
       flexDirection: ownerState?.isForm ? "column" : "row",
@@ -64,7 +64,7 @@ const propertyValueStyles = {
   name: ({ theme, ownerState }) => ({
     display: "flex",
     alignItems: "center",
-    minWidth: ownerState.propertyWidth,
+    minWidth: ownerState?.propertyWidth,
     width: ownerState?.semanticWidth ? "auto" : "200px",
     fontSize: theme.typography.body2.fontSize,
     color: theme.palette.text.primary,
@@ -79,7 +79,7 @@ const propertyValueStyles = {
     display: "flex",
     justifyContent: "flex-start",
     overflow: "hidden",
-    height: ownerState?.valueHeight ? ownerState.valueHeight : "auto",
+    height: ownerState?.valueHeight ? ownerState?.valueHeight : "auto",
     ...ownerState?.isForm && {
       gap: theme.vars.size.baseSpacings["sp0-5"],
       flexDirection: "column"

package/components/PropertyValue/slots/PropertyValueSlots.d.ts

@@ -1,9 +1,9 @@
 export declare const PropertyValueRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const NameStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const ValueStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/ScrollBar/ScrollBar.d.ts

@@ -1,6 +1,6 @@
 import { ScrollBarProps } from './types';
 /**
- * Componente que permite agregar una barra de desplazamiento personalizada.
+ * Wrapper scroll, preferably use the scroll with overflow auto.
+ * @deprecated
  */
-export declare function ScrollBar(props: ScrollBarProps): import("react/jsx-runtime").JSX.Element;
-export default ScrollBar;
+export declare const ScrollBar: (props: ScrollBarProps) => import("react/jsx-runtime").JSX.Element;

package/components/ScrollBar/ScrollBar.js

@@ -1,49 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import "simplebar-react/dist/simplebar.min.css";
-import clsx from "clsx";
-import { Box } from "@mui/material";
-import { useIsMobile } from "@m4l/graphics";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
-import { S as SCROLL_KEY_COMPONENT, c as classScrollRoot } from "./constants.js";
-import { R as RootScrollBar, S as SimpleBarStyled } from "./slots/ScrollBarSlots.js";
-import { S as ScrollBarSlots } from "./slots/ScrollBarEnum.js";
-function ScrollBar(props) {
-  const {
-    orientation,
-    children,
-    className,
-    dataTestId,
-    ...otherProps
-  } = props;
-  const isMobile = useIsMobile();
-  const ownerState = {
-    orientation,
-    children
-  };
-  if (isMobile) {
-    return /* @__PURE__ */ jsx(Box, { sx: { overflowX: "auto", width: "100%" }, children });
-  }
-  return /* @__PURE__ */ jsx(
-    RootScrollBar,
-    {
-      ownerState: { ...ownerState },
-      id: "RootStyle",
-      className: clsx(classScrollRoot, className),
-      ...getPropDataTestId(SCROLL_KEY_COMPONENT, ScrollBarSlots.root, dataTestId),
-      children: /* @__PURE__ */ jsx(
-        SimpleBarStyled,
-        {
-          orientation: props.orientation,
-          autoHide: false,
-          ownerState: {},
-          className: "simplebar",
-          ...otherProps,
-          children
-        }
-      )
-    }
-  );
-}
+import { S as ScrollbarRootStyled } from "./slots/ScrollBarSlots.js";
+const ScrollBar = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ jsx(ScrollbarRootStyled, { children });
+};
 export {
   ScrollBar as S
 };

package/components/ScrollBar/ScrollBar.styles.js

@@ -1,60 +1,13 @@
 const scrollBarStyles = {
   /**
-   * Root element
+   * Scrollbar root styles
    */
-  root: ({ theme }) => ({
-    flexGrow: 1,
+  root: () => ({
+    display: "flex",
+    flexDirection: "column",
     width: "100%",
     height: "100%",
-    overflow: "hidden",
-    minHeight: "inherit",
-    "& .simplebar-scrollbar.simplebar-visible:before": {
-      opacity: 1
-    },
-    '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] .simplebar-content': {},
-    '& .simplebar-content-wrapper[style*="overflow: scroll hidden;"] .simplebar-content': {
-      marginBottom: "9px"
-    },
-    "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before": {
-      backgroundColor: theme.vars.palette.default.focusOpacity,
-      borderRadius: "2px",
-      height: "5px"
-    },
-    "& .simplebar-track.simplebar-vertical .simplebar-scrollbar:before": {
-      background: theme.vars.palette.general.scrollBar,
-      borderRadius: "2px"
-    }
-  }),
-  /**
-   * Scroll bar
-   */
-  scrollBar: ({ theme }) => ({
-    height: "100%",
-    "& .simplebar-scrollbar": {
-      "&:before": {
-        background: theme.vars.palette.general.scrollBar
-      },
-      "&.simplebar-visible:before": {
-        opacity: 1
-      }
-    },
-    "& .simplebar-track.simplebar-vertical": {
-      width: 10
-    },
-    "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": {
-      height: 6
-    },
-    "& .simplebar-mask": {
-      zIndex: "inherit"
-    },
-    "& .simplebar-content": {
-      display: "flex",
-      flexDirection: "column",
-      height: "100%"
-    },
-    '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] .simplebar-content': {
-      marginRight: "12px"
-    }
+    overflow: "auto"
   })
 };
 export {

package/components/ScrollBar/constants.d.ts

@@ -1,2 +1,4 @@
-export declare const SCROLL_KEY_COMPONENT = "M4LScrollBar";
-export declare const classScrollRoot: string;
+/**
+ * Nombre de la clase css para el componente.
+ */
+export declare const SCROLL_BAR_KEY_COMPONENTS = "M4LScrollBar";

package/components/ScrollBar/constants.js

@@ -1,7 +1,4 @@
-import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
-const SCROLL_KEY_COMPONENT = "M4LScrollBar";
-const classScrollRoot = getComponentSlotRoot(SCROLL_KEY_COMPONENT);
+const SCROLL_BAR_KEY_COMPONENTS = "M4LScrollBar";
 export {
-  SCROLL_KEY_COMPONENT as S,
-  classScrollRoot as c
+  SCROLL_BAR_KEY_COMPONENTS as S
 };

package/components/ScrollBar/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollBar } from './ScrollBar';
+export type { ScrollBarProps } from './types';

package/components/ScrollBar/index.js

@@ -0,0 +1 @@
+

package/components/ScrollBar/slots/ScrollBarSlots.d.ts

@@ -1,6 +1 @@
-export declare const RootScrollBar: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ScrollBarProps> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').ScrollBarProps> & 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 SimpleBarStyled: import('@emotion/styled').StyledComponent<Pick<import('simplebar-react').Props & import('react').RefAttributes<import('simplebar-core').default | null>, keyof import('simplebar-react').Props | keyof import('react').RefAttributes<import('simplebar-core').default | null>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ScrollBarProps> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').ScrollBarProps> & Record<string, unknown>;
-}, {}, {}>;
+export declare const ScrollbarRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/ScrollBar/slots/ScrollBarSlots.js

@@ -1,17 +1,11 @@
 import { styled } from "@mui/material/styles";
-import SimpleBarReact from "simplebar-react";
-import { S as SCROLL_KEY_COMPONENT } from "../constants.js";
-import { S as ScrollBarSlots } from "./ScrollBarEnum.js";
+import { S as ScrollbarSlots } from "./ScrollbarEnum.js";
+import { S as SCROLL_BAR_KEY_COMPONENTS } from "../constants.js";
 import { s as scrollBarStyles } from "../ScrollBar.styles.js";
-const RootScrollBar = styled("div", {
-  name: SCROLL_KEY_COMPONENT,
-  slot: ScrollBarSlots.root
-})(scrollBarStyles?.root);
-const SimpleBarStyled = styled(SimpleBarReact, {
-  name: SCROLL_KEY_COMPONENT,
-  slot: ScrollBarSlots.scrollBar
-})(scrollBarStyles?.scrollBar);
+const ScrollbarRootStyled = styled("div", {
+  name: SCROLL_BAR_KEY_COMPONENTS,
+  slot: ScrollbarSlots.root
+})(scrollBarStyles.root);
 export {
-  RootScrollBar as R,
-  SimpleBarStyled as S
+  ScrollbarRootStyled as S
 };

package/components/ScrollBar/slots/ScrollbarEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum ScrollbarSlots {
+    root = "root"
+}

package/components/ScrollBar/slots/ScrollbarEnum.js

@@ -0,0 +1,7 @@
+var ScrollbarSlots = /* @__PURE__ */ ((ScrollbarSlots2) => {
+  ScrollbarSlots2["root"] = "root";
+  return ScrollbarSlots2;
+})(ScrollbarSlots || {});
+export {
+  ScrollbarSlots as S
+};

package/components/ScrollBar/types.d.ts

@@ -1,49 +1,19 @@
-import { SxProps, Theme } from '@mui/material';
 import { ReactNode } from 'react';
-import { Props as SimpleProps } from 'simplebar-react';
-import { SCROLL_KEY_COMPONENT } from './constants';
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
-import { ScrollBarSlots } from './slots';
-/**
- * Props for the ScrollBar component.
- */
-export interface ScrollBarProps extends SimpleProps {
+import { ScrollbarSlots } from './slots/ScrollbarEnum';
+import { SCROLL_BAR_KEY_COMPONENTS } from './constants';
+import { Theme } from '@mui/material';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+export interface ScrollBarProps {
     /**
-     * The content of the ScrollBar.
+     * ScrollBar children
      */
     children: ReactNode;
     /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
+     * ScrollBar hide tracks
+     * @deprecated
      */
-    sx?: SxProps;
-    /**
-     * The orientation of the ScrollBar.
-     * @default 'vertical'
-     */
-    orientation?: 'vertical' | 'horizontal';
-    /**
-     * The class name of the ScrollBar.
-     */
-    className?: string;
-    /**
-     * The data-testid attribute for testing purposes.
-     */
-    dataTestId?: string;
+    autoHide?: boolean;
 }
-/**
- * The owner state for the ScrollBar component.
- */
-export type ownerState = ScrollBarProps;
-/**
- * The owner state for the ScrollBar component.
- * @deprecated This type is redundant and can be removed.
- */
-export type ScrollBarOwnerState = ScrollBarProps & {};
-/**
- * The type for the ScrollBar slots.
- */
-export type ScrollBarSlotsType = keyof typeof ScrollBarSlots;
-/**
- * The styles for the ScrollBar component.
- */
-export type ScrollBarStyles = OverridesStyleRules<ScrollBarSlots, typeof SCROLL_KEY_COMPONENT, Theme>;
+export type ScrollBarSlotsType = keyof typeof ScrollbarSlots;
+export type ScrollBarOwnerState = {};
+export type ScrollBarStyles = M4LOverridesStyleRules<ScrollbarSlots, typeof SCROLL_BAR_KEY_COMPONENTS, Theme>;

package/components/SideBar/slots/SideBarSlots.d.ts

@@ -1,51 +1,51 @@
-export declare const ContainerDesktopRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerDesktopRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, keyof import('react').HTMLAttributes<HTMLElement> | keyof import('react').ClassAttributes<HTMLElement>>, {}>;
-export declare const ContainerDesktopContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerDesktopContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ContainerBtnAnchoredStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerBtnAnchoredStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ContainerContentGroupsRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerContentGroupsRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, keyof import('react').HTMLAttributes<HTMLElement> | keyof import('react').ClassAttributes<HTMLElement>>, {}>;
-export declare const ContainerContentGroupsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerContentGroupsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, keyof import('react').HTMLAttributes<HTMLElement> | keyof import('react').ClassAttributes<HTMLElement>>, {}>;
-export declare const ContainerContentTitleStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerContentTitleStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ContainerContentNavItemsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerContentNavItemsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, keyof import('react').HTMLAttributes<HTMLElement> | keyof import('react').ClassAttributes<HTMLElement>>, {}>;
-export declare const ContainerContentItemStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerContentItemStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ContainerArrowIconRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerArrowIconRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ContainerHeaderSidebarRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerHeaderSidebarRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, keyof import('react').HTMLAttributes<HTMLElement> | keyof import('react').ClassAttributes<HTMLElement>>, {}>;
-export declare const ContainerTitleSubtitleStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerTitleSubtitleStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ContainerFooterStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerFooterStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ContainerSideBarMobileStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerSideBarMobileStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ContentComponentRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContentComponentRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ContentComponentHideStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContentComponentHideStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ContainerComponentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerComponentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ContainerMenuItemsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
+export declare const ContainerMenuItemsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/SideBar/subcomponents/ContentComponent/style.d.ts

@@ -1,2 +1,2 @@
-import { SideBarStyles } from '../../types';
-export declare const contentComponentStyles: SideBarStyles;
+import { ContentComponentStyles } from '../../types';
+export declare const contentComponentStyles: ContentComponentStyles;

package/components/SideBar/subcomponents/ContentComponent/style.js

@@ -18,11 +18,11 @@ const contentComponentStyles = {
     height: "100%",
     overflow: "hidden",
     transition: "all 0.5s",
-    ...!ownerState.anchored && {
-      width: ownerState?.anchored && ownerState.isDesktop ? ownerState.expandedWidth : !ownerState.isDesktop ? "100%" : theme.vars.size.baseSpacings.sp4,
+    ...!ownerState?.anchored && {
+      width: ownerState?.anchored && ownerState?.isDesktop ? ownerState?.expandedWidth : !ownerState?.isDesktop ? "100%" : theme.vars.size.baseSpacings.sp4,
       "&:hover": {
         transition: "all 0.5s",
-        width: ownerState.expandedWidth,
+        width: ownerState?.expandedWidth,
         contentVisibility: "visible",
         '& [class*="containerFooter"]': {
           borderWidth: theme.vars.size.baseSpacings["sp0-5"]
@@ -35,7 +35,7 @@ const contentComponentStyles = {
    */
   containerComponent: ({ ownerState }) => ({
     height: "100%",
-    width: ownerState.expandedWidth
+    width: ownerState?.expandedWidth
   })
 };
 export {

package/components/SideBar/subcomponents/ContentGroups/index.js

@@ -17,10 +17,10 @@ const ContentGroups = (contentGroupsProps) => {
     noItems: menuData.length === 0
   };
   const renderTitle = (title) => {
-    return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", skeletonWidth: "100px", children: title }) });
+    return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { children: /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", skeletonWidth: "100px", children: title }) });
   };
   const renderItems = (item) => {
-    return /* @__PURE__ */ jsx(ContainerContentNavItemsStyled, { ownerState: {}, children: item?.map((list) => /* @__PURE__ */ jsx(ContainerMenuItemsMain, { item: list, openSubItem: true, size: currentSize }, list.title)) });
+    return /* @__PURE__ */ jsx(ContainerContentNavItemsStyled, { children: item?.map((list) => /* @__PURE__ */ jsx(ContainerMenuItemsMain, { item: list, openSubItem: true, size: currentSize }, list.title)) });
   };
   const renderItemsDisabled = () => {
     return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { ownerState: { disabled: true }, children: /* @__PURE__ */ jsx(
@@ -39,7 +39,7 @@ const ContentGroups = (contentGroupsProps) => {
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("content-groups") } : {},
       children: menuData.length > 0 ? menuData.map((itemGroup) => (
         /* Render title section in menusidebar */
-        /* @__PURE__ */ jsxs(ContainerContentGroupsStyled, { ownerState: {}, children: [
+        /* @__PURE__ */ jsxs(ContainerContentGroupsStyled, { children: [
           renderTitle(itemGroup.title),
           renderItems(itemGroup.children)
         ] }, itemGroup.title)

package/components/SideBar/subcomponents/ContentGroups/styles.d.ts

@@ -1,2 +1,2 @@
-import { SideBarStyles } from '../../types';
-export declare const contentGroupStyles: SideBarStyles;
+import { ContentGroupsStyles } from '../../types';
+export declare const contentGroupStyles: ContentGroupsStyles;

package/components/SideBar/subcomponents/ContentGroups/styles.js

@@ -10,7 +10,7 @@ const contentGroupStyles = {
     overflowY: "auto",
     padding: `${theme.vars.size.baseSpacings.sp3} 0px 0px 0px`,
     alignItems: "center",
-    justifyContent: ownerState.noItems ? "center" : "flex-start"
+    justifyContent: ownerState?.noItems ? "center" : "flex-start"
   }),
   /**
    * Wrapper for every principal item group in the sidebar
@@ -29,7 +29,7 @@ const contentGroupStyles = {
     color: theme.vars.palette.text.primary,
     textAlign: "left",
     "& .MuiTypography-root": {
-      color: !ownerState.disabled ? theme.vars.palette.text.primary : `${theme.vars.palette.text.primary} !important`
+      color: !ownerState?.disabled ? theme.vars.palette.text.primary : `${theme.vars.palette.text.primary} !important`
     }
   }),
   /**
@@ -52,6 +52,15 @@ const contentGroupStyles = {
     alignItems: "center",
     cursor: "pointer",
     padding: theme.spacing(0.5)
+  }),
+  /**
+   *Style para el contenedor del icono de flecha que indica si el item está colapsado o descolapsado para los items padres
+   */
+  containerArrowIconRoot: () => ({
+    display: "flex",
+    alignSelf: "center",
+    lineHeight: 0,
+    marginLeft: "auto"
   })
 };
 export {

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.d.ts

@@ -1,2 +1,2 @@
-import { SideBarStyles } from '../../../../types';
-export declare const containerMenuItemsMainStyles: SideBarStyles;
+import { ContainerMenuItemsMainStyles } from '../../../../types';
+export declare const containerMenuItemsMainStyles: ContainerMenuItemsMainStyles;

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.js

@@ -11,7 +11,7 @@ const containerMenuItemsMainStyles = {
     gap: theme.vars.size.baseSpacings["sp0-5"],
     ...getHeightSizeStyles(
       theme.generalSettings.isMobile,
-      ownerState.size || "medium",
+      ownerState?.size || "medium",
       "container",
       (height) => {
         return {
@@ -40,15 +40,6 @@ const containerMenuItemsMainStyles = {
       flexDirection: "column",
       gap: theme.vars.size.baseSpacings["sp0-5"]
     }
-  }),
-  /**
-   *Style para el contenedor del icono de flecha que indica si el item está colapsado o descolapsado para los items padres
-   */
-  containerArrowIconRoot: () => ({
-    display: "flex",
-    alignSelf: "center",
-    lineHeight: 0,
-    marginLeft: "auto"
   })
 };
 export {

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/subcomponents/ArrowIcon/index.js

@@ -11,7 +11,6 @@ function ArrowIcon(props) {
   return /* @__PURE__ */ jsx(
     ContainerArrowIconRootStyled,
     {
-      ownerState: {},
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("arrowIconRoot") } : {},
       children: /* @__PURE__ */ jsx(
         IconButton,

package/components/SideBar/subcomponents/FooterSidebar/styles.d.ts

@@ -1,2 +1,2 @@
-import { SideBarStyles } from '../../types';
-export declare const footerSideBarStyles: SideBarStyles;
+import { SideBarFooterStyles } from '../../types';
+export declare const footerSideBarStyles: SideBarFooterStyles;

package/components/SideBar/subcomponents/HeaderSidebar/index.js

@@ -3,7 +3,7 @@ import { k as ContainerHeaderSidebarRootStyled, l as ContainerTitleSubtitleStyle
 import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
 import { I as Image } from "../../../Image/Image.js";
 const HeaderSidebar = ({ srcIcon, title, subtitle }) => {
-  return /* @__PURE__ */ jsxs(ContainerHeaderSidebarRootStyled, { ownerState: {}, role: "heading", children: [
+  return /* @__PURE__ */ jsxs(ContainerHeaderSidebarRootStyled, { role: "heading", children: [
     /* @__PURE__ */ jsx(
       Image,
       {
@@ -14,7 +14,7 @@ const HeaderSidebar = ({ srcIcon, title, subtitle }) => {
       },
       "Logo"
     ),
-    /* @__PURE__ */ jsxs(ContainerTitleSubtitleStyled, { ownerState: {}, children: [
+    /* @__PURE__ */ jsxs(ContainerTitleSubtitleStyled, { children: [
       /* @__PURE__ */ jsx(Typography, { variant: "subtitleDens", size: "medium", skeletonWidth: 120, children: title }),
       /* @__PURE__ */ jsx(Typography, { variant: "paragraph", size: "medium", margin: 0, skeletonWidth: 150, children: subtitle })
     ] })

package/components/SideBar/subcomponents/HeaderSidebar/styles.d.ts

@@ -1,2 +1,2 @@
-import { SideBarStyles } from '../../types';
-export declare const headerSidebarStyles: SideBarStyles;
+import { HeaderSidebarStyles } from '../../types';
+export declare const headerSidebarStyles: HeaderSidebarStyles;