@m4l/components 0.2.25 → 0.2.26

package/components/Period/classes/index.d.ts

@@ -4,7 +4,9 @@ export declare const periodClasses: PeriodClassesType;
 export declare function getPeriodUtilityClass(slot: string): string;
 export declare const periodUtilityClasses: (ownerState: OwnerState) => {
     root: string;
-    gap: string;
     containerDateLabel: string;
     containerDateValue: string;
+    skeleton: string;
+    skeletonFieldPrimary: string;
+    skeletonFieldSecondary: string;
 };

package/components/Period/classes/types.d.ts

@@ -1,13 +1,18 @@
 import { periodUtilityClasses } from ".";
 export interface PeriodClassesType {
     root: string;
-    gap: string;
     containerDateLabel: string;
     containerDateValue: string;
+    skeleton: string;
+    skeletonFieldPrimary: string;
+    skeletonFieldSecondary: string;
     stateError: string;
     stateReadOnly: string;
     variantMonoperiod: string;
     variantMultiperiod: string;
+    sizeSmall: string;
+    sizeMedium: string;
+    isFocus: string;
 }
 export declare type PeriodClassesKey = keyof PeriodClassesType;
 export declare type Classes = ReturnType<typeof periodUtilityClasses>;

package/components/Period/{index.d80dff10.js → index.6e8d92dc.js}

@@ -1,25 +1,26 @@
 import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { styled, generateUtilityClasses, generateUtilityClass, Autocomplete, TextField, Skeleton } from "@mui/material";
-import { useMemo } from "react";
-import { I as Icon } from "../Icon/index.b920baf8.js";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.2f6286eb.js";
+import { styled, generateUtilityClasses, generateUtilityClass, Skeleton, Autocomplete, TextField } from "@mui/material";
+import { useState, useMemo } from "react";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.389f9b28.js";
 import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.383f5496.js";
 const ContainerPeriod = styled("div")(({
   theme
 }) => ({
   ...theme.components?.M4LPeriod?.styleOverrides
 }));
