@dotcms/react 0.0.1-alpha.9 → 0.0.1-beta.2

package/next.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/next";

package/next.esm.js

@@ -0,0 +1,665 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect, useLayoutEffect, useRef, useMemo } from 'react';
+import { s as styleInject } from './es.regexp.to-string.esm.js';
+import { getUVEState } from '@dotcms/uve';
+import { UVE_MODE } from '@dotcms/uve/types';
+
+/**
+ * The `PageContext` is a React context that provides access to the DotCMS page context.
+ *
+ * @category Contexts
+ */
+const DotCMSPageContext = /*#__PURE__*/createContext({
+  pageAsset: {},
+  mode: 'production',
+  userComponents: {}
+});
+
+/**
+ * @internal
+ * A React hook that determines if the current environment is in development mode.
+ *
+ * The hook returns `true` if either:
+ *   - The context mode (or the optional `renderMode` argument) is set to 'development', or
+ *   - The application is running inside the DotCMS editor (as determined by `isInsideEditor()`).
+ *
+ * @param {DotCMSPageRendererMode} [renderMode] - Optional override for the render mode.
+ * @returns {boolean} - `true` if in development mode or inside the editor; otherwise, `false`.
+ */
+const useIsDevMode = renderMode => {
+  const {
+    mode
+  } = useContext(DotCMSPageContext);
+  const effectiveMode = renderMode != null ? renderMode : mode;
+  const [isDevMode, setIsDevMode] = useState(effectiveMode === 'development');
+  useEffect(() => {
+    var _getUVEState;
+    // Inside UVE we rely on the UVE state to determine if we are in development mode
+    if ((_getUVEState = getUVEState()) != null && _getUVEState.mode) {
+      var _getUVEState2;
+      const isUVEInEditor = ((_getUVEState2 = getUVEState()) == null ? void 0 : _getUVEState2.mode) === UVE_MODE.EDIT;
+      setIsDevMode(isUVEInEditor);
+      return;
+    }
+    const effectiveMode = renderMode != null ? renderMode : mode;
+    setIsDevMode(effectiveMode === 'development');
+  }, [renderMode, mode]);
+  return isDevMode;
+};
+
+/**
+ * Error message component for when the page body is missing
+ *
+ * @return {JSX.Element} Error message component
+ */
+const ErrorMessage = ({
+  mode
+}) => {
+  useEffect(() => {
+    console.warn('Missing required layout.body property in page');
+  }, []);
+  const isDevMode = useIsDevMode(mode);
+  if (!isDevMode) {
+    return null;
+  }
+  return jsxs("div", {
+    "data-testid": "error-message",
+    style: {
+      padding: '1rem',
+      border: '1px solid #e0e0e0',
+      borderRadius: '4px'
+    },
+    children: [jsxs("p", {
+      style: {
+        margin: '0 0 0.5rem',
+        color: '#666'
+      },
+      children: ["The ", jsx("code", {
+        children: "page"
+      }), " is missing the required ", jsx("code", {
+        children: "layout.body"
+      }), " property."]
+    }), jsx("p", {
+      style: {
+        margin: 0,
+        color: '#666'
+      },
+      children: "Make sure the page asset is properly loaded and includes a layout configuration."
+    })]
+  });
+};
+
+var css_248z$1 = ".Row-module_row__PS0UP {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n    gap: 1rem;\n}\n";
+var styles$1 = {"row":"Row-module_row__PS0UP"};
+styleInject(css_248z$1);
+
+var css_248z = ".Column-module_col-start-1__xylw6 {\n    grid-column-start: 1;\n}\n\n.Column-module_col-start-2__Mod81 {\n    grid-column-start: 2;\n}\n\n.Column-module_col-start-3__HHbXB {\n    grid-column-start: 3;\n}\n\n.Column-module_col-start-4__Uk-Qj {\n    grid-column-start: 4;\n}\n\n.Column-module_col-start-5__jlV8e {\n    grid-column-start: 5;\n}\n\n.Column-module_col-start-6__oi8k0 {\n    grid-column-start: 6;\n}\n\n.Column-module_col-start-7__EmPky {\n    grid-column-start: 7;\n}\n\n.Column-module_col-start-8__hLI1h {\n    grid-column-start: 8;\n}\n\n.Column-module_col-start-9__Kcv9X {\n    grid-column-start: 9;\n}\n\n.Column-module_col-start-10__-MOrt {\n    grid-column-start: 10;\n}\n\n.Column-module_col-start-11__gDEQM {\n    grid-column-start: 11;\n}\n\n.Column-module_col-start-12__omVX6 {\n    grid-column-start: 12;\n}\n\n.Column-module_col-end-1__Ho2y9 {\n    grid-column-end: 1;\n}\n\n.Column-module_col-end-2__KwFu9 {\n    grid-column-end: 2;\n}\n\n.Column-module_col-end-3__vfbJk {\n    grid-column-end: 3;\n}\n\n.Column-module_col-end-4__d4pyL {\n    grid-column-end: 4;\n}\n\n.Column-module_col-end-5__6yPd4 {\n    grid-column-end: 5;\n}\n\n.Column-module_col-end-6__xQpAX {\n    grid-column-end: 6;\n}\n\n.Column-module_col-end-7__CCF7e {\n    grid-column-end: 7;\n}\n\n.Column-module_col-end-8__fVWEi {\n    grid-column-end: 8;\n}\n\n.Column-module_col-end-9__tpIGv {\n    grid-column-end: 9;\n}\n\n.Column-module_col-end-10__SX75K {\n    grid-column-end: 10;\n}\n\n.Column-module_col-end-11__9K1zv {\n    grid-column-end: 11;\n}\n\n.Column-module_col-end-12__oqTiE {\n    grid-column-end: 12;\n}\n\n.Column-module_col-end-13__L-nK9 {\n    grid-column-end: 13;\n}\n";
+var styles = {"col-start-1":"Column-module_col-start-1__xylw6","col-start-2":"Column-module_col-start-2__Mod81","col-start-3":"Column-module_col-start-3__HHbXB","col-start-4":"Column-module_col-start-4__Uk-Qj","col-start-5":"Column-module_col-start-5__jlV8e","col-start-6":"Column-module_col-start-6__oi8k0","col-start-7":"Column-module_col-start-7__EmPky","col-start-8":"Column-module_col-start-8__hLI1h","col-start-9":"Column-module_col-start-9__Kcv9X","col-start-10":"Column-module_col-start-10__-MOrt","col-start-11":"Column-module_col-start-11__gDEQM","col-start-12":"Column-module_col-start-12__omVX6","col-end-1":"Column-module_col-end-1__Ho2y9","col-end-2":"Column-module_col-end-2__KwFu9","col-end-3":"Column-module_col-end-3__vfbJk","col-end-4":"Column-module_col-end-4__d4pyL","col-end-5":"Column-module_col-end-5__6yPd4","col-end-6":"Column-module_col-end-6__xQpAX","col-end-7":"Column-module_col-end-7__CCF7e","col-end-8":"Column-module_col-end-8__fVWEi","col-end-9":"Column-module_col-end-9__tpIGv","col-end-10":"Column-module_col-end-10__SX75K","col-end-11":"Column-module_col-end-11__9K1zv","col-end-12":"Column-module_col-end-12__oqTiE","col-end-13":"Column-module_col-end-13__L-nK9"};
+styleInject(css_248z);
+
+const endClassMap = {
+  1: 'col-end-1',
+  2: 'col-end-2',
+  3: 'col-end-3',
+  4: 'col-end-4',
+  5: 'col-end-5',
+  6: 'col-end-6',
+  7: 'col-end-7',
+  8: 'col-end-8',
+  9: 'col-end-9',
+  10: 'col-end-10',
+  11: 'col-end-11',
+  12: 'col-end-12',
+  13: 'col-end-13'
+};
+const startClassMap = {
+  1: 'col-start-1',
+  2: 'col-start-2',
+  3: 'col-start-3',
+  4: 'col-start-4',
+  5: 'col-start-5',
+  6: 'col-start-6',
+  7: 'col-start-7',
+  8: 'col-start-8',
+  9: 'col-start-9',
+  10: 'col-start-10',
+  11: 'col-start-11',
+  12: 'col-start-12'
+};
+/**
+ * @internal
+ *
+ * Combine classes into a single string.
+ *
+ * @param {string[]} classes
+ * @returns {string} Combined classes
+ */
+const combineClasses = classes => classes.filter(Boolean).join(' ');
+/**
+ * @internal
+ *
+ * Calculates and returns the CSS Grid positioning classes for a column based on its configuration.
+ * Uses a 12-column grid system where columns are positioned using grid-column-start and grid-column-end.
+ *
+ * @example
+ * ```typescript
+ * const classes = getColumnPositionClasses({
+ *   leftOffset: 1, // Starts at the first column
+ *   width: 6      // Spans 6 columns
+ * });
+ * // Returns: { startClass: 'col-start-1', endClass: 'col-end-7' }
+ * ```
+ *
+ * @param {DotPageAssetLayoutColumn} column - Column configuration object
+ * @param {number} column.leftOffset - Starting position (0-based) in the grid
+ * @param {number} column.width - Number of columns to span
+ * @returns {{ startClass: string, endClass: string }} Object containing CSS class names for grid positioning
+ */
+const getColumnPositionClasses = column => {
+  const {
+    leftOffset,
+    width
+  } = column;
+  const startClass = startClassMap[leftOffset];
+  const endClass = endClassMap[leftOffset + width];
+  return {
+    startClass,
+    endClass
+  };
+};
+/**
+ * @internal
+ *
+ * Helper function that returns an object containing the dotCMS data attributes.
+ * @param {DotCMSContentlet} contentlet - The contentlet to get the attributes for
+ * @param {string} container - The container to get the attributes for
+ * @returns {DotContentletAttributes} The dotCMS data attributes
+ */
+function getDotContentletAttributes(contentlet, container) {
+  return {
+    'data-dot-identifier': contentlet == null ? void 0 : contentlet.identifier,
+    'data-dot-basetype': contentlet == null ? void 0 : contentlet.baseType,
+    'data-dot-title': (contentlet == null ? void 0 : contentlet.widgetTitle) || (contentlet == null ? void 0 : contentlet.title),
+    'data-dot-inode': contentlet == null ? void 0 : contentlet.inode,
+    'data-dot-type': contentlet == null ? void 0 : contentlet.contentType,
+    'data-dot-container': container,
+    'data-dot-on-number-of-pages': contentlet == null ? void 0 : contentlet.onNumberOfPages
+  };
+}
+/**
+ * @internal
+ *
+ * Retrieves container data from a DotCMS page asset using the container reference.
+ * This function processes the container information and returns a standardized format
+ * for container editing.
+ *
+ * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
+ * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
+ * @throws {Error} When page asset is invalid or container is not found
+ * @returns {EditableContainerData} Formatted container data for editing
+ *
+ * @example
+ * const containerData = getContainersData(pageAsset, containerRef);
+ * // Returns: { uuid: '123', identifier: 'cont1', acceptTypes: 'type1,type2', maxContentlets: 5 }
+ */
+const getContainersData = (dotCMSPageAsset, columContainer) => {
+  var _containerStructures$, _container$parentPerm, _container$maxContent;
+  const {
+    identifier,
+    uuid
+  } = columContainer;
+  const dotContainer = dotCMSPageAsset.containers[identifier];
+  if (!dotContainer) {
+    return null;
+  }
+  const {
+    containerStructures,
+    container
+  } = dotContainer;
+  const acceptTypes = (_containerStructures$ = containerStructures == null ? void 0 : containerStructures.map(structure => structure.contentTypeVar).join(',')) != null ? _containerStructures$ : '';
+  const variantId = container == null || (_container$parentPerm = container.parentPermissionable) == null ? void 0 : _container$parentPerm.variantId;
+  const maxContentlets = (_container$maxContent = container == null ? void 0 : container.maxContentlets) != null ? _container$maxContent : 0;
+  const path = container == null ? void 0 : container.path;
+  return {
+    uuid,
+    variantId,
+    acceptTypes,
+    maxContentlets,
+    identifier: path != null ? path : identifier
+  };
+};
+/**
+ * @internal
+ *
+ * Retrieves the contentlets (content items) associated with a specific container.
+ * Handles different UUID formats and provides warning for missing contentlets.
+ *
+ * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
+ * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
+ * @returns {DotCMSContentlet[]} Array of contentlets in the container
+ *
+ * @example
+ * const contentlets = getContentletsInContainer(pageAsset, containerRef);
+ * // Returns: [{ identifier: 'cont1', ... }, { identifier: 'cont2', ... }]
+ */
+const getContentletsInContainer = (dotCMSPageAsset, columContainer) => {
+  const {
+    identifier,
+    uuid
+  } = columContainer;
+  const {
+    contentlets
+  } = dotCMSPageAsset.containers[identifier];
+  const contentletsInContainer = contentlets[`uuid-${uuid}`] || contentlets[`uuid-dotParser_${uuid}`] || [];
+  if (!contentletsInContainer) {
+    console.warn(`We couldn't find the contentlets for the container with the identifier ${identifier} and the uuid ${uuid} becareful by adding content to this container.\nWe recommend to change the container in the layout and add the content again.`);
+  }
+  return contentletsInContainer;
+};
+/**
+ * @internal
+ *
+ * Generates the required DotCMS data attributes for a container element.
+ * These attributes are used by DotCMS for container identification and functionality.
+ *
+ * @param {EditableContainerData} params - Container data including uuid, identifier, acceptTypes, and maxContentlets
+ * @returns {DotContainerAttributes} Object containing all necessary data attributes
+ *
+ * @example
+ * const attributes = getDotContainerAttributes({
+ *   uuid: '123',
+ *   identifier: 'cont1',
+ *   acceptTypes: 'type1,type2',
+ *   maxContentlets: 5
+ * });
+ * // Returns: { 'data-dot-object': 'container', 'data-dot-identifier': 'cont1', ... }
+ */
+function getDotContainerAttributes({
+  uuid,
+  identifier,
+  acceptTypes,
+  maxContentlets
+}) {
+  return {
+    'data-dot-object': 'container',
+    'data-dot-accept-types': acceptTypes,
+    'data-dot-identifier': identifier,
+    'data-max-contentlets': maxContentlets.toString(),
+    'data-dot-uuid': uuid
+  };
+}
+
+const EMPTY_CONTAINER_STYLE = {
+  width: '100%',
+  backgroundColor: '#ECF0FD',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: '#030E32',
+  height: '10rem'
+};
+/**
+ * @internal
+ *
+ * Component to display when a container is not found in the system.
+ * Only renders in development mode for debugging purposes.
+ *
+ * @component
+ * @param {Object} props - Component properties
+ * @param {string} props.identifier - Container identifier
+ * @returns {JSX.Element | null} Message about missing container or null in production
+ */
+const ContainerNoFound = ({
+  identifier
+}) => {
+  const isDevMode = useIsDevMode();
+  useEffect(() => {
+    if (!isDevMode) {
+      return;
+    }
+    console.error(`Container with identifier ${identifier} not found`);
+  }, [identifier, isDevMode]);
+  if (!isDevMode) {
+    return null;
+  }
+  return jsxs("div", {
+    "data-testid": "container-not-found",
+    style: EMPTY_CONTAINER_STYLE,
+    children: ["This container with identifier ", identifier, " was not found."]
+  });
+};
+/**
+ * @internal
+ *
+ * Component to display when a container is empty.
+ *
+ * @param {DotContainerAttributes} dotAttributes
+ * @return {*}
+ */
+const EmptyContainer = dotAttributes => {
+  const isDevMode = useIsDevMode();
+  if (!isDevMode) {
+    return null;
+  }
+  return jsx("div", Object.assign({}, dotAttributes, {
+    style: EMPTY_CONTAINER_STYLE,
+    children: jsx("span", {
+      "data-testid": "empty-container-message",
+      children: "This container is empty."
+    })
+  }));
+};
+
+/**
+ * @internal
+ * A custom React hook that checks whether a referenced HTMLDivElement has visible content based on its height.
+ *
+ * @param {RefObject<HTMLDivElement>} ref - A React ref object pointing to an HTMLDivElement.
+ * @returns {boolean} - Returns true if the element's height is greater than zero (indicating visible content), otherwise false.
+ *
+ * @example
+ * import { useRef } from 'react';
+ * import { useCheckVisibleContent } from 'src/lib/next/hooks/useCheckVisibleContent';
+ *
+ * function MyComponent() {
+ *   const contentRef = useRef<HTMLDivElement>(null);
+ *   const isContentVisible = useCheckVisibleContent(contentRef);
+ *
+ *   return (
+ *     <div ref={contentRef}>
+ *       {isContentVisible ? 'Content is visible' : 'Content is not visible'}
+ *     </div>
+ *   );
+ * }
+ */
+const useCheckVisibleContent = ref => {
+  const [haveContent, setHaveContent] = useState(false);
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      setHaveContent(false);
+      return;
+    }
+    const {
+      height
+    } = ref.current.getBoundingClientRect();
+    setHaveContent(height > 0);
+  }, [ref]);
+  return haveContent;
+};
+
+/**
+ * @internal
+ *
+ * Renders a fallback component when no matching component is found for a content type
+ *
+ * @component
+ * @param {DotCMSFallbackComponentProps} props - Component properties
+ * @param {NoComponentType} [props.UserNoComponent] - Optional custom component to render
+ * @param {DotCMSContentlet} [props.contentlet] - The contentlet that couldn't be rendered
+ * @returns {JSX.Element} The rendered fallback component
+ *
+ * @example
+ * ```tsx
+ * <FallbackComponent
+ *   UserNoComponent={CustomNoComponent}
+ *   contentlet={contentlet}
+ * />
+ * ```
+ */
+function FallbackComponent({
+  UserNoComponent,
+  contentlet
+}) {
+  const isDevMode = useIsDevMode();
+  if (!isDevMode) {
+    return null;
+  }
+  const NoComponentFound = UserNoComponent || NoComponent;
+  return jsx(NoComponentFound, Object.assign({}, contentlet));
+}
+/**
+ * @internal
+ *
+ * Component to render when there is no component for the content type.
+ *
+ * @param {DotCMSContentlet} contentType - The content type that couldn't be rendered
+ * @return {*}
+ */
+function NoComponent({
+  contentType
+}) {
+  return jsxs("div", {
+    "data-testid": "no-component",
+    children: ["No Component for ", jsx("strong", {
+      children: contentType
+    }), "."]
+  });
+}
+
+/**
+ * Contentlet component that renders DotCMS content with development mode support
+ *
+ * @component
+ * @param {DotCMSContentletRendererProps} props - Component properties
+ * @param {DotCMSContentlet} props.contentlet - The contentlet to be rendered
+ * @param {string} props.container - The container identifier
+ * @returns {JSX.Element} Rendered contentlet with appropriate wrapper and attributes
+ *
+ * @example
+ * ```tsx
+ * <Contentlet
+ *   contentlet={myContentlet}
+ *   container="container-1"
+ * />
+ * ```
+ */
+function Contentlet({
+  contentlet,
+  container
+}) {
+  const ref = useRef(null);
+  const isDevMode = useIsDevMode();
+  const haveContent = useCheckVisibleContent(ref);
+  const style = useMemo(() => isDevMode ? {
+    minHeight: haveContent ? undefined : '4rem'
+  } : {}, [isDevMode, haveContent]);
+  const dotAttributes = useMemo(() => isDevMode ? getDotContentletAttributes(contentlet, container) : {}, [isDevMode, contentlet, container]);
+  return jsx("div", Object.assign({}, dotAttributes, {
+    "data-dot-object": "contentlet",
+    ref: ref,
+    style: style,
+    children: jsx(CustomComponent, {
+      contentlet: contentlet
+    })
+  }));
+}
+/**
+ * Renders a custom component based on the contentlet type or falls back to a default component
+ *
+ * @component
+ * @param {CustomComponentProps} props - Component properties
+ * @param {DotCMSContentlet} props.contentlet - The contentlet data to render
+ * @returns {JSX.Element} The rendered custom component or fallback component
+ *
+ * @internal
+ */
+function CustomComponent({
+  contentlet
+}) {
+  const {
+    userComponents
+  } = useContext(DotCMSPageContext);
+  const UserComponent = userComponents[contentlet == null ? void 0 : contentlet.contentType];
+  if (UserComponent) {
+    return jsx(UserComponent, Object.assign({}, contentlet));
+  }
+  const UserNoComponent = userComponents['CustomNoComponent'];
+  return jsx(FallbackComponent, {
+    UserNoComponent: UserNoComponent,
+    contentlet: contentlet
+  });
+}
+
+/**
+ * @internal
+ *
+ * Container component that renders DotCMS containers and their contentlets.
+ * This component is responsible for:
+ * - Rendering container content based on DotCMS Page API data
+ * - Handling empty container states
+ * - Providing proper data attributes for DotCMS functionality
+ * - Managing container contentlets rendering
+ *
+ * @component
+ * @param {DotCMSContainerRendererProps} props - Component properties
+ * @returns {JSX.Element} Rendered container with its contentlets or empty state message
+ *
+ * @example
+ * ```tsx
+ * <Container container={containerData} />
+ * ```
+ */
+function Container({
+  container
+}) {
+  const {
+    pageAsset
+  } = useContext(DotCMSPageContext);
+  const containerData = useMemo(() => getContainersData(pageAsset, container), [pageAsset, container]);
+  const contentlets = useMemo(() => getContentletsInContainer(pageAsset, container), [pageAsset, container]);
+  if (!containerData) {
+    return jsx(ContainerNoFound, {
+      identifier: container.identifier
+    });
+  }
+  const isEmpty = contentlets.length === 0;
+  const dotAttributes = getDotContainerAttributes(containerData);
+  if (isEmpty) {
+    return jsx(EmptyContainer, Object.assign({}, dotAttributes));
+  }
+  return jsx("div", Object.assign({}, dotAttributes, {
+    children: contentlets.map(contentlet => jsx(Contentlet, {
+      contentlet: contentlet,
+      container: JSON.stringify(containerData)
+    }, contentlet.identifier))
+  }));
+}
+
+/**
+ * @internal
+ *
+ * Renders a Column component that represents a single column in a 12-column grid system.
+ * The column's position and width are determined by the leftOffset and width properties
+ * from the dotCMS Page API. Uses CSS Grid classes for positioning.
+ *
+ * @example
+ * ```tsx
+ * <Column column={{
+ *   leftOffset: 0,
+ *   width: 6,
+ *   styleClass: "custom-class",
+ *   containers: []
+ * }} />
+ * ```
+ *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @export
+ * @param {ColumnProps} { column } - Column configuration object
+ * @return {JSX.Element} Rendered column with its containers positioned in the grid
+ */
+function Column({
+  column
+}) {
+  const {
+    startClass,
+    endClass
+  } = getColumnPositionClasses(column);
+  const combinedClasses = combineClasses([styles[endClass], styles[startClass]]);
+  return jsx("div", {
+    "data-dot": "column",
+    className: combinedClasses,
+    children: jsx("div", {
+      className: column.styleClass,
+      children: column.containers.map(container => jsx(Container, {
+        container: container
+      }, `${container.identifier}-${container.uuid}`))
+    })
+  });
+}
+
+/**
+ * This component renders a row with all it's content using the layout provided by dotCMS Page API.
+ *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @category Components
+ * @param {React.ForwardedRef<HTMLDivElement, DotCMS>} ref
+ * @return {JSX.Element} Rendered rows with columns
+ */
+const Row = ({
+  row
+}) => {
+  const customRowClass = `${row.styleClass || ''} ${styles$1.row}`;
+  return jsx("div", {
+    className: "dot-row-container",
+    children: jsx("div", {
+      className: customRowClass,
+      "data-dot-object": 'row',
+      children: row.columns.map((column, index) => jsx(Column, {
+        column: column
+      }, index))
+    })
+  });
+};
+
+/**
+ * DotCMSLayoutBody component renders the layout body for a DotCMS page.
+ *
+ * It utilizes the page asset's layout body to render rows using the Row component.
+ * If the layout body does not exist, it renders an error message.
+ * It also provides context (DotCMSPageContext) with the page asset, optional user components,
+ * and the renderer mode to its children.
+ *
+ * @public
+ * @component
+ * @param {Object} props - Component properties.
+ * @param {DotCMSPageAsset} props.page - The DotCMS page asset containing the layout information.
+ * @param {Record<string, React.ComponentType<DotCMSContentlet>>} [props.components] - Optional mapping of custom components for content rendering.
+ * @param {DotCMSPageRendererMode} [props.mode='production'] - The renderer mode; defaults to 'production'. Alternate modes might trigger different behaviors.
+ *
+ * @returns {JSX.Element} The rendered DotCMS page body or an error message if the layout body is missing.
+ *
+ * -------------------------------------------------------------------
+ *
+ * El componente DotCMSLayoutBody renderiza el cuerpo del layout para una página de DotCMS.
+ *
+ * Utiliza el "body" del layout del asset de la página para renderizar las filas mediante el componente Row.
+ * Si el "body" del layout no está presente, renderiza un mensaje de error.
+ * También provee un contexto (DotCMSPageContext) con el asset de la página, componentes de usuario opcionales,
+ * y el modo del renderizado para sus componentes hijos.
+ */
+const DotCMSLayoutBody = ({
+  page,
+  components: _components = {},
+  mode: _mode = 'production'
+}) => {
+  var _page$layout;
+  const dotCMSPageBody = page == null || (_page$layout = page.layout) == null ? void 0 : _page$layout.body;
+  if (!dotCMSPageBody) {
+    return jsx(ErrorMessage, {
+      mode: _mode
+    });
+  }
+  const contextValue = {
+    pageAsset: page,
+    userComponents: _components,
+    mode: _mode
+  };
+  return jsx(DotCMSPageContext.Provider, {
+    value: contextValue,
+    children: dotCMSPageBody.rows.map((row, index) => jsx(Row, {
+      row: row
+    }, index))
+  });
+};
+
+export { DotCMSLayoutBody };