@m4l/components 0.2.2 → 0.2.4

package/components/PrintingSystem/{index.bbf52442.js → index.ed3b22b7.js}

@@ -1,21 +1,20 @@
-import { getPropertyByString } from "@m4l/core";
 import { generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.b22c4c1a.js";
+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.ca3332b1.js";
-import { S as SectionNode } from "./subcomponents/SectionNode/index.68cac21a.js";
-import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.91ba514f.js";
-import { H as HeaderNode } from "./subcomponents/HeaderNode/index.0ddbbbad.js";
-import { a as ImageNode } from "../Image/index.2a2e0b27.js";
-import { B as BodyNode } from "./subcomponents/BodyNode/index.ee81edc5.js";
-import { F as FooterNode } from "./subcomponents/FooterNode/index.932c3e33.js";
-import { P as PaperNode } from "./subcomponents/PaperNode/index.efd9af2f.js";
-import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.75ed9752.js";
-import { G as GridNode } from "./subcomponents/GridNode/index.16748040.js";
-import { C as ChartNode } from "./subcomponents/ChartNode/index.b56666cf.js";
-import { P as PagerNode, a as PageRender } from "../Page/index.190e2356.js";
+import { D as DividerNode } from "./subcomponents/DividerNode/index.16fff262.js";
+import { S as SectionNode } from "./subcomponents/SectionNode/index.ce4f6d16.js";
+import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.850d20a1.js";
+import { H as HeaderNode } from "./subcomponents/HeaderNode/index.77d3d39a.js";
+import { a as ImageNode, Q as QRImageNode } from "../Image/index.bf37e923.js";
+import { B as BodyNode } from "./subcomponents/BodyNode/index.7acc6016.js";
+import { F as FooterNode } from "./subcomponents/FooterNode/index.6c67dec0.js";
+import { P as PaperNode } from "./subcomponents/PaperNode/index.2a3d54a3.js";
+import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.e71ad971.js";
+import { G as GridNode } from "./subcomponents/GridNode/index.f466062b.js";
+import { C as ChartNode } from "./subcomponents/ChartNode/index.e4a23bdd.js";
+import { P as PagerNode, a as PageRender } from "../Page/index.710cb16f.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle } from "react";
 const componentName = "M4LPrintingSystem";
@@ -97,33 +96,6 @@ const getSize = (value, unitSize) => {
     return value;
   }
 };