-const Gap = styled("div")(({
+styled("div")(({
   theme
 }) => ({
   width: "1px",
   height: "20px",
   backgroundColor: theme.palette.divider
 }));
-const SKTWrapper = styled("div", {
+styled("div", {
   shouldForwardProp: (props) => props !== "readOnly"
 })(({
   theme,
@@ -66,9 +67,9 @@ var ETimePeriods = /* @__PURE__ */ ((ETimePeriods2) => {
   return ETimePeriods2;
 })(ETimePeriods || {});
 const dictionary = {
-  LABEL_YEARS: "period_formatter.label_years",
-  LABEL_MONTHS: "period_formatter.label_months",
-  LABEL_DAYS: "period_formatter.label_days"
+  LABEL_YEARS: "period.label_years",
+  LABEL_MONTHS: "period.label_months",
+  LABEL_DAYS: "period.label_days"
 };
 function getPeriodComponetsDictionary() {
   return ["period"].concat(getCommonActionsDictionary());
@@ -76,23 +77,31 @@ function getPeriodComponetsDictionary() {
 const componentName = "M4LPeriod";
 generateUtilityClasses(componentName, [
   "root",
-  "gap",
   "containerDateLabel",
   "containerDateValue",
+  "skeleton",
+  "skeletonFieldPrimary",
+  "skeletonFieldSecondary",
+  "skeletonFieldSecondary",
   "stateError",
   "stateReadOnly",
   "variantMonoperiod",
-  "variantMultiperiod"
+  "variantMultiperiod",
+  "sizeSmall",
+  "sizeMedium",
+  "isFocus"
 ]);
 function getPeriodUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
 }
 const periodUtilityClasses = (ownerState) => {
   const slots = {
-    root: ["root", ownerState.state === "error" && "stateError", ownerState.state === "success" && "stateSuccess", ownerState.state === "warning" && "stateWarning", ownerState.state === "info" && "stateInfo", ownerState.readOnly && "stateReadOnly", ownerState.variant === "monoperiod" ? "variantMonoperiod" : null, ownerState.variant === "multiperiod" ? "variantMultiperiod" : null],
-    gap: ["gap"],
+    root: ["root", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.state === "error" && "stateError", ownerState.state === "success" && "stateSuccess", ownerState.state === "warning" && "stateWarning", ownerState.state === "info" && "stateInfo", ownerState.readOnly && "stateReadOnly", ownerState.variant === "monoperiod" ? "variantMonoperiod" : null, ownerState.variant === "multiperiod" ? "variantMultiperiod" : null, ownerState.focus && "isFocus"],
     containerDateLabel: ["containerDateLabel"],
-    containerDateValue: ["containerDateValue"]
+    containerDateValue: ["containerDateValue"],
+    skeleton: ["skeleton"],
+    skeletonFieldPrimary: ["skeletonFieldPrimary"],
+    skeletonFieldSecondary: ["skeletonFieldSecondary"]
   };
   const composedClasses = unstable_composeClasses(slots, getPeriodUtilityClass, {});
   return {
@@ -103,6 +112,27 @@ const PERIOD_PREFIX = "M4LPeriod";
 const getNamePeriodDataTestId = (KEY) => {
   return `${PERIOD_PREFIX}-${KEY}`;
 };
+const SkeletonPeriod = (props) => {
+  const {
+    classes
+  } = props;
+  return /* @__PURE__ */ jsxs("div", {
+    className: classes.skeleton,
+    children: [/* @__PURE__ */ jsx("div", {
+      className: classes.skeletonFieldPrimary,
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: "50%"
+      })
+    }), /* @__PURE__ */ jsx("div", {
+      className: classes.skeletonFieldSecondary,
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: "50%"
+      })
+    })]
+  });
+};
 const getSelPeriodTime = (period) => {
   if (!period)
     return ETimePeriods.YEARS;
@@ -135,16 +165,29 @@ const Period = (props) => {
     onChange,
     state,
     readOnly = false,
-    skeletonWidth = "100%",
-    skeletonHeight = "18px",
-    variant = "monoperiod"
+    variant = "monoperiod",
+    size = "small"
   } = props;
   const {
     getLabel
   } = useModuleDictionary();
+  const [open, setOpen] = useState(false);
+  const [isFocus, setIsFocus] = useState(false);
   const isSkeleton = useModuleSkeleton();
   const selPeriodTime = getSelPeriodTime(value);
   const singleValue = getSingleValue(value);
+  const isDesktop = useResponsiveDesktop();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const iconDown = `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`;
+  const handleFocus = () => {
+    setIsFocus(true);
+  };
+  const handleBlur = () => {
+    setIsFocus(false);
+  };
   const onTotalChange = (newPeriodTime, newValue) => {
     const newPeriod = {
       selPeriodTime: newPeriodTime,
@@ -168,10 +211,6 @@ const Period = (props) => {
       onTotalChange(newPeriodTime.id, singleValue);
     }
   };
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
   const options = useMemo(() => [{
     id: 0,
     label: getLabel(dictionary.LABEL_YEARS)
@@ -185,11 +224,15 @@ const Period = (props) => {
   const ownerState = {
     readOnly,
     state,
-    variant
+    variant,
+    size: isDesktop ? size : "medium",
+    focus: isFocus
   };
   const classes = periodUtilityClasses(ownerState);
   return /* @__PURE__ */ jsx(ContainerPeriod, {
     className: classes.root,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNamePeriodDataTestId("root")
     } : {},
@@ -202,11 +245,6 @@ const Period = (props) => {
             skeletonWidth: "50%",
             children: value.selPeriodTime === 0 ? getLabel(dictionary.LABEL_YEARS) : value.selPeriodTime === 1 ? getLabel(dictionary.LABEL_MONTHS) : value.selPeriodTime === 2 ? getLabel(dictionary.LABEL_DAYS) : null
           })
-        }), /* @__PURE__ */ jsx(Gap, {
-          className: classes.gap,
-          ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNamePeriodDataTestId("gap")
-          } : {}
         }), /* @__PURE__ */ jsx("div", {
           className: classes.containerDateValue,
           children: /* @__PURE__ */ jsx(Typography, {
@@ -214,14 +252,15 @@ const Period = (props) => {
             skeletonWidth: "80%",
             children: value.singleValue
           })
-        }), /* @__PURE__ */ jsx(Icon, {
-          src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
         })]
       }) : /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsx(Autocomplete, {
           options,
           value: options[selPeriodTime],
           disableClearable: true,
+          open,
+          onOpen: () => setOpen(true),
+          onClose: () => setOpen(false),
           onChange: (_event, autcValue) => {
             onChangeTime(autcValue);
           },
@@ -235,16 +274,15 @@ const Period = (props) => {
               },
               InputProps: {
                 disableUnderline: true,
-                ...params.InputProps
+                ...params.InputProps,
+                endAdornment: /* @__PURE__ */ jsx(IconButton, {
+                  src: iconDown,
+                  onClick: () => setOpen((open2) => !open2)
+                })
               },
               autoComplete: "off"
             }, `tx_async_${params.id}`);
           }
-        }), /* @__PURE__ */ jsx(Gap, {
-          className: classes.gap,
-          ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNamePeriodDataTestId("gap")
-          } : {}
         }), /* @__PURE__ */ jsx(TextField, {
           type: "number",
           variant: "standard",
@@ -255,33 +293,10 @@ const Period = (props) => {
           onChange: (e) => {
             onTotalChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value));
           }
-        }), /* @__PURE__ */ jsx(Icon, {
-          src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
         })]
       })
