@m4l/components 9.2.24 → 9.2.26

package/components/PrintingSystem/slots/PrintingSystemSlots.d.ts

@@ -0,0 +1,63 @@
+export declare const PrintingSystemRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 PageNodeRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 SectionNodeRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 HeaderNodeRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 FooterNodeRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 TextBoxNodeRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const BodyNodeRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 PaperNodeRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 PaperNodeContainerTitlesStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 PaperNodeTitleStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 PaperNodeTitleSecondaryStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 PaperNodeContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 PropertyValueNodeRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 PropertyValueNodeTitleStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 PropertyValueNodeContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 DividerNodeRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & 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 GridNodeRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, keyof import('react').ClassAttributes<HTMLTableElement> | keyof import('react').TableHTMLAttributes<HTMLTableElement>>, {}>;
+export declare const GridNodeTdStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof import('react').ClassAttributes<HTMLTableDataCellElement> | keyof import('react').TdHTMLAttributes<HTMLTableDataCellElement>>, {}>;
+export declare const GridNodeThStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, keyof import('react').ClassAttributes<HTMLTableHeaderCellElement> | keyof import('react').ThHTMLAttributes<HTMLTableHeaderCellElement>>, {}>;
+export declare const GridNodeTrStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, keyof import('react').ClassAttributes<HTMLTableRowElement> | keyof import('react').HTMLAttributes<HTMLTableRowElement>>, {}>;
+export declare const ChartNodeRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PrintingSystemOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/PrintingSystem/slots/PrintingSystemSlots.js

@@ -0,0 +1,111 @@
+import { styled } from "@mui/material/styles";
+import { P as PRINTING_SYSTEM_KEY_COMPONENT } from "../constants.js";
+import { P as PrintingSystemSlots } from "./PrintingSystemEnum.js";
+import { p as printingSystemStyles } from "../PrintingSystem.styles.js";
+const PrintingSystemRootStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.root
+})(printingSystemStyles?.root);
+const PageNodeRootStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.pageNodeRoot
+})(printingSystemStyles?.pageNodeRoot);
+const SectionNodeRootStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.sectionNodeRoot
+})(printingSystemStyles?.sectionNodeRoot);
+const HeaderNodeRootStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.headerNodeRoot
+})(printingSystemStyles?.headerNodeRoot);
+const FooterNodeRootStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.footerNodeRoot
+})(printingSystemStyles?.footerNodeRoot);
+const TextBoxNodeRootStyled = styled("span", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.textBoxNodeRoot
+})(printingSystemStyles?.textBoxNodeRoot);
+const BodyNodeRootStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.bodyNodeRoot
+})(printingSystemStyles?.bodyNodeRoot);
+const PaperNodeRootStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.paperNodeRoot
+})(printingSystemStyles?.paperNodeRoot);
+const PaperNodeContainerTitlesStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.paperNodeContainerTitles
+})(printingSystemStyles?.paperNodeContainerTitles);
+const PaperNodeTitleStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.paperNodeTitle
+})(printingSystemStyles?.paperNodeTitle);
+const PaperNodeTitleSecondaryStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.paperNodeTitleSecondary
+})(printingSystemStyles?.paperNodeTitleSecondary);
+const PaperNodeContentStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.paperNodeContent
+})(printingSystemStyles?.paperNodeContent);
+const PropertyValueNodeRootStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.propertyValueNodeRoot
+})(printingSystemStyles?.propertyValueNodeRoot);
+const PropertyValueNodeTitleStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.propertyValueNodeTitle
+})(printingSystemStyles?.propertyValueNodeTitle);
+const PropertyValueNodeContentStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.propertyValueNodeContent
+})(printingSystemStyles?.propertyValueNodeContent);
+const DividerNodeRootStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.dividerNodeRoot
+})(printingSystemStyles?.dividerNodeRoot);
+const GridNodeRootStyled = styled("table", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.gridNodeRoot
+})(printingSystemStyles?.gridNodeRoot);
+const GridNodeTdStyled = styled("td", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.gridNodeTd
+})(printingSystemStyles?.gridNodeTd);
+const GridNodeThStyled = styled("th", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.gridNodeTh
+})(printingSystemStyles?.gridNodeTh);
+const GridNodeTrStyled = styled("tr", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.gridNodeTr
+})(printingSystemStyles?.gridNodeTr);
+const ChartNodeRootStyled = styled("div", {
+  name: PRINTING_SYSTEM_KEY_COMPONENT,
+  slot: PrintingSystemSlots.chartNodeRoot
+})(printingSystemStyles?.chartNodeRoot);
+export {
+  BodyNodeRootStyled as B,
+  ChartNodeRootStyled as C,
+  DividerNodeRootStyled as D,
+  FooterNodeRootStyled as F,
+  GridNodeRootStyled as G,
+  HeaderNodeRootStyled as H,
+  PrintingSystemRootStyled as P,
+  SectionNodeRootStyled as S,
+  TextBoxNodeRootStyled as T,
+  GridNodeTrStyled as a,
+  GridNodeThStyled as b,
+  GridNodeTdStyled as c,
+  PageNodeRootStyled as d,
+  PaperNodeRootStyled as e,
+  PaperNodeContainerTitlesStyled as f,
+  PaperNodeTitleStyled as g,
+  PaperNodeTitleSecondaryStyled as h,
+  PaperNodeContentStyled as i,
+  PropertyValueNodeRootStyled as j,
+  PropertyValueNodeTitleStyled as k,
+  PropertyValueNodeContentStyled as l
+};

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