-const getEvalValue = (sourceData, key) => {
-  const regexPattern = /\${([^${}]+(?:\${[^{}]*}[^${}]*)*)}/g;
-  if (regexPattern.test(key)) {
-    const matches = [];
-    let match;
-    let localRegex = new RegExp(regexPattern);
-    while ((match = localRegex.exec(key)) !== null) {
-      matches.push(match[1]);
-    }
-    const finalValue = new Array();
-    matches.map((findMatch) => {
-      const nestedRegex = /\${([^${}]+(?:\${[^{}]*}[^${}]*)*)}/g;
-      if (nestedRegex.test(findMatch)) {
-        const regexKeyReady = /([^ ${]+)/;
-        let matchKeyReady = regexKeyReady.exec(findMatch) || "";
-        let nestedKey = findMatch.match(regexPattern) || "";
-        finalValue.push(getPropertyByString(sourceData, matchKeyReady[1]));
-        finalValue.push(getEvalValue(sourceData, nestedKey[0]));
-      } else {
-        finalValue.push(getPropertyByString(sourceData, findMatch));
-      }
-    });
-    return finalValue.join(" ");
-  } else {
-    return key;
-  }
-};
 const FactoryRender = (props) => {
   const {
     data: parent
@@ -145,6 +117,7 @@ const FactoryRender = (props) => {
     grid: GridNode,
     chart: ChartNode,
     pager: PagerNode,
+    qrImage: QRImageNode,
     __default__: () => {
       throw new Error("Type no defined");
     }
@@ -217,7 +190,6 @@ const PrintingSystem = forwardRef((props, ref) => {
 export {
   FactoryRender as F,
   PrintingSystem as P,
-  getSize as a,
   classes as c,
-  getEvalValue as g
+  getSize as g
 };

package/components/PrintingSystem/subcomponents/BodyNode/{index.ee81edc5.js → index.7acc6016.js}

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

package/components/PrintingSystem/subcomponents/ChartNode/{index.b56666cf.js → index.e4a23bdd.js}

@@ -1,9 +1,9 @@
-import { g as getEvalValue, c as classes } from "../../index.bbf52442.js";
+import { c as classes } from "../../index.ed3b22b7.js";
 import clsx from "clsx";
 import { createRef, useEffect } from "react";
 import { Chart, registerables } from "chart.js";
 import { ScatterWithErrorBarsController, LineWithErrorBarsChart, PointWithErrorBar } from "chartjs-chart-error-bars";
-import { useBase, getPropertyByString } from "@m4l/core";
+import { useBase, getPropertyByString, evaluateWithContext } from "@m4l/core";
 import { jsx } from "react/jsx-runtime";
 Chart.register(ScatterWithErrorBarsController, LineWithErrorBarsChart, PointWithErrorBar, ...registerables);
 const ChartNode = (props) => {
@@ -61,13 +61,13 @@ const ChartNode = (props) => {
               x: {
                 title: {
                   display: true,
-                  text: getEvalValue(sourceData, messageX)
+                  text: evaluateWithContext(sourceData, messageX)
                 }
               },
               y: {
                 title: {
                   display: true,
-                  text: getEvalValue(sourceData, messageY)
+                  text: evaluateWithContext(sourceData, messageY)
                 }
               }
             }

package/components/PrintingSystem/subcomponents/DividerNode/{index.ca3332b1.js → index.16fff262.js}

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

package/components/PrintingSystem/subcomponents/FooterNode/{index.932c3e33.js → index.6c67dec0.js}

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

package/components/PrintingSystem/subcomponents/GridNode/{index.16748040.js → index.f466062b.js}

@@ -1,5 +1,5 @@
-import { useBase, getPropertyByString } from "@m4l/core";
-import { c as classes, a as getSize, g as getEvalValue } from "../../index.bbf52442.js";
+import { useBase, getPropertyByString, evaluateWithContext } from "@m4l/core";
+import { c as classes, g as getSize } from "../../index.ed3b22b7.js";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const GridNode = (props) => {
@@ -42,7 +42,7 @@ const GridNode = (props) => {
                 maxWidth: column.width ? getSize(column.width, unitSize) : "auto",
                 justifyContent: column.alignX ? column.alignX : "center"
               },
-              children: getEvalValue(sourceData, column.title)
+              children: evaluateWithContext(sourceData, column.title)
             }, `th-${Math.random().toString(36).substring(7)}`);
           })
         }, `tr-${Math.random().toString(36).substring(7)}`)
@@ -58,7 +58,7 @@ const GridNode = (props) => {
                   minWidth: getSize(dataColumns[id].width || "auto", unitSize),
                   justifyContent: cell.alignX ? cell.alignX : "center"
                 },
-                children: isNested ? getPropertyByString(row, dataColumns[id].nestedValue || "") : row[dataColumns[id].key]
+                children: isNested ? evaluateWithContext(row, dataColumns[id].nestedValue || "") : row[dataColumns[id].key]
               }, `td-${Math.random().toString(36).substring(7)}`);
             })
           }, `tr-${Math.random().toString(36).substring(7)}`);

package/components/PrintingSystem/subcomponents/HeaderNode/{index.0ddbbbad.js → index.77d3d39a.js}

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

package/components/PrintingSystem/subcomponents/PaperNode/{index.efd9af2f.js → index.2a3d54a3.js}