-    }) : /* @__PURE__ */ jsxs(SKTWrapper, {
-      readOnly,
-      children: [/* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: "50%",
-        height: skeletonHeight
-      }), /* @__PURE__ */ jsx(Gap, {
-        className: classes.gap,
-        ...process.env.NODE_ENV !== "production" ? {
-          [TEST_PROP_ID]: getNamePeriodDataTestId("gap")
-        } : {}
-      }), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: skeletonWidth,
-        height: skeletonHeight
-      }), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 20,
-        sx: {
-          minWidth: "20px",
-          minHeight: "20px"
-        }
-      })]
+    }) : /* @__PURE__ */ jsx(SkeletonPeriod, {
+      classes
     })
   });
 };

package/components/Period/subcomponents/SkeletonPeriod/index.d.ts

@@ -0,0 +1,2 @@
+import { SkeletonPeriodProps } from './types';
+export declare const SkeletonPeriod: (props: SkeletonPeriodProps) => import("react/jsx-runtime").JSX.Element;

package/components/Period/subcomponents/SkeletonPeriod/types.d.ts

@@ -0,0 +1,4 @@
+import type { Classes } from '../../classes/types';
+export interface SkeletonPeriodProps {
+    classes: Classes;
+}

package/components/Period/types.d.ts

@@ -25,8 +25,11 @@ export interface PeriodProps {
     variant?: PeriodVariant;
     skeletonWidth?: string | number;
     skeletonHeight?: string | number;
+    size?: 'small' | 'medium';
 }
 export interface WrapperProps {
     error: boolean;
 }
-export declare type OwnerState = Pick<PeriodProps, 'state' | 'readOnly' | 'variant'>;
+export interface OwnerState extends Pick<PeriodProps, 'state' | 'readOnly' | 'variant' | 'size'> {
+    focus: boolean;
+}

package/components/PrintingSystem/{index.2e17cae5.js → index.c2d21657.js}

@@ -1,23 +1,23 @@
-import { generateUtilityClasses } from "@mui/material";
+import { generateUtilityClasses, styled } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../utils/index.de903261.js";
-import { styled, useTheme } from "@mui/material/styles";
 import clsx from "clsx";
-import { D as DividerNode } from "./subcomponents/DividerNode/index.78b023bb.js";
-import { S as SectionNode } from "./subcomponents/SectionNode/index.0b66458e.js";
-import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.b4c72fef.js";
-import { H as HeaderNode } from "./subcomponents/HeaderNode/index.ef44c8ab.js";
-import { a as ImageNode, Q as QRImageNode } from "../Image/index.d034ca68.js";
-import { B as BodyNode } from "./subcomponents/BodyNode/index.c5ffe20a.js";
-import { F as FooterNode } from "./subcomponents/FooterNode/index.b29fc1e9.js";
-import { P as PaperNode } from "./subcomponents/PaperNode/index.d72d224b.js";
-import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.8e53440c.js";
-import { G as GridNode } from "./subcomponents/GridNode/index.11626284.js";
-import { C as ChartNode } from "./subcomponents/ChartNode/index.020c037c.js";
-import { P as PagerNode, a as PageRender } from "../Page/index.def863f2.js";
+import { D as DividerNode } from "./subcomponents/DividerNode/index.f00c44f3.js";
+import { S as SectionNode } from "./subcomponents/SectionNode/index.2890fc12.js";
+import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.148708e6.js";
+import { H as HeaderNode } from "./subcomponents/HeaderNode/index.5173c74a.js";
+import { a as ImageNode, Q as QRImageNode } from "../Image/index.39b3b9d9.js";
+import { B as BodyNode } from "./subcomponents/BodyNode/index.c7b59f3f.js";
+import { F as FooterNode } from "./subcomponents/FooterNode/index.fb323704.js";
+import { P as PaperNode } from "./subcomponents/PaperNode/index.fad64696.js";
+import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.3a3e5fd0.js";
+import { G as GridNode } from "./subcomponents/GridNode/index.1ed935be.js";
+import { C as ChartNode } from "./subcomponents/ChartNode/index.263f02f0.js";
+import { P as PagerNode, a as PageRender } from "../Page/index.1b20a73e.js";
 import { useBase, evaluateWithContext } from "@m4l/core";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle } from "react";
