@dotcms/react 0.0.1-beta.2 → 0.0.1-beta.20

package/index.esm.js

@@ -1,7 +1,9 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { s as styleInject, f as functionUncurryThis, t as toString$4, r as requireObjectCoercible$1, a as toIntegerOrInfinity$1, i as iteratorDefine, b as internalState, c as createIterResultObject$2, d as fails$2, w as wellKnownSymbol$4, e as descriptors, g as classofRaw$1, h as aCallable$2, j as functionBindNative, m as makeBuiltInExports, o as objectDefineProperty, k as objectIsPrototypeOf, l as functionCall, n as anObject$4, p as getMethod$2, q as iterators, u as getBuiltIn$1, v as isCallable$2, x as classof$3, y as inspectSource$1, z as createPropertyDescriptor$2, A as isNullOrUndefined$1, B as tryToString$1, C as toObject$1, D as lengthOfArrayLike$1, E as global$3, F as defineBuiltIn$5, G as arraySlice$2, _ as _export, H as setToStringTag$2, I as iteratorCreateConstructor, J as isObject$1, K as objectCreate, L as hasOwnProperty_1, M as objectAssign } from './es.regexp.to-string.esm.js';
+import { s as styleInject, a as anObject$6, f as functionCall, h as hasOwnProperty_1, o as objectIsPrototypeOf, b as functionName, d as defineBuiltIn$6, c as fails$3, t as toString$4, e as functionUncurryThis, r as requireObjectCoercible$1, g as toIntegerOrInfinity$1, i as iteratorDefine, j as internalState, k as createIterResultObject$2, w as wellKnownSymbol$4, l as descriptors, m as classofRaw$1, n as aCallable$2, p as functionBindNative, q as makeBuiltInExports, u as objectDefineProperty, v as getMethod$2, x as iterators, y as getBuiltIn$1, z as isCallable$2, A as classof$3, B as inspectSource$1, C as createPropertyDescriptor$2, D as isNullOrUndefined$1, E as tryToString$1, F as toObject$1, G as lengthOfArrayLike$1, H as global$3, I as arraySlice$2, _ as _export, J as setToStringTag$2, K as iteratorCreateConstructor, L as isObject$1, M as objectCreate, N as objectAssign } from './es.json.stringify.esm.js';
 import { useState, useEffect, createContext, useRef, useContext, createElement, forwardRef } from 'react';
-import { isInsideEditor, initEditor, updateNavigation, destroyEditor, DotCmsClient, postMessageToEditor, CLIENT_ACTIONS, NOTIFY_CLIENT, initInlineEditing } from '@dotcms/client';
+import { isInsideEditor, initEditor, updateNavigation, destroyEditor, postMessageToEditor, CLIENT_ACTIONS, DotCmsClient, NOTIFY_CLIENT, initInlineEditing } from '@dotcms/client';
+import { createUVESubscription } from '@dotcms/uve';
+import { UVEEventType } from '@dotcms/uve/types';
 import { Editor } from '@tinymce/tinymce-react';
 
 var isPure = false;