@@ -1,5 +1,5 @@
-import { useBase } from "@m4l/core";
-import { g as getEvalValue, c as classes } from "../../index.bbf52442.js";
+import { useBase, evaluateWithContext } from "@m4l/core";
+import { c as classes } from "../../index.ed3b22b7.js";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const PaperNode = (props) => {
@@ -16,8 +16,8 @@ const PaperNode = (props) => {
   const {
     sourceData
   } = useBase();
-  const titleFormated = getEvalValue(sourceData, title);
-  const titleSecondaryFormated = getEvalValue(sourceData, titleSecondary || "");
+  const titleFormated = evaluateWithContext(sourceData, title);
+  const titleSecondaryFormated = evaluateWithContext(sourceData, titleSecondary || "");
   return /* @__PURE__ */ jsxs("div", {
     className: clsx(classes.paperNodeRoot, className),
     style: {

package/components/PrintingSystem/subcomponents/PropertyValueNode/{index.75ed9752.js → index.e71ad971.js}

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

package/components/PrintingSystem/subcomponents/QRImageNode/index.d.ts

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

package/components/PrintingSystem/subcomponents/QRImageNode/types.d.ts

@@ -0,0 +1,3 @@
+import { QRImageNode } from "../../types";
+export interface QRImageNodeProps extends QRImageNode {
+}

package/components/PrintingSystem/subcomponents/SectionNode/{index.68cac21a.js → index.ce4f6d16.js}

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

package/components/PrintingSystem/subcomponents/TextBoxNode/{index.91ba514f.js → index.850d20a1.js}

@@ -1,5 +1,5 @@
-import { useBase } from "@m4l/core";
-import { g as getEvalValue, c as classes } from "../../index.bbf52442.js";
+import { useBase, evaluateWithContext } from "@m4l/core";
+import { c as classes } from "../../index.ed3b22b7.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const TextBoxNode = (props) => {
@@ -13,7 +13,7 @@ const TextBoxNode = (props) => {
   const {
     sourceData
   } = useBase();
-  const textFormated = getEvalValue(sourceData, children[1]);
+  const textFormated = evaluateWithContext(sourceData, children[1]);
   return /* @__PURE__ */ jsx("span", {
     className: clsx(classes.textBoxNodeRoot, className, `${classes.textBoxNodeVariant}-${variant}`),
     style: {

package/components/PrintingSystem/types.d.ts

@@ -115,6 +115,15 @@ export interface ImageNode extends BaseNode {
     width?: number;
     height?: number;
 }
+/**
+ * QReNode: Componente para visualizar una imagen qr.
+ */
+export interface QRImageNode extends BaseNode {
+    type: 'qrImage';
+    url: string;
+    size?: number;
+    color?: string;
+}
 /**
  * HeaderNode: Componente para visualizar la cabecera del documento.
  */
@@ -201,7 +210,7 @@ export interface ChartNode extends Omit<BaseNode, 'children'> {
     messageX: string;
     messageY: string;
 }
-export declare type NodePrint = SectionNode | TextBoxNode | ImageNode | HeaderNode | BodyNode | FooterNode | PaperNode | PropertyValue | DividerNode | GridNode | ChartNode | PagerNode;
+export declare type NodePrint = SectionNode | TextBoxNode | ImageNode | HeaderNode | BodyNode | FooterNode | PaperNode | PropertyValue | DividerNode | GridNode | ChartNode | PagerNode | QRImageNode;
 export declare type NodePrintComponent = ((props: PageNodeProps) => React.JSX.Element) | ((props: SectionNodeProps) => React.JSX.Element) | ((props: HeaderNodeProps) => React.JSX.Element) | ((props: BodyNodeProps) => React.JSX.Element) | ((props: FooterNodeProps) => React.JSX.Element) | ((props: PaperNodeProps) => React.JSX.Element) | ((props: PropertyValueNodeProps) => React.JSX.Element) | ((props: GridNodeProps) => React.JSX.Element) | ((props: ChartNodeProps) => React.JSX.Element);
 export interface PrintingSystemProps {
     templateData: RootNode;

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

@@ -6,5 +6,5 @@ export declare const propertyValueUtilityClasses: (ownerState: OwnerState) => {
     value: string;
     root: string;
     property: string;
-    skeletonProperty: string;
+    iconProperty: string;
 };

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

@@ -3,9 +3,12 @@ export interface PropertyValueClassesType {
     root: string;
     property: string;
     value: string;
-    skeletonProperty: string;
+    iconProperty: string;
     isDisabled: string;
     isFocus: string;
+    variantIsForm: string;
+    isTabSelected: string;
+    isMobile: string;
 }
 export declare type PropertyValueClassesKey = keyof PropertyValueClassesType;
 export declare type Classes = ReturnType<typeof propertyValueUtilityClasses>;

package/components/PropertyValue/index.37d91d0c.js

@@ -0,0 +1,206 @@
+import { styled } from "@mui/material/styles";
+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 "../../vendor.8f8b0ac9.js";
+import { useState } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { I as Icon } from "../Icon/index.05984e7f.js";
+import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
+const PropertyValueRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LPropertyValue?.styleOverrides
+}));
+const componentName = "M4LPropertyValue";
+generateUtilityClasses(componentName, [
+  "root",
+  "property",
+  "iconProperty",
+  "value",
+  "isDisabled",
+  "isFocus",
+  "variantIsForm",
+  "isTabSelected",
+  "isMobile"
+]);
+function getPropertyValueUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const propertyValueUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.disabled && "isDisabled", ownerState.isFocus && "isFocus", ownerState.isForm && "variantIsForm", ownerState.isTabSelected && "isTabSelected", ownerState.isMobile && "isMobile"],
+    property: ["property"],
+    iconProperty: ["iconProperty"],
+    value: ["value"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPropertyValueUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const COMPONENT_PREFIX = "m4l-property-value";
+const TEST_PROPS_DATA = `${COMPONENT_PREFIX}-data`;
+function PropertyValue(props) {
+  const {
+    property,
+    iconProperty,
+    value,
+    propertyWidth = 200,
+    valueHeight = "auto",
+    valueWidth = "100",
+    valueWidthMobile,
+    isForm,
+    className,
+    dataTestId = "",
+    disabled = false
+  } = props;
+  const isDesktop = useResponsiveDesktop();
+  const [isFocus, setIsFocus] = useState(false);
+  const [isTabSelected, setIsTabSelected] = useState(false);
+  const getValueW = () => {
+    if (valueWidthMobile && !isDesktop) {
+      return valueWidthMobile;
+    }
+    if (valueWidth === 75 && isDesktop) {
+      return 75;
+    } else if (valueWidth === 75 && !isDesktop) {
+      return 100;
+    }
+    if (valueWidth === 50 && isDesktop) {
+      return 50;
+    } else if (valueWidth === 50 && !isDesktop) {
+      return 100;
+    }
+    if (valueWidth === 25 && isDesktop || valueWidth === 12.5 && isDesktop) {
+      return valueWidth;
+    }
+    if (valueWidth === 25 && !isDesktop) {
+      return 50;
+    }
+    if (valueWidth === 12.5 && !isDesktop) {
+      return 25;
+    }
+    return 100;
+  };
+  const handlerFocus = () => {
+    setIsFocus(true);
+  };
+  const handlerKeyUp = (event) => {
+    if (event.key === "Tab") {
+      console.log("handlerKeyDown condition ok");
+      setIsTabSelected(true);
+    }
+  };
+  const handlerOnBlur = () => {
+    setIsFocus(false);
+    setIsTabSelected(false);
+  };
+  const ownerState = {
+    disabled: isForm && disabled ? disabled : false,
+    isFocus: !disabled && isForm ? isFocus : false,
+    isTabSelected: !disabled && isForm ? isTabSelected : false,
+    isForm: isForm ? true : false,
+    isMobile: !isDesktop
+  };
+  const classes = propertyValueUtilityClasses(ownerState);
+  if (!isForm) {
+    return /* @__PURE__ */ jsxs(PropertyValueRoot, {
+      className: clsx(classes.root, className),
+      style: {
+        gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr"
+      },
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROPS_DATA]: JSON.stringify([{
+          property: property ? true : false,
+          value: value ? true : false
+        }]),
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "root", dataTestId)
+      } : {},
+      children: [/* @__PURE__ */ jsxs("div", {
+        className: classes.property,
+        style: {
+          width: propertyWidth && isDesktop ? propertyWidth : "150px",
+          minWidth: propertyWidth && isDesktop ? propertyWidth : "150px"
+        },
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "property", dataTestId)
+        } : {},
+        children: [iconProperty ? /* @__PURE__ */ jsx(Icon, {
+          src: iconProperty,
+          className: classes.iconProperty
+        }) : null, /* @__PURE__ */ jsx(Typography, {
+          variant: "body",
+          skeletonWidth: "70px",
+          children: property
+        })]
+      }), /* @__PURE__ */ jsx("div", {
+        className: classes.value,
+        style: {
+          width: `${getValueW()}%`,
+          maxWidth: `${getValueW()}%`,
+          height: valueHeight
+        },
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "value", dataTestId)
+        } : {},
+        children: value
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsxs(PropertyValueRoot, {
+    className: clsx(classes.root, className),
+    style: {
+      gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr"
+    },
+    role: "button",
+    tabIndex: 0,
+    onClick: handlerFocus,
+    onBlur: handlerOnBlur,
+    onKeyUp: handlerKeyUp,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROPS_DATA]: JSON.stringify([{
+        property: property ? true : false,
+        value: value ? true : false
+      }]),
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "root", dataTestId)
+    } : {},
+    children: [/* @__PURE__ */ jsxs("div", {
+      className: clsx(classes.root, className),
+      style: {
+        width: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr"
+      },
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROPS_DATA]: JSON.stringify([{
+          property: property ? true : false,
+          value: value ? true : false
+        }]),
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "root", dataTestId)
+      } : {},
+      children: [iconProperty ? /* @__PURE__ */ jsx(Icon, {
+        src: iconProperty,
+        className: classes.iconProperty
+      }) : null, /* @__PURE__ */ jsx(Typography, {
+        variant: "body",
+        skeletonWidth: "70px",
+        children: property
+      })]
+    }), /* @__PURE__ */ jsx("div", {
+      className: classes.value,
+      style: {
+        width: `${getValueW()}%`,
+        maxWidth: `${getValueW()}%`,
+        height: valueHeight
+      },
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "value", dataTestId)
+      } : {},
+      children: value
+    })]
+  });
+}
+export {
+  PropertyValue as P
+};

