@storyblok/react 7.1.0 → 7.2.0

package/README.md

@@ -233,24 +233,27 @@ export async function fetchData() {
 
 | Export                 | Use Case                            | Live Editing | Static Export Support |
 | ---------------------- | ----------------------------------- | ------------ | --------------------- |
-| `@storyblok/react`     | Client-side rendering, SPA          | ✅            | ✅                     |
-| `@storyblok/react/ssr` | Server-side rendering, static sites | ❌            | ✅                     |
-| `@storyblok/react/rsc` | React Server Components             | ✅            | ❌                     |
+| `@storyblok/react`     | Client-side rendering, SPA          | ✅           | ✅                    |
+| `@storyblok/react/ssr` | Server-side rendering, static sites | ❌           | ✅                    |
+| `@storyblok/react/rsc` | React Server Components             | ✅           | ❌                    |
 
 ### When to Use Each Export
 
 **Use `@storyblok/react`** for:
+
 - Single Page Applications (SPA)
 - Client-side rendered React apps
 - When you need live editing in browser-based applications
 
 **Use `@storyblok/react/ssr`** for:
+
 - Next.js static exports (`output: 'export'`)
 - Static site generation without live editing
 - Server-side rendering where live editing isn't required
 - Performance-critical scenarios where bundle size matters
 
 **Use `@storyblok/react/rsc`** for:
+
 - Next.js App Router with React Server Components
 - When you need live editing with server components
 - Modern React applications with server/client component separation
@@ -265,7 +268,7 @@ If you're using Next.js with `output: 'export'` for static site generation, you
 // next.config.js
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: 'export', // Enables static export
+  output: "export", // Enables static export
 };
 
 module.exports = nextConfig;
