@dotcms/react 0.0.1-beta.9 → 1.0.0-next.1

package/next.esm.js

@@ -1,738 +0,0 @@
-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 dotCMS page asset's layout body to render the page body.
- * If the layout body does not exist, it renders an error message in the mode is `development`.
- *
- * @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] - 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.
- *
- */
-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))
-  });
-};
-
-/**
- * Custom hook to determine if the current UVE (Universal Visual Editor) mode
- * matches the specified mode. This hook is useful for conditionally rendering
- * components based on the UVE mode.
- *
- * @param {UVE_MODE} when - The UVE mode to check against.
- * @returns {boolean} True if the current UVE mode matches the specified mode, otherwise false.
- *
- * @example
- * // Basic usage: Check if the UVE is in edit mode
- * const showInEditMode = useShowInUVE(UVE_MODE.EDIT);
- * if (showInEditMode) {
- *     // Render edit-specific components
- * }
- *
- * @example
- * // Check if the UVE is in preview mode
- * const showInPreviewMode = useShowInUVE(UVE_MODE.PREVIEW);
- * if (showInPreviewMode) {
- *     // Render preview-specific components
- * }
- *
- * @example
- * // Check if the UVE is in live mode
- * const showInLiveMode = useShowInUVE(UVE_MODE.LIVE);
- * if (showInLiveMode) {
- *     // Render live-specific components
- * }
- */
-const useShowInUVE = when => {
-  const [show, setShow] = useState(false);
-  useEffect(() => {
-    var _getUVEState;
-    setShow(((_getUVEState = getUVEState()) == null ? void 0 : _getUVEState.mode) === when);
-  }, [when]);
-  return show;
-};
-
-/**
- * DotCMSShow component is used to conditionally render its children
- * based on the Universal Visual Editor (UVE) mode. It checks if the UVE
- * is in a specified mode and only renders its children in that case.
- *
- * @param {Object} props - The component props.
- * @param {React.ReactNode} props.children - The children to be rendered when the condition is met.
- * @param {UVE_MODE} [props.when=UVE_MODE.EDIT] - The UVE mode in which the children should be rendered.
- * @returns {React.ReactNode | null} The children if the current UVE mode matches the `when` prop, otherwise null.
- *
- * @example
- * // Basic usage: Render content only in edit mode
- * <DotCMSShow when={UVE_MODE.EDIT}>
- *     <div>Edit Mode Content</div>
- * </DotCMSShow>
- *
- * // This will render <div>Edit Mode Content</div> only if the UVE is in edit mode.
- *
- * @example
- * // Render content in preview mode
- * <DotCMSShow when={UVE_MODE.PREVIEW}>
- *     <MyCustomPreviewComponent />
- * </DotCMSShow>
- *
- * // MyCustomPreviewComponent will only be rendered if the UVE is in preview mode.
- *
- * @example
- * // Render content in live mode
- * <DotCMSShow when={UVE_MODE.LIVE}>
- *     <LiveContentComponent />
- * </DotCMSShow>
- *
- * // LiveContentComponent will only be rendered if the UVE is in live mode.
- */
-const DotCMSShow = ({
-  children,
-  when: _when = UVE_MODE.EDIT
-}) => {
-  const show = useShowInUVE(_when);
-  if (!show) {
-    return null;
-  }
-  return children;
-};
-
-export { DotCMSLayoutBody, DotCMSShow, useShowInUVE };