@m4l/components 0.2.1 → 0.2.3

package/components/PrintingSystem/{index.89c4d0f9.js → index.d1fd7818.js}

@@ -1,20 +1,21 @@
+import { getPropertyByString } from "@m4l/core";
 import { generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.de903261.js";
+import { g as getComponentUtilityClass } from "../../utils/index.6469f148.js";
 import { styled, useTheme } from "@mui/material/styles";
 import clsx from "clsx";
-import { D as DividerNode } from "./subcomponents/DividerNode/index.782756f8.js";
-import { S as SectionNode } from "./subcomponents/SectionNode/index.2f445506.js";
-import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.828bc8fe.js";
-import { H as HeaderNode } from "./subcomponents/HeaderNode/index.07d6e7f0.js";
-import { a as ImageNode, Q as QRImageNode } from "../Image/index.bb1670e5.js";
-import { B as BodyNode } from "./subcomponents/BodyNode/index.d1f4b0f6.js";
-import { F as FooterNode } from "./subcomponents/FooterNode/index.9feec47b.js";
-import { P as PaperNode } from "./subcomponents/PaperNode/index.615ce7d3.js";
-import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.e239fdf3.js";
-import { G as GridNode } from "./subcomponents/GridNode/index.8568b2bc.js";
-import { C as ChartNode } from "./subcomponents/ChartNode/index.6744122f.js";
-import { P as PagerNode, a as PageRender } from "../Page/index.6dd70d4c.js";
+import { D as DividerNode } from "./subcomponents/DividerNode/index.dcac3bc0.js";
+import { S as SectionNode } from "./subcomponents/SectionNode/index.622df623.js";
+import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.f06ac3d5.js";
+import { H as HeaderNode } from "./subcomponents/HeaderNode/index.48e8769c.js";
+import { a as ImageNode } from "../Image/index.9799dfc0.js";
+import { B as BodyNode } from "./subcomponents/BodyNode/index.f6410daa.js";
+import { F as FooterNode } from "./subcomponents/FooterNode/index.dd21921e.js";
+import { P as PaperNode } from "./subcomponents/PaperNode/index.ccec72dc.js";
+import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.807e0343.js";
+import { G as GridNode } from "./subcomponents/GridNode/index.eb5ebe06.js";
+import { C as ChartNode } from "./subcomponents/ChartNode/index.6b30abe0.js";
+import { P as PagerNode, a as PageRender } from "../Page/index.49d18c85.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle } from "react";
 const componentName = "M4LPrintingSystem";
@@ -96,6 +97,33 @@ 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
@@ -117,7 +145,6 @@ const FactoryRender = (props) => {
     grid: GridNode,
     chart: ChartNode,
     pager: PagerNode,
-    qrImage: QRImageNode,
     __default__: () => {
       throw new Error("Type no defined");
     }
@@ -190,6 +217,7 @@ const PrintingSystem = forwardRef((props, ref) => {
 export {
   FactoryRender as F,
   PrintingSystem as P,
+  getSize as a,
   classes as c,
-  getSize as g
+  getEvalValue as g
 };

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { BodyNodeProps } from './types';
-export declare const BodyNode: (props: BodyNodeProps) => import("react").JSX.Element;
+export declare const BodyNode: (props: BodyNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/BodyNode/{index.d1f4b0f6.js → index.f6410daa.js}

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

package/components/PrintingSystem/subcomponents/ChartNode/{index.6744122f.js → index.6b30abe0.js}

@@ -1,9 +1,9 @@
-import { c as classes } from "../../index.89c4d0f9.js";
+import { g as getEvalValue, c as classes } from "../../index.d1fd7818.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, evaluateWithContext } from "@m4l/core";
+import { useBase, getPropertyByString } 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: evaluateWithContext(sourceData, messageX)
+                  text: getEvalValue(sourceData, messageX)
                 }
               },
               y: {
                 title: {
                   display: true,
-                  text: evaluateWithContext(sourceData, messageY)
+                  text: getEvalValue(sourceData, messageY)
                 }
               }
             }

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ChartNodeProps } from './types';
-export declare const ChartNode: (props: ChartNodeProps) => import("react").JSX.Element;
+export declare const ChartNode: (props: ChartNodeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { DividerNodeProps } from './types';
-export declare const DividerNode: (props: DividerNodeProps) => import("react").JSX.Element;
+export declare const DividerNode: (props: DividerNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/DividerNode/{index.782756f8.js → index.dcac3bc0.js}

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

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { FooterNodeProps } from './types';
-export declare const FooterNode: (props: FooterNodeProps) => import("react").JSX.Element;
+export declare const FooterNode: (props: FooterNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/FooterNode/{index.9feec47b.js → index.dd21921e.js}

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

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { GridNodeProps } from './types';
-export declare const GridNode: (props: GridNodeProps) => import("react").JSX.Element | null;
+export declare const GridNode: (props: GridNodeProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/PrintingSystem/subcomponents/GridNode/{index.8568b2bc.js → index.eb5ebe06.js}

@@ -1,5 +1,5 @@
-import { useBase, getPropertyByString, evaluateWithContext } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.89c4d0f9.js";
+import { useBase, getPropertyByString } from "@m4l/core";
+import { c as classes, a as getSize, g as getEvalValue } from "../../index.d1fd7818.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: evaluateWithContext(sourceData, column.title)
+              children: getEvalValue(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 ? evaluateWithContext(row, dataColumns[id].nestedValue || "") : row[dataColumns[id].key]
+                children: isNested ? getPropertyByString(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.07d6e7f0.js → index.48e8769c.js}

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

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { HeaderNodeProps } from './types';
-export declare const HeaderNode: (props: HeaderNodeProps) => import("react").JSX.Element;
+export declare const HeaderNode: (props: HeaderNodeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ImageNodeProps } from './types';
-export declare const ImageNode: (props: ImageNodeProps) => import("react").JSX.Element;
+export declare const ImageNode: (props: ImageNodeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { PageNodeProps } from './types';
-export declare const PageNode: (props: PageNodeProps) => import("react").JSX.Element;
+export declare const PageNode: (props: PageNodeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { PagerNodeProps } from './types';
-export declare const PagerNode: (props: PagerNodeProps) => import("react").JSX.Element;
+export declare const PagerNode: (props: PagerNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/PaperNode/{index.615ce7d3.js → index.ccec72dc.js}

@@ -1,5 +1,5 @@
-import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../index.89c4d0f9.js";
+import { useBase } from "@m4l/core";
+import { g as getEvalValue, c as classes } from "../../index.d1fd7818.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 = evaluateWithContext(sourceData, title);
-  const titleSecondaryFormated = evaluateWithContext(sourceData, titleSecondary || "");
+  const titleFormated = getEvalValue(sourceData, title);
+  const titleSecondaryFormated = getEvalValue(sourceData, titleSecondary || "");
   return /* @__PURE__ */ jsxs("div", {
     className: clsx(classes.paperNodeRoot, className),
     style: {

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { PaperNodeProps } from './types';
-export declare const PaperNode: (props: PaperNodeProps) => import("react").JSX.Element;
+export declare const PaperNode: (props: PaperNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/PropertyValueNode/{index.e239fdf3.js → index.807e0343.js}

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

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { PropertyValueNodeProps } from './types';
-export declare const PropertyValueNode: (props: PropertyValueNodeProps) => import("react").JSX.Element;
+export declare const PropertyValueNode: (props: PropertyValueNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/SectionNode/{index.2f445506.js → index.622df623.js}

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

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SectionNodeProps } from './types';
-export declare const SectionNode: (props: SectionNodeProps) => import("react").JSX.Element;
+export declare const SectionNode: (props: SectionNodeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { TextBoxNodeProps } from './types';
-export declare const TextBoxNode: (props: TextBoxNodeProps) => import("react").JSX.Element;
+export declare const TextBoxNode: (props: TextBoxNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/TextBoxNode/{index.828bc8fe.js → index.f06ac3d5.js}

@@ -1,5 +1,5 @@
-import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../index.89c4d0f9.js";
+import { useBase } from "@m4l/core";
+import { g as getEvalValue, c as classes } from "../../index.d1fd7818.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 = evaluateWithContext(sourceData, children[1]);
+  const textFormated = getEvalValue(sourceData, children[1]);
   return /* @__PURE__ */ jsx("span", {
     className: clsx(classes.textBoxNodeRoot, className, `${classes.textBoxNodeVariant}-${variant}`),
     style: {

package/components/PrintingSystem/types.d.ts

@@ -115,15 +115,6 @@ 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.
  */
@@ -210,7 +201,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 | QRImageNode;
+export declare type NodePrint = SectionNode | TextBoxNode | ImageNode | HeaderNode | BodyNode | FooterNode | PaperNode | PropertyValue | DividerNode | GridNode | ChartNode | PagerNode;
 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/PrintingSystem/utils/FactoryRender/index.d.ts

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

package/components/PrintingSystem/utils/PageRender/index.d.ts

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

package/components/PrintingSystem/utils/getEvalValue/index.d.ts

@@ -0,0 +1 @@
+export declare const getEvalValue: (sourceData: any, key: string) => string | Array<any>;

package/components/PropertyValue/PropertyValue.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { PropertyValueProps } from './types';
-export declare function PropertyValue(props: PropertyValueProps): import("react").JSX.Element;
+export declare function PropertyValue(props: PropertyValueProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -3,12 +3,9 @@ export interface PropertyValueClassesType {
     root: string;
     property: string;
     value: string;
-    iconProperty: string;
+    skeletonProperty: 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.8fcce0c2.js

@@ -0,0 +1,220 @@
+import { styled } from "@mui/material/styles";
+import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { g as getNameDataTestId } from "../../vendor.384f1182.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { useModuleSkeleton } from "@m4l/core";
+import { unstable_composeClasses } from "@mui/base";
+import clsx from "clsx";
+import { useState } from "react";
+const PropertyValueRoot = styled("div", {
+  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
+})(({
+  propertyWidth,
+  isForm,
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: "1fr",
+  alignItems: "flex-start",
+  width: "100%",
+  padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+  borderBottom: isForm ? "none" : `1px solid ${theme.palette.divider}`,
+  flexDirection: "column",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr",
+    gap: theme.spacing(2),
+    alignItems: "center"
+  },
+  ...theme.components?.M4LPropertyValue?.styleOverrides
+}));
+const Property = styled("div", {
+  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
+})(({
+  propertyWidth,
+  isForm,
+  theme
+}) => ({
+  width: "100%",
+  minWidth: "100%",
+  ...theme.typography.body,
+  color: theme.palette.text.primary,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  position: "relative",
+  [theme.breakpoints.up("sm")]: {
+    borderRight: isForm ? "none" : `1px solid ${theme.palette.divider}`,
+    paddingRight: theme.spacing(2),
+    textAlign: "right",
+    width: propertyWidth || "150px",
+    minWidth: propertyWidth || "150px",
+    justifyContent: "flex-end"
+  },
+  overflow: "hidden",
+  overflowWrap: "break-word"
+}));
+const Value = styled("div", {
+  shouldForwardProp: (prop) => prop !== "valueWidth" && prop !== "valueHeight" && prop !== "withGrid"
+})(({
+  valueWidth,
+  valueHeight,
+  theme
+}) => ({
+  flexGrow: "1",
+  ...theme.typography.body,
+  color: theme.palette.text.secondary,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  position: "relative",
+  padding: "1px",
+  maxWidth: `${valueWidth}%`,
+  width: `${valueWidth}%`,
+  height: valueHeight,
+  marginTop: theme.spacing(1),
+  [theme.breakpoints.up("sm")]: {
+    marginTop: "0px"
+  },
+  overflowWrap: "break-word"
+}));
+const SKTWrapperProperty = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "flex-end"
+}));
+const COMPONENT_PREFIX = "m4l-property-value";
+const TEST_PROPS_DATA = `${COMPONENT_PREFIX}-data`;
+function SKTProperty(props) {
+  const {
+    className,
+    dataTestId = ""
+  } = props;
+  return /* @__PURE__ */ jsx(SKTWrapperProperty, {
+    className,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "skeletonProperty", dataTestId)
+    } : {},
+    children: /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: 68,
+      height: 14
+    })
+  });
+}
+const componentName = "M4LPropertyValue";
+generateUtilityClasses(componentName, [
+  "root",
+  "property",
+  "value",
+  "skeletonProperty",
+  "isDisabled",
+  "isFocus"
+]);
+function getPropertyValueUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const propertyValueUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.disabled && "isDisabled", ownerState.focus && "isFocus"],
+    property: ["property"],
+    value: ["value"],
+    skeletonProperty: ["skeletonProperty"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPropertyValueUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function PropertyValue(props) {
+  const {
+    property,
+    value,
+    propertyWidth = 200,
+    valueHeight = "auto",
+    valueWidth = "100",
+    valueWidthMobile,
+    isForm,
+    className,
+    dataTestId = "",
+    disabled = false
+  } = props;
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const [isFocus, setIsFocus] = useState(false);
+  console.log("Estado de focus: ", isFocus);
+  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 handlerOnBlur = () => {
+    setIsFocus(false);
+  };
+  const ownerState = {
+    disabled,
+    focus: disabled === false ? isFocus : false
+  };
+  const classes = propertyValueUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsxs(PropertyValueRoot, {
+    tabIndex: 0,
+    className: clsx(classes.root, className),
+    isForm,
+    propertyWidth,
+    onClick: handlerFocus,
+    onBlur: handlerOnBlur,
+    ...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__ */ jsx(Property, {
+      className: classes.property,
+      isForm,
+      propertyWidth,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "property", dataTestId)
+      } : {},
+      children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {
+        className: classes.skeletonProperty,
+        dataTestId
+      }) : property
+    }), /* @__PURE__ */ jsx(Value, {
+      className: classes.value,
+      valueWidth: getValueW(),
+      valueHeight,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "value", dataTestId)
+      } : {},
+      children: value
+    })]
+  });
+}
+export {
+  PropertyValue as P
+};

package/components/PropertyValue/skeleton.d.ts

@@ -0,0 +1,2 @@
+import { SKTPropertyProps } from './types';
+export declare function SKTProperty(props: SKTPropertyProps): import("react/jsx-runtime").JSX.Element;

package/components/PropertyValue/types.d.ts

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react';
 export interface PropertyProps {
     propertyWidth?: number;
-    iconProperty?: string;
 }
 export interface ValueProps {
     valueHeight?: number | string;
@@ -16,9 +15,12 @@ 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'> {
-    isFocus: boolean;
-    isForm: boolean;
-    isTabSelected: boolean;
-    isMobile: boolean;
+    focus: boolean;
 }

package/components/Resizeable/{index.6478d7d8.js → index.8c53c1fa.js}

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

package/components/ResizeableWindow/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ResizeableProps } from './types';
-export declare function ResizeableWindow(props: ResizeableProps): import("react").JSX.Element;
+export declare function ResizeableWindow(props: ResizeableProps): import("react/jsx-runtime").JSX.Element;