@m4l/components 0.2.35 → 1.0.0

package/components/Period/index.5233694b.js

@@ -0,0 +1,424 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+import { useFormContext, Controller } from "react-hook-form";
+import { H as HelperText } from "../HelperText/index.be949cdf.js";
+import { generateUtilityClasses, generateUtilityClass, Skeleton, Autocomplete, TextField } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { W as componentName, X as PERIOD_PREFIX, T as TEST_PROP_ID, Y as componentName$1 } from "../areas/constants.5387d83e.js";
+import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { T as Typography, u as useFormFocus } from "../../vendor.a1ce6777.js";
+import { F as FieldLabel } from "../FieldLabel/index.f9cdcc27.js";
+import { useState, useMemo } from "react";
+import { d as dictionary, a as dictionary$1 } from "../areas/dictionary.7e74022a.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { a as IconButton } from "../Icon/index.d5fed418.js";
+import { W as WrapperComponent } from "../WrapperComponent/index.57964195.js";
+const RHFPeriodRoot = styled("div")(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing(1),
+  ...theme.components?.M4LRHFPeriod?.styleOverrides
+}));
+const ContainerPeriod = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LPeriod?.styleOverrides
+}));
+styled("div")(({ theme }) => ({
+  width: "1px",
+  height: "20px",
+  backgroundColor: theme.vars.palette.divider
+}));
+styled("div", {
+  shouldForwardProp: (props) => props !== "readOnly"
+})(({ theme, readOnly }) => ({
+  display: "flex",
+  width: "100%",
+  height: "37.5px",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  border: `1px solid ${theme.vars.palette.divider}`,
+  ...readOnly && {
+    border: "0px"
+  },
+  padding: theme.spacing(0.5, 1),
+  borderRadius: "4px"
+}));
+styled("div")(({ theme }) => ({
+  ...theme.colorSchemes.finalTheme.typography.body2,
+  width: "100%",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+styled("div")(({ theme }) => ({
+  ...theme.colorSchemes.finalTheme.typography.body2,
+  width: "70px",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+var ETimePeriods = /* @__PURE__ */ ((ETimePeriods2) => {
+  ETimePeriods2[ETimePeriods2["YEARS"] = 0] = "YEARS";
+  ETimePeriods2[ETimePeriods2["MONTHS"] = 1] = "MONTHS";
+  ETimePeriods2[ETimePeriods2["DAYS"] = 2] = "DAYS";
+  return ETimePeriods2;
+})(ETimePeriods || {});
+generateUtilityClasses(componentName, [
+  "root",
+  "containerDateLabel",
+  "containerDateValue",
+  "skeleton",
+  "skeletonFieldPrimary",
+  "skeletonFieldSecondary",
+  "skeletonFieldSecondary",
+  "stateError",
+  "stateReadOnly",
+  "variantMonoperiod",
+  "variantMultiperiod",
+  "sizeSmall",
+  "sizeMedium",
+  "isFocus"
+]);
+function getPeriodUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const periodUtilityClasses = (ownerState) => {
+  const slots = {
+    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"],
+    skeleton: ["skeleton"],
+    skeletonFieldPrimary: ["skeletonFieldPrimary"],
+    skeletonFieldSecondary: ["skeletonFieldSecondary"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPeriodUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+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;
+  if (period.selPeriodTime)
+    return period.selPeriodTime;
+  if (period.years && period.years > 0)
+    return ETimePeriods.YEARS;
+  if (period.months && period.months > 0)
+    return ETimePeriods.MONTHS;
+  if (period.days && period.days > 0)
+    return ETimePeriods.DAYS;
+  return ETimePeriods.YEARS;
+};
+const getSingleValue = (period) => {
+  if (!period)
+    return "";
+  if (period.singleValue !== void 0)
+    return period.singleValue;
+  if (period.years && period.years > 0)
+    return period.years;
+  if (period.months && period.months > 0)
+    return period.months;
+  if (period.days && period.days > 0)
+    return period.days;
+  return "";
+};
+const Period = (props) => {
+  const {
+    value,
+    onChange,
+    state,
+    readOnly = false,
+    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,
+      singleValue: newValue
+    };
+    if (newValue !== "" && newValue > 0) {
+      newPeriod.years = 0;
+      newPeriod.months = 0;
+      newPeriod.days = 0;
+      if (newPeriodTime === ETimePeriods.YEARS)
+        newPeriod.years = newValue;
+      if (newPeriodTime === ETimePeriods.MONTHS)
+        newPeriod.months = newValue;
+      if (newPeriodTime === ETimePeriods.DAYS)
+        newPeriod.days = newValue;
+    }
+    onChange(newPeriod);
+  };
+  const onChangeTime = (newPeriodTime) => {
+    if (newPeriodTime) {
+      onTotalChange(newPeriodTime.id, singleValue);
+    }
+  };
+  const options = useMemo(
+    () => [
+      {
+        id: 0,
+        label: getLabel(dictionary.LABEL_YEARS)
+      },
+      {
+        id: 1,
+        label: getLabel(dictionary.LABEL_MONTHS)
+      },
+      {
+        id: 2,
+        label: getLabel(dictionary.LABEL_DAYS)
+      }
+    ],
+    [getLabel]
+  );
+  const ownerState = {
+    readOnly,
+    state,
+    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") } : {},
+      children: !isSkeleton ? readOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: classes.containerDateLabel, children: /* @__PURE__ */ jsx(Typography, { variant: "body", 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("div", { className: classes.containerDateValue, children: /* @__PURE__ */ jsx(Typography, { variant: "body", skeletonWidth: "80%", children: value.singleValue }) })
+      ] }) : /* @__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);
+            },
+            renderInput: (params) => {
+              return /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  ...params,
+                  fullWidth: true,
+                  variant: "standard",
+                  SelectProps: { native: true },
+                  InputProps: {
+                    disableUnderline: true,
+                    ...params.InputProps,
+                    endAdornment: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        src: iconDown,
+                        onClick: () => setOpen((currentOpen) => !currentOpen)
+                      }
+                    )
+                  },
+                  autoComplete: "off"
+                },
+                `tx_async_${params.id}`
+              );
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            type: "number",
+            variant: "standard",
+            value: singleValue,
+            InputProps: { disableUnderline: true },
+            onChange: (e) => {
+              onTotalChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value));
+            }
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(SkeletonPeriod, { classes })
+    }
+  );
+};
+generateUtilityClasses(componentName$1, [
+  "root",
+  "isFocus",
+  "isTabSelected"
+]);
+function getRHFPeriodUtilityClass(slot) {
+  return generateUtilityClass(componentName$1, slot);
+}
+const RHFPeriodUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.isFocus && "isFocus", ownerState.isTabSelected && "isTabSelected"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFPeriodUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFPeriod = (props) => {
+  const {
+    name,
+    readOnly,
+    skeletonWidth,
+    skeletonHeight,
+    state,
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage,
+    size
+  } = props;
+  const { control } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
+  const ownerState = {
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false
+  };
+  const classes = RHFPeriodUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(
+    RHFPeriodRoot,
+    {
+      className: classes.root,
+      tabIndex: 0,
+      onFocus: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerOnKeyUp,
+      children: /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name,
+          control,
+          render: ({ field: { onChange, value }, fieldState: { error } }) => {
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  label,
+                  mandatory,
+                  mandatoryMessage,
+                  helperMessage
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Period,
+                {
+                  value,
+                  onChange,
+                  state: !!error === true ? "error" : state,
+                  readOnly,
+                  skeletonWidth,
+                  skeletonHeight,
+                  size
+                }
+              ),
+              error && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error.message || "" })
+            ] });
+          }
+        }
+      )
+    }
+  );
+};
+function getFormatPeriod(years, months, days) {
+  const { getLabel } = useModuleDictionary();
+  let period = "";
+  const separator = ", ";
+  switch (years) {
+    case 0:
+      break;
+    case 1:
+      period = "1 " + getLabel(dictionary$1.LABEL_YEAR);
+      break;
+    default:
+      period = years.toString() + " " + getLabel(dictionary$1.LABEL_YEARS);
+  }
+  switch (months) {
+    case 0:
+      break;
+    case 1:
+      if (years > 0)
+        period += separator;
+      period += "1 " + getLabel(dictionary$1.LABEL_MONTH);
+      break;
+    default:
+      if (years > 0)
+        period += separator;
+      period += months.toString() + " " + getLabel(dictionary$1.LABEL_MONTHS);
+  }
+  switch (days) {
+    case 0:
+      break;
+    case 1:
+      if (years > 0 || months > 0)
+        period += separator;
+      period += "1 " + getLabel(dictionary$1.LABEL_DAY);
+      break;
+    default:
+      if (years > 0 || months > 0)
+        period += separator;
+      period += days.toString() + " " + getLabel(dictionary$1.LABEL_DAYS);
+  }
+  if (period == "")
+    period = "-";
+  return period;
+}
+function PeriodFormatter(props) {
+  const { years = 0, months = 0, days = 0, Component = WrapperComponent } = props;
+  return /* @__PURE__ */ jsx(Component, { children: getFormatPeriod(years, months, days) });
+}
+export {
+  PeriodFormatter as P,
+  RHFPeriod as R,
+  Period as a,
+  getFormatPeriod as g
+};

package/components/Period/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SKTWrapperProps } from './types';
+export declare const ContainerPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Gap: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & SKTWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FieldPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FieldValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,4 +1,4 @@
-import { printingSystemUtilityClasses } from ".";
+import { printingSystemUtilityClasses } from '.';
 export interface PrintingSystemClassesType {
     root: string;
     pageNodeRoot: string;

package/components/PrintingSystem/{index.27f1f209.js → index.fb176a93.js}

@@ -1,24 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
 import { generateUtilityClasses, styled } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.6469f148.js";
+import { Z as componentName } from "../areas/constants.5387d83e.js";
+import { g as getComponentUtilityClass } from "../../utils/index.9ee4c99a.js";
 import clsx from "clsx";
-import { D as DividerNode } from "./subcomponents/DividerNode/index.e504dbd2.js";
-import { S as SectionNode } from "./subcomponents/SectionNode/index.83f1efea.js";
-import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.5427cb75.js";
-import { H as HeaderNode } from "./subcomponents/HeaderNode/index.89e4eaab.js";
-import { a as ImageNode, Q as QRImageNode } from "../Image/index.b799c514.js";
-import { B as BodyNode } from "./subcomponents/BodyNode/index.319a3bb9.js";
-import { F as FooterNode } from "./subcomponents/FooterNode/index.9a19a7cb.js";
-import { P as PaperNode } from "./subcomponents/PaperNode/index.dd4ca449.js";
-import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.048d7ebf.js";
-import { G as GridNode } from "./subcomponents/GridNode/index.8d14e1b6.js";
-import { C as ChartNode } from "./subcomponents/ChartNode/index.990e164c.js";
-import { P as PagerNode, a as PageRender } from "../Page/index.5d34dc4d.js";
+import { D as DividerNode } from "./subcomponents/DividerNode/index.67d9f1b4.js";
+import { S as SectionNode } from "./subcomponents/SectionNode/index.540a4b19.js";
+import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.41e7fcb0.js";
+import { H as HeaderNode } from "./subcomponents/HeaderNode/index.7de4e411.js";
+import { b as ImageNode, Q as QRImageNode } from "../Image/index.36a3d440.js";
+import { B as BodyNode } from "./subcomponents/BodyNode/index.c1d61038.js";
+import { F as FooterNode } from "./subcomponents/FooterNode/index.eaee152a.js";
+import { P as PaperNode } from "./subcomponents/PaperNode/index.f9ccf22b.js";
+import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.f2f2e903.js";
+import { G as GridNode } from "./subcomponents/GridNode/index.f5f63a2a.js";
+import { C as ChartNode } from "./subcomponents/ChartNode/index.18bd9bad.js";
+import { P as PagerNode, a as PageRender } from "../Page/index.fdf04592.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",
   "pageNodeRoot",
@@ -85,9 +85,7 @@ const printingSystemUtilityClasses = () => {
     ...composedClasses
   };
 };
-const PrintingSystemRoot = styled("div")(({
-  theme
-}) => ({
+const PrintingSystemRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LPrintingSystem?.styleOverrides
 }));
 const getSize = (value, unitSize) => {
@@ -98,16 +96,9 @@ const getSize = (value, unitSize) => {
   }
 };
 const FactoryRender = (props) => {
-  const {
-    data: parent
-  } = props;
-  const {
-    children,
-    ...otherProps
-  } = parent || {};
-  const {
-    sourceData
-  } = useBase();
+  const { data: parent } = props;
+  const { children, ...otherProps } = parent || {};
+  const { sourceData } = useBase();
   const strategiesComponents = {
     section: SectionNode,
     textBox: TextBoxNode,
@@ -127,23 +118,22 @@ const FactoryRender = (props) => {
     }
   };
   const Component = strategiesComponents[parent.type] ?? strategiesComponents.__default__;
-  return /* @__PURE__ */ jsxs(Component, {
-    ...otherProps,
-    children: [Array.isArray(children) && children.length > 0 ? children.map((subComponent, _id) => {
-      return /* @__PURE__ */ jsx(FactoryRender, {
-        data: subComponent
-      }, `${subComponent.key}-${Math.random().toString(36).substring(7)}`);
-    }) : null, typeof children === "string" ? evaluateWithContext(sourceData, children) : null]
-  });
+  return /* @__PURE__ */ jsxs(Component, { ...otherProps, children: [
+    Array.isArray(children) && children.length > 0 ? children.map((subComponent, _id) => {
+      return /* @__PURE__ */ jsx(
+        FactoryRender,
+        {
+          data: subComponent
+        },
+        `${subComponent.key}-${Math.random().toString(36).substring(7)}`
+      );
+    }) : null,
+    typeof children === "string" ? evaluateWithContext(sourceData, children) : null
+  ] });
 };
 const PrintingSystem = forwardRef((props, ref) => {
-  const {
-    templateData: nodeRoot,
-    sourceData,
-    className
-  } = props;
+  const { templateData: nodeRoot, sourceData, className } = props;
   const theme = useTheme();
-  console.log("sourceData", sourceData);
   const classes2 = printingSystemUtilityClasses();
   const listPages = Array.isArray(nodeRoot.pages) && nodeRoot.pages.length > 0 ? nodeRoot.pages : [];
   const rootRef = useRef(null);
@@ -154,11 +144,13 @@ const PrintingSystem = forwardRef((props, ref) => {
         const printWindow = window.open("", "_blank");
         if (printWindow) {
           const printDocument = printWindow.document;
-          printDocument.write("<html><head><title>Contenido a imprimir</title></head><body></body></html>");
+          printDocument.write(
+            "<html><head><title>Contenido a imprimir</title></head><body></body></html>"
+          );
           printDocument.body.appendChild(content.cloneNode(true));
           const styleElement = printDocument.createElement("style");
           styleElement.textContent = `
-                        ${theme.components?.M4LPrintingSystem?.styleOverrides} 
+                        ${theme.components?.M4LPrintingSystem?.styleOverrides}
                     `;
           printDocument.head.appendChild(styleElement);
           printDocument.close();
@@ -167,17 +159,12 @@ const PrintingSystem = forwardRef((props, ref) => {
       }
     }
   }));
-  const Header = () => /* @__PURE__ */ jsx(FactoryRender, {
-    data: nodeRoot.header[0]
-  });
-  const Footer = () => /* @__PURE__ */ jsx(FactoryRender, {
-    data: nodeRoot.footer[0]
-  });
-  return /* @__PURE__ */ jsx(PrintingSystemRoot, {
-    className: clsx(classes2.root, className),
-    ref: rootRef,
-    children: listPages.map((page, id) => {
-      return /* @__PURE__ */ jsx(PageRender, {
+  const Header = () => /* @__PURE__ */ jsx(FactoryRender, { data: nodeRoot.header[0] });
+  const Footer = () => /* @__PURE__ */ jsx(FactoryRender, { data: nodeRoot.footer[0] });
+  return /* @__PURE__ */ jsx(PrintingSystemRoot, { className: clsx(classes2.root, className), ref: rootRef, children: listPages.map((page, id) => {
+    return /* @__PURE__ */ jsx(
+      PageRender,
+      {
         data: page,
         id: id + 1,
         unitSize: nodeRoot.unitSizes,
@@ -187,9 +174,10 @@ const PrintingSystem = forwardRef((props, ref) => {
         FooterGeneral: Footer,
         sourceData,
         templateData: nodeRoot
-      }, page.key);
-    })
-  });
+      },
+      page.key
+    );
+  }) });
 });
 export {
   FactoryRender as F,

package/components/PrintingSystem/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PrintingSystemRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { useBase } from "@m4l/core";
+import { c as classes, g as getSize } from "../../index.fb176a93.js";
+import clsx from "clsx";
+const BodyNode = (props) => {
+  const {
+    children,
+    className,
+    direction = "row",
+    gap = "unset",
+    style,
+    width = "auto",
+    height = "auto",
+    paddingTop = "unset",
+    paddingRight = "unset",
+    paddingBottom = "unset",
+    paddingLeft = "unset",
+    alignX = "unset",
+    alignY = "unset",
+    grow = false
+  } = props;
+  const { unitSize } = useBase();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(classes.bodyNodeRoot, className),
+      style: {
+        flexDirection: direction,
+        gap: getSize(gap, unitSize),
+        width: getSize(width, unitSize),
+        height: getSize(height, unitSize),
+        minWidth: getSize(width, unitSize),
+        minHeight: getSize(height, unitSize),
+        paddingTop: getSize(paddingTop, unitSize),
+        paddingRight: getSize(paddingRight, unitSize),
+        paddingBottom: getSize(paddingBottom, unitSize),
+        paddingLeft: getSize(paddingLeft, unitSize),
+        justifyContent: direction === "row" ? alignX : alignY,
+        alignItems: direction === "row" ? alignY : alignX,
+        flex: grow ? 1 : "unset",
+        ...style
+      },
+      children
+    }
+  );
+};
+export {
+  BodyNode as B
+};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SectionNode } from "../../types";
+import { SectionNode } from '../../types';
 export interface BodyNodeProps extends Omit<SectionNode, 'children' | 'type'> {
     children?: React.ReactNode;
 }