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

package/next.esm.js

@@ -1,8 +1,10 @@
 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';
+import { s as styleInject } from './es.json.stringify.esm.js';
+import { getUVEState, initUVE, createUVESubscription } 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, UVEEventType } from '@dotcms/uve/types';
+import { updateNavigation } from '@dotcms/client';
 
 /**
  * The `PageContext` is a React context that provides access to the DotCMS page context.
@@ -20,18 +22,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 +40,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 +50,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 +90,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 +101,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 +116,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 +134,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 +285,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 +320,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 +390,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 +406,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 +426,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 +433,211 @@ 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;
+};
+
+/**
+ * Custom hook to manage the editable state of a DotCMS page.
+ *
+ * This hook initializes the Universal Visual Editor (UVE) and subscribes to content changes.
+ * It updates the editable page state when content changes are detected in the UVE,
+ * ensuring your React components always display the latest content when editing in DotCMS.
+ *
+ * @example
+ * ```ts
+ * // Import the hook and the client
+ * import { useEditableDotCMSPage } from '@dotcms/react';
+ * import { createDotCMSClient } from '@dotcms/client';
+ *
+ * // Create the client
+ * const client = createDotCMSClient({
+ *   dotcmsURL: 'https://your-dotcms-instance.com',
+ *   authToken: 'your-auth-token'
+ * });
+ *
+ * // Get the page
+ * const page = await client.page.get('/', {
+ *   languageId: '1',
+ * });
+ *
+ * // Use the hook to get an editable version of the page
+ * const editablePage = useEditableDotCMSPage(page);
+ *
+ * // Then use the page data in your component
+ * return (
+ *   <div>
+ *     <h1>{editablePage.page.title}</h1>
+ *     <div dangerouslySetInnerHTML={{ __html: editablePage.page.body }} />
+ *   </div>
+ * );
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Import the hook and the client
+ * import { useEditableDotCMSPage } from '@dotcms/react';
+ * import { createDotCMSClient } from '@dotcms/client';
+ *
+ * // Create the client
+ * const client = createDotCMSClient({
+ *   dotcmsURL: 'https://your-dotcms-instance.com',
+ *   authToken: 'your-auth-token'
+ * });
+ *
+ * // Get the page with GraphQL content
+ * const page = await client.page.get('/', {
+ *   languageId: '1',
+ *   graphql: {
+ *     content: {
+ *       products: `ProductCollection(query: "+title:snow", limit: 10, offset: 0, sortBy: "score") {
+ *         title
+ *         urlMap
+ *         category {
+ *           name
+ *           inode
+ *         }
+ *         retailPrice
+ *         image {
+ *           versionPath
+ *         }
+ *       }`
+ *     }
+ *   }
+ * });
+ *
+ * // Use the hook to get an editable version of the page and its content
+ * const editablePage = useEditableDotCMSPage(page);
+ *
+ * // Access both page data and GraphQL content
+ * const { page: pageData, content } = editablePage;
+ *
+ * // Use the products from GraphQL content
+ * return (
+ *   <div>
+ *     <h1>{pageData.title}</h1>
+ *     <ProductList products={content.products} />
+ *   </div>
+ * );
+ * ```
+ * @param {DotCMSEditablePage} editablePage - The initial editable page data from client.page.get().
+ *
+ * @returns {DotCMSEditablePage} The updated editable page state that reflects any changes made in the UVE.
+ * The structure includes page data and any GraphQL content that was requested.
+ */
+const useEditableDotCMSPage = editablePage => {
+  const [updatedEditablePage, setUpdatedEditablePage] = useState(editablePage);
+  useEffect(() => {
+    var _editablePage$page$pa, _editablePage$page;
+    if (!getUVEState()) {
+      return;
+    }
+    const pageURI = (_editablePage$page$pa = editablePage == null || (_editablePage$page = editablePage.page) == null ? void 0 : _editablePage$page.pageURI) != null ? _editablePage$page$pa : '/';
+    const {
+      destroyUVESubscriptions
+    } = initUVE(editablePage);
+    // Update the navigation to the pageURI
+    updateNavigation(pageURI);
+    return () => {
+      destroyUVESubscriptions();
+    };
+  }, [editablePage]);
+  useEffect(() => {
+    const {
+      unsubscribe
+    } = createUVESubscription(UVEEventType.CONTENT_CHANGES, payload => {
+      setUpdatedEditablePage(payload);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  return updatedEditablePage;
+};
+
+export { DotCMSLayoutBody, DotCMSShow, useDotCMSShowWhen, useEditableDotCMSPage };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-beta.2",
+  "version": "0.0.1-beta.21",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-beta.2",
-    "@dotcms/uve": "0.0.1-beta.2",
+    "@dotcms/client": "0.0.1-beta.21",
+    "@dotcms/uve": "0.0.1-beta.21",
     "@tinymce/tinymce-react": "^5.1.1"
   },
   "description": "Official React Components library to render a dotCMS page.",
@@ -22,6 +22,27 @@
     "React",
     "Components"
   ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./index.esm.js",
+      "types": "./index.esm.d.ts"
+    },
+    "./next": {
+      "import": "./next.esm.js",
+      "types": "./next.esm.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./src/index.d.ts"
+      ],
+      "next": [
+        "./src/next.d.ts"
+      ]
+    }
+  },
   "author": "dotcms <dev@dotcms.com>",
   "license": "MIT",
   "bugs": {

package/src/lib/next/__test__/mock.d.ts

@@ -1,4 +1,4 @@
-import { DotCMSColumnContainer, DotCMSPageAsset, DotPageAssetLayoutColumn } from '../types';
+import { DotCMSColumnContainer, DotCMSPageAsset, DotPageAssetLayoutColumn } from '@dotcms/uve/types';
 export declare const MOCK_COLUMN: DotPageAssetLayoutColumn;
 export declare const MOCK_CONTAINER: DotCMSColumnContainer;
 export declare const MOCK_PAGE_ASSET: DotCMSPageAsset;

package/src/lib/next/components/Column/Column.d.ts

@@ -1,4 +1,4 @@
-import { DotPageAssetLayoutColumn } from '../../types';
+import { DotPageAssetLayoutColumn } from '@dotcms/uve/types';
 /**
  * @internal
  *

package/src/lib/next/components/Container/Container.d.ts

@@ -1,4 +1,4 @@
-import { DotCMSColumnContainer } from '../../types';
+import { DotCMSColumnContainer } from '@dotcms/uve/types';
 /**
  * @internal
  *

package/src/lib/next/components/Container/{ContainerFallbakcs.d.ts → ContainerFallbacks.d.ts}

@@ -1,4 +1,4 @@
-import { DotContainerAttributes } from '../../utils';
+import { DotContainerAttributes } from '@dotcms/uve/types';
 /**
  * @internal
  *
@@ -10,7 +10,7 @@ import { DotContainerAttributes } from '../../utils';
  * @param {string} props.identifier - Container identifier
  * @returns {JSX.Element | null} Message about missing container or null in production
  */
-export declare const ContainerNoFound: ({ identifier }: {
+export declare const ContainerNotFound: ({ identifier }: {
     identifier: string;
 }) => import("react/jsx-runtime").JSX.Element | null;
 /**

package/src/lib/next/components/Contentlet/Contentlet.d.ts

@@ -1,4 +1,4 @@
-import { DotCMSContentlet } from '../../types';
+import { DotCMSContentlet } from '@dotcms/uve/types';
 /**
  * @internal
  *