@@ -306,7 +309,7 @@ export default async function Home() {
 
 export async function fetchData() {
   const storyblokApi = getStoryblokApi();
-  return storyblokApi.get(`cdn/stories/home`, { version: 'draft' });
+  return storyblokApi.get(`cdn/stories/home`, { version: "draft" });
 }
 ```
 
@@ -386,6 +389,7 @@ export async function fetchData() {
 ```
 
 **The `StoryblokStory` component automatically:**
+
 - Renders your Storyblok content components on the server
 - Loads the bridge script for live editing (when in Visual Editor)
 - Handles live content updates via global cache
@@ -396,9 +400,9 @@ export async function fetchData() {
 You can pass bridge options for advanced configurations:
 
 ```jsx
-const bridgeOptions = { resolveRelations: ['article.author'] };
+const bridgeOptions = { resolveRelations: ["article.author"] };
 
-<StoryblokStory story={data.story} bridgeOptions={bridgeOptions} />
+<StoryblokStory story={data.story} bridgeOptions={bridgeOptions} />;
 ```
 
 **Advanced: Manual Component Separation**
@@ -421,6 +425,7 @@ import { StoryblokServerComponent, StoryblokLiveEditing } from '@storyblok/react
 When creating your individual Storyblok content components (like `Page`, `Teaser`, etc.), you must use `StoryblokServerComponent` for nested components. Import it from the same export you're using:
 
 **For RSC (with live editing):**
+
 ```jsx
 import {
   storyblokEditable,
@@ -439,6 +444,7 @@ export default Page;
 ```
 
 **For SSR (static exports):**
+
 ```jsx
 import {
   storyblokEditable,
@@ -698,10 +704,18 @@ For a comprehensive list of options you can provide to the `useStoryblokRichText
 You can override the default resolvers by passing a `resolvers` prop to the `StoryblokRichText` component, for example, to use NextJS Link component or add a custom codeblok component:
 
 ```ts
-import { StoryblokRichText, useStoryblok, MarkTypes, type StoryblokRichTextNode } from '@storyblok/react';
+import { StoryblokRichText, useStoryblok, MarkTypes, type SbReactRichTextComponentMap, type SbReactRichTextProps } from '@storyblok/react';
 import Link from 'next/link';
 import CodeBlock from './components/CodeBlock';
 
+function CustomLink({ children, attrs }: SbReactRichTextProps<"link">) {
+  return (
+    <Link href={attrs?.href ?? ""} target={attrs?.target ?? "_self"}>
+      {children}
+    </Link>
+  );
+}
+
 function App() {
   const story = useStoryblok('home', { version: 'draft' });
 
@@ -709,40 +723,16 @@ function App() {
     return <div>Loading...</div>;
   }
 
-  const resolvers = {
-     [MarkTypes.LINK]: (node: StoryblokRichTextNode<ReactElement>) => {
-      return node.attrs?.linktype === 'story'
-         ? (
-            <Link
-              href={node.attrs?.href}
-              target={node.attrs?.target}
-            >
-              {node.text}
-            </Link>
-          )
-        : (
-            <a
-              href={node.attrs?.href}
-              target={node.attrs?.target}
-            >
-              {node.text}
-            </a>
-          );
-    },
-    [BlockTypes.CODE_BLOCK]: (node) =>
-      <CodeBlock
-        class={node?.attrs?.class}
-      >
-        {node.children}
-      </CodeBlock>;
-  }
+  const components: SbReactRichTextComponentMap = {
+    heading: CustomHeading,
+    link: CustomLink,
+    table: CustomTable,
+    bold: ({ children }) => <b className="font-bold text-black">{children}</b>,
+  };
 
   return (
     <div>
-      <StoryblokRichText
-        doc={story.content.richText}
-        resolvers={resolvers}
-      />
+      <StoryblokRichText document={blok.richtext_field} components={components} />
     </div>
   );
 }
@@ -867,6 +857,7 @@ By using these techniques, you can ensure that only the necessary components and
 ### "Server Actions are not supported with static export"
 
 **Error:** When using Next.js with `output: 'export'`, you might encounter:
+
 ```
 Error: Server Actions are not supported with static export
 ```
@@ -901,8 +892,8 @@ Error: Server Actions are not supported with static export
 ```js
 storyblokInit({
   components: {
-    page: Page,        // Matches 'page' component in Storyblok
-    teaser: Teaser,    // Matches 'teaser' component in Storyblok
+    page: Page, // Matches 'page' component in Storyblok
+    teaser: Teaser, // Matches 'teaser' component in Storyblok
     // Add all your components here
   },
 });

package/dist/core/create-storyblok-richtext.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),s=require("./rich-text-renderer.js");require("@storyblok/richtext");const a=require("./create-default-blok.js");function d(t){const r=a.createDefaultBlok(t);return function({document:n,optimizeImage:o,components:c,wrapper:i=!0,...u}){const e=s.createRichTextRenderer({optimizeImage:o,components:{blok:r,...c}})(n);return i?l.jsx("div",{...u,children:e}):e}}exports.createStoryblokRichText=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("./rich-text-renderer.js");require("@storyblok/richtext");const d=require("./create-default-blok.js");function f(t){const r=d.createDefaultBlok(t);return function({document:n,optimizeImage:o,components:c,data:i,wrapper:u=!0,...l}){const e=a.createRichTextRenderer({optimizeImage:o,components:{blok:r,...c},data:i})(n);return u?s.jsx("div",{...l,children:e}):e}}exports.createStoryblokRichText=f;

package/dist/core/create-storyblok-richtext.mjs

@@ -1,26 +1,28 @@
-import { jsx as l } from "react/jsx-runtime";
-import { createRichTextRenderer as m } from "./rich-text-renderer.mjs";
+import { jsx as m } from "react/jsx-runtime";
+import { createRichTextRenderer as u } from "./rich-text-renderer.mjs";
 import "@storyblok/richtext";
-import { createDefaultBlok as u } from "./create-default-blok.mjs";
-function h(t) {
-  const e = u(t);
+import { createDefaultBlok as p } from "./create-default-blok.mjs";
+function R(t) {
+  const e = p(t);
   return function({
     document: o,
     optimizeImage: n,
     components: c,
-    wrapper: i = !0,
-    ...f
+    data: i,
+    wrapper: f = !0,
+    ...l
   }) {
-    const r = m({
+    const r = u({
       optimizeImage: n,
       components: {
         blok: e,
         ...c
-      }
+      },
+      data: i
     })(o);
-    return i ? /* @__PURE__ */ l("div", { ...f, children: r }) : r;
+    return f ? /* @__PURE__ */ m("div", { ...l, children: r }) : r;
   };
 }
 export {
-  h as createStoryblokRichText
+  R as createStoryblokRichText
 };

package/dist/core/rich-text-renderer.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),i=require("@storyblok/richtext"),o=require("react");function y(t,e){return e==null?void 0:e[t]}const p={class:"className"};function C(t){return function(c){const r=i.normalizeNodes(c,!0);return r!=null&&r.length?g(r,t):null}}function g(t,e){return i.groupLinkNodes(t).map((r,n)=>r.linkMark?T(r.nodes,r.linkMark,e,r._key||n):x(r.nodes[0],e,r._key||n))}function T(t,e,c,r){const n=t.map((l,a)=>{const m=l,h=i.getInnerMarks(l);return b(m,h,c,l._key||a)}),s=y(e.type,c.components);if(s)return f.jsx(s,{...e,children:n},r);const u=i.resolveTag(e);return u?o.createElement(u,{key:r,...i.processAttrs(e.type,e.attrs,p)},n):f.jsx(o.Fragment,{children:n},r)}function x(t,e,c){if(t.type==="text")return A(t,e,c);const r=y(t.type,e.components);if(r)return f.jsx(r,{...t,context:e,children:t.content?g(t.content,e):null},c);const n=i.resolveTag(t);if(!n)return t.content?g(t.content,e):null;if(t.type==="image"&&e.optimizeImage)return R(t,e,c);const s=i.processAttrs(t.type,t.attrs,p);if(i.isSelfClosing(n))return o.createElement(n,{key:c,...s});if(t.type==="table")return S(t,e,c,n,s);const u=i.getStaticChildren(t);if(u){const l=t.content?g(t.content,e):null,a=d(t.type,u,t.attrs,l);return o.createElement(n,{key:c},a)}return o.createElement(n,{key:c,...s},t.content?g(t.content,e):null)}function R(t,e,c){const r=t.attrs,n=r==null?void 0:r.src;if(!n)return null;const{src:s,attrs:u}=i.buildStoryblokImage(n,e.optimizeImage),l=i.processAttrs("image",{...r,src:s,...u},p);return f.jsx("img",{...l},c)}function S(t,e,c,r,n){const{headerRows:s,bodyRows:u}=i.splitTableRows(t.content),l=[];return s.length>0&&l.push(f.jsx("thead",{children:s.map((a,m)=>x(a,e,a._key||m))},"thead")),u.length>0&&l.push(f.jsx("tbody",{children:u.map((a,m)=>x(a,e,a._key||m))},"tbody")),o.createElement(r,{key:c,...n},l)}function d(t,e,c,r){return e.map((n,s)=>{const{tag:u,children:l,attrs:a}=n,m={...a,...c},h=i.processAttrs(t,m,p);if(i.isSelfClosing(u))return o.createElement(u,{key:s,...h});const j=l?d(t,l,c,r):r;return o.createElement(u,{key:s,...h},j)})}function A(t,e,c){return b(t,t.marks,e,c)}function b(t,e,c,r){let n=t.text;if(e!=null&&e.length)for(const s of e)n=E(n,s,c);return f.jsx(o.Fragment,{children:n},r)}function E(t,e,c){const r=y(e.type,c.components);if(r)return f.jsx(r,{...e,children:t});const n=i.resolveTag(e);if(!n)return t;const s=i.processAttrs(e.type,e.attrs,p);return o.createElement(n,s,t)}exports.createRichTextRenderer=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),u=require("@storyblok/richtext"),f=require("react");function y(t,e){return e==null?void 0:e[t]}const x={class:"className"};function j(t){return function(n){const r=u.normalizeNodes(n,!0);return r!=null&&r.length?p(r,t):null}}function p(t,e){return u.groupLinkNodes(t).map((r,c)=>r.linkMark?T(r.nodes,r.linkMark,e,r._key||c):h(r.nodes[0],e,r._key||c))}function T(t,e,n,r){const c=t.map((l,a)=>{const o=l,g=u.getInnerMarks(l);return d(o,g,n,l._key||a)}),s=y(e.type,n.components);if(s)return m.jsx(s,{...e,context:n,children:c},r);const i=u.resolveTag(e);return i?f.createElement(i,{key:r,...u.processAttrs(e.type,e.attrs,x)},c):m.jsx(f.Fragment,{children:c},r)}function h(t,e,n){var a;const r=t.type!=="text"&&t.content?p(t.content,e):null,c=y(t.type,e.components);if(c){const o=(a=e.components)!=null&&a[t.type]?{...e,components:{...e.components,[t.type]:void 0}}:e;return m.jsx(c,{...t,context:o,children:r},n)}if(t.type==="text")return A(t,e,n);const s=u.resolveTag(t);if(!s)return t.content?p(t.content,e):null;if(t.type==="image"&&e.optimizeImage)return R(t,e,n);const i=u.processAttrs(t.type,t.attrs,x);if(u.isSelfClosing(s))return f.createElement(s,{key:n,...i});if(t.type==="table")return S(t,e,n,s,i);const l=u.getStaticChildren(t);if(l){const o=t.content?p(t.content,e):null,g=b(t.type,l,t.attrs,o);return f.createElement(s,{key:n},g)}return f.createElement(s,{key:n,...i},t.content?p(t.content,e):null)}function R(t,e,n){const r=t.attrs,c=r==null?void 0:r.src;if(!c)return null;const{src:s,attrs:i}=u.buildStoryblokImage(c,e.optimizeImage),l=u.processAttrs("image",{...r,src:s,...i},x);return m.jsx("img",{...l},n)}function S(t,e,n,r,c){const{headerRows:s,bodyRows:i}=u.splitTableRows(t.content),l=[];return s.length>0&&l.push(m.jsx("thead",{children:s.map((a,o)=>h(a,e,a._key||o))},"thead")),i.length>0&&l.push(m.jsx("tbody",{children:i.map((a,o)=>h(a,e,a._key||o))},"tbody")),f.createElement(r,{key:n,...c},l)}function b(t,e,n,r){return e.map((c,s)=>{const{tag:i,children:l,attrs:a}=c,o={...a,...n},g=u.processAttrs(t,o,x);if(u.isSelfClosing(i))return f.createElement(i,{key:s,...g});const C=l?b(t,l,n,r):r;return f.createElement(i,{key:s,...g},C)})}function A(t,e,n){return d(t,t.marks,e,n)}function d(t,e,n,r){let c=t.text;if(e!=null&&e.length)for(const s of e)c=E(c,s,n);return m.jsx(f.Fragment,{children:c},r)}function E(t,e,n){const r=y(e.type,n.components);if(r)return m.jsx(r,{...e,context:n,children:t});const c=u.resolveTag(e);if(!c)return t;const s=u.processAttrs(e.type,e.attrs,x);return f.createElement(c,s,t)}exports.createRichTextRenderer=j;

package/dist/core/rich-text-renderer.mjs

@@ -1,105 +1,108 @@
-import { jsx as o } from "react/jsx-runtime";
-import { normalizeNodes as R, groupLinkNodes as S, getInnerMarks as T, resolveTag as d, processAttrs as p, isSelfClosing as x, getStaticChildren as z, buildStoryblokImage as _, splitTableRows as A } from "@storyblok/richtext";
-import a from "react";
-function b(t, e) {
+import { jsx as f } from "react/jsx-runtime";
+import { normalizeNodes as R, groupLinkNodes as S, getInnerMarks as T, resolveTag as x, processAttrs as g, isSelfClosing as b, getStaticChildren as z, buildStoryblokImage as _, splitTableRows as A } from "@storyblok/richtext";
+import o from "react";
+function C(t, e) {
   return e == null ? void 0 : e[t];
 }
-const g = {
+const h = {
   class: "className"
 };
 function O(t) {
-  return function(c) {
-    const r = R(c, !0);
-    return r != null && r.length ? m(r, t) : null;
+  return function(n) {
+    const r = R(n, !0);
+    return r != null && r.length ? p(r, t) : null;
   };
 }
-function m(t, e) {
-  return S(t).map((r, n) => r.linkMark ? I(r.nodes, r.linkMark, e, r._key || n) : y(r.nodes[0], e, r._key || n));
+function p(t, e) {
+  return S(t).map((r, c) => r.linkMark ? I(r.nodes, r.linkMark, e, r._key || c) : y(r.nodes[0], e, r._key || c));
 }
-function I(t, e, c, r) {
-  const n = t.map((i, l) => {
-    const f = i, h = T(i);
-    return E(f, h, c, i._key || l);
-  }), s = b(e.type, c.components);
+function I(t, e, n, r) {
+  const c = t.map((i, l) => {
+    const a = i, m = T(i);
+    return E(a, m, n, i._key || l);
+  }), s = C(e.type, n.components);
   if (s)
-    return /* @__PURE__ */ o(s, { ...e, children: n }, r);
-  const u = d(e);
-  return u ? a.createElement(u, { key: r, ...p(e.type, e.attrs, g) }, n) : /* @__PURE__ */ o(a.Fragment, { children: n }, r);
+    return /* @__PURE__ */ f(s, { ...e, context: n, children: c }, r);
+  const u = x(e);
+  return u ? o.createElement(u, { key: r, ...g(e.type, e.attrs, h) }, c) : /* @__PURE__ */ f(o.Fragment, { children: c }, r);
 }
-function y(t, e, c) {
+function y(t, e, n) {
+  var l;
+  const r = t.type !== "text" && t.content ? p(t.content, e) : null, c = C(t.type, e.components);
+  if (c) {
+    const a = (l = e.components) != null && l[t.type] ? { ...e, components: { ...e.components, [t.type]: void 0 } } : e;
+    return /* @__PURE__ */ f(c, { ...t, context: a, children: r }, n);
+  }
   if (t.type === "text")
-    return w(t, e, c);
-  const r = b(t.type, e.components);
-  if (r)
-    return /* @__PURE__ */ o(r, { ...t, context: e, children: t.content ? m(t.content, e) : null }, c);
-  const n = d(t);
-  if (!n)
-    return t.content ? m(t.content, e) : null;
+    return M(t, e, n);
+  const s = x(t);
+  if (!s)
+    return t.content ? p(t.content, e) : null;
   if (t.type === "image" && e.optimizeImage)
-    return M(t, e, c);
-  const s = p(t.type, t.attrs, g);
-  if (x(n))
-    return a.createElement(n, { key: c, ...s });
+    return v(t, e, n);
+  const u = g(t.type, t.attrs, h);
+  if (b(s))
+    return o.createElement(s, { key: n, ...u });
   if (t.type === "table")
-    return v(t, e, c, n, s);
-  const u = z(t);
-  if (u) {
-    const i = t.content ? m(t.content, e) : null, l = C(t.type, u, t.attrs, i);
-    return a.createElement(n, { key: c }, l);
+    return F(t, e, n, s, u);
+  const i = z(t);
+  if (i) {
+    const a = t.content ? p(t.content, e) : null, m = d(t.type, i, t.attrs, a);
+    return o.createElement(s, { key: n }, m);
   }
-  return a.createElement(
-    n,
-    { key: c, ...s },
-    t.content ? m(t.content, e) : null
+  return o.createElement(
+    s,
+    { key: n, ...u },
+    t.content ? p(t.content, e) : null
   );
 }
-function M(t, e, c) {
-  const r = t.attrs, n = r == null ? void 0 : r.src;
-  if (!n)
+function v(t, e, n) {
+  const r = t.attrs, c = r == null ? void 0 : r.src;
+  if (!c)
     return null;
-  const { src: s, attrs: u } = _(n, e.optimizeImage), i = p("image", {
+  const { src: s, attrs: u } = _(c, e.optimizeImage), i = g("image", {
     ...r,
     src: s,
     ...u
-  }, g);
-  return /* @__PURE__ */ o("img", { ...i }, c);
+  }, h);
+  return /* @__PURE__ */ f("img", { ...i }, n);
 }
-function v(t, e, c, r, n) {
+function F(t, e, n, r, c) {
   const { headerRows: s, bodyRows: u } = A(t.content), i = [];
   return s.length > 0 && i.push(
-    /* @__PURE__ */ o("thead", { children: s.map((l, f) => y(l, e, l._key || f)) }, "thead")
+    /* @__PURE__ */ f("thead", { children: s.map((l, a) => y(l, e, l._key || a)) }, "thead")
   ), u.length > 0 && i.push(
-    /* @__PURE__ */ o("tbody", { children: u.map((l, f) => y(l, e, l._key || f)) }, "tbody")
-  ), a.createElement(r, { key: c, ...n }, i);
+    /* @__PURE__ */ f("tbody", { children: u.map((l, a) => y(l, e, l._key || a)) }, "tbody")
+  ), o.createElement(r, { key: n, ...c }, i);
 }
-function C(t, e, c, r) {
-  return e.map((n, s) => {
-    const { tag: u, children: i, attrs: l } = n, f = { ...l, ...c }, h = p(t, f, g);
-    if (x(u))
-      return a.createElement(u, { key: s, ...h });
-    const N = i ? C(t, i, c, r) : r;
-    return a.createElement(u, { key: s, ...h }, N);
+function d(t, e, n, r) {
+  return e.map((c, s) => {
+    const { tag: u, children: i, attrs: l } = c, a = { ...l, ...n }, m = g(t, a, h);
+    if (b(u))
+      return o.createElement(u, { key: s, ...m });
+    const N = i ? d(t, i, n, r) : r;
+    return o.createElement(u, { key: s, ...m }, N);
   });
 }
-function w(t, e, c) {
-  return E(t, t.marks, e, c);
+function M(t, e, n) {
+  return E(t, t.marks, e, n);
 }
-function E(t, e, c, r) {
-  let n = t.text;
+function E(t, e, n, r) {
+  let c = t.text;
   if (e != null && e.length)
     for (const s of e)
-      n = F(n, s, c);
-  return /* @__PURE__ */ o(a.Fragment, { children: n }, r);
+      c = w(c, s, n);
+  return /* @__PURE__ */ f(o.Fragment, { children: c }, r);
 }
-function F(t, e, c) {
-  const r = b(e.type, c.components);
+function w(t, e, n) {
+  const r = C(e.type, n.components);
   if (r)
-    return /* @__PURE__ */ o(r, { ...e, children: t });
-  const n = d(e);
-  if (!n)
+    return /* @__PURE__ */ f(r, { ...e, context: n, children: t });
+  const c = x(e);
+  if (!c)
     return t;
-  const s = p(e.type, e.attrs, g);
-  return a.createElement(n, s, t);
+  const s = g(e.type, e.attrs, h);
+  return o.createElement(c, s, t);
 }
 export {
   O as createRichTextRenderer

package/dist/index.d.ts

@@ -155,6 +155,7 @@ export declare type SbReactRichTextProps<T extends SbRichTextElement> = SbRichTe
 export declare interface SbReactRichTextRenderContext {
     optimizeImage?: boolean | SbRichTextImageOptions;
     components?: SbReactRichTextComponentMap;
+    data?: unknown;
 }
 
 export declare interface SbReactSDKOptions extends SbSDKOptions {
@@ -203,7 +204,7 @@ export { storyblokEditable }
 
 export declare const storyblokInit: (pluginOptions?: SbReactSDKOptions) => (() => StoryblokClient);
 
-export declare const StoryblokRichText: ({ document, optimizeImage, components, wrapper, ...rest }: SbRichTextProps_2) => ReactNode;
+export declare const StoryblokRichText: ({ document, optimizeImage, components, data, wrapper, ...rest }: SbRichTextProps_2) => ReactNode;
 
 export declare interface StoryblokRichTextProps extends SbReactRichTextRenderContext {
     optimizeImage?: boolean | SbRichTextImageOptions;

package/dist/rsc.d.ts

@@ -125,6 +125,7 @@ export declare type SbReactRichTextProps<T extends SbRichTextElement> = SbRichTe
 export declare interface SbReactRichTextRenderContext {
     optimizeImage?: boolean | SbRichTextImageOptions;
     components?: SbReactRichTextComponentMap;
+    data?: unknown;
 }
 
 export declare interface SbReactSDKOptions extends SbSDKOptions {
@@ -183,7 +184,7 @@ export declare interface StoryblokRichTextProps extends SbReactRichTextRenderCon
 
 export declare const StoryblokServerComponent: ForwardRefExoticComponent<Omit<SbServerComponentProps, "ref"> & RefAttributes<HTMLElement>>;
 
-export declare const StoryblokServerRichText: ({ document, optimizeImage, components, wrapper, ...rest }: SbRichTextProps_2) => ReactNode;
+export declare const StoryblokServerRichText: ({ document, optimizeImage, components, data, wrapper, ...rest }: SbRichTextProps_2) => ReactNode;
 
 /**
  * Shared server component for rendering Storyblok stories.

package/dist/ssr.d.ts

@@ -129,6 +129,7 @@ export declare type SbReactRichTextProps<T extends SbRichTextElement> = SbRichTe
 export declare interface SbReactRichTextRenderContext {
     optimizeImage?: boolean | SbRichTextImageOptions;
     components?: SbReactRichTextComponentMap;
+    data?: unknown;
 }
 
 export declare interface SbReactSDKOptions extends SbSDKOptions {
@@ -188,7 +189,7 @@ export declare interface StoryblokRichTextProps extends SbReactRichTextRenderCon
 
 export declare const StoryblokServerComponent: ForwardRefExoticComponent<Omit<SbServerComponentProps, "ref"> & RefAttributes<HTMLElement>>;
 
-export declare const StoryblokServerRichText: ({ document, optimizeImage, components, wrapper, ...rest }: SbRichTextProps_2) => ReactNode;
+export declare const StoryblokServerRichText: ({ document, optimizeImage, components, data, wrapper, ...rest }: SbRichTextProps_2) => ReactNode;
 
 /**
  * Shared server component for rendering Storyblok stories.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyblok/react",
   "type": "module",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "private": false,
   "description": "SDK to integrate Storyblok into your project using React.",
   "author": "Storyblok",
@@ -49,8 +49,8 @@
     }
   },
   "dependencies": {
-    "@storyblok/richtext": "5.1.0",
-    "@storyblok/js": "6.1.0"
+    "@storyblok/js": "6.2.0",
+    "@storyblok/richtext": "5.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",