@storyblok/react 2.0.12 → 2.0.13

package/dist/storyblok-react.js

@@ -1,3 +1,3 @@
-(function(l,u){typeof exports=="object"&&typeof module!="undefined"?u(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],u):(l=typeof globalThis!="undefined"?globalThis:l||self,u(l.storyblokReact={},l.React))})(this,function(l,u){"use strict";var Te=Object.defineProperty,_e=Object.defineProperties;var Re=Object.getOwnPropertyDescriptors;var T=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var L=(l,u,p)=>u in l?Te(l,u,{enumerable:!0,configurable:!0,writable:!0,value:p}):l[u]=p,y=(l,u)=>{for(var p in u||(u={}))U.call(u,p)&&L(l,p,u[p]);if(T)for(var p of T(u))H.call(u,p)&&L(l,p,u[p]);return l},_=(l,u)=>_e(l,Re(u));var q=(l,u)=>{var p={};for(var f in l)U.call(l,f)&&u.indexOf(f)<0&&(p[f]=l[f]);if(l!=null&&T)for(var f of T(l))u.indexOf(f)<0&&H.call(l,f)&&(p[f]=l[f]);return p};function p(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var f=p(u);let $=!1;const j=[],B=o=>new Promise((e,t)=>{if(typeof window>"u"||(window.storyblokRegisterEvent=r=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}$?r():j.push(r)},document.getElementById("storyblok-javascript-bridge")))return;const s=document.createElement("script");s.async=!0,s.src=o,s.id="storyblok-javascript-bridge",s.onerror=r=>t(r),s.onload=r=>{j.forEach(n=>n()),$=!0,e(r)},document.getElementsByTagName("head")[0].appendChild(s)});var D=Object.defineProperty,J=(o,e,t)=>e in o?D(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,h=(o,e,t)=>(J(o,typeof e!="symbol"?e+"":e,t),t);function C(o){return!(o!==o||o===1/0||o===-1/0)}function V(o,e,t){if(!C(e))throw new TypeError("Expected `limit` to be a finite number");if(!C(t))throw new TypeError("Expected `interval` to be a finite number");const s=[];let r=[],n=0;const i=function(){n++;const c=setTimeout(function(){n--,s.length>0&&i(),r=r.filter(function(g){return g!==c})},t);r.indexOf(c)<0&&r.push(c);const d=s.shift();d.resolve(o.apply(d.self,d.args))},a=function(...c){const d=this;return new Promise(function(g,E){s.push({resolve:g,reject:E,args:c,self:d}),n<e&&i()})};return a.abort=function(){r.forEach(clearTimeout),r=[],s.forEach(function(c){c.reject(function(){Error.call(this,"Throttled function aborted"),this.name="AbortError"})}),s.length=0},a}const Y=function(o,e){const t={};for(const s in o){const r=o[s];e.indexOf(s)>-1&&r!==null&&(t[s]=r)}return t},z=o=>o==="email",F=()=>({singleTag:"hr"}),G=()=>({tag:"blockquote"}),Q=()=>({tag:"ul"}),W=o=>({tag:["pre",{tag:"code",attrs:o.attrs}]}),X=()=>({singleTag:"br"}),Z=o=>({tag:`h${o.attrs.level}`}),K=o=>({singleTag:[{tag:"img",attrs:Y(o.attrs,["src","alt","title"])}]}),ee=()=>({tag:"li"}),te=()=>({tag:"ol"}),se=()=>({tag:"p"}),re=()=>({tag:"b"}),oe=()=>({tag:"strike"}),ne=()=>({tag:"u"}),ie=()=>({tag:"strong"}),ae=()=>({tag:"code"}),le=()=>({tag:"i"}),ce=o=>{const e=y({},o.attrs),{linktype:t="url"}=o.attrs;return z(t)&&(e.href=`mailto:${e.href}`),e.anchor&&(e.href=`${e.href}#${e.anchor}`,delete e.anchor),{tag:[{tag:"a",attrs:e}]}},he=o=>({tag:[{tag:"span",attrs:o.attrs}]}),O={nodes:{horizontal_rule:F,blockquote:G,bullet_list:Q,code_block:W,hard_break:X,heading:Z,image:K,list_item:ee,ordered_list:te,paragraph:se},marks:{bold:re,strike:oe,underline:ne,strong:ie,code:ae,italic:le,link:ce,styled:he}},ue=function(o){const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},t=/[&<>"']/g,s=RegExp(t.source);return o&&s.test(o)?o.replace(t,r=>e[r]):o};class k{constructor(e){h(this,"marks"),h(this,"nodes"),e||(e=O),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e){if(e&&e.content&&Array.isArray(e.content)){let t="";return e.content.forEach(s=>{t+=this.renderNode(s)}),t}return console.warn("The render method must receive an object with a content field, which is an array"),""}renderNode(e){const t=[];e.marks&&e.marks.forEach(r=>{const n=this.getMatchingMark(r);n&&t.push(this.renderOpeningTag(n.tag))});const s=this.getMatchingNode(e);return s&&s.tag&&t.push(this.renderOpeningTag(s.tag)),e.content?e.content.forEach(r=>{t.push(this.renderNode(r))}):e.text?t.push(ue(e.text)):s&&s.singleTag?t.push(this.renderTag(s.singleTag," /")):s&&s.html&&t.push(s.html),s&&s.tag&&t.push(this.renderClosingTag(s.tag)),e.marks&&e.marks.slice(0).reverse().forEach(r=>{const n=this.getMatchingMark(r);n&&t.push(this.renderClosingTag(n.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(s=>{if(s.constructor===String)return`<${s}${t}>`;{let r=`<${s.tag}`;if(s.attrs)for(const n in s.attrs){const i=s.attrs[n];i!==null&&(r+=` ${n}="${i}"`)}return`${r}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(t=>t.constructor===String?`</${t}>`:`</${t.tag}>`).join("")}getMatchingNode(e){const t=this.nodes[e.type];if(typeof t=="function")return t(e)}getMatchingMark(e){const t=this.marks[e.type];if(typeof t=="function")return t(e)}}class I{constructor(){h(this,"isCDNUrl",(e="")=>e.indexOf("/cdn/")>-1),h(this,"getOptionsPage",(e,t=25,s=1)=>_(y({},e),{per_page:t,page:s})),h(this,"delay",e=>new Promise(t=>setTimeout(t,e))),h(this,"arrayFrom",(e=0,t)=>[...Array(e)].map(t)),h(this,"range",(e=0,t=e)=>{const s=Math.abs(t-e)||0,r=e<t?1:-1;return this.arrayFrom(s,(n,i)=>i*r+e)}),h(this,"asyncMap",async(e,t)=>Promise.all(e.map(t))),h(this,"flatMap",(e=[],t)=>e.map(t).reduce((s,r)=>[...s,...r],[]))}stringify(e,t,s){const r=[];for(const n in e){if(!Object.prototype.hasOwnProperty.call(e,n))continue;const i=e[n],a=s?"":encodeURIComponent(n);let c;typeof i=="object"?c=this.stringify(i,t?t+encodeURIComponent("["+a+"]"):a,Array.isArray(i)):c=(t?t+encodeURIComponent("["+a+"]"):a)+"="+encodeURIComponent(i),r.push(c)}return r.join("&")}}class de{constructor(e){h(this,"baseURL"),h(this,"timeout"),h(this,"headers"),h(this,"responseInterceptor"),h(this,"fetch"),h(this,"ejectInterceptor"),h(this,"url"),h(this,"parameters"),this.baseURL=e.baseURL,this.headers=e.headers||[],this.timeout=e!=null&&e.timeout?e.timeout*1e3:0,this.responseInterceptor=e.responseInterceptor,this.fetch=(...t)=>e.fetch?e.fetch(...t):fetch(...t),this.ejectInterceptor=!1,this.url="",this.parameters={}}get(e,t){return this.url=e,this.parameters=t,this._methodHandler("get")}post(e,t){return this.url=e,this.parameters=t,this._methodHandler("post")}put(e,t){return this.url=e,this.parameters=t,this._methodHandler("put")}delete(e,t){return this.url=e,this.parameters=t,this._methodHandler("delete")}async _responseHandler(e){const t=[],s={data:{},headers:{},status:0,statusText:""};e.status!==204&&await e.json().then(r=>{s.data=r});for(const r of e.headers.entries())t[r[0]]=r[1];return s.headers=y({},t),s.status=e.status,s.statusText=e.statusText,s}async _methodHandler(e){let t=`${this.baseURL}${this.url}`,s=null;if(e==="get"){const c=new I;t=`${this.baseURL}${this.url}?${c.stringify(this.parameters)}`}else s=JSON.stringify(this.parameters);const r=new URL(t),n=new AbortController,{signal:i}=n;let a;this.timeout&&(a=setTimeout(()=>n.abort(),this.timeout));try{const c=await this.fetch(`${r}`,{method:e,headers:this.headers,body:s,signal:i});this.timeout&&clearTimeout(a);const d=await this._responseHandler(c);return this.responseInterceptor&&!this.ejectInterceptor?this._statusHandler(this.responseInterceptor(d)):this._statusHandler(d)}catch(c){return{message:c}}}eject(){this.ejectInterceptor=!0}_statusHandler(e){const t=/20[0-6]/g;return new Promise((s,r)=>{if(t.test(`${e.status}`))return s(e);const n={message:new Error(e.statusText),status:e.status,response:e.data.error||e.data.slug};r(n)})}}let v={};const m={};class pe{constructor(e,t){if(h(this,"client"),h(this,"maxRetries"),h(this,"throttle"),h(this,"accessToken"),h(this,"cache"),h(this,"helpers"),h(this,"relations"),h(this,"links"),h(this,"richTextResolver"),h(this,"resolveNestedRelations"),!t){const n=e.region?`-${e.region}`:"",i=e.https===!1?"http":"https";e.oauthToken?t=`${i}://api${n}.storyblok.com/v1`:t=`${i}://api${n}.storyblok.com/v2`}const s=new Headers;s.set("Content-Type","application/json"),s.set("Accept","application/json"),s.forEach((n,i)=>{e.headers&&e.headers[i]&&s.set(i,e.headers[i])});let r=5;e.oauthToken&&(s.set("Authorization",e.oauthToken),r=3),e.rateLimit&&(r=e.rateLimit),e.richTextSchema?this.richTextResolver=new k(e.richTextSchema):this.richTextResolver=new k,e.componentResolver&&this.setComponentResolver(e.componentResolver),this.maxRetries=e.maxRetries,this.throttle=V(this.throttledRequest,r,1e3),this.accessToken=e.accessToken||"",this.relations={},this.links={},this.cache=e.cache||{clear:"manual"},this.helpers=new I,this.resolveNestedRelations=!1,this.client=new de({baseURL:t,timeout:e.timeout||0,headers:s,responseInterceptor:e.responseInterceptor,fetch:e.fetch})}setComponentResolver(e){this.richTextResolver.addNode("blok",t=>{let s="";return t.attrs.body.forEach(r=>{s+=e(r.component,r)}),{html:s}})}parseParams(e){return e.version||(e.version="published"),e.token||(e.token=this.getToken()),e.cv||(e.cv=m[e.token]),Array.isArray(e.resolve_relations)&&(e.resolve_relations=e.resolve_relations.join(",")),e}factoryParamOptions(e,t){return this.helpers.isCDNUrl(e)?this.parseParams(t):t}makeRequest(e,t,s,r){const n=this.factoryParamOptions(e,this.helpers.getOptionsPage(t,s,r));return this.cacheResponse(e,n)}get(e,t){t||(t={});const s=`/${e}`,r=this.factoryParamOptions(s,t);return this.cacheResponse(s,r)}async getAll(e,t,s){const r=(t==null?void 0:t.per_page)||25,n=`/${e}`,i=n.split("/"),a=s||i[i.length-1],c=1,d=await this.makeRequest(n,t,r,c),g=d.total?Math.ceil(d.total/r):1,E=await this.helpers.asyncMap(this.helpers.range(c,g),P=>this.makeRequest(n,t,r,P+1));return this.helpers.flatMap([d,...E],P=>Object.values(P.data[a]))}post(e,t){const s=`/${e}`;return Promise.resolve(this.throttle("post",s,t))}put(e,t){const s=`/${e}`;return Promise.resolve(this.throttle("put",s,t))}delete(e,t){const s=`/${e}`;return Promise.resolve(this.throttle("delete",s,t))}getStories(e){return this.get("cdn/stories",e)}getStory(e,t){return this.get(`cdn/stories/${e}`,t)}getToken(){return this.accessToken}ejectInterceptor(){this.client.eject()}_cleanCopy(e){return JSON.parse(JSON.stringify(e))}_insertLinks(e,t){const s=e[t];s&&s.fieldtype=="multilink"&&s.linktype=="story"&&typeof s.id=="string"&&this.links[s.id]?s.story=this._cleanCopy(this.links[s.id]):s&&s.linktype==="story"&&typeof s.uuid=="string"&&this.links[s.uuid]&&(s.story=this._cleanCopy(this.links[s.uuid]))}_insertRelations(e,t,s){if(s.indexOf(`${e.component}.${t}`)>-1){if(typeof e[t]=="string")this.relations[e[t]]&&(e[t]=this._cleanCopy(this.relations[e[t]]));else if(e[t]&&e[t].constructor===Array){const r=[];e[t].forEach(n=>{this.relations[n]&&r.push(this._cleanCopy(this.relations[n]))}),e[t]=r}}}iterateTree(e,t){const s=r=>{if(r!=null){if(r.constructor===Array)for(let n=0;n<r.length;n++)s(r[n]);else if(r.constructor===Object){if(r._stopResolving)return;for(const n in r)(r.component&&r._uid||r.type==="link")&&(this._insertRelations(r,n,t),this._insertLinks(r,n)),s(r[n])}}};s(e.content)}async resolveLinks(e,t){let s=[];if(e.link_uuids){const r=e.link_uuids.length,n=[],i=50;for(let a=0;a<r;a+=i){const c=Math.min(r,a+i);n.push(e.link_uuids.slice(a,c))}for(let a=0;a<n.length;a++)(await this.getStories({per_page:i,language:t.language,version:t.version,by_uuids:n[a].join(",")})).data.stories.forEach(c=>{s.push(c)})}else s=e.links;s.forEach(r=>{this.links[r.uuid]=_(y({},r),{_stopResolving:!0})})}async resolveRelations(e,t){let s=[];if(e.rel_uuids){const r=e.rel_uuids.length,n=[],i=50;for(let a=0;a<r;a+=i){const c=Math.min(r,a+i);n.push(e.rel_uuids.slice(a,c))}for(let a=0;a<n.length;a++)(await this.getStories({per_page:i,language:t.language,version:t.version,by_uuids:n[a].join(",")})).data.stories.forEach(c=>{s.push(c)})}else s=e.rels;s&&s.length>0&&s.forEach(r=>{this.relations[r.uuid]=_(y({},r),{_stopResolving:!0})})}async resolveStories(e,t){var s,r;let n=[];if(typeof t.resolve_relations<"u"&&t.resolve_relations.length>0&&(typeof t.resolve_relations=="string"&&(n=t.resolve_relations.split(",")),await this.resolveRelations(e,t)),t.resolve_links&&["1","story","url"].indexOf(t.resolve_links)>-1&&((s=e.links)!=null&&s.length||(r=e.link_uuids)!=null&&r.length)&&await this.resolveLinks(e,t),this.resolveNestedRelations)for(const i in this.relations)this.iterateTree(this.relations[i],n);e.story?this.iterateTree(e.story,n):e.stories.forEach(i=>{this.iterateTree(i,n)})}async cacheResponse(e,t,s){const r=this.helpers.stringify({url:e,params:t}),n=this.cacheProvider();if(this.cache.clear==="auto"&&t.version==="draft"&&await this.flushCache(),t.version==="published"&&e!="/cdn/spaces/me"){const i=await n.get(r);if(i)return Promise.resolve(i)}return new Promise((i,a)=>{try{(async()=>{var c;try{const d=await this.throttle("get",e,t);let g={data:d.data,headers:d.headers};return(c=d.headers)!=null&&c["per-page"]&&(g=Object.assign({},g,{perPage:d.headers["per-page"]?parseInt(d.headers["per-page"]):0,total:d.headers["per-page"]?parseInt(d.headers.total):0})),d.status!=200?a(d):((g.data.story||g.data.stories)&&await this.resolveStories(g.data,t),t.version==="published"&&e!="/cdn/spaces/me"&&await n.set(r,g),g.data.cv&&t.token&&(t.version=="draft"&&m[t.token]!=g.data.cv&&await this.flushCache(),m[t.token]=g.data.cv),i(g))}catch(d){return a(d)}})()}catch{}})}throttledRequest(e,t,s){return this.client[e](t,s)}cacheVersions(){return m}cacheVersion(){return m[this.accessToken]}setCacheVersion(e){this.accessToken&&(m[this.accessToken]=e)}cacheProvider(){switch(this.cache.type){case"memory":return{get(e){return Promise.resolve(v[e])},getAll(){return Promise.resolve(v)},set(e,t){return v[e]=t,Promise.resolve(void 0)},flush(){return v={},Promise.resolve(void 0)}};case"custom":if(this.cache.custom)return this.cache.custom;default:return{get(){return Promise.resolve(void 0)},getAll(){return Promise.resolve(void 0)},set(){return Promise.resolve(void 0)},flush(){return Promise.resolve(void 0)}}}}async flushCache(){return await this.cacheProvider().flush(),this}}const ge=(o={})=>{const{apiOptions:e}=o;if(!e.accessToken){console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");return}return{storyblokApi:new pe(e)}},fe=o=>{if(typeof o!="object"||typeof o._editable>"u")return{};const e=JSON.parse(o._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}};let R;const ye="https://app.storyblok.com/f/storyblok-v2-latest.js",w=(o,e,t={})=>{if(!(typeof window>"u")){if(typeof window.storyblokRegisterEvent>"u"){console.error("Storyblok Bridge is disabled. Please enable it to use it. Read https://github.com/storyblok/storyblok-js");return}if(!o){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(t).on(["input","published","change"],s=>{s.action==="input"&&s.story.id===o?e(s.story):(s.action==="change"||s.action==="published")&&s.storyId===o&&window.location.reload()})})}},me=(o={})=>{const{bridge:e,accessToken:t,use:s=[],apiOptions:r={},richText:n={}}=o;r.accessToken=r.accessToken||t;const i={bridge:e,apiOptions:r};let a={};return s.forEach(c=>{a=y(y({},a),c(i))}),e!==!1&&B(ye),R=new k(n.schema),n.resolver&&A(R,n.resolver),a},A=(o,e)=>{o.addNode("blok",t=>{let s="";return t.attrs.body.forEach(r=>{s+=e(r.component,r)}),{html:s}})},ke=(o,e,t)=>{let s=t||R;if(!s){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return o===""?"":o?(e&&(s=new k(e.schema),e.resolver&&A(s,e.resolver)),s.render(o)):(console.warn(`${o} is not a valid Richtext object. This might be because the value of the richtext field is empty.
+(function(l,u){typeof exports=="object"&&typeof module!="undefined"?u(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],u):(l=typeof globalThis!="undefined"?globalThis:l||self,u(l.storyblokReact={},l.React))})(this,function(l,u){"use strict";var Te=Object.defineProperty,_e=Object.defineProperties;var Re=Object.getOwnPropertyDescriptors;var T=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var L=(l,u,p)=>u in l?Te(l,u,{enumerable:!0,configurable:!0,writable:!0,value:p}):l[u]=p,m=(l,u)=>{for(var p in u||(u={}))U.call(u,p)&&L(l,p,u[p]);if(T)for(var p of T(u))H.call(u,p)&&L(l,p,u[p]);return l},_=(l,u)=>_e(l,Re(u));var q=(l,u)=>{var p={};for(var g in l)U.call(l,g)&&u.indexOf(g)<0&&(p[g]=l[g]);if(l!=null&&T)for(var g of T(l))u.indexOf(g)<0&&H.call(l,g)&&(p[g]=l[g]);return p};function p(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var g=p(u);let $=!1;const j=[],B=o=>new Promise((e,t)=>{if(typeof window>"u"||(window.storyblokRegisterEvent=r=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}$?r():j.push(r)},document.getElementById("storyblok-javascript-bridge")))return;const s=document.createElement("script");s.async=!0,s.src=o,s.id="storyblok-javascript-bridge",s.onerror=r=>t(r),s.onload=r=>{j.forEach(n=>n()),$=!0,e(r)},document.getElementsByTagName("head")[0].appendChild(s)});var D=Object.defineProperty,J=(o,e,t)=>e in o?D(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,h=(o,e,t)=>(J(o,typeof e!="symbol"?e+"":e,t),t);function C(o){return!(o!==o||o===1/0||o===-1/0)}function V(o,e,t){if(!C(e))throw new TypeError("Expected `limit` to be a finite number");if(!C(t))throw new TypeError("Expected `interval` to be a finite number");const s=[];let r=[],n=0;const i=function(){n++;const c=setTimeout(function(){n--,s.length>0&&i(),r=r.filter(function(f){return f!==c})},t);r.indexOf(c)<0&&r.push(c);const d=s.shift();d.resolve(o.apply(d.self,d.args))},a=function(...c){const d=this;return new Promise(function(f,E){s.push({resolve:f,reject:E,args:c,self:d}),n<e&&i()})};return a.abort=function(){r.forEach(clearTimeout),r=[],s.forEach(function(c){c.reject(function(){Error.call(this,"Throttled function aborted"),this.name="AbortError"})}),s.length=0},a}const Y=function(o,e){const t={};for(const s in o){const r=o[s];e.indexOf(s)>-1&&r!==null&&(t[s]=r)}return t},z=o=>o==="email",F=()=>({singleTag:"hr"}),G=()=>({tag:"blockquote"}),Q=()=>({tag:"ul"}),W=o=>({tag:["pre",{tag:"code",attrs:o.attrs}]}),X=()=>({singleTag:"br"}),Z=o=>({tag:`h${o.attrs.level}`}),K=o=>({singleTag:[{tag:"img",attrs:Y(o.attrs,["src","alt","title"])}]}),ee=()=>({tag:"li"}),te=()=>({tag:"ol"}),se=()=>({tag:"p"}),re=()=>({tag:"b"}),oe=()=>({tag:"strike"}),ne=()=>({tag:"u"}),ie=()=>({tag:"strong"}),ae=()=>({tag:"code"}),le=()=>({tag:"i"}),ce=o=>{const e=m({},o.attrs),{linktype:t="url"}=o.attrs;return z(t)&&(e.href=`mailto:${e.href}`),e.anchor&&(e.href=`${e.href}#${e.anchor}`,delete e.anchor),{tag:[{tag:"a",attrs:e}]}},he=o=>({tag:[{tag:"span",attrs:o.attrs}]}),O={nodes:{horizontal_rule:F,blockquote:G,bullet_list:Q,code_block:W,hard_break:X,heading:Z,image:K,list_item:ee,ordered_list:te,paragraph:se},marks:{bold:re,strike:oe,underline:ne,strong:ie,code:ae,italic:le,link:ce,styled:he}},ue=function(o){const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},t=/[&<>"']/g,s=RegExp(t.source);return o&&s.test(o)?o.replace(t,r=>e[r]):o};class k{constructor(e){h(this,"marks"),h(this,"nodes"),e||(e=O),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e){if(e&&e.content&&Array.isArray(e.content)){let t="";return e.content.forEach(s=>{t+=this.renderNode(s)}),t}return console.warn("The render method must receive an object with a content field, which is an array"),""}renderNode(e){const t=[];e.marks&&e.marks.forEach(r=>{const n=this.getMatchingMark(r);n&&t.push(this.renderOpeningTag(n.tag))});const s=this.getMatchingNode(e);return s&&s.tag&&t.push(this.renderOpeningTag(s.tag)),e.content?e.content.forEach(r=>{t.push(this.renderNode(r))}):e.text?t.push(ue(e.text)):s&&s.singleTag?t.push(this.renderTag(s.singleTag," /")):s&&s.html&&t.push(s.html),s&&s.tag&&t.push(this.renderClosingTag(s.tag)),e.marks&&e.marks.slice(0).reverse().forEach(r=>{const n=this.getMatchingMark(r);n&&t.push(this.renderClosingTag(n.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(s=>{if(s.constructor===String)return`<${s}${t}>`;{let r=`<${s.tag}`;if(s.attrs)for(const n in s.attrs){const i=s.attrs[n];i!==null&&(r+=` ${n}="${i}"`)}return`${r}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(t=>t.constructor===String?`</${t}>`:`</${t.tag}>`).join("")}getMatchingNode(e){const t=this.nodes[e.type];if(typeof t=="function")return t(e)}getMatchingMark(e){const t=this.marks[e.type];if(typeof t=="function")return t(e)}}class I{constructor(){h(this,"isCDNUrl",(e="")=>e.indexOf("/cdn/")>-1),h(this,"getOptionsPage",(e,t=25,s=1)=>_(m({},e),{per_page:t,page:s})),h(this,"delay",e=>new Promise(t=>setTimeout(t,e))),h(this,"arrayFrom",(e=0,t)=>[...Array(e)].map(t)),h(this,"range",(e=0,t=e)=>{const s=Math.abs(t-e)||0,r=e<t?1:-1;return this.arrayFrom(s,(n,i)=>i*r+e)}),h(this,"asyncMap",async(e,t)=>Promise.all(e.map(t))),h(this,"flatMap",(e=[],t)=>e.map(t).reduce((s,r)=>[...s,...r],[]))}stringify(e,t,s){const r=[];for(const n in e){if(!Object.prototype.hasOwnProperty.call(e,n))continue;const i=e[n],a=s?"":encodeURIComponent(n);let c;typeof i=="object"?c=this.stringify(i,t?t+encodeURIComponent("["+a+"]"):a,Array.isArray(i)):c=(t?t+encodeURIComponent("["+a+"]"):a)+"="+encodeURIComponent(i),r.push(c)}return r.join("&")}}class de{constructor(e){h(this,"baseURL"),h(this,"timeout"),h(this,"headers"),h(this,"responseInterceptor"),h(this,"fetch"),h(this,"ejectInterceptor"),h(this,"url"),h(this,"parameters"),this.baseURL=e.baseURL,this.headers=e.headers||[],this.timeout=e!=null&&e.timeout?e.timeout*1e3:0,this.responseInterceptor=e.responseInterceptor,this.fetch=(...t)=>e.fetch?e.fetch(...t):fetch(...t),this.ejectInterceptor=!1,this.url="",this.parameters={}}get(e,t){return this.url=e,this.parameters=t,this._methodHandler("get")}post(e,t){return this.url=e,this.parameters=t,this._methodHandler("post")}put(e,t){return this.url=e,this.parameters=t,this._methodHandler("put")}delete(e,t){return this.url=e,this.parameters=t,this._methodHandler("delete")}async _responseHandler(e){const t=[],s={data:{},headers:{},status:0,statusText:""};e.status!==204&&await e.json().then(r=>{s.data=r});for(const r of e.headers.entries())t[r[0]]=r[1];return s.headers=m({},t),s.status=e.status,s.statusText=e.statusText,s}async _methodHandler(e){let t=`${this.baseURL}${this.url}`,s=null;if(e==="get"){const c=new I;t=`${this.baseURL}${this.url}?${c.stringify(this.parameters)}`}else s=JSON.stringify(this.parameters);const r=new URL(t),n=new AbortController,{signal:i}=n;let a;this.timeout&&(a=setTimeout(()=>n.abort(),this.timeout));try{const c=await this.fetch(`${r}`,{method:e,headers:this.headers,body:s,signal:i});this.timeout&&clearTimeout(a);const d=await this._responseHandler(c);return this.responseInterceptor&&!this.ejectInterceptor?this._statusHandler(this.responseInterceptor(d)):this._statusHandler(d)}catch(c){return{message:c}}}eject(){this.ejectInterceptor=!0}_statusHandler(e){const t=/20[0-6]/g;return new Promise((s,r)=>{if(t.test(`${e.status}`))return s(e);const n={message:new Error(e.statusText),status:e.status,response:e.data.error||e.data.slug};r(n)})}}let v={};const y={};class pe{constructor(e,t){if(h(this,"client"),h(this,"maxRetries"),h(this,"throttle"),h(this,"accessToken"),h(this,"cache"),h(this,"helpers"),h(this,"relations"),h(this,"links"),h(this,"richTextResolver"),h(this,"resolveNestedRelations"),!t){const n=e.region?`-${e.region}`:"",i=e.https===!1?"http":"https";e.oauthToken?t=`${i}://api${n}.storyblok.com/v1`:t=`${i}://api${n}.storyblok.com/v2`}const s=new Headers;s.set("Content-Type","application/json"),s.set("Accept","application/json"),s.forEach((n,i)=>{e.headers&&e.headers[i]&&s.set(i,e.headers[i])});let r=5;e.oauthToken&&(s.set("Authorization",e.oauthToken),r=3),e.rateLimit&&(r=e.rateLimit),e.richTextSchema?this.richTextResolver=new k(e.richTextSchema):this.richTextResolver=new k,e.componentResolver&&this.setComponentResolver(e.componentResolver),this.maxRetries=e.maxRetries,this.throttle=V(this.throttledRequest,r,1e3),this.accessToken=e.accessToken||"",this.relations={},this.links={},this.cache=e.cache||{clear:"manual"},this.helpers=new I,this.resolveNestedRelations=!1,this.client=new de({baseURL:t,timeout:e.timeout||0,headers:s,responseInterceptor:e.responseInterceptor,fetch:e.fetch})}setComponentResolver(e){this.richTextResolver.addNode("blok",t=>{let s="";return t.attrs.body.forEach(r=>{s+=e(r.component,r)}),{html:s}})}parseParams(e){return e.version||(e.version="published"),e.token||(e.token=this.getToken()),e.cv||(e.cv=y[e.token]),Array.isArray(e.resolve_relations)&&(e.resolve_relations=e.resolve_relations.join(",")),e}factoryParamOptions(e,t){return this.helpers.isCDNUrl(e)?this.parseParams(t):t}makeRequest(e,t,s,r){const n=this.factoryParamOptions(e,this.helpers.getOptionsPage(t,s,r));return this.cacheResponse(e,n)}get(e,t){t||(t={});const s=`/${e}`,r=this.factoryParamOptions(s,t);return this.cacheResponse(s,r)}async getAll(e,t,s){const r=(t==null?void 0:t.per_page)||25,n=`/${e}`,i=n.split("/"),a=s||i[i.length-1],c=1,d=await this.makeRequest(n,t,r,c),f=d.total?Math.ceil(d.total/r):1,E=await this.helpers.asyncMap(this.helpers.range(c,f),P=>this.makeRequest(n,t,r,P+1));return this.helpers.flatMap([d,...E],P=>Object.values(P.data[a]))}post(e,t){const s=`/${e}`;return Promise.resolve(this.throttle("post",s,t))}put(e,t){const s=`/${e}`;return Promise.resolve(this.throttle("put",s,t))}delete(e,t){const s=`/${e}`;return Promise.resolve(this.throttle("delete",s,t))}getStories(e){return this.get("cdn/stories",e)}getStory(e,t){return this.get(`cdn/stories/${e}`,t)}getToken(){return this.accessToken}ejectInterceptor(){this.client.eject()}_cleanCopy(e){return JSON.parse(JSON.stringify(e))}_insertLinks(e,t){const s=e[t];s&&s.fieldtype=="multilink"&&s.linktype=="story"&&typeof s.id=="string"&&this.links[s.id]?s.story=this._cleanCopy(this.links[s.id]):s&&s.linktype==="story"&&typeof s.uuid=="string"&&this.links[s.uuid]&&(s.story=this._cleanCopy(this.links[s.uuid]))}_insertRelations(e,t,s){if(s.indexOf(`${e.component}.${t}`)>-1){if(typeof e[t]=="string")this.relations[e[t]]&&(e[t]=this._cleanCopy(this.relations[e[t]]));else if(e[t]&&e[t].constructor===Array){const r=[];e[t].forEach(n=>{this.relations[n]&&r.push(this._cleanCopy(this.relations[n]))}),e[t]=r}}}iterateTree(e,t){const s=r=>{if(r!=null){if(r.constructor===Array)for(let n=0;n<r.length;n++)s(r[n]);else if(r.constructor===Object){if(r._stopResolving)return;for(const n in r)(r.component&&r._uid||r.type==="link")&&(this._insertRelations(r,n,t),this._insertLinks(r,n)),s(r[n])}}};s(e.content)}async resolveLinks(e,t){let s=[];if(e.link_uuids){const r=e.link_uuids.length,n=[],i=50;for(let a=0;a<r;a+=i){const c=Math.min(r,a+i);n.push(e.link_uuids.slice(a,c))}for(let a=0;a<n.length;a++)(await this.getStories({per_page:i,language:t.language,version:t.version,by_uuids:n[a].join(",")})).data.stories.forEach(c=>{s.push(c)})}else s=e.links;s.forEach(r=>{this.links[r.uuid]=_(m({},r),{_stopResolving:!0})})}async resolveRelations(e,t){let s=[];if(e.rel_uuids){const r=e.rel_uuids.length,n=[],i=50;for(let a=0;a<r;a+=i){const c=Math.min(r,a+i);n.push(e.rel_uuids.slice(a,c))}for(let a=0;a<n.length;a++)(await this.getStories({per_page:i,language:t.language,version:t.version,by_uuids:n[a].join(",")})).data.stories.forEach(c=>{s.push(c)})}else s=e.rels;s&&s.length>0&&s.forEach(r=>{this.relations[r.uuid]=_(m({},r),{_stopResolving:!0})})}async resolveStories(e,t){var s,r;let n=[];if(typeof t.resolve_relations<"u"&&t.resolve_relations.length>0&&(typeof t.resolve_relations=="string"&&(n=t.resolve_relations.split(",")),await this.resolveRelations(e,t)),t.resolve_links&&["1","story","url"].indexOf(t.resolve_links)>-1&&((s=e.links)!=null&&s.length||(r=e.link_uuids)!=null&&r.length)&&await this.resolveLinks(e,t),this.resolveNestedRelations)for(const i in this.relations)this.iterateTree(this.relations[i],n);e.story?this.iterateTree(e.story,n):e.stories.forEach(i=>{this.iterateTree(i,n)})}async cacheResponse(e,t,s){const r=this.helpers.stringify({url:e,params:t}),n=this.cacheProvider();if(this.cache.clear==="auto"&&t.version==="draft"&&await this.flushCache(),t.version==="published"&&e!="/cdn/spaces/me"){const i=await n.get(r);if(i)return Promise.resolve(i)}return new Promise((i,a)=>{try{(async()=>{var c;try{const d=await this.throttle("get",e,t);let f={data:d.data,headers:d.headers};return(c=d.headers)!=null&&c["per-page"]&&(f=Object.assign({},f,{perPage:d.headers["per-page"]?parseInt(d.headers["per-page"]):0,total:d.headers["per-page"]?parseInt(d.headers.total):0})),d.status!=200?a(d):((f.data.story||f.data.stories)&&await this.resolveStories(f.data,t),t.version==="published"&&e!="/cdn/spaces/me"&&await n.set(r,f),f.data.cv&&t.token&&(t.version=="draft"&&y[t.token]!=f.data.cv&&await this.flushCache(),y[t.token]=f.data.cv),i(f))}catch(d){return a(d)}})()}catch{}})}throttledRequest(e,t,s){return this.client[e](t,s)}cacheVersions(){return y}cacheVersion(){return y[this.accessToken]}setCacheVersion(e){this.accessToken&&(y[this.accessToken]=e)}cacheProvider(){switch(this.cache.type){case"memory":return{get(e){return Promise.resolve(v[e])},getAll(){return Promise.resolve(v)},set(e,t){return v[e]=t,Promise.resolve(void 0)},flush(){return v={},Promise.resolve(void 0)}};case"custom":if(this.cache.custom)return this.cache.custom;default:return{get(){return Promise.resolve(void 0)},getAll(){return Promise.resolve(void 0)},set(){return Promise.resolve(void 0)},flush(){return Promise.resolve(void 0)}}}}async flushCache(){return await this.cacheProvider().flush(),this}}const fe=(o={})=>{const{apiOptions:e}=o;if(!e.accessToken){console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");return}return{storyblokApi:new pe(e)}},ge=o=>{if(typeof o!="object"||typeof o._editable>"u")return{};const e=JSON.parse(o._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}};let R;const me="https://app.storyblok.com/f/storyblok-v2-latest.js",w=(o,e,t={})=>{if(!(typeof window>"u")&&typeof window.storyblokRegisterEvent<"u"){if(!o){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(t).on(["input","published","change"],s=>{s.action==="input"&&s.story.id===o?e(s.story):(s.action==="change"||s.action==="published")&&s.storyId===o&&window.location.reload()})})}},ye=(o={})=>{const{bridge:e,accessToken:t,use:s=[],apiOptions:r={},richText:n={}}=o;r.accessToken=r.accessToken||t;const i={bridge:e,apiOptions:r};let a={};return s.forEach(c=>{a=m(m({},a),c(i))}),e!==!1&&B(me),R=new k(n.schema),n.resolver&&A(R,n.resolver),a},A=(o,e)=>{o.addNode("blok",t=>{let s="";return t.attrs.body.forEach(r=>{s+=e(r.component,r)}),{html:s}})},ke=(o,e,t)=>{let s=t||R;if(!s){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return o===""?"":o?(e&&(s=new k(e.schema),e.resolver&&A(s,e.resolver)),s.render(o)):(console.warn(`${o} is not a valid Richtext object. This might be because the value of the richtext field is empty.
     
-  For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`),"")},x=u.forwardRef((s,t)=>{var r=s,{blok:o}=r,e=q(r,["blok"]);if(!o)return console.error("Please provide a 'blok' property to the StoryblokComponent"),f.default.createElement("div",null,"Please provide a blok property to the StoryblokComponent");const n=N(o.component);return n?f.default.createElement(n,y({ref:t,blok:o},e)):f.default.createElement("div",null)});x.displayName="StoryblokComponent";const be=(o,e={},t={})=>{let[s,r]=u.useState({});if(!b)return console.error("You can't use useStoryblok if you're not loading apiPlugin."),null;const n=typeof window!="undefined"&&typeof window.storyblokRegisterEvent!="undefined";return u.useEffect(()=>{async function i(){const{data:a}=await b.get(`cdn/stories/${o}`,e);r(a.story),n&&a.story.id&&w(a.story.id,c=>r(c),t)}i()},[o]),s},ve=(o=null,e={})=>{let[t,s]=u.useState(o);return!(typeof window!="undefined"&&typeof window.storyblokRegisterEvent!="undefined")||!o?o:(u.useEffect(()=>{s(o),w(t.id,n=>s(n),e)},[o]),t)};let b=null;const M=()=>(b||console.error("You can't use getStoryblokApi if you're not loading apiPlugin."),b);let S={};const N=o=>S[o]?S[o]:(console.error(`Component ${o} doesn't exist.`),!1),we=(o={})=>{const{storyblokApi:e}=me(o);b=e,S=o.components};l.RichTextResolver=k,l.RichTextSchema=O,l.StoryblokComponent=x,l.apiPlugin=ge,l.getComponent=N,l.getStoryblokApi=M,l.registerStoryblokBridge=w,l.renderRichText=ke,l.storyblokEditable=fe,l.storyblokInit=we,l.useStoryblok=be,l.useStoryblokApi=M,l.useStoryblokBridge=w,l.useStoryblokState=ve,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+  For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`),"")},x=u.forwardRef((s,t)=>{var r=s,{blok:o}=r,e=q(r,["blok"]);if(!o)return console.error("Please provide a 'blok' property to the StoryblokComponent"),g.default.createElement("div",null,"Please provide a blok property to the StoryblokComponent");const n=N(o.component);return n?g.default.createElement(n,m({ref:t,blok:o},e)):g.default.createElement("div",null)});x.displayName="StoryblokComponent";const be=(o,e={},t={})=>{let[s,r]=u.useState({});if(!b)return console.error("You can't use useStoryblok if you're not loading apiPlugin."),null;const n=typeof window!="undefined"&&typeof window.storyblokRegisterEvent!="undefined";return u.useEffect(()=>{async function i(){const{data:a}=await b.get(`cdn/stories/${o}`,e);r(a.story),n&&a.story.id&&w(a.story.id,c=>r(c),t)}i()},[o]),s},ve=(o=null,e={})=>{let[t,s]=u.useState(o);return!(typeof window!="undefined"&&typeof window.storyblokRegisterEvent!="undefined")||!o?o:(u.useEffect(()=>{s(o),w(t.id,n=>s(n),e)},[o]),t)};let b=null;const M=()=>(b||console.error("You can't use getStoryblokApi if you're not loading apiPlugin."),b);let S={};const N=o=>S[o]?S[o]:(console.error(`Component ${o} doesn't exist.`),!1),we=(o={})=>{const{storyblokApi:e}=ye(o);b=e,S=o.components};l.RichTextResolver=k,l.RichTextSchema=O,l.StoryblokComponent=x,l.apiPlugin=fe,l.getComponent=N,l.getStoryblokApi=M,l.registerStoryblokBridge=w,l.renderRichText=ke,l.storyblokEditable=ge,l.storyblokInit=we,l.useStoryblok=be,l.useStoryblokApi=M,l.useStoryblokBridge=w,l.useStoryblokState=ve,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/storyblok-react.mjs

@@ -30,91 +30,91 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import React, { forwardRef, useState, useEffect } from "react";
-let k = false;
-const v = [], w = (n) => new Promise((t, e) => {
+let v = false;
+const k = [], w = (o) => new Promise((t, e) => {
   if (typeof window > "u" || (window.storyblokRegisterEvent = (r) => {
     if (window.location === window.parent.location) {
       console.warn("You are not in Draft Mode or in the Visual Editor.");
       return;
     }
-    k ? r() : v.push(r);
+    v ? r() : k.push(r);
   }, document.getElementById("storyblok-javascript-bridge")))
     return;
   const s = document.createElement("script");
-  s.async = true, s.src = n, s.id = "storyblok-javascript-bridge", s.onerror = (r) => e(r), s.onload = (r) => {
-    v.forEach((o) => o()), k = true, t(r);
+  s.async = true, s.src = o, s.id = "storyblok-javascript-bridge", s.onerror = (r) => e(r), s.onload = (r) => {
+    k.forEach((n) => n()), v = true, t(r);
   }, document.getElementsByTagName("head")[0].appendChild(s);
 });
-var $ = Object.defineProperty, P = (n, t, e) => t in n ? $(n, t, { enumerable: true, configurable: true, writable: true, value: e }) : n[t] = e, c = (n, t, e) => (P(n, typeof t != "symbol" ? t + "" : t, e), e);
-function b(n) {
-  return !(n !== n || n === 1 / 0 || n === -1 / 0);
+var $ = Object.defineProperty, P = (o, t, e) => t in o ? $(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e, l = (o, t, e) => (P(o, typeof t != "symbol" ? t + "" : t, e), e);
+function b(o) {
+  return !(o !== o || o === 1 / 0 || o === -1 / 0);
 }
-function j(n, t, e) {
+function x(o, t, e) {
   if (!b(t))
     throw new TypeError("Expected `limit` to be a finite number");
   if (!b(e))
     throw new TypeError("Expected `interval` to be a finite number");
   const s = [];
-  let r = [], o = 0;
+  let r = [], n = 0;
   const i = function() {
-    o++;
-    const l = setTimeout(function() {
-      o--, s.length > 0 && i(), r = r.filter(function(u) {
-        return u !== l;
+    n++;
+    const c = setTimeout(function() {
+      n--, s.length > 0 && i(), r = r.filter(function(u) {
+        return u !== c;
       });
     }, e);
-    r.indexOf(l) < 0 && r.push(l);
+    r.indexOf(c) < 0 && r.push(c);
     const h = s.shift();
-    h.resolve(n.apply(h.self, h.args));
-  }, a = function(...l) {
+    h.resolve(o.apply(h.self, h.args));
+  }, a = function(...c) {
     const h = this;
     return new Promise(function(u, f) {
       s.push({
         resolve: u,
         reject: f,
-        args: l,
+        args: c,
         self: h
-      }), o < t && i();
+      }), n < t && i();
     });
   };
   return a.abort = function() {
-    r.forEach(clearTimeout), r = [], s.forEach(function(l) {
-      l.reject(function() {
+    r.forEach(clearTimeout), r = [], s.forEach(function(c) {
+      c.reject(function() {
         Error.call(this, "Throttled function aborted"), this.name = "AbortError";
       });
     }), s.length = 0;
   }, a;
 }
-const x = function(n, t) {
+const j = function(o, t) {
   const e = {};
-  for (const s in n) {
-    const r = n[s];
+  for (const s in o) {
+    const r = o[s];
     t.indexOf(s) > -1 && r !== null && (e[s] = r);
   }
   return e;
-}, E = (n) => n === "email", S = () => ({
+}, E = (o) => o === "email", S = () => ({
   singleTag: "hr"
 }), O = () => ({
   tag: "blockquote"
 }), C = () => ({
   tag: "ul"
-}), I = (n) => ({
+}), I = (o) => ({
   tag: [
     "pre",
     {
       tag: "code",
-      attrs: n.attrs
+      attrs: o.attrs
     }
   ]
 }), A = () => ({
   singleTag: "br"
-}), N = (n) => ({
-  tag: `h${n.attrs.level}`
-}), M = (n) => ({
+}), N = (o) => ({
+  tag: `h${o.attrs.level}`
+}), M = (o) => ({
   singleTag: [
     {
       tag: "img",
-      attrs: x(n.attrs, ["src", "alt", "title"])
+      attrs: j(o.attrs, ["src", "alt", "title"])
     }
   ]
 }), L = () => ({
@@ -135,8 +135,8 @@ const x = function(n, t) {
   tag: "code"
 }), V = () => ({
   tag: "i"
-}), z = (n) => {
-  const t = __spreadValues({}, n.attrs), { linktype: e = "url" } = n.attrs;
+}), z = (o) => {
+  const t = __spreadValues({}, o.attrs), { linktype: e = "url" } = o.attrs;
   return E(e) && (t.href = `mailto:${t.href}`), t.anchor && (t.href = `${t.href}#${t.anchor}`, delete t.anchor), {
     tag: [
       {
@@ -145,11 +145,11 @@ const x = function(n, t) {
       }
     ]
   };
-}, Y = (n) => ({
+}, Y = (o) => ({
   tag: [
     {
       tag: "span",
-      attrs: n.attrs
+      attrs: o.attrs
     }
   ]
 }), K = {
@@ -175,7 +175,7 @@ const x = function(n, t) {
     link: z,
     styled: Y
   }
-}, Q = function(n) {
+}, Q = function(o) {
   const t = {
     "&": "&amp;",
     "<": "&lt;",
@@ -183,11 +183,11 @@ const x = function(n, t) {
     '"': "&quot;",
     "'": "&#39;"
   }, e = /[&<>"']/g, s = RegExp(e.source);
-  return n && s.test(n) ? n.replace(e, (r) => t[r]) : n;
+  return o && s.test(o) ? o.replace(e, (r) => t[r]) : o;
 };
 class g {
   constructor(t) {
-    c(this, "marks"), c(this, "nodes"), t || (t = K), this.marks = t.marks || [], this.nodes = t.nodes || [];
+    l(this, "marks"), l(this, "nodes"), t || (t = K), this.marks = t.marks || [], this.nodes = t.nodes || [];
   }
   addNode(t, e) {
     this.nodes[t] = e;
@@ -207,15 +207,15 @@ class g {
   renderNode(t) {
     const e = [];
     t.marks && t.marks.forEach((r) => {
-      const o = this.getMatchingMark(r);
-      o && e.push(this.renderOpeningTag(o.tag));
+      const n = this.getMatchingMark(r);
+      n && e.push(this.renderOpeningTag(n.tag));
     });
     const s = this.getMatchingNode(t);
     return s && s.tag && e.push(this.renderOpeningTag(s.tag)), t.content ? t.content.forEach((r) => {
       e.push(this.renderNode(r));
     }) : t.text ? e.push(Q(t.text)) : s && s.singleTag ? e.push(this.renderTag(s.singleTag, " /")) : s && s.html && e.push(s.html), s && s.tag && e.push(this.renderClosingTag(s.tag)), t.marks && t.marks.slice(0).reverse().forEach((r) => {
-      const o = this.getMatchingMark(r);
-      o && e.push(this.renderClosingTag(o.tag));
+      const n = this.getMatchingMark(r);
+      n && e.push(this.renderClosingTag(n.tag));
     }), e.join("");
   }
   renderTag(t, e) {
@@ -225,9 +225,9 @@ class g {
       {
         let r = `<${s.tag}`;
         if (s.attrs)
-          for (const o in s.attrs) {
-            const i = s.attrs[o];
-            i !== null && (r += ` ${o}="${i}"`);
+          for (const n in s.attrs) {
+            const i = s.attrs[n];
+            i !== null && (r += ` ${n}="${i}"`);
           }
         return `${r}${e}>`;
       }
@@ -252,29 +252,29 @@ class g {
 }
 class T {
   constructor() {
-    c(this, "isCDNUrl", (t = "") => t.indexOf("/cdn/") > -1), c(this, "getOptionsPage", (t, e = 25, s = 1) => __spreadProps(__spreadValues({}, t), {
+    l(this, "isCDNUrl", (t = "") => t.indexOf("/cdn/") > -1), l(this, "getOptionsPage", (t, e = 25, s = 1) => __spreadProps(__spreadValues({}, t), {
       per_page: e,
       page: s
-    })), c(this, "delay", (t) => new Promise((e) => setTimeout(e, t))), c(this, "arrayFrom", (t = 0, e) => [...Array(t)].map(e)), c(this, "range", (t = 0, e = t) => {
+    })), l(this, "delay", (t) => new Promise((e) => setTimeout(e, t))), l(this, "arrayFrom", (t = 0, e) => [...Array(t)].map(e)), l(this, "range", (t = 0, e = t) => {
       const s = Math.abs(e - t) || 0, r = t < e ? 1 : -1;
-      return this.arrayFrom(s, (o, i) => i * r + t);
-    }), c(this, "asyncMap", async (t, e) => Promise.all(t.map(e))), c(this, "flatMap", (t = [], e) => t.map(e).reduce((s, r) => [...s, ...r], []));
+      return this.arrayFrom(s, (n, i) => i * r + t);
+    }), l(this, "asyncMap", async (t, e) => Promise.all(t.map(e))), l(this, "flatMap", (t = [], e) => t.map(e).reduce((s, r) => [...s, ...r], []));
   }
   stringify(t, e, s) {
     const r = [];
-    for (const o in t) {
-      if (!Object.prototype.hasOwnProperty.call(t, o))
+    for (const n in t) {
+      if (!Object.prototype.hasOwnProperty.call(t, n))
         continue;
-      const i = t[o], a = s ? "" : encodeURIComponent(o);
-      let l;
-      typeof i == "object" ? l = this.stringify(i, e ? e + encodeURIComponent("[" + a + "]") : a, Array.isArray(i)) : l = (e ? e + encodeURIComponent("[" + a + "]") : a) + "=" + encodeURIComponent(i), r.push(l);
+      const i = t[n], a = s ? "" : encodeURIComponent(n);
+      let c;
+      typeof i == "object" ? c = this.stringify(i, e ? e + encodeURIComponent("[" + a + "]") : a, Array.isArray(i)) : c = (e ? e + encodeURIComponent("[" + a + "]") : a) + "=" + encodeURIComponent(i), r.push(c);
     }
     return r.join("&");
   }
 }
 class G {
   constructor(t) {
-    c(this, "baseURL"), c(this, "timeout"), c(this, "headers"), c(this, "responseInterceptor"), c(this, "fetch"), c(this, "ejectInterceptor"), c(this, "url"), c(this, "parameters"), this.baseURL = t.baseURL, this.headers = t.headers || [], this.timeout = t != null && t.timeout ? t.timeout * 1e3 : 0, this.responseInterceptor = t.responseInterceptor, this.fetch = (...e) => t.fetch ? t.fetch(...e) : fetch(...e), this.ejectInterceptor = false, this.url = "", this.parameters = {};
+    l(this, "baseURL"), l(this, "timeout"), l(this, "headers"), l(this, "responseInterceptor"), l(this, "fetch"), l(this, "ejectInterceptor"), l(this, "url"), l(this, "parameters"), this.baseURL = t.baseURL, this.headers = t.headers || [], this.timeout = t != null && t.timeout ? t.timeout * 1e3 : 0, this.responseInterceptor = t.responseInterceptor, this.fetch = (...e) => t.fetch ? t.fetch(...e) : fetch(...e), this.ejectInterceptor = false, this.url = "", this.parameters = {};
   }
   get(t, e) {
     return this.url = t, this.parameters = e, this._methodHandler("get");
@@ -305,26 +305,26 @@ class G {
   async _methodHandler(t) {
     let e = `${this.baseURL}${this.url}`, s = null;
     if (t === "get") {
-      const l = new T();
-      e = `${this.baseURL}${this.url}?${l.stringify(this.parameters)}`;
+      const c = new T();
+      e = `${this.baseURL}${this.url}?${c.stringify(this.parameters)}`;
     } else
       s = JSON.stringify(this.parameters);
-    const r = new URL(e), o = new AbortController(), { signal: i } = o;
+    const r = new URL(e), n = new AbortController(), { signal: i } = n;
     let a;
-    this.timeout && (a = setTimeout(() => o.abort(), this.timeout));
+    this.timeout && (a = setTimeout(() => n.abort(), this.timeout));
     try {
-      const l = await this.fetch(`${r}`, {
+      const c = await this.fetch(`${r}`, {
         method: t,
         headers: this.headers,
         body: s,
         signal: i
       });
       this.timeout && clearTimeout(a);
-      const h = await this._responseHandler(l);
+      const h = await this._responseHandler(c);
       return this.responseInterceptor && !this.ejectInterceptor ? this._statusHandler(this.responseInterceptor(h)) : this._statusHandler(h);
-    } catch (l) {
+    } catch (c) {
       return {
-        message: l
+        message: c
       };
     }
   }
@@ -336,12 +336,12 @@ class G {
     return new Promise((s, r) => {
       if (e.test(`${t.status}`))
         return s(t);
-      const o = {
+      const n = {
         message: new Error(t.statusText),
         status: t.status,
         response: t.data.error || t.data.slug
       };
-      r(o);
+      r(n);
     });
   }
 }
@@ -349,16 +349,16 @@ let p = {};
 const d = {};
 class W {
   constructor(t, e) {
-    if (c(this, "client"), c(this, "maxRetries"), c(this, "throttle"), c(this, "accessToken"), c(this, "cache"), c(this, "helpers"), c(this, "relations"), c(this, "links"), c(this, "richTextResolver"), c(this, "resolveNestedRelations"), !e) {
-      const o = t.region ? `-${t.region}` : "", i = t.https === false ? "http" : "https";
-      t.oauthToken ? e = `${i}://api${o}.storyblok.com/v1` : e = `${i}://api${o}.storyblok.com/v2`;
+    if (l(this, "client"), l(this, "maxRetries"), l(this, "throttle"), l(this, "accessToken"), l(this, "cache"), l(this, "helpers"), l(this, "relations"), l(this, "links"), l(this, "richTextResolver"), l(this, "resolveNestedRelations"), !e) {
+      const n = t.region ? `-${t.region}` : "", i = t.https === false ? "http" : "https";
+      t.oauthToken ? e = `${i}://api${n}.storyblok.com/v1` : e = `${i}://api${n}.storyblok.com/v2`;
     }
     const s = new Headers();
-    s.set("Content-Type", "application/json"), s.set("Accept", "application/json"), s.forEach((o, i) => {
+    s.set("Content-Type", "application/json"), s.set("Accept", "application/json"), s.forEach((n, i) => {
       t.headers && t.headers[i] && s.set(i, t.headers[i]);
     });
     let r = 5;
-    t.oauthToken && (s.set("Authorization", t.oauthToken), r = 3), t.rateLimit && (r = t.rateLimit), t.richTextSchema ? this.richTextResolver = new g(t.richTextSchema) : this.richTextResolver = new g(), t.componentResolver && this.setComponentResolver(t.componentResolver), this.maxRetries = t.maxRetries, this.throttle = j(this.throttledRequest, r, 1e3), this.accessToken = t.accessToken || "", this.relations = {}, this.links = {}, this.cache = t.cache || { clear: "manual" }, this.helpers = new T(), this.resolveNestedRelations = false, this.client = new G({
+    t.oauthToken && (s.set("Authorization", t.oauthToken), r = 3), t.rateLimit && (r = t.rateLimit), t.richTextSchema ? this.richTextResolver = new g(t.richTextSchema) : this.richTextResolver = new g(), t.componentResolver && this.setComponentResolver(t.componentResolver), this.maxRetries = t.maxRetries, this.throttle = x(this.throttledRequest, r, 1e3), this.accessToken = t.accessToken || "", this.relations = {}, this.links = {}, this.cache = t.cache || { clear: "manual" }, this.helpers = new T(), this.resolveNestedRelations = false, this.client = new G({
       baseURL: e,
       timeout: t.timeout || 0,
       headers: s,
@@ -383,8 +383,8 @@ class W {
     return this.helpers.isCDNUrl(t) ? this.parseParams(e) : e;
   }
   makeRequest(t, e, s, r) {
-    const o = this.factoryParamOptions(t, this.helpers.getOptionsPage(e, s, r));
-    return this.cacheResponse(t, o);
+    const n = this.factoryParamOptions(t, this.helpers.getOptionsPage(e, s, r));
+    return this.cacheResponse(t, n);
   }
   get(t, e) {
     e || (e = {});
@@ -392,7 +392,7 @@ class W {
     return this.cacheResponse(s, r);
   }
   async getAll(t, e, s) {
-    const r = (e == null ? void 0 : e.per_page) || 25, o = `/${t}`, i = o.split("/"), a = s || i[i.length - 1], l = 1, h = await this.makeRequest(o, e, r, l), u = h.total ? Math.ceil(h.total / r) : 1, f = await this.helpers.asyncMap(this.helpers.range(l, u), (m) => this.makeRequest(o, e, r, m + 1));
+    const r = (e == null ? void 0 : e.per_page) || 25, n = `/${t}`, i = n.split("/"), a = s || i[i.length - 1], c = 1, h = await this.makeRequest(n, e, r, c), u = h.total ? Math.ceil(h.total / r) : 1, f = await this.helpers.asyncMap(this.helpers.range(c, u), (m) => this.makeRequest(n, e, r, m + 1));
     return this.helpers.flatMap([h, ...f], (m) => Object.values(m.data[a]));
   }
   post(t, e) {
@@ -432,8 +432,8 @@ class W {
         this.relations[t[e]] && (t[e] = this._cleanCopy(this.relations[t[e]]));
       else if (t[e] && t[e].constructor === Array) {
         const r = [];
-        t[e].forEach((o) => {
-          this.relations[o] && r.push(this._cleanCopy(this.relations[o]));
+        t[e].forEach((n) => {
+          this.relations[n] && r.push(this._cleanCopy(this.relations[n]));
         }), t[e] = r;
       }
     }
@@ -442,13 +442,13 @@ class W {
     const s = (r) => {
       if (r != null) {
         if (r.constructor === Array)
-          for (let o = 0; o < r.length; o++)
-            s(r[o]);
+          for (let n = 0; n < r.length; n++)
+            s(r[n]);
         else if (r.constructor === Object) {
           if (r._stopResolving)
             return;
-          for (const o in r)
-            (r.component && r._uid || r.type === "link") && (this._insertRelations(r, o, e), this._insertLinks(r, o)), s(r[o]);
+          for (const n in r)
+            (r.component && r._uid || r.type === "link") && (this._insertRelations(r, n, e), this._insertLinks(r, n)), s(r[n]);
         }
       }
     };
@@ -457,19 +457,19 @@ class W {
   async resolveLinks(t, e) {
     let s = [];
     if (t.link_uuids) {
-      const r = t.link_uuids.length, o = [], i = 50;
+      const r = t.link_uuids.length, n = [], i = 50;
       for (let a = 0; a < r; a += i) {
-        const l = Math.min(r, a + i);
-        o.push(t.link_uuids.slice(a, l));
+        const c = Math.min(r, a + i);
+        n.push(t.link_uuids.slice(a, c));
       }
-      for (let a = 0; a < o.length; a++)
+      for (let a = 0; a < n.length; a++)
         (await this.getStories({
           per_page: i,
           language: e.language,
           version: e.version,
-          by_uuids: o[a].join(",")
-        })).data.stories.forEach((l) => {
-          s.push(l);
+          by_uuids: n[a].join(",")
+        })).data.stories.forEach((c) => {
+          s.push(c);
         });
     } else
       s = t.links;
@@ -480,19 +480,19 @@ class W {
   async resolveRelations(t, e) {
     let s = [];
     if (t.rel_uuids) {
-      const r = t.rel_uuids.length, o = [], i = 50;
+      const r = t.rel_uuids.length, n = [], i = 50;
       for (let a = 0; a < r; a += i) {
-        const l = Math.min(r, a + i);
-        o.push(t.rel_uuids.slice(a, l));
+        const c = Math.min(r, a + i);
+        n.push(t.rel_uuids.slice(a, c));
       }
-      for (let a = 0; a < o.length; a++)
+      for (let a = 0; a < n.length; a++)
         (await this.getStories({
           per_page: i,
           language: e.language,
           version: e.version,
-          by_uuids: o[a].join(",")
-        })).data.stories.forEach((l) => {
-          s.push(l);
+          by_uuids: n[a].join(",")
+        })).data.stories.forEach((c) => {
+          s.push(c);
         });
     } else
       s = t.rels;
@@ -502,32 +502,32 @@ class W {
   }
   async resolveStories(t, e) {
     var s, r;
-    let o = [];
-    if (typeof e.resolve_relations < "u" && e.resolve_relations.length > 0 && (typeof e.resolve_relations == "string" && (o = e.resolve_relations.split(",")), await this.resolveRelations(t, e)), e.resolve_links && ["1", "story", "url"].indexOf(e.resolve_links) > -1 && ((s = t.links) != null && s.length || (r = t.link_uuids) != null && r.length) && await this.resolveLinks(t, e), this.resolveNestedRelations)
+    let n = [];
+    if (typeof e.resolve_relations < "u" && e.resolve_relations.length > 0 && (typeof e.resolve_relations == "string" && (n = e.resolve_relations.split(",")), await this.resolveRelations(t, e)), e.resolve_links && ["1", "story", "url"].indexOf(e.resolve_links) > -1 && ((s = t.links) != null && s.length || (r = t.link_uuids) != null && r.length) && await this.resolveLinks(t, e), this.resolveNestedRelations)
       for (const i in this.relations)
-        this.iterateTree(this.relations[i], o);
-    t.story ? this.iterateTree(t.story, o) : t.stories.forEach((i) => {
-      this.iterateTree(i, o);
+        this.iterateTree(this.relations[i], n);
+    t.story ? this.iterateTree(t.story, n) : t.stories.forEach((i) => {
+      this.iterateTree(i, n);
     });
   }
   async cacheResponse(t, e, s) {
-    const r = this.helpers.stringify({ url: t, params: e }), o = this.cacheProvider();
+    const r = this.helpers.stringify({ url: t, params: e }), n = this.cacheProvider();
     if (this.cache.clear === "auto" && e.version === "draft" && await this.flushCache(), e.version === "published" && t != "/cdn/spaces/me") {
-      const i = await o.get(r);
+      const i = await n.get(r);
       if (i)
         return Promise.resolve(i);
     }
     return new Promise((i, a) => {
       try {
         (async () => {
-          var l;
+          var c;
           try {
             const h = await this.throttle("get", t, e);
             let u = { data: h.data, headers: h.headers };
-            return (l = h.headers) != null && l["per-page"] && (u = Object.assign({}, u, {
+            return (c = h.headers) != null && c["per-page"] && (u = Object.assign({}, u, {
               perPage: h.headers["per-page"] ? parseInt(h.headers["per-page"]) : 0,
               total: h.headers["per-page"] ? parseInt(h.headers.total) : 0
-            })), h.status != 200 ? a(h) : ((u.data.story || u.data.stories) && await this.resolveStories(u.data, e), e.version === "published" && t != "/cdn/spaces/me" && await o.set(r, u), u.data.cv && e.token && (e.version == "draft" && d[e.token] != u.data.cv && await this.flushCache(), d[e.token] = u.data.cv), i(u));
+            })), h.status != 200 ? a(h) : ((u.data.story || u.data.stories) && await this.resolveStories(u.data, e), e.version === "published" && t != "/cdn/spaces/me" && await n.set(r, u), u.data.cv && e.token && (e.version == "draft" && d[e.token] != u.data.cv && await this.flushCache(), d[e.token] = u.data.cv), i(u));
           } catch (h) {
             return a(h);
           }
@@ -589,55 +589,51 @@ class W {
     return await this.cacheProvider().flush(), this;
   }
 }
-const X = (n = {}) => {
-  const { apiOptions: t } = n;
+const X = (o = {}) => {
+  const { apiOptions: t } = o;
   if (!t.accessToken) {
     console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");
     return;
   }
   return { storyblokApi: new W(t) };
-}, Z = (n) => {
-  if (typeof n != "object" || typeof n._editable > "u")
+}, Z = (o) => {
+  if (typeof o != "object" || typeof o._editable > "u")
     return {};
-  const t = JSON.parse(n._editable.replace(/^<!--#storyblok#/, "").replace(/-->$/, ""));
+  const t = JSON.parse(o._editable.replace(/^<!--#storyblok#/, "").replace(/-->$/, ""));
   return {
     "data-blok-c": JSON.stringify(t),
     "data-blok-uid": t.id + "-" + t.uid
   };
 };
 let y;
-const R = "https://app.storyblok.com/f/storyblok-v2-latest.js", tt = (n, t, e = {}) => {
-  if (!(typeof window > "u")) {
-    if (typeof window.storyblokRegisterEvent > "u") {
-      console.error("Storyblok Bridge is disabled. Please enable it to use it. Read https://github.com/storyblok/storyblok-js");
-      return;
-    }
-    if (!n) {
+const R = "https://app.storyblok.com/f/storyblok-v2-latest.js", tt = (o, t, e = {}) => {
+  if (!(typeof window > "u") && typeof window.storyblokRegisterEvent < "u") {
+    if (!o) {
       console.warn("Story ID is not defined. Please provide a valid ID.");
       return;
     }
     window.storyblokRegisterEvent(() => {
-      new window.StoryblokBridge(e).on(["input", "published", "change"], (r) => {
-        r.action === "input" && r.story.id === n ? t(r.story) : (r.action === "change" || r.action === "published") && r.storyId === n && window.location.reload();
+      new window.StoryblokBridge(e).on(["input", "published", "change"], (i) => {
+        i.action === "input" && i.story.id === o ? t(i.story) : (i.action === "change" || i.action === "published") && i.storyId === o && window.location.reload();
       });
     });
   }
-}, et = (n = {}) => {
+}, et = (o = {}) => {
   const {
     bridge: t,
     accessToken: e,
     use: s = [],
     apiOptions: r = {},
-    richText: o = {}
-  } = n;
+    richText: n = {}
+  } = o;
   r.accessToken = r.accessToken || e;
   const i = { bridge: t, apiOptions: r };
   let a = {};
-  return s.forEach((l) => {
-    a = __spreadValues(__spreadValues({}, a), l(i));
-  }), t !== false && w(R), y = new g(o.schema), o.resolver && _(y, o.resolver), a;
-}, _ = (n, t) => {
-  n.addNode("blok", (e) => {
+  return s.forEach((c) => {
+    a = __spreadValues(__spreadValues({}, a), c(i));
+  }), t !== false && w(R), y = new g(n.schema), n.resolver && _(y, n.resolver), a;
+}, _ = (o, t) => {
+  o.addNode("blok", (e) => {
     let s = "";
     return e.attrs.body.forEach((r) => {
       s += t(r.component, r);
@@ -645,13 +641,13 @@ const R = "https://app.storyblok.com/f/storyblok-v2-latest.js", tt = (n, t, e =
       html: s
     };
   });
-}, st = (n, t, e) => {
+}, st = (o, t, e) => {
   let s = e || y;
   if (!s) {
     console.error("Please initialize the Storyblok SDK before calling the renderRichText function");
     return;
   }
-  return n === "" ? "" : n ? (t && (s = new g(t.schema), t.resolver && _(s, t.resolver)), s.render(n)) : (console.warn(`${n} is not a valid Richtext object. This might be because the value of the richtext field is empty.
+  return o === "" ? "" : o ? (t && (s = new g(t.schema), t.resolver && _(s, t.resolver)), s.render(o)) : (console.warn(`${o} is not a valid Richtext object. This might be because the value of the richtext field is empty.
     
   For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`), "");
 };

package/dist/types/components/storyblok-component.d.ts

@@ -4,5 +4,5 @@ interface StoryblokComponentProps {
     blok: SbBlokData;
     [key: string]: unknown;
 }
-declare const StoryblokComponent: React.ForwardRefExoticComponent<Pick<StoryblokComponentProps, keyof StoryblokComponentProps> & React.RefAttributes<HTMLElement>>;
+declare const StoryblokComponent: React.ForwardRefExoticComponent<Omit<StoryblokComponentProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default StoryblokComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/react",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "description": "SDK to integrate Storyblok into your project using React.",
   "main": "./dist/storyblok-react.js",
   "module": "./dist/storyblok-react.mjs",
@@ -24,7 +24,7 @@
     "prepublishOnly": "npm run build && cp ../README.md ./"
   },
   "dependencies": {
-    "@storyblok/js": "^2.0.15"
+    "@storyblok/js": "^2.0.16"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -32,13 +32,13 @@
     "@cypress/react": "^5.12.5",
     "@cypress/vite-dev-server": "^2.2.3",
     "@tsconfig/recommended": "^1.0.2",
-    "@types/react": "18.0.27",
+    "@types/react": "18.0.28",
     "@vitejs/plugin-react": "^1.3.2",
-    "babel-jest": "^29.4.1",
+    "babel-jest": "^29.4.3",
     "cypress": "^9.7.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-jest": "^27.2.1",
-    "jest": "^29.4.1",
+    "jest": "^29.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vite": "^2.9.15"