+import { useTheme } from "@mui/material/styles";
 const componentName = "M4LPrintingSystem";
 const classes = generateUtilityClasses(componentName, [
   "root",

package/components/PrintingSystem/subcomponents/BodyNode/{index.c5ffe20a.js → index.c7b59f3f.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.2e17cae5.js";
+import { c as classes, g as getSize } from "../../index.c2d21657.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const BodyNode = (props) => {

package/components/PrintingSystem/subcomponents/ChartNode/{index.020c037c.js → index.263f02f0.js}

@@ -1,4 +1,4 @@
-import { c as classes } from "../../index.2e17cae5.js";
+import { c as classes } from "../../index.c2d21657.js";
 import clsx from "clsx";
 import { createRef, useEffect } from "react";
 import { Chart, registerables } from "chart.js";

package/components/PrintingSystem/subcomponents/DividerNode/{index.78b023bb.js → index.f00c44f3.js}

@@ -1,4 +1,4 @@
-import { c as classes } from "../../index.2e17cae5.js";
+import { c as classes } from "../../index.c2d21657.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const DividerNode = (props) => {

package/components/PrintingSystem/subcomponents/FooterNode/{index.b29fc1e9.js → index.fb323704.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.2e17cae5.js";
+import { c as classes, g as getSize } from "../../index.c2d21657.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const FooterNode = (props) => {

package/components/PrintingSystem/subcomponents/GridNode/{index.11626284.js → index.1ed935be.js}

@@ -1,5 +1,5 @@
 import { useBase, getPropertyByString, evaluateWithContext } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.2e17cae5.js";
+import { c as classes, g as getSize } from "../../index.c2d21657.js";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const GridNode = (props) => {

package/components/PrintingSystem/subcomponents/HeaderNode/{index.ef44c8ab.js → index.5173c74a.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.2e17cae5.js";
+import { c as classes, g as getSize } from "../../index.c2d21657.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const HeaderNode = (props) => {

package/components/PrintingSystem/subcomponents/PaperNode/{index.d72d224b.js → index.fad64696.js}

@@ -1,5 +1,5 @@
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../index.2e17cae5.js";
+import { c as classes } from "../../index.c2d21657.js";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const PaperNode = (props) => {

package/components/PrintingSystem/subcomponents/PropertyValueNode/{index.8e53440c.js → index.3a3e5fd0.js}

@@ -1,5 +1,5 @@
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.2e17cae5.js";
+import { c as classes, g as getSize } from "../../index.c2d21657.js";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const PropertyValueNode = (props) => {

package/components/PrintingSystem/subcomponents/SectionNode/{index.0b66458e.js → index.2890fc12.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.2e17cae5.js";
+import { c as classes, g as getSize } from "../../index.c2d21657.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const SectionNode = (props) => {

package/components/PrintingSystem/subcomponents/TextBoxNode/{index.b4c72fef.js → index.148708e6.js}

@@ -1,5 +1,5 @@
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../index.2e17cae5.js";
+import { c as classes } from "../../index.c2d21657.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const TextBoxNode = (props) => {

package/components/PropertyValue/{index.3b6670d4.js → index.4ea5af0f.js}

@@ -1,13 +1,12 @@
-import { styled } from "@mui/material/styles";
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { g as getNameDataTestId } from "../../test/getNameDataTestId.14875ec7.js";
 import { useState } from "react";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { I as Icon } from "../Icon/index.b920baf8.js";
+import { I as Icon } from "../Icon/index.8c744412.js";
 import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
 const PropertyValueRoot = styled("div")(({
   theme

package/components/Resizeable/{index.0eb66c37.js → index.8db8f77d.js}

@@ -1,4 +1,4 @@
-import { styled } from "@mui/material/styles";
+import { styled } from "@mui/material";
 import { a as ResizableBox } from "../../react-resizable.ee028152.js";
 import { jsx } from "react/jsx-runtime";
 const WrapperResizeable = styled(ResizableBox)(({

package/components/ScrollBar/{index.010f1b9d.js → index.7dfc2f29.js}

@@ -96,9 +96,10 @@ const useScrollBarUtilityClasses = () => {
     ...composedClasses
   };
 };
-function ScrollBar({
-  children
-}) {
+function ScrollBar(props) {
+  const {
+    children
+  } = props;
   const userAgent = typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
   const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
   if (isMobile) {

package/components/ScrollBar/index.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
-interface Props {
+interface ScrollBarProps {
     children?: ReactElement;
 }
-export declare function ScrollBar({ children }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ScrollBar(props: ScrollBarProps): import("react/jsx-runtime").JSX.Element;
 export default ScrollBar;

package/components/SideBar/classes/index.d.ts

@@ -2,14 +2,17 @@ import { SideBarClassesType } from './types';
 import { SideBarState } from '../types';
 export declare const SideBarClasses: SideBarClassesType;
 export declare const getSideBarClassesByState: (ownerState: SideBarState) => {
+    footer: string;
     root: string;
     drawer: string;
     popover: string;
     containerLogo: string;
+    skeleton: string;
     containerSideBarLogo: string;
     contentDesktop: string;
     contentMobile: string;
     collapseButton: string;
+    collapseButtonSecondary: string;
     contentGroups: string;
     wrapperGroup: string;
     wrapperGroupTitle: string;
@@ -20,19 +23,21 @@ export declare const getSideBarClassesByState: (ownerState: SideBarState) => {
     arrowIconRoot: string;
     navListSubItemRoot: string;
     navSubItemContentRoot: string;
-    skeleton: string;
     subItemActive: string;
     lineLeft: string;
     wrapperSideBar: string;
+    areaExpandMenu: string;
     itemMainActive: string;
     navItemMainTriangleTop: string;
     navItemMainTriangleBottom: string;
     navItemRootContentIconTypo: string;
     navSubItemContentBullet: string;
     containerLogoButtonLogo: string;
-    containerLogoButtonIcon: string;
     collapseButtontriangleTop: string;
     collapseButtontriangleBottom: string;
     subItemCollapseActive: string;
+    containerContentGroupsFooter: string;
     contentGroupsLine: string;
+    overlapping: string;
+    wrapperLogoFooter: string;
 };

package/components/SideBar/classes/types.d.ts

@@ -2,7 +2,9 @@ export interface SideBarClassesType {
     root: string;
     contentDesktop: string;
     contentMobile: string;
+    footer: string;
     collapseButton: string;
+    collapseButtonSecondary: string;
     containerSideBarLogo: string;
     containerLogo: string;
     contentGroups: string;
@@ -18,19 +20,22 @@ export interface SideBarClassesType {
     skeleton: string;
     lineLeft: string;
     wrapperSideBar: string;
+    areaExpandMenu: string;
     navItemRootContentIconTypo: string;
     navSubItemContentBullet: string;
     containerLogoButtonLogo: string;
-    containerLogoButtonIcon: string;
     subItemCollapseActive: string;
+    containerContentGroupsFooter: string;
     contentGroupsLine: string;
     drawer: string;
     popover: string;
+    wrapperLogoFooter: string;
     collapsed: string;
     visible: string;
     subItemActive: string;
     itemMainActive: string;
     variantDefault: string;
     variantComercial: string;
+    overlapping: string;
 }
 export declare type SideBarClassesKey = keyof SideBarClassesType;

package/components/SideBar/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MENU_COLLAPSED_SIZE = "14px";
+export declare const MENU_COLLAPSED_CONTAINER_SIZE = "15px";

package/components/SideBar/context/sideBarContext/types.d.ts

@@ -9,13 +9,15 @@ export interface SideBarProviderValue extends SideBarProps {
      * Las clases asociadas al proveedor del contexto Sidebar.
      */
     classes: Classes;
+    onToggleOverlay: (value: boolean) => void;
+    overlay: boolean;
 }
 /**
  * Propiedades para el proveedor del contexto Sidebar.
  */
 export interface SideBarProviderProps {
     /** value contendrá el valor que se proporcionará en el contexto*/
-    value: SideBarProviderValue;
+    value: Omit<SideBarProviderValue, 'onToggleOverlay' | 'overlay'>;
     /** children contendrá los elementos secundarios que estarán dentro del ámbito del proveedor del contexto.*/
     children: ReactNode;
 }