@@ -49,12 +51,13 @@ const useDotcmsEditor = ({
    */
   useEffect(() => {
     const insideEditor = isInsideEditor();
-    const client = DotCmsClient.instance;
     if (!insideEditor || !onReload) {
       return;
     }
-    client.editor.on('changes', () => onReload == null ? void 0 : onReload());
-    return () => client.editor.off('changes');
+    const {
+      unsubscribe
+    } = createUVESubscription(UVEEventType.CONTENT_CHANGES, () => onReload());
+    return () => unsubscribe();
   }, [onReload]);
   /**
    * Sends a message to the editor when the client is ready.
@@ -69,20 +72,21 @@ const useDotcmsEditor = ({
     });
   }, [pathname, editor]);
   /**
-   * Updates the page asset when changes are made in the editor.
+   * Old
    */
   useEffect(() => {
     if (!isInsideEditor()) {
       return;
     }
-    const client = DotCmsClient.instance;
-    client.editor.on('changes', data => {
+    const {
+      unsubscribe
+    } = createUVESubscription(UVEEventType.CONTENT_CHANGES, data => {
       const pageAsset = data;
       setState(state => Object.assign({}, state, {
         pageAsset
       }));
     });
-    return () => client.editor.off('changes');
+    return () => unsubscribe();
   }, []);
   return state;
 };
@@ -475,6 +479,63 @@ function DotcmsLayout(dotPageProps) {
   });
 }
 
+var anObject$5 = anObject$6;
+
+// `RegExp.prototype.flags` getter implementation
+// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
+var regexpFlags = function () {
+  var that = anObject$5(this);
+  var result = '';
+  if (that.hasIndices) result += 'd';
+  if (that.global) result += 'g';
+  if (that.ignoreCase) result += 'i';
+  if (that.multiline) result += 'm';
+  if (that.dotAll) result += 's';
+  if (that.unicode) result += 'u';
+  if (that.unicodeSets) result += 'v';
+  if (that.sticky) result += 'y';
+  return result;
+};
+
+var call$5 = functionCall;
+var hasOwn$2 = hasOwnProperty_1;
+var isPrototypeOf$1 = objectIsPrototypeOf;
+var regExpFlags = regexpFlags;
+
+var RegExpPrototype$1 = RegExp.prototype;
+
+var regexpGetFlags = function (R) {
+  var flags = R.flags;
+  return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn$2(R, 'flags') && isPrototypeOf$1(RegExpPrototype$1, R)
+    ? call$5(regExpFlags, R) : flags;
+};
+
+var PROPER_FUNCTION_NAME = functionName.PROPER;
+var defineBuiltIn$5 = defineBuiltIn$6;
+var anObject$4 = anObject$6;
+var $toString$2 = toString$4;
+var fails$2 = fails$3;
+var getRegExpFlags = regexpGetFlags;
+
+var TO_STRING = 'toString';
+var RegExpPrototype = RegExp.prototype;
+var nativeToString = RegExpPrototype[TO_STRING];
+
+var NOT_GENERIC = fails$2(function () { return nativeToString.call({ source: 'a', flags: 'b' }) !== '/a/b'; });
+// FF44- RegExp#toString has a wrong name
+var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name !== TO_STRING;
+
+// `RegExp.prototype.toString` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
+if (NOT_GENERIC || INCORRECT_NAME) {
+  defineBuiltIn$5(RegExpPrototype, TO_STRING, function toString() {
+    var R = anObject$4(this);
+    var pattern = $toString$2(R.source);
+    var flags = $toString$2(getRegExpFlags(R));
+    return '/' + pattern + '/' + flags;
+  }, { unsafe: true });
+}
+
 var uncurryThis$9 = functionUncurryThis;
 var toIntegerOrInfinity = toIntegerOrInfinity$1;
 var toString$3 = toString$4;
@@ -543,7 +604,7 @@ defineIterator(String, 'String', function (iterated) {
   return createIterResultObject$1(point, false);
 });
 
-var fails$1 = fails$2;
+var fails$1 = fails$3;
 var wellKnownSymbol$3 = wellKnownSymbol$4;
 var DESCRIPTORS$5 = descriptors;
 var IS_PURE = isPure;
@@ -628,7 +689,7 @@ var anInstance$2 = function (it, Prototype) {
 };
 
 var call$4 = functionCall;
-var anObject$3 = anObject$4;
+var anObject$3 = anObject$6;
 var getMethod$1 = getMethod$2;
 
 var iteratorClose$1 = function (iterator, kind, value) {
@@ -651,7 +712,7 @@ var iteratorClose$1 = function (iterator, kind, value) {
   return value;
 };
 
-var anObject$2 = anObject$4;
+var anObject$2 = anObject$6;
 var iteratorClose = iteratorClose$1;
 
 // call something on iterator step with safe closing on error
@@ -675,7 +736,7 @@ var isArrayIteratorMethod$1 = function (it) {
 };
 
 var uncurryThis$6 = functionUncurryThis;
-var fails = fails$2;
+var fails = fails$3;
 var isCallable$1 = isCallable$2;
 var classof$2 = classof$3;
 var getBuiltIn = getBuiltIn$1;
@@ -751,7 +812,7 @@ var getIteratorMethod$3 = function (it) {
 
 var call$3 = functionCall;
 var aCallable = aCallable$2;
-var anObject$1 = anObject$4;
+var anObject$1 = anObject$6;
 var tryToString = tryToString$1;
 var getIteratorMethod$2 = getIteratorMethod$3;
 
@@ -1010,7 +1071,7 @@ var safeGetBuiltIn$1 = function (name) {
   return descriptor && descriptor.value;
 };
 
-var defineBuiltIn$4 = defineBuiltIn$5;
+var defineBuiltIn$4 = defineBuiltIn$6;
 
 var defineBuiltIns$1 = function (target, src, options) {
   for (var key in src) defineBuiltIn$4(target, key, src[key], options);
@@ -1068,7 +1129,7 @@ var call$1 = functionCall;
 var uncurryThis$4 = functionUncurryThis;
 var DESCRIPTORS$2 = descriptors;
 var USE_NATIVE_URL$1 = urlConstructorDetection;
-var defineBuiltIn$3 = defineBuiltIn$5;
+var defineBuiltIn$3 = defineBuiltIn$6;
 var defineBuiltInAccessor$2 = defineBuiltInAccessor$3;
 var defineBuiltIns = defineBuiltIns$1;
 var setToStringTag$1 = setToStringTag$2;
@@ -1079,7 +1140,7 @@ var isCallable = isCallable$2;
 var hasOwn$1 = hasOwnProperty_1;
 var bind$1 = functionBindContext;
 var classof = classof$3;
-var anObject = anObject$4;
+var anObject = anObject$6;
 var isObject = isObject$1;
 var $toString$1 = toString$4;
 var create = objectCreate;
@@ -1483,7 +1544,7 @@ var USE_NATIVE_URL = urlConstructorDetection;
 var global = global$3;
 var bind = functionBindContext;
 var uncurryThis$3 = functionUncurryThis;
-var defineBuiltIn$2 = defineBuiltIn$5;
+var defineBuiltIn$2 = defineBuiltIn$6;
 var defineBuiltInAccessor$1 = defineBuiltInAccessor$3;
 var anInstance = anInstance$2;
 var hasOwn = hasOwnProperty_1;
@@ -2534,7 +2595,7 @@ $({ target: 'URL', proto: true, enumerable: true }, {
   }
 });
 
-var defineBuiltIn$1 = defineBuiltIn$5;
+var defineBuiltIn$1 = defineBuiltIn$6;
 var uncurryThis$2 = functionUncurryThis;
 var toString$1 = toString$4;
 var validateArgumentsLength$1 = validateArgumentsLength$4;
@@ -2583,7 +2644,7 @@ if (params$1 + '' !== 'a=2') {
   }, { enumerable: true, unsafe: true });
 }
 
-var defineBuiltIn = defineBuiltIn$5;
+var defineBuiltIn = defineBuiltIn$6;
 var uncurryThis$1 = functionUncurryThis;
 var toString = toString$4;
 var validateArgumentsLength = validateArgumentsLength$4;

package/next.esm.js

@@ -1,7 +1,8 @@
 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 { s as styleInject } from './es.json.stringify.esm.js';
 import { getUVEState } from '@dotcms/uve';
+import { DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_REACT, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getContainersData, getContentletsInContainer, getDotContainerAttributes, getColumnPositionClasses, combineClasses } from '@dotcms/uve/internal';
 import { UVE_MODE } from '@dotcms/uve/types';
 
 /**
@@ -20,18 +21,15 @@ const DotCMSPageContext = /*#__PURE__*/createContext({
  * 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()`).
+ *   - The application is running inside the DotCMS editor (as determined by `getUVEState()`).
  *
- * @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 useIsDevMode = () => {
   const {
     mode
   } = useContext(DotCMSPageContext);
-  const effectiveMode = renderMode != null ? renderMode : mode;
-  const [isDevMode, setIsDevMode] = useState(effectiveMode === 'development');
+  const [isDevMode, setIsDevMode] = useState(mode === 'development');
   useEffect(() => {
     var _getUVEState;
     // Inside UVE we rely on the UVE state to determine if we are in development mode
@@ -41,9 +39,8 @@ const useIsDevMode = renderMode => {
       setIsDevMode(isUVEInEditor);
       return;
     }
-    const effectiveMode = renderMode != null ? renderMode : mode;
-    setIsDevMode(effectiveMode === 'development');
-  }, [renderMode, mode]);
+    setIsDevMode(mode === DEVELOPMENT_MODE);
+  }, [mode]);
   return isDevMode;
 };
 
@@ -52,17 +49,12 @@ const useIsDevMode = renderMode => {
  *
  * @return {JSX.Element} Error message component
  */
-const ErrorMessage = ({
-  mode
-}) => {
+const ErrorMessage = () => {
+  const isDevMode = useIsDevMode();
   useEffect(() => {
     console.warn('Missing required layout.body property in page');
   }, []);
-  const isDevMode = useIsDevMode(mode);
-  if (!isDevMode) {
-    return null;
-  }
-  return jsxs("div", {
+  return isDevMode && jsxs("div", {
     "data-testid": "error-message",
     style: {
       padding: '1rem',
@@ -97,207 +89,6 @@ var css_248z = ".Column-module_col-start-1__xylw6 {\n    grid-column-start: 1;\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
  *
@@ -309,7 +100,7 @@ const EMPTY_CONTAINER_STYLE = {
  * @param {string} props.identifier - Container identifier
  * @returns {JSX.Element | null} Message about missing container or null in production
  */
-const ContainerNoFound = ({
+const ContainerNotFound = ({
   identifier
 }) => {
   const isDevMode = useIsDevMode();
@@ -324,7 +115,7 @@ const ContainerNoFound = ({
   }
   return jsxs("div", {
     "data-testid": "container-not-found",
-    style: EMPTY_CONTAINER_STYLE,
+    style: EMPTY_CONTAINER_STYLE_REACT,
     children: ["This container with identifier ", identifier, " was not found."]
   });
 };
@@ -342,7 +133,7 @@ const EmptyContainer = dotAttributes => {
     return null;
   }
   return jsx("div", Object.assign({}, dotAttributes, {
-    style: EMPTY_CONTAINER_STYLE,
+    style: EMPTY_CONTAINER_STYLE_REACT,
     children: jsx("span", {
       "data-testid": "empty-container-message",
       children: "This container is empty."
@@ -493,7 +284,7 @@ function CustomComponent({
   if (UserComponent) {
     return jsx(UserComponent, Object.assign({}, contentlet));
   }
-  const UserNoComponent = userComponents['CustomNoComponent'];
+  const UserNoComponent = userComponents[CUSTOM_NO_COMPONENT];
   return jsx(FallbackComponent, {
     UserNoComponent: UserNoComponent,
     contentlet: contentlet
@@ -528,7 +319,7 @@ function Container({
   const containerData = useMemo(() => getContainersData(pageAsset, container), [pageAsset, container]);
   const contentlets = useMemo(() => getContentletsInContainer(pageAsset, container), [pageAsset, container]);
   if (!containerData) {
-    return jsx(ContainerNoFound, {
+    return jsx(ContainerNotFound, {
       identifier: container.identifier
     });
   }
@@ -598,7 +389,7 @@ function Column({
 const Row = ({
   row
 }) => {
-  const customRowClass = `${row.styleClass || ''} ${styles$1.row}`;
+  const customRowClass = combineClasses([row.styleClass || '', styles$1.row]);
   return jsx("div", {
     className: "dot-row-container",
     children: jsx("div", {
@@ -614,28 +405,18 @@ const Row = ({
 /**
  * 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.
+ * 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] - Optional mapping of custom components for content rendering.
+ * @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.
  *
- * -------------------------------------------------------------------
- *
- * 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,
@@ -644,11 +425,6 @@ const DotCMSLayoutBody = ({
 }) => {
   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,
@@ -656,10 +432,93 @@ const DotCMSLayoutBody = ({
   };
   return jsx(DotCMSPageContext.Provider, {
     value: contextValue,
-    children: dotCMSPageBody.rows.map((row, index) => jsx(Row, {
+    children: dotCMSPageBody ? dotCMSPageBody.rows.map((row, index) => jsx(Row, {
       row: row
-    }, index))
+    }, index)) : jsx(ErrorMessage, {})
   });
 };
 
-export { DotCMSLayoutBody };
+/**
+ * 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 = useDotCMSShowWhen(UVE_MODE.EDIT);
+ * if (showInEditMode) {
+ *     // Render edit-specific components
+ * }
+ *
+ * @example
+ * // Check if the UVE is in preview mode
+ * const showInPreviewMode = useDotCMSShowWhen(UVE_MODE.PREVIEW);
+ * if (showInPreviewMode) {
+ *     // Render preview-specific components
+ * }
+ *
+ * @example
+ * // Check if the UVE is in live mode
+ * const showInLiveMode = useDotCMSShowWhen(UVE_MODE.LIVE);
+ * if (showInLiveMode) {
+ *     // Render live-specific components
+ * }
+ */
+const useDotCMSShowWhen = 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 = useDotCMSShowWhen(_when);
+  if (!show) {
+    return null;
+  }
+  return children;
+};
+
+export { DotCMSLayoutBody, DotCMSShow, useDotCMSShowWhen };