@@ -1,5 +1,10 @@
 import { BodyNodeProps } from './types';
 /**
- * TODO: Documentar
+ * Componente BodyNode
+ *
+ * Este componente se utiliza para renderizar el contenido de la sección principal de la página.
+ * @param {BodyNodeProps} props - Propiedades del componente.
+ * @param {ReactNode} props.children - Contenido a renderizar dentro del componente.
+ * @param {'row' | 'column'} [props.direction] - Dirección del contenido.
  */
 export declare const BodyNode: (props: BodyNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/BodyNode/index.js

@@ -1,12 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { useBase } from "@m4l/core";
-import { c as classes } from "../../classes/index.js";
-import clsx from "clsx";
 import { g as getSize } from "../../utils/getSize/index.js";
+import { B as BodyNodeRootStyled } from "../../slots/PrintingSystemSlots.js";
 const BodyNode = (props) => {
   const {
     children,
-    className,
     direction = "row",
     gap = "unset",
     style,
@@ -22,9 +20,9 @@ const BodyNode = (props) => {
   } = props;
   const { unitSize } = useBase();
   return /* @__PURE__ */ jsx(
-    "div",
+    BodyNodeRootStyled,
     {
-      className: clsx(classes.bodyNodeRoot, className),
+      ownerState: {},
       style: {
         flexDirection: direction,
         gap: getSize(gap, unitSize),

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

@@ -1,5 +1,10 @@
 import { ChartNodeProps } from './types';
 /**
- * TODO: Documentar
+ * Componente ChartNode
+ *
+ * Este componente se utiliza para renderizar un gráfico de dispersión con barras de error.
+ * @param {ChartNodeProps} props - Propiedades del componente.
+ * @param {ReactNode} props.children - Contenido a renderizar dentro del componente.
+ * @param {'row' | 'column'} [props.direction] - Dirección del contenido.
  */
 export declare const ChartNode: (props: ChartNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/ChartNode/index.js

@@ -5,6 +5,7 @@ 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 { C as ChartNodeRootStyled } from "../../slots/PrintingSystemSlots.js";
 Chart.register(
   ScatterWithErrorBarsController,
   LineWithErrorBarsChart,
@@ -90,8 +91,9 @@ const ChartNode = (props) => {
     }
   }, [canvasRef, points]);
   return /* @__PURE__ */ jsx(
-    "div",
+    ChartNodeRootStyled,
     {
+      ownerState: {},
       className: clsx(classes.chartNodeRoot, className),
       style: {
         ...style

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

@@ -1,5 +1,9 @@
 import { DividerNodeProps } from './types';
 /**
- * TODO: Documentar
+ * Componente DividerNode
+ *
+ * Este componente se utiliza para renderizar una línea divisoria.
+ * @param {DividerNodeProps} props - Propiedades del componente.
+ * @param {'vertical' | 'horizontal'} [props.direction] - Dirección de la línea divisoria.
  */
 export declare const DividerNode: (props: DividerNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/DividerNode/index.js

@@ -1,11 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { c as classes } from "../../classes/index.js";
+import { D as DividerNodeRootStyled } from "../../slots/PrintingSystemSlots.js";
 import clsx from "clsx";
 const DividerNode = (props) => {
   const { direction = "vertical", className = "", style = {} } = props;
   return /* @__PURE__ */ jsx(
-    "div",
+    DividerNodeRootStyled,
     {
+      ownerState: {},
       className: clsx(
         classes.dividerNodeRoot,
         className,

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

@@ -1,5 +1,10 @@
 import { FooterNodeProps } from './types';
 /**
- * TODO: Documentar
+ * Componente FooterNode
+ *
+ * Este componente se utiliza para renderizar el pie de página de la página.
+ * @param {FooterNodeProps} props - Propiedades del componente.
+ * @param {ReactNode} props.children - Contenido a renderizar dentro del componente.
+ * @param {'row' | 'column'} [props.direction] - Dirección del contenido.
  */
 export declare const FooterNode: (props: FooterNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/FooterNode/index.js

@@ -1,12 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { useBase } from "@m4l/core";
-import { c as classes } from "../../classes/index.js";
-import clsx from "clsx";
 import { g as getSize } from "../../utils/getSize/index.js";
+import { F as FooterNodeRootStyled } from "../../slots/PrintingSystemSlots.js";
 const FooterNode = (props) => {
   const {
     children,
-    className,
     direction = "row",
     gap = "unset",
     style,
@@ -22,9 +20,9 @@ const FooterNode = (props) => {
   } = props;
   const { unitSize } = useBase();
   return /* @__PURE__ */ jsx(
-    "div",
+    FooterNodeRootStyled,
     {
-      className: clsx(classes.footerNodeRoot, className),
+      ownerState: {},
       style: {
         flexDirection: direction,
         gap: getSize(gap, unitSize),

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

@@ -1,5 +1,10 @@
 import { GridNodeProps } from './types';
 /**
- * TODO: Documentar
+ * Componente GridNode
+ *
+ * Este componente se utiliza para renderizar una tabla.
+ * @param {GridNodeProps} props - Propiedades del componente.
+ * @param {ReactNode} props.children - Contenido a renderizar dentro del componente.
+ * @param {'row' | 'column'} [props.direction] - Dirección del contenido.
  */
 export declare const GridNode: (props: GridNodeProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/PrintingSystem/subcomponents/GridNode/index.js

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useBase, getPropertyByString, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../classes/index.js";
-import clsx from "clsx";
 import { g as getSize } from "../../utils/getSize/index.js";
+import { G as GridNodeRootStyled, a as GridNodeTrStyled, b as GridNodeThStyled, c as GridNodeTdStyled } from "../../slots/PrintingSystemSlots.js";
 const GridNode = (props) => {
-  const { style = {}, className = "", rows, columns } = props;
+  const { style = {}, rows, columns } = props;
   const regexPattern = /\$\{([^{}]+)\}/g;
   const rowMaybeString = typeof rows === "string" && regexPattern.exec(rows) || "";
   const dataColumns = Array.isArray(columns) && columns.length > 0 ? columns : [];
@@ -18,39 +17,46 @@ const GridNode = (props) => {
   const rowsFormated = typeof rows === "string" ? rowEval : rows;
   if (dataColumns.length > 0) {
     return /* @__PURE__ */ jsxs(
-      "table",
+      GridNodeRootStyled,
       {
-        className: clsx(classes.gridNodeRoot, className),
+        ownerState: {},
         style: {
           ...style
         },
         children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: classes.gridNodeTr, children: columns.map((column) => {
-            return /* @__PURE__ */ jsx(
-              "th",
-              {
-                className: classes.gridNodeTh,
-                style: {
-                  minWidth: column.width ? getSize(column.width, unitSize) : "auto",
-                  maxWidth: column.width ? getSize(column.width, unitSize) : "auto",
-                  justifyContent: column.alignX ? column.alignX : "center"
-                },
-                children: evaluateWithContext(sourceData, column.title)
-              },
-              `th-${Math.random().toString(36).substring(7)}`
-            );
-          }) }, `tr-${Math.random().toString(36).substring(7)}`) }),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx(
+            GridNodeTrStyled,
+            {
+              ownerState: {},
+              children: columns.map((column) => {
+                return /* @__PURE__ */ jsx(
+                  GridNodeThStyled,
+                  {
+                    ownerState: {},
+                    style: {
+                      minWidth: column.width ? getSize(column.width, unitSize) : "auto",
+                      maxWidth: column.width ? getSize(column.width, unitSize) : "auto",
+                      justifyContent: column.alignX ? column.alignX : "center"
+                    },
+                    children: evaluateWithContext(sourceData, column.title)
+                  },
+                  `th-${Math.random().toString(36).substring(7)}`
+                );
+              })
+            },
+            `tr-${Math.random().toString(36).substring(7)}`
+          ) }),
           /* @__PURE__ */ jsx("tbody", { children: rowsFormated.map((row) => {
             return /* @__PURE__ */ jsx(
-              "tr",
+              GridNodeTrStyled,
               {
-                className: classes.gridNodeTr,
+                ownerState: {},
                 children: columns.map((cell, id) => {
                   const isNested = cell.nestedValue ? true : false;
                   return /* @__PURE__ */ jsx(
-                    "td",
+                    GridNodeTdStyled,
                     {
-                      className: classes.gridNodeTd,
+                      ownerState: {},
                       style: {
                         minWidth: getSize(dataColumns[id].width || "auto", unitSize),
                         justifyContent: cell.alignX ? cell.alignX : "center"

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

@@ -1,5 +1,10 @@
 import { HeaderNodeProps } from './types';
 /**
- * TODO: Documentar
+ * Componente HeaderNode
+ *
+ * Este componente se utiliza para renderizar el encabezado de la página.
+ * @param {HeaderNodeProps} props - Propiedades del componente.
+ * @param {ReactNode} props.children - Contenido a renderizar dentro del componente.
+ * @param {'row' | 'column'} [props.direction] - Dirección del contenido.
  */
 export declare const HeaderNode: (props: HeaderNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/HeaderNode/index.js

@@ -1,12 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { useBase } from "@m4l/core";
-import { c as classes } from "../../classes/index.js";
-import clsx from "clsx";
 import { g as getSize } from "../../utils/getSize/index.js";
+import { H as HeaderNodeRootStyled } from "../../slots/PrintingSystemSlots.js";
 const HeaderNode = (props) => {
   const {
     children,
-    className,
     direction = "row",
     gap = "unset",
     style,
@@ -22,9 +20,9 @@ const HeaderNode = (props) => {
   } = props;
   const { unitSize } = useBase();
   return /* @__PURE__ */ jsx(
-    "div",
+    HeaderNodeRootStyled,
     {
-      className: clsx(classes.headerNodeRoot, className),
+      ownerState: {},
       style: {
         flexDirection: direction,
         gap: getSize(gap, unitSize),

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

@@ -1,5 +1,11 @@
 import { ImageNodeProps } from './types';
 /**
- * TODO: Documentar
+ * Componente ImageNode
+ *
+ * Este componente se utiliza para renderizar una imagen.
+ * @param {ImageNodeProps} props - Propiedades del componente.
+ * @param {string} props.src - URL de la imagen a renderizar.
+ * @param {string} [props.width] - Ancho de la imagen.
+ * @param {string} [props.height] - Alto de la imagen.
  */
 export declare const ImageNode: (props: ImageNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/ImageNode/index.js

@@ -1,10 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useBase, useEnvironment, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../classes/index.js";
 import { g as getSize } from "../../utils/getSize/index.js";
-import clsx from "clsx";
 const ImageNode = (props) => {
-  const { className, style, src, width = "100%", height = "100%" } = props;
+  const { style, src, width = "100%", height = "100%" } = props;
   const { unitSize, sourceData } = useBase();
   const { host_static_assets, environment_assets } = useEnvironment();
   const resourceImg = evaluateWithContext(sourceData, src);
@@ -12,7 +10,6 @@ const ImageNode = (props) => {
     "img",
     {
       src: `${host_static_assets}/${environment_assets}/${resourceImg}`,
-      className: clsx(classes.imageNodeRoot, className),
       style: {
         width: getSize(width, unitSize),
         height: getSize(height, unitSize),

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

@@ -1,5 +1,5 @@
 import { PageNodeProps } from './types';
 /**
- * TODO: Documentar
+ * Página de impresión que contiene el contenido de la página.
  */
 export declare const PageNode: (props: PageNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/PageNode/index.js

@@ -1,13 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useBase } from "@m4l/core";
-import { c as classes } from "../../classes/index.js";
-import clsx from "clsx";
 import { g as getSize } from "../../utils/getSize/index.js";
+import { d as PageNodeRootStyled } from "../../slots/PrintingSystemSlots.js";
 const PageNode = (props) => {
   const {
     children,
     style = {},
-    className = "",
     width = "auto",
     height = "auto",
     paddingTop = "unset",
@@ -18,9 +16,9 @@ const PageNode = (props) => {
   } = props;
   const { unitSize } = useBase();
   return /* @__PURE__ */ jsx(
-    "div",
+    PageNodeRootStyled,
     {
-      className: clsx(classes.pageNodeRoot, className),
+      ownerState: {},
       style: {
         width: getSize(width, unitSize),
         gap: getSize(gap, unitSize),

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

@@ -1,5 +1,8 @@
 import { PagerNodeProps } from './types';
 /**
- * TODO: Documentar
+ * Componente PagerNode
+ *
+ * Este componente se utiliza para renderizar el paginador de la página.
+ * @param {PagerNodeProps} props - Propiedades del componente.
  */
 export declare const PagerNode: (props: PagerNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/Pager/index.js

@@ -1,14 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useBase } from "@m4l/core";
-import { c as classes } from "../../classes/index.js";
-import clsx from "clsx";
 const PagerNode = (props) => {
-  const { style = {}, className = "" } = props;
+  const { style = {} } = props;
   const { mainColor, countPages, pageId } = useBase();
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(classes.pagerNodeRoot, className),
       style: {
         ...style,
         color: mainColor

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

@@ -1,5 +1,8 @@
 import { PaperNodeProps } from './types';
 /**
- * TODO: Documentar
+ * Componente PaperNode
+ *
+ * Este componente se utiliza para renderizar el papel de la página.
+ * @param {PaperNodeProps} props - Propiedades del componente.
  */
 export declare const PaperNode: (props: PaperNodeProps) => import("react/jsx-runtime").JSX.Element;

package/components/PrintingSystem/subcomponents/PaperNode/index.js

@@ -1,26 +1,47 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../classes/index.js";
-import clsx from "clsx";
+import { e as PaperNodeRootStyled, f as PaperNodeContainerTitlesStyled, g as PaperNodeTitleStyled, h as PaperNodeTitleSecondaryStyled, i as PaperNodeContentStyled } from "../../slots/PrintingSystemSlots.js";
 const PaperNode = (props) => {
-  const { children, style = {}, className = "", title, titleSecondary } = props;
+  const { children, title, titleSecondary } = props;
   const { mainColor } = useBase();
   const { sourceData } = useBase();
   const titleFormated = evaluateWithContext(sourceData, title);
   const titleSecondaryFormated = evaluateWithContext(sourceData, titleSecondary || "");
   return /* @__PURE__ */ jsxs(
-    "div",
+    PaperNodeRootStyled,
     {
-      className: clsx(classes.paperNodeRoot, className),
-      style: {
-        ...style
-      },
+      ownerState: {},
       children: [
-        /* @__PURE__ */ jsxs("div", { className: classes.paperNodeContainerTitles, children: [
-          /* @__PURE__ */ jsx("div", { className: classes.paperNodeTitle, children: titleFormated }),
-          titleSecondary ? /* @__PURE__ */ jsx("div", { className: classes.paperNodeTitleSecondary, style: { color: mainColor }, children: titleSecondaryFormated }) : null
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: classes.paperNodeContent, children })
+        /* @__PURE__ */ jsxs(
+          PaperNodeContainerTitlesStyled,
+          {
+            ownerState: {},
+            children: [
+              /* @__PURE__ */ jsx(
+                PaperNodeTitleStyled,
+                {
+                  ownerState: {},
+                  children: titleFormated
+                }
+              ),
+              titleSecondary ? /* @__PURE__ */ jsx(
+                PaperNodeTitleSecondaryStyled,
+                {
+                  ownerState: {},
+                  style: { color: mainColor },
+                  children: titleSecondaryFormated
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PaperNodeContentStyled,
+          {
+            ownerState: {},
+            children
+          }
+        )
       ]
     }
   );