package/components/PropertyValue/types.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 export interface PropertyProps {
     propertyWidth?: number;
+    iconProperty?: string;
 }
 export interface ValueProps {
     valueHeight?: number | string;
@@ -15,12 +16,9 @@ export interface PropertyValueProps extends PropertyProps, ValueProps {
     dataTestId?: string;
     disabled?: boolean;
 }
-export declare type WrapperProps = PropertyProps & Pick<PropertyValueProps, 'isForm'>;
-export declare type WrapperPropertyProps = WrapperProps;
-export declare type WrapperValueProps = Omit<ValueProps, 'valueWidthMobile'>;
-export interface SKTPropertyProps extends Pick<PropertyValueProps, 'dataTestId'> {
-    className: string;
-}
 export interface OwnerState extends Pick<PropertyValueProps, 'disabled'> {
-    focus: boolean;
+    isFocus: boolean;
+    isForm: boolean;
+    isTabSelected: boolean;
+    isMobile: boolean;
 }

package/components/Resizeable/{index.383eb1aa.js → index.6478d7d8.js}

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

package/components/ScrollBar/{index.65bb2930.js → index.010f1b9d.js}

@@ -69,7 +69,11 @@ styled(SimpleBarReact)(({
   "& .simplebar-mask": {
     zIndex: "inherit"
   },
-  "& .simplebar-content": {},
+  "& .simplebar-content": {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%"
+  },
   '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] ': {
     "& .simplebar-content": {
       marginRight: "12px"

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

@@ -5,11 +5,11 @@ export declare const getSideBarClassesByState: (ownerState: SideBarState) => {
     root: string;
     drawer: string;
     popover: string;
+    containerLogo: string;
     containerSideBarLogo: string;
     contentDesktop: string;
     contentMobile: string;
     collapseButton: string;
-    containerLogo: string;
     contentGroups: string;
     wrapperGroup: string;
     wrapperGroupTitle: string;

package/components/SideBar/{index.7e4a79a6.js → index.58d29b84.js}

@@ -4,17 +4,17 @@ import { styled as styled$1, generateUtilityClasses, ListItemText, Tooltip, List
 import { useEnvironment, useBase, BaseProvider } from "@m4l/core";
 import { createContext, useContext, useState, useEffect } from "react";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.b22c4c1a.js";
+import { g as getComponentUtilityClass } from "../../utils/index.de903261.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { I as Image } from "../Image/index.2a2e0b27.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.df52ae90.js";
-import { I as Icon, A as ArrowIcon } from "../Icon/index.6db034b5.js";
+import { I as Image } from "../Image/index.bf37e923.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.26de70bd.js";
+import { I as Icon, A as ArrowIcon } from "../Icon/index.05984e7f.js";
 import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
 import clsx from "clsx";
 import { useLocation } from "react-router-dom";
 import { P as Popover } from "../mui_extended/Popover/index.b3eca6b1.js";
-import { S as ScrollBar } from "../ScrollBar/index.65bb2930.js";
+import { S as ScrollBar } from "../ScrollBar/index.010f1b9d.js";
 const SideBarRoot = styled("div")(({
   theme
 }) => ({
@@ -235,7 +235,7 @@ function CollapseButton(props) {
       children: /* @__PURE__ */ jsx(Image, {
         width: "100%",
         height: "100%",
-        src: companyLogoNormalUrl,
+        src: companyLogoNormalUrl || "",
         alt: "logo"
       }, "Logo")
     }), /* @__PURE__ */ jsx("div", {
@@ -905,7 +905,7 @@ const ContentDesktop = () => {
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("contentDesktop")
     } : {},
-    children: [/* @__PURE__ */ jsx("div", {
+    children: [companyLogoSmallUrl ? /* @__PURE__ */ jsx("div", {
       className: classes.containerSideBarLogo,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId("containerSideBarLogo")
@@ -920,16 +920,16 @@ const ContentDesktop = () => {
           height: "60px",
           src: companyLogoSmallUrl,
           alt: "logo"
-        }, "Logo"), /* @__PURE__ */ jsx(Typography, {
+        }, "Logo"), companyName ? /* @__PURE__ */ jsx(Typography, {
           variant: "subtitleDens",
           skeletonWidth: "100px",
           style: {
             width: collapsed ? "0px" : "auto"
           },
           children: companyName
-        })]
+        }) : null]
       })
-    }), /* @__PURE__ */ jsx(ContentGroups, {}), /* @__PURE__ */ jsx(CollapseButton, {
+    }) : null, /* @__PURE__ */ jsx(ContentGroups, {}), /* @__PURE__ */ jsx(CollapseButton, {
       onToggleCollapse,
       collapsed
     })]
@@ -996,7 +996,7 @@ const ContentMobile = () => {
         ...process.env.NODE_ENV !== "production" ? {
           [TEST_PROP_ID]: getNameDataTestId("contentMobile")
         } : {},
-        children: [/* @__PURE__ */ jsx("div", {
+        children: [companyLogoSmallUrl ? /* @__PURE__ */ jsx("div", {
           className: classes.containerSideBarLogo,
           ...process.env.NODE_ENV !== "production" ? {
             [TEST_PROP_ID]: getNameDataTestId("containerSideBarLogo")
@@ -1017,7 +1017,7 @@ const ContentMobile = () => {
               children: companyName
             })]
           })
-        }), /* @__PURE__ */ jsx(ContentGroups, {})]
+        }) : null, /* @__PURE__ */ jsx(ContentGroups, {})]
       })]
     })
   });

package/components/SideBar/types.d.ts

@@ -21,11 +21,11 @@ export interface SideBarProps {
     onToggleVisible: VoidFunction;
     collapsed: boolean;
     visible: boolean;
-    companyLogoSmallUrl: string;
-    companyLogoNormalUrl: string;
+    companyLogoSmallUrl?: string;
+    companyLogoNormalUrl?: string;
     collapsedWidht?: string | number;
     unCollapsedWidht?: string | number;
-    companyName: string;
+    companyName?: string;
 }
 export declare type Classes = ReturnType<typeof getSideBarClassesByState>;
 export declare type SideBarState = Pick<SideBarProps, 'collapsed' | 'visible'>;

package/components/SplitLayout/{index.9ef430f6.js → index.30fd5861.js}

@@ -3,7 +3,7 @@ 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 { S as SplitterLayout } from "../../react-splitter-layout.8b1655c8.js";
+import { S as SplitterLayout } from "../../react-splitter-layout.c5d98bf7.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 const SplitLayoutRoot = styled("div")(({
   theme