@weaverse/react 0.7.52 → 0.7.53

package/dist/index.mjs

@@ -1 +1,1362 @@
-var Ze=Object.defineProperty;var G=(e,t)=>{for(var o in t)Ze(e,o,{get:t[o],enumerable:!0})};export*from"@weaverse/core";import{Weaverse as Zt}from"@weaverse/core";import{createContext as Jt}from"react";import*as S from"react";import{useContext as Je}from"react";var Y=S.forwardRef((e,t)=>{let{isDesignMode:o}=Je(h),{text:r,clickAction:n,linkTo:i,openInNewTab:l,...a}=e;return n==="none"?S.createElement("button",{ref:t,...a},r):S.createElement("a",{ref:t,href:o?void 0:i,target:l?"_blank":"_self",rel:"noreferrer",...a},r)});Y.defaultProps={type:"button",text:"Button",clickAction:"none",linkTo:"",openInNewTab:!1};var K={"@desktop":{borderRadius:"8px",border:"none",backgroundColor:"#393e46",color:"#fff",fontSize:"14px",fontWeight:"medium",padding:"10px 20px",height:"42px",minWidth:"120px",textDecoration:"none",textAlign:"center",":hover":{backgroundColor:"#222831"}}},q=Y;import Re,{forwardRef as et}from"react";var X=et((e,t)=>{let{children:o,...r}=e;return Re.createElement("div",{ref:t,...r},o)}),Z={"@desktop":{display:"flex",alignItems:"flex-start",justifyContent:"flex-start",gridArea:"1 / 1 / 3 / 6",overflow:"hidden"}};X.defaultProps={};var J=X;import b,{forwardRef as nt,useContext as it,useEffect as lt}from"react";var Q=["days","hours","minutes","seconds"],L="wv-cd-evergreen-start",R="https://graph.instagram.com";import ot from"clsx";function rt(e){return{"@desktop":e["@desktop"],"@mobile":e["@mobile"]}}var z={};function ee(e,t){let{css:o,type:r,className:n=""}=e.data,i="",l="",a=e.Element?.permanentCss;if(a)if(r in z)l=z[r];else{let{className:d}=t.css(a)();Object.assign(z,{[r]:d}),l=d}if(i=l,o){let d=rt(o),g=t.css(d)().className||"",{stitchesClass:v}=e,p=(e.ref.current?.className||"").replace(v,"").replace(n,"").replace(l,"").trim();i=ot(l,n,g,p),e.stitchesClass=g}return i}function te(e){let t=6e4,o=60*t,r=24*o,n=Math.floor(e/r),i=Math.floor((e-n*r)/o),l=Math.floor((e-n*r-i*o)/t),a=Math.floor((e-n*r-i*o-l*t)/1e3);return{days:n,hours:i,minutes:l,seconds:a}}function oe(e){let t=e.match(/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/);return t?t[1]:null}function re(e){let t=e.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(.+)/);return t?t[1]:null}import A from"react";function ne({value:e,label:t}){return A.createElement("div",{className:"wv-cd-block"},A.createElement("div",{className:"wv-cd-number"},typeof e=="string"?e:e.toString().padStart(2,"0")),t&&A.createElement("div",{className:"wv-cd-label"},t))}var ie=nt((e,t)=>{let{isDesignMode:o}=it(h),{timerType:r,startTime:n,endTime:i,periods:l,redirectWhenTimerStops:a,redirectUrl:d,openInNewTab:g,showColon:v,showLabel:p,...c}=e,[u,f]=b.useState(0),x=l*60*1e3,k=()=>{!o&&a&&d&&window.open(d,g?"_blank":"_self")},T=()=>{let m=n;if(r==="evergreen"){let I=localStorage.getItem(L);I?(m=Number.parseInt(I),m+x<Date.now()&&(m=Date.now(),localStorage.setItem(L,m.toString()))):(m=Date.now(),localStorage.setItem(L,m.toString()))}return m},D=m=>m<Date.now()&&i>Date.now(),H=()=>{let m=T(),I=r==="fixed-time"?i:m+x,O=D(m)?Math.max(I-Date.now(),0):0;O>0&&O<1e3&&k(),f(O)};lt(()=>{let m=setInterval(H,1e3);return()=>{clearInterval(m)}},[n,i,x,r]);let Xe=te(u);return b.createElement("div",{ref:t,...c},Q.map(m=>b.createElement(b.Fragment,{key:m},b.createElement(ne,{label:p?m:"",value:u===0?"--":Xe[m]}),m!=="seconds"&&b.createElement("div",{className:"wv-cd-separator"},v&&b.createElement("span",null,":")))))}),le={"@desktop":{fontFamily:"Inter",fontSize:"36px",fontWeight:500,display:"flex",alignItems:"center",overflow:"hidden",justifyContent:"center",gap:10,lineHeight:"initial",".wv-cd-block":{width:48,textAlign:"center",".wv-cd-label":{fontSize:10}},".wv-cd-separator":{span:{lineHeight:"100%"},".hidden":{visibility:"hidden"}}}};ie.defaultProps={timerType:"fixed-time",startTime:Date.now(),endTime:Date.now()+1e3*60*60*24,periods:90,redirectWhenTimerStops:!1,redirectUrl:"",openInNewTab:!1,showLabel:!0,showColon:!0};var se=ie;import M from"react";var ae=M.forwardRef((e,t)=>{let{src:o,alt:r,objectFit:n,objectPosition:i,clickAction:l,openLinkInNewTab:a,linkTo:d,...g}=e,v={"--img-object-fit":n,"--img-object-position":i},p=M.createElement("img",{alt:r,"data-blink-src":o});return l==="openLink"&&d&&(p=M.createElement("a",{href:d,target:a?"_blank":"_self"},p)),M.createElement("div",{ref:t,...g,style:v},p)}),pe={"@desktop":{display:"flex",overflow:"hidden",img:{width:"100%",height:"100%",objectFit:"var(--img-object-fit, cover)",objectPosition:"var(--img-object-position, center)"}}};ae.defaultProps={src:"https://ucarecdn.com/cf54e41e-36a0-4547-a140-a302e0387890/",alt:"Image alt text",objectFit:"cover",objectPosition:"center",clickAction:"none",openLinkInNewTab:!1,linkTo:""};var me=ae;import W,{forwardRef as mt}from"react";import de from"react";function ce(e){let{bgColor:t,imgUrl:o,objectFit:r,objectPosition:n}=e,i={["--layout-bg-color"]:t,["--layout-bg-image-object-fit"]:r,["--layout-bg-image-position"]:n};return o||t?de.createElement("div",{style:i,className:"wv-layout-background"},o&&de.createElement("img",{width:"100%",height:"100%","data-blink-src":o,alt:"Section background"})):null}import pt from"react";function ue(e){let{enableOverlay:t,overlayOpacity:o}=e;if(t){let r={["--layout-overlay-opacity"]:o/100};return pt.createElement("div",{className:"wv-layout-overlay",style:r})}return null}var fe=mt((e,t)=>{let{children:o,rows:r,gap:n,rowSize:i,columns:l,contentSize:a,gridSize:d,backgroundColor:g,backgroundImage:v,objectFit:p,objectPosition:c,enableOverlay:u,overlayOpacity:f,...x}=e,k={"--layout-content-width":"100vw","--content-size":a+"px","--grid-size":d+"px","--rows":r,"--columns":l,"--gap":n+"px","--row-size":i+"px","--col-size":"calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"};return W.createElement("div",{ref:t,...x,style:k},W.createElement(ce,{imgUrl:v,bgColor:g,objectFit:p,objectPosition:c}),W.createElement(ue,{enableOverlay:u,overlayOpacity:f}),W.createElement("div",{"data-layout-content":!0},o))}),ge={"@desktop":{position:"relative","> [data-layout-content]":{paddingTop:"var(--gap)",paddingBottom:"var(--gap)",margin:"0 auto",display:"grid",gridTemplateRows:"repeat(var(--rows), var(--row-size))",gridTemplateColumns:"calc((var(--layout-content-width) - var(--content-size)) / 2) 1fr repeat(var(--columns), minmax(0, var(--col-size))) 1fr calc((var(--layout-content-width) - var(--content-size)) / 2)",gridAutoRows:"var(--row-size)",gap:"var(--gap)",maxWidth:"var(--layout-content-width)"},".wv-layout-background":{display:"block",position:"absolute",inset:0,backgroundColor:"var(--layout-bg-color)",img:{objectFit:"var(--layout-bg-image-object-fit, cover)",objectPosition:"var(--layout-bg-image-position, 50% 50%)"}},".wv-layout-overlay":{display:"block",position:"absolute",inset:0,backgroundColor:"rgba(0, 0, 0, var(--layout-overlay-opacity, 0.5))"}},"@mobile":{padding:"0 16px","> [data-layout-content]":{display:"flex",flexDirection:"column"}}};fe.defaultProps={contentSize:1600,gridSize:1224,rows:16,columns:12,gap:16,rowSize:48};var ve=fe;import ye,{forwardRef as ct}from"react";var he=ct((e,t)=>{let{place:o,zoom:r,...n}=e;return ye.createElement("div",{ref:t,...n},ye.createElement("iframe",{loading:"lazy",width:"100%",height:"100%",title:"map",src:`https://maps.google.com/maps?z=${r}&t=m&q=${o}&ie=UTF8&&output=embed`,style:{pointerEvents:"none"}}))}),we={"@desktop":{iframe:{border:"none"}},"@mobile":{iframe:{border:"none"}}};he.defaultProps={place:"Hanoi",zoom:14};var xe=he;import*as E from"react";var be=E.forwardRef((e,t)=>{let{children:o,value:r,...n}=e;return E.createElement("div",{ref:t,...n},E.createElement("div",{className:"wv-text-content",dangerouslySetInnerHTML:{__html:r}}))}),Ce={"@desktop":{padding:"10px",overflow:"hidden",".wv-text-content":{wordBreak:"break-word",overflowWrap:"break-word",whiteSpace:"break-spaces"}}};be.defaultProps={value:"<p>The quick brown fox jumps over the lazy dog</p>"};var Pe=be;import j,{forwardRef as yt,useContext as ht}from"react";import B from"react";function ke(e){let{src:t,type:o,controls:r,autoPlay:n,loop:i,muted:l}=e;return B.createElement("video",{controls:r,autoPlay:n,loop:i,muted:l,controlsList:"nodownload",disablePictureInPicture:!0},B.createElement("source",{src:t,type:o||"video/mp4"}),B.createElement("source",{src:t,type:"video/ogg"}),"Your browser does not support the video tag.")}import gt from"react";function Se(e){let{vimeoId:t,controls:o,autoPlay:r,loop:n,muted:i}=e,l=`autoplay=${r}&loop=${n}&controls=${o}&muted=${i}`,a=`https://player.vimeo.com/video/${t}?${l}`;return gt.createElement("iframe",{src:a,width:"100%",height:"100%",allowFullScreen:!0})}import vt from"react";function Ee(e){let{youtubeId:t,controls:o,autoPlay:r,loop:n,muted:i}=e,l=new URLSearchParams({autoplay:r?"1":"0",controls:o?"1":"0",loop:n?"1":"0",mute:i?"1":"0"}),a=`https://www.youtube.com/embed/${t}?playlist=${t}&${l.toString()}`;return vt.createElement("iframe",{src:a,width:"100%",height:"100%",allowFullScreen:!0,allow:`accelerometer;${r?"autoplay;":""} clipboard-write; encrypted-media; gyroscope; picture-in-picture`})}var Te=yt((e,t)=>{let{isDesignMode:o}=ht(h),{src:r,controls:n,poster:i,autoPlay:l,loop:a,muted:d,...g}=e,p={src:r,controls:n,poster:i,autoPlay:!o&&l,loop:a,muted:d},c,u=oe(r),f=re(r);return u?c=j.createElement(Ee,{...p,youtubeId:u}):f?c=j.createElement(Se,{...p,vimeoId:f}):c=j.createElement(ke,{...p}),j.createElement("div",{ref:t,...g},c)}),Ie={"@desktop":{video:{height:"100%",width:"100%",aspectRatio:"16 / 9"},iframe:{border:"none"}},"@mobile":{iframe:{border:"none"}}};Te.defaultProps={src:"https://youtu.be/wM-NT6hcw48",poster:"https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/-/preview/-/quality/smart/-/format/auto/",loop:!1,controls:!1,autoPlay:!0,muted:!0};var Le=Te;import w,{forwardRef as Kt,useEffect as qt,useState as $e}from"react";import V,{forwardRef as xt}from"react";var bt=xt((e,t)=>{let{element:o,children:r,...n}=e;return V.createElement("div",{"data-wv-placeholder":!0,ref:t,...n},V.createElement("div",{style:{fontWeight:600,marginBottom:"10px"}},o),V.createElement("div",null,r))}),Me=bt;var $={};G($,{Modal:()=>$t,ModalClose:()=>Ae,ModalContent:()=>ze,ModalHeader:()=>Gt,ModalTrigger:()=>Ut});import{Close as Bt,Portal as Vt,Root as _t,Trigger as Ft}from"@radix-ui/react-dialog";import y,{forwardRef as F}from"react";import Wt from"react";var _={};G(_,{ArrowLeft:()=>Et,ArrowRight:()=>Tt,CircleNotch:()=>Ct,Eye:()=>Mt,Image:()=>It,Minus:()=>kt,Plus:()=>St,ShoppingCart:()=>Lt,X:()=>Pt});import s from"react";var Ct=e=>s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",...e},s.createElement("circle",{style:{opacity:".25"},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),s.createElement("path",{style:{opacity:".75"},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})),Pt=e=>s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",fill:"currentColor",viewBox:"0 0 256 256",...e},s.createElement("rect",{width:"256",height:"256",fill:"none"}),s.createElement("line",{x1:"200",y1:"56",x2:"56",y2:"200",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}),s.createElement("line",{x1:"200",y1:"200",x2:"56",y2:"56",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"})),kt=e=>s.createElement("svg",{width:"196",height:"196",fill:"currentColor",stroke:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",...e},s.createElement("path",{d:"M376 232H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h368c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"})),St=e=>s.createElement("svg",{width:"196",height:"196",fill:"currentColor",stroke:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",...e},s.createElement("path",{d:"M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"})),Et=e=>s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"192",height:"192",fill:"currentColor",viewBox:"0 0 256 256",...e},s.createElement("rect",{width:"256",height:"256",fill:"none"}),s.createElement("line",{x1:"216",y1:"128",x2:"40",y2:"128",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),s.createElement("polyline",{points:"112 56 40 128 112 200",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"})),Tt=e=>s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"192",height:"192",fill:"currentColor",viewBox:"0 0 256 256",...e},s.createElement("rect",{width:"256",height:"256",fill:"none"}),s.createElement("line",{x1:"40",y1:"128",x2:"216",y2:"128",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),s.createElement("polyline",{points:"144 56 216 128 144 200",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"})),It=e=>s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",fill:"currentColor",viewBox:"0 0 640 512",...e},s.createElement("path",{d:"M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z"})),Lt=e=>s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"192",height:"192",fill:"currentColor",viewBox:"0 0 256 256",...e},s.createElement("rect",{width:"256",height:"256",fill:"none"}),s.createElement("path",{d:"M184,184H69.8L41.9,30.6A8,8,0,0,0,34.1,24H16",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),s.createElement("circle",{cx:"80",cy:"204",r:"20",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),s.createElement("circle",{cx:"184",cy:"204",r:"20",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),s.createElement("path",{d:"M62.5,144H188.1a15.9,15.9,0,0,0,15.7-13.1L216,64H48",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"})),Mt=e=>s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"192",height:"192",fill:"currentColor",viewBox:"0 0 256 256",...e},s.createElement("rect",{width:"256",height:"256",fill:"none"}),s.createElement("path",{d:"M128,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Z",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}),s.createElement("circle",{cx:"128",cy:"128",r:"40",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}));import jt from"clsx";function P({name:e,className:t,...o}){let r=_[e],n=jt("wv-icon",t);return Wt.createElement(r,{className:n,...o})}import{Content as Nt,Overlay as Dt,Title as Ht}from"@radix-ui/react-dialog";import{keyframes as We,styled as N}from"@stitches/react";var Ot=We({"0%":{opacity:0},"100%":{opacity:1}}),zt=We({"0%":{opacity:0,transform:"translate(-50%, -48%) scale(.96)"},"100%":{opacity:1,transform:"translate(-50%, -50%) scale(1)"}}),je=N(Dt,{display:"block !important",backgroundColor:"rgba(0, 0, 0, .3)",position:"fixed",zIndex:9999,inset:0,animation:`${Ot} 300ms cubic-bezier(0.16, 1, 0.3, 1)`}),Ne=N(Ht,{margin:"0 0 24px",fontWeight:500,fontSize:24,"@media (max-width: 768px)":{margin:"0 0 16px",fontSize:20}}),De=N(Nt,{backgroundColor:"white",borderRadius:6,boxShadow:"hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",position:"fixed",top:"50%",left:"50%",transform:"translate(-50%, -50%)",padding:24,animation:`${zt} 300ms cubic-bezier(0.16, 1, 0.3, 1)`,zIndex:9999,maxWidth:"90vw",width:"auto","*":{maxWidth:"100%"},"&:focus":{outline:"none"},'&[data-size="fullscreen"]':{width:"100vw",height:"100vh",maxWidth:"100vw",borderRadius:0},"@media (max-width: 768px)":{width:"90vw",padding:12,'&[data-size="fullscreen"]':{width:"100vw"}}}),He=N("button",{all:"unset",cursor:"pointer",fontFamily:"inherit",borderRadius:"100%",height:25,width:25,padding:4,display:"inline-flex",alignItems:"center",justifyContent:"center",color:"rgb(55, 65, 81)",position:"absolute",top:8,right:8,"&:hover":{backgroundColor:"rgba(112, 112, 112, .1)"},svg:{width:20,height:20}});import{useEffect as At}from"react";function Oe(e){let{open:t,defaultOpen:o,onOpenChange:r}=e;return At(()=>{t||o?document.body.classList.add("wv-modal-open"):document.body.classList.remove("wv-modal-open")},[t,o]),i=>{i?document.body.classList.add("wv-modal-open"):document.body.classList.remove("wv-modal-open"),r?.(i)}}var $t=e=>{let{children:t,open:o,defaultOpen:r,onOpenChange:n,...i}=e,l=Oe(e);return y.createElement(_t,{open:o,defaultOpen:r,onOpenChange:l,...i},t)},Ut=Ft,Gt=F((e,t)=>{let{children:o,...r}=e;return y.createElement(Ne,{ref:t,...r,"data-wv-modal-header":!0},o)}),ze=F((e,t)=>{let{children:o,size:r,portal:n,...i}=e,l=y.createElement(y.Fragment,null,y.createElement(je,null),y.createElement(De,{...i,onCloseAutoFocus:a=>a.preventDefault(),"data-wv-modal":!0,"data-size":r,ref:t},y.createElement(Ae,null),y.createElement("div",{className:"wv-modal-content"},o)));return n?y.createElement(Vt,null,l):l});ze.defaultProps={size:"auto",portal:!1};var Ae=F((e,t)=>{let{asChild:o,children:r,...n}=e,i=y.createElement(He,null,y.createElement(P,{name:"X"}));return y.createElement(Bt,{asChild:!0,...n,ref:t},o?r:i)});import Be from"react";function Ve(){return Be.createElement("span",{className:"wv-spinner-wrapper"},Be.createElement(P,{name:"CircleNotch",className:"wv-spinner"}))}import Yt from"react";function _e({children:e}){return Yt.createElement("span",{className:"wv-tooltip"},e)}var Fe={Placeholder:Me,Spinner:Ve,ModalComponents:$,Icon:P,Tooltip:_e};var Xt=Kt((e,t)=>{let{token:o,username:r,numberOfImages:n,imagesPerRow:i,gap:l,...a}=e,[d,g]=$e([]),[v,p]=$e(null);if(qt(()=>{if(o){let u=new URLSearchParams({access_token:o,fields:"id,media_type,caption,media_url,permalink,thumbnail_url"});fetch(`${R}/me/media?${u.toString()}`).then(f=>f.json()).then(f=>{f.error?p(f):(p(null),g([...f.data]))}).catch(p)}},[o]),!o||v)return w.createElement("div",{ref:t,...a},w.createElement(Fe.Placeholder,{element:"Instagram"},o?"Invalid or expired token!":"Connect to Instagram to display photos on your site."));let c={"--wv-ig-images-per-row":i,"--wv-ig-images-gap":l+"px"};return w.createElement("div",{ref:t,...a,style:c},w.createElement("div",{className:"wv-ig-media-container"},d.slice(0,n).map(u=>{let{id:f,permalink:x,caption:k,media_url:T,media_type:D,thumbnail_url:H}=u;return D==="VIDEO"?w.createElement("video",{key:f,controls:!0,poster:H},w.createElement("source",{src:T,type:"video/mp4"})):w.createElement("a",{key:f,href:x,target:"_blank",rel:"noreferrer"},w.createElement("img",{alt:k,src:T}))})))});Xt.defaultProps={token:"",username:"",numberOfImages:8,imagesPerRow:4,gap:0};var U={Countdown:{Component:se,type:"countdown",defaultCss:le},Button:{Component:q,type:"button",defaultCss:K},Container:{Component:J,type:"container",defaultCss:Z},Image:{Component:me,type:"image",defaultCss:pe},Layout:{Component:ve,type:"layout",defaultCss:ge},Map:{Component:xe,type:"map",defaultCss:we},Text:{Component:Pe,type:"text",defaultCss:Ce},Video:{Component:Le,type:"video",defaultCss:Ie}};var Cr=e=>{let t=new Zt(e);return Object.keys(U).forEach(o=>{t.registerElement(U[o])}),t},h=Jt({}),Ue=h.Provider,Pr=h.Consumer;import{isBrowser as Qt}from"@weaverse/core";import C,{useContext as Ge,useEffect as Ye,useRef as Rt,useState as Ke}from"react";var Lr=({context:e})=>{let[,t]=Ke(e.projectData),o=Rt(),r=()=>t({});Ye(()=>(e.subscribe(r),e.contentRootElement=o.current,()=>{e.unsubscribe(r)}),[]);let n=e?.studioBridge?.eventHandlers||{},i=e.stitchesInstance.theme.className;return e.projectData?.rootId?C.createElement("div",{className:`weaverse-content-root ${i}`,...n,ref:o},C.createElement(Ue,{value:e},C.createElement(qe,{id:e.projectData.rootId}))):null},eo=({instance:e})=>{let{stitchesInstance:t,elementInstances:o}=Ge(h),[r,n]=Ke(e.data),{id:i,type:l,childIds:a=[],css:d,className:g,...v}=r;Ye(()=>{let c=u=>n({...u});return e.subscribe(c),Qt&&!e.ref.current&&Object.assign(e.ref,{current:document.querySelector(`[data-wv-id="${i}"]`)}),()=>e.unsubscribe(c)},[]);let p=o.get(l);if(p?.Component){let c=p.Component;return c.$$typeof===Symbol.for("react.forward_ref")&&(v.ref=e.ref),C.createElement(c,{key:i,"data-wv-type":l,"data-wv-id":i,className:ee(e,t),...v},a.map(u=>C.createElement(qe,{key:u,id:u})))}else return console.log(`Unknown element: ${l}`),null},qe=({id:e})=>{let t=Ge(h),{itemInstances:o}=t,r=o.get(e);return r?C.createElement(eo,{key:e,instance:r}):C.createElement("div",{style:{display:"none"}},"Item instance ",e," not found")};export{Fe as Components,U as Elements,h as WeaverseContext,Pr as WeaverseContextConsumer,Ue as WeaverseContextProvider,Lr as WeaverseRoot,Cr as createRootContext};
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/index.ts
+export * from "@weaverse/core";
+
+// src/context.ts
+import { Weaverse } from "@weaverse/core";
+import { createContext } from "react";
+
+// src/elements/Button.tsx
+import * as React from "react";
+import { useContext } from "react";
+var Button = React.forwardRef((props, ref) => {
+  let { isDesignMode } = useContext(WeaverseContext);
+  let { text, clickAction, linkTo, openInNewTab, ...rest } = props;
+  if (clickAction === "none") {
+    return /* @__PURE__ */ React.createElement("button", {
+      ref,
+      ...rest
+    }, text);
+  }
+  return /* @__PURE__ */ React.createElement("a", {
+    ref,
+    href: !isDesignMode ? linkTo : void 0,
+    target: openInNewTab ? "_blank" : "_self",
+    rel: "noreferrer",
+    ...rest
+  }, text);
+});
+Button.defaultProps = {
+  type: "button",
+  text: "Button",
+  clickAction: "none",
+  linkTo: "",
+  openInNewTab: false
+};
+var css = {
+  "@desktop": {
+    borderRadius: "8px",
+    border: "none",
+    backgroundColor: "#393e46",
+    color: "#fff",
+    fontSize: "14px",
+    fontWeight: "medium",
+    padding: "10px 20px",
+    height: "42px",
+    minWidth: "120px",
+    textDecoration: "none",
+    textAlign: "center",
+    ":hover": {
+      backgroundColor: "#222831"
+    }
+  }
+};
+var Button_default = Button;
+
+// src/elements/Container.tsx
+import React2, { forwardRef as forwardRef2 } from "react";
+var Container = forwardRef2(
+  (props, ref) => {
+    let { children, ...rest } = props;
+    return /* @__PURE__ */ React2.createElement("div", {
+      ref,
+      ...rest
+    }, children);
+  }
+);
+var css2 = {
+  "@desktop": {
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    gridArea: "1 / 1 / 3 / 6",
+    overflow: "hidden"
+  }
+};
+Container.defaultProps = {};
+var Container_default = Container;
+
+// src/elements/Countdown/index.tsx
+import React4, { forwardRef as forwardRef3, useContext as useContext2, useEffect } from "react";
+
+// src/constant/index.ts
+var TIMES = ["days", "hours", "minutes", "seconds"];
+var COUNTDOWN_KEY = "wv-cd-evergreen-start";
+var INSTAGRAM_API = "https://graph.instagram.com";
+
+// src/utils/css.ts
+import clsx from "clsx";
+function formatCSS(css9) {
+  return {
+    "@desktop": css9["@desktop"],
+    "@mobile": css9["@mobile"]
+  };
+}
+var permanentClasses = {};
+function generateItemClassName(instance, stitchesInstance) {
+  let { css: css9, type, className: cls = "" } = instance.data;
+  let className = "";
+  let permanentClass = "";
+  let perCss = instance.Element?.permanentCss;
+  if (perCss) {
+    if (type in permanentClasses) {
+      permanentClass = permanentClasses[type];
+    } else {
+      let { className: perCls } = stitchesInstance.css(perCss)();
+      Object.assign(permanentClasses, { [type]: perCls });
+      permanentClass = perCls;
+    }
+  }
+  className = permanentClass;
+  if (css9) {
+    let formattedCss = formatCSS(css9);
+    let newStitchesClass = stitchesInstance.css(formattedCss)().className || "";
+    let { stitchesClass } = instance;
+    let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
+    className = clsx(permanentClass, cls, newStitchesClass, otherClass);
+    instance.stitchesClass = newStitchesClass;
+  }
+  return className;
+}
+
+// src/utils/index.ts
+function getTime(_seconds) {
+  let ONE_MINUTE = 60 * 1e3;
+  let ONE_HOUR = 60 * ONE_MINUTE;
+  let ONE_DAY = 24 * ONE_HOUR;
+  let days = Math.floor(_seconds / ONE_DAY);
+  let hours = Math.floor((_seconds - days * ONE_DAY) / ONE_HOUR);
+  let minutes = Math.floor(
+    (_seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE
+  );
+  let seconds = Math.floor(
+    (_seconds - days * ONE_DAY - hours * ONE_HOUR - minutes * ONE_MINUTE) / 1e3
+  );
+  return { days, hours, minutes, seconds };
+}
+function getYoutubeEmbedId(url) {
+  const match = url.match(
+    /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/
+  );
+  return match ? match[1] : null;
+}
+function getVimeoId(url) {
+  const match = url.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(.+)/);
+  return match ? match[1] : null;
+}
+
+// src/elements/Countdown/TimerBlock.tsx
+import React3 from "react";
+function TimerBlock({ value, label }) {
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: "wv-cd-block"
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "wv-cd-number"
+  }, typeof value === "string" ? value : value.toString().padStart(2, "0")), label && /* @__PURE__ */ React3.createElement("div", {
+    className: "wv-cd-label"
+  }, label));
+}
+
+// src/elements/Countdown/index.tsx
+var Countdown = forwardRef3(
+  (props, ref) => {
+    const { isDesignMode } = useContext2(WeaverseContext);
+    let {
+      timerType,
+      startTime: startTimeProp,
+      endTime: endTimeProp,
+      periods: periodsProp,
+      redirectWhenTimerStops,
+      redirectUrl,
+      openInNewTab,
+      showColon,
+      showLabel,
+      ...rest
+    } = props;
+    const [remaining, setRemaining] = React4.useState(0);
+    let periods = periodsProp * 60 * 1e3;
+    const handleEnd = () => {
+      if (!isDesignMode && redirectWhenTimerStops && redirectUrl)
+        window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
+    };
+    const getStartTime = () => {
+      let startTime = startTimeProp;
+      if (timerType === "evergreen") {
+        const start = localStorage.getItem(COUNTDOWN_KEY);
+        if (start) {
+          startTime = Number.parseInt(start);
+          if (startTime + periods < Date.now()) {
+            startTime = Date.now();
+            localStorage.setItem(COUNTDOWN_KEY, startTime.toString());
+          }
+        } else {
+          startTime = Date.now();
+          localStorage.setItem(COUNTDOWN_KEY, startTime.toString());
+        }
+      }
+      return startTime;
+    };
+    const checkActive = (startTime) => startTime < Date.now() && endTimeProp > Date.now();
+    const handleRemaining = () => {
+      let startTime = getStartTime();
+      let endTime = timerType === "fixed-time" ? endTimeProp : startTime + periods;
+      let isActive = checkActive(startTime);
+      const remainingTime = isActive ? Math.max(endTime - Date.now(), 0) : 0;
+      if (remainingTime > 0 && remainingTime < 1e3) {
+        handleEnd();
+      }
+      setRemaining(remainingTime);
+    };
+    useEffect(() => {
+      let intervalFlag = setInterval(
+        handleRemaining,
+        1e3
+      );
+      return () => {
+        clearInterval(intervalFlag);
+      };
+    }, [startTimeProp, endTimeProp, periods, timerType]);
+    const timer = getTime(remaining);
+    return /* @__PURE__ */ React4.createElement("div", {
+      ref,
+      ...rest
+    }, TIMES.map((time) => {
+      return /* @__PURE__ */ React4.createElement(React4.Fragment, {
+        key: time
+      }, /* @__PURE__ */ React4.createElement(TimerBlock, {
+        label: showLabel ? time : "",
+        value: remaining === 0 ? "--" : timer[time]
+      }), time !== "seconds" && /* @__PURE__ */ React4.createElement("div", {
+        className: "wv-cd-separator"
+      }, showColon && /* @__PURE__ */ React4.createElement("span", null, ":")));
+    }));
+  }
+);
+var css3 = {
+  "@desktop": {
+    fontFamily: "Inter",
+    fontSize: "36px",
+    fontWeight: 500,
+    display: "flex",
+    alignItems: "center",
+    overflow: "hidden",
+    justifyContent: "center",
+    gap: 10,
+    lineHeight: "initial",
+    ".wv-cd-block": {
+      width: 48,
+      textAlign: "center",
+      ".wv-cd-label": {
+        fontSize: 10
+      }
+    },
+    ".wv-cd-separator": {
+      span: {
+        lineHeight: "100%"
+      },
+      ".hidden": {
+        visibility: "hidden"
+      }
+    }
+  }
+};
+Countdown.defaultProps = {
+  timerType: "fixed-time",
+  startTime: Date.now(),
+  endTime: Date.now() + 1e3 * 60 * 60 * 24,
+  periods: 90,
+  redirectWhenTimerStops: false,
+  redirectUrl: "",
+  openInNewTab: false,
+  showLabel: true,
+  showColon: true
+};
+var Countdown_default = Countdown;
+
+// src/elements/Image.tsx
+import React5 from "react";
+var Image = React5.forwardRef(
+  (props, ref) => {
+    let {
+      src,
+      alt,
+      objectFit,
+      objectPosition,
+      clickAction,
+      openLinkInNewTab,
+      linkTo,
+      ...rest
+    } = props;
+    let style = {
+      "--img-object-fit": objectFit,
+      "--img-object-position": objectPosition
+    };
+    let content = /* @__PURE__ */ React5.createElement("img", {
+      alt,
+      "data-blink-src": src
+    });
+    if (clickAction === "openLink" && linkTo) {
+      let target = openLinkInNewTab ? "_blank" : "_self";
+      content = /* @__PURE__ */ React5.createElement("a", {
+        href: linkTo,
+        target
+      }, content);
+    }
+    return /* @__PURE__ */ React5.createElement("div", {
+      ref,
+      ...rest,
+      style
+    }, content);
+  }
+);
+var css4 = {
+  "@desktop": {
+    display: "flex",
+    overflow: "hidden",
+    img: {
+      width: "100%",
+      height: "100%",
+      objectFit: "var(--img-object-fit, cover)",
+      objectPosition: "var(--img-object-position, center)"
+    }
+  }
+};
+Image.defaultProps = {
+  src: "https://ucarecdn.com/cf54e41e-36a0-4547-a140-a302e0387890/",
+  alt: "Image alt text",
+  objectFit: "cover",
+  objectPosition: "center",
+  clickAction: "none",
+  openLinkInNewTab: false,
+  linkTo: ""
+};
+var Image_default = Image;
+
+// src/elements/Layout/index.tsx
+import React8, { forwardRef as forwardRef4 } from "react";
+
+// src/elements/Layout/Background.tsx
+import React6 from "react";
+function Background(props) {
+  let { bgColor, imgUrl, objectFit, objectPosition } = props;
+  let style = {
+    ["--layout-bg-color"]: bgColor,
+    ["--layout-bg-image-object-fit"]: objectFit,
+    ["--layout-bg-image-position"]: objectPosition
+  };
+  if (imgUrl || bgColor) {
+    return /* @__PURE__ */ React6.createElement("div", {
+      style,
+      className: "wv-layout-background"
+    }, imgUrl && /* @__PURE__ */ React6.createElement("img", {
+      width: "100%",
+      height: "100%",
+      "data-blink-src": imgUrl,
+      alt: "Section background"
+    }));
+  }
+  return null;
+}
+
+// src/elements/Layout/Overlay.tsx
+import React7 from "react";
+function Overlay(props) {
+  let { enableOverlay, overlayOpacity } = props;
+  if (enableOverlay) {
+    let style = {
+      ["--layout-overlay-opacity"]: overlayOpacity / 100
+    };
+    return /* @__PURE__ */ React7.createElement("div", {
+      className: "wv-layout-overlay",
+      style
+    });
+  }
+  return null;
+}
+
+// src/elements/Layout/index.tsx
+var Layout = forwardRef4((props, ref) => {
+  let {
+    children,
+    rows,
+    gap,
+    rowSize,
+    columns,
+    contentSize,
+    gridSize,
+    backgroundColor,
+    backgroundImage,
+    objectFit,
+    objectPosition,
+    enableOverlay,
+    overlayOpacity,
+    ...rest
+  } = props;
+  let style = {
+    "--layout-content-width": "100vw",
+    "--content-size": contentSize + "px",
+    "--grid-size": gridSize + "px",
+    "--rows": rows,
+    "--columns": columns,
+    "--gap": gap + "px",
+    "--row-size": rowSize + "px",
+    "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
+  };
+  return /* @__PURE__ */ React8.createElement("div", {
+    ref,
+    ...rest,
+    style
+  }, /* @__PURE__ */ React8.createElement(Background, {
+    imgUrl: backgroundImage,
+    bgColor: backgroundColor,
+    objectFit,
+    objectPosition
+  }), /* @__PURE__ */ React8.createElement(Overlay, {
+    enableOverlay,
+    overlayOpacity
+  }), /* @__PURE__ */ React8.createElement("div", {
+    "data-layout-content": true
+  }, children));
+});
+var css5 = {
+  "@desktop": {
+    position: "relative",
+    "> [data-layout-content]": {
+      paddingTop: "var(--gap)",
+      paddingBottom: "var(--gap)",
+      margin: "0 auto",
+      display: "grid",
+      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+      gridTemplateColumns: "calc((var(--layout-content-width) - var(--content-size)) / 2) 1fr repeat(var(--columns), minmax(0, var(--col-size))) 1fr calc((var(--layout-content-width) - var(--content-size)) / 2)",
+      gridAutoRows: "var(--row-size)",
+      gap: "var(--gap)",
+      maxWidth: "var(--layout-content-width)"
+    },
+    ".wv-layout-background": {
+      display: "block",
+      position: "absolute",
+      inset: 0,
+      backgroundColor: "var(--layout-bg-color)",
+      img: {
+        objectFit: "var(--layout-bg-image-object-fit, cover)",
+        objectPosition: "var(--layout-bg-image-position, 50% 50%)"
+      }
+    },
+    ".wv-layout-overlay": {
+      display: "block",
+      position: "absolute",
+      inset: 0,
+      backgroundColor: "rgba(0, 0, 0, var(--layout-overlay-opacity, 0.5))"
+    }
+  },
+  "@mobile": {
+    padding: "0 16px",
+    "> [data-layout-content]": {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }
+};
+Layout.defaultProps = {
+  contentSize: 1600,
+  gridSize: 1224,
+  rows: 16,
+  columns: 12,
+  gap: 16,
+  rowSize: 48
+};
+var Layout_default = Layout;
+
+// src/elements/Map.tsx
+import React9, { forwardRef as forwardRef5 } from "react";
+var Map = forwardRef5((props, ref) => {
+  let { place, zoom, ...rest } = props;
+  return /* @__PURE__ */ React9.createElement("div", {
+    ref,
+    ...rest
+  }, /* @__PURE__ */ React9.createElement("iframe", {
+    loading: "lazy",
+    width: "100%",
+    height: "100%",
+    title: "map",
+    src: `https://maps.google.com/maps?z=${zoom}&t=m&q=${place}&ie=UTF8&&output=embed`,
+    style: { pointerEvents: "none" }
+  }));
+});
+var css6 = {
+  "@desktop": {
+    iframe: {
+      border: "none"
+    }
+  },
+  "@mobile": {
+    iframe: {
+      border: "none"
+    }
+  }
+};
+Map.defaultProps = {
+  place: "Hanoi",
+  zoom: 14
+};
+var Map_default = Map;
+
+// src/elements/Text.tsx
+import * as React10 from "react";
+var Text = React10.forwardRef(
+  (props, ref) => {
+    let { children, value, ...rest } = props;
+    return /* @__PURE__ */ React10.createElement("div", {
+      ref,
+      ...rest
+    }, /* @__PURE__ */ React10.createElement("div", {
+      className: "wv-text-content",
+      dangerouslySetInnerHTML: { __html: value }
+    }));
+  }
+);
+var css7 = {
+  "@desktop": {
+    padding: "10px",
+    overflow: "hidden",
+    ".wv-text-content": {
+      wordBreak: "break-word",
+      overflowWrap: "break-word",
+      whiteSpace: "break-spaces"
+    }
+  }
+};
+Text.defaultProps = {
+  value: "<p>The quick brown fox jumps over the lazy dog</p>"
+};
+var Text_default = Text;
+
+// src/elements/Video/index.tsx
+import React14, { forwardRef as forwardRef7, useContext as useContext3 } from "react";
+
+// src/elements/Video/HTMLVideo.tsx
+import React11 from "react";
+function HTMLVideo(props) {
+  let { src, type, controls, autoPlay, loop, muted } = props;
+  return /* @__PURE__ */ React11.createElement("video", {
+    controls,
+    autoPlay,
+    loop,
+    muted,
+    controlsList: "nodownload",
+    disablePictureInPicture: true
+  }, /* @__PURE__ */ React11.createElement("source", {
+    src,
+    type: type || "video/mp4"
+  }), /* @__PURE__ */ React11.createElement("source", {
+    src,
+    type: "video/ogg"
+  }), "Your browser does not support the video tag.");
+}
+
+// src/elements/Video/Vimeo.tsx
+import React12 from "react";
+function Vimeo(props) {
+  let { vimeoId, controls, autoPlay, loop, muted } = props;
+  let params = `autoplay=${autoPlay}&loop=${loop}&controls=${controls}&muted=${muted}`;
+  let vimeoSrc = `https://player.vimeo.com/video/${vimeoId}?${params}`;
+  return /* @__PURE__ */ React12.createElement("iframe", {
+    src: vimeoSrc,
+    width: "100%",
+    height: "100%",
+    allowFullScreen: true
+  });
+}
+
+// src/elements/Video/Youtube.tsx
+import React13 from "react";
+function Youtube(props) {
+  let { youtubeId, controls, autoPlay, loop, muted } = props;
+  let params = new URLSearchParams({
+    autoplay: autoPlay ? "1" : "0",
+    controls: controls ? "1" : "0",
+    loop: loop ? "1" : "0",
+    mute: muted ? "1" : "0"
+  });
+  let youtubeSrc = `https://www.youtube.com/embed/${youtubeId}?playlist=${youtubeId}&${params.toString()}`;
+  let allow = `accelerometer;${autoPlay ? "autoplay;" : ""} clipboard-write; encrypted-media; gyroscope; picture-in-picture`;
+  return /* @__PURE__ */ React13.createElement("iframe", {
+    src: youtubeSrc,
+    width: "100%",
+    height: "100%",
+    allowFullScreen: true,
+    allow
+  });
+}
+
+// src/elements/Video/index.tsx
+var Video = forwardRef7((props, ref) => {
+  let { isDesignMode } = useContext3(WeaverseContext);
+  let {
+    src,
+    controls,
+    poster,
+    autoPlay: originAutoPlay,
+    loop,
+    muted,
+    ...rest
+  } = props;
+  let autoPlay = !isDesignMode && originAutoPlay;
+  let videoProps = { src, controls, poster, autoPlay, loop, muted };
+  let content;
+  let youtubeId = getYoutubeEmbedId(src);
+  let vimeoId = getVimeoId(src);
+  if (youtubeId) {
+    content = /* @__PURE__ */ React14.createElement(Youtube, {
+      ...videoProps,
+      youtubeId
+    });
+  } else if (vimeoId) {
+    content = /* @__PURE__ */ React14.createElement(Vimeo, {
+      ...videoProps,
+      vimeoId
+    });
+  } else {
+    content = /* @__PURE__ */ React14.createElement(HTMLVideo, {
+      ...videoProps
+    });
+  }
+  return /* @__PURE__ */ React14.createElement("div", {
+    ref,
+    ...rest
+  }, content);
+});
+var css8 = {
+  "@desktop": {
+    video: {
+      height: "100%",
+      width: "100%",
+      aspectRatio: "16 / 9"
+    },
+    iframe: {
+      border: "none"
+    }
+  },
+  "@mobile": {
+    iframe: {
+      border: "none"
+    }
+  }
+};
+Video.defaultProps = {
+  src: "https://youtu.be/wM-NT6hcw48",
+  poster: "https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/-/preview/-/quality/smart/-/format/auto/",
+  loop: false,
+  controls: false,
+  autoPlay: true,
+  muted: true
+};
+var Video_default = Video;
+
+// src/elements/Instagram.tsx
+import React21, { forwardRef as forwardRef10, useEffect as useEffect4, useState } from "react";
+
+// src/components/Placeholder.tsx
+import React15, { forwardRef as forwardRef8 } from "react";
+var Placeholder = forwardRef8(
+  (props, ref) => {
+    let { element, children, ...rest } = props;
+    return /* @__PURE__ */ React15.createElement("div", {
+      "data-wv-placeholder": true,
+      ref,
+      ...rest
+    }, /* @__PURE__ */ React15.createElement("div", {
+      style: { fontWeight: 600, marginBottom: "10px" }
+    }, element), /* @__PURE__ */ React15.createElement("div", null, children));
+  }
+);
+var Placeholder_default = Placeholder;
+
+// src/components/Modal/index.tsx
+var Modal_exports = {};
+__export(Modal_exports, {
+  Modal: () => Modal,
+  ModalClose: () => ModalClose,
+  ModalContent: () => ModalContent,
+  ModalHeader: () => ModalHeader,
+  ModalTrigger: () => ModalTrigger
+});
+import { Close, Portal, Root, Trigger } from "@radix-ui/react-dialog";
+import React18, { forwardRef as forwardRef9 } from "react";
+
+// src/components/Icons/index.tsx
+import React17 from "react";
+
+// src/components/Icons/Phosphor.tsx
+var Phosphor_exports = {};
+__export(Phosphor_exports, {
+  ArrowLeft: () => ArrowLeft,
+  ArrowRight: () => ArrowRight,
+  CircleNotch: () => CircleNotch,
+  Eye: () => Eye,
+  Image: () => Image2,
+  Minus: () => Minus,
+  Plus: () => Plus,
+  ShoppingCart: () => ShoppingCart,
+  X: () => X
+});
+import React16 from "react";
+var CircleNotch = (props) => {
+  return /* @__PURE__ */ React16.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props
+  }, /* @__PURE__ */ React16.createElement("circle", {
+    style: { opacity: ".25" },
+    cx: "12",
+    cy: "12",
+    r: "10",
+    stroke: "currentColor",
+    strokeWidth: "4"
+  }), /* @__PURE__ */ React16.createElement("path", {
+    style: { opacity: ".75" },
+    fill: "currentColor",
+    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+  }));
+};
+var X = (props) => {
+  return /* @__PURE__ */ React16.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ React16.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ React16.createElement("line", {
+    x1: "200",
+    y1: "56",
+    x2: "56",
+    y2: "200",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React16.createElement("line", {
+    x1: "200",
+    y1: "200",
+    x2: "56",
+    y2: "56",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }));
+};
+var Minus = (props) => {
+  return /* @__PURE__ */ React16.createElement("svg", {
+    width: "196",
+    height: "196",
+    fill: "currentColor",
+    stroke: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 384 512",
+    ...props
+  }, /* @__PURE__ */ React16.createElement("path", {
+    d: "M376 232H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h368c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"
+  }));
+};
+var Plus = (props) => {
+  return /* @__PURE__ */ React16.createElement("svg", {
+    width: "196",
+    height: "196",
+    fill: "currentColor",
+    stroke: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 384 512",
+    ...props
+  }, /* @__PURE__ */ React16.createElement("path", {
+    d: "M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"
+  }));
+};
+var ArrowLeft = (props) => {
+  return /* @__PURE__ */ React16.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ React16.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ React16.createElement("line", {
+    x1: "216",
+    y1: "128",
+    x2: "40",
+    y2: "128",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }), /* @__PURE__ */ React16.createElement("polyline", {
+    points: "112 56 40 128 112 200",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }));
+};
+var ArrowRight = (props) => {
+  return /* @__PURE__ */ React16.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ React16.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ React16.createElement("line", {
+    x1: "40",
+    y1: "128",
+    x2: "216",
+    y2: "128",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }), /* @__PURE__ */ React16.createElement("polyline", {
+    points: "144 56 216 128 144 200",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }));
+};
+var Image2 = (props) => {
+  return /* @__PURE__ */ React16.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    fill: "currentColor",
+    viewBox: "0 0 640 512",
+    ...props
+  }, /* @__PURE__ */ React16.createElement("path", {
+    d: "M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z"
+  }));
+};
+var ShoppingCart = (props) => {
+  return /* @__PURE__ */ React16.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ React16.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ React16.createElement("path", {
+    d: "M184,184H69.8L41.9,30.6A8,8,0,0,0,34.1,24H16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }), /* @__PURE__ */ React16.createElement("circle", {
+    cx: "80",
+    cy: "204",
+    r: "20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }), /* @__PURE__ */ React16.createElement("circle", {
+    cx: "184",
+    cy: "204",
+    r: "20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }), /* @__PURE__ */ React16.createElement("path", {
+    d: "M62.5,144H188.1a15.9,15.9,0,0,0,15.7-13.1L216,64H48",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }));
+};
+var Eye = (props) => {
+  return /* @__PURE__ */ React16.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ React16.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ React16.createElement("path", {
+    d: "M128,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Z",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React16.createElement("circle", {
+    cx: "128",
+    cy: "128",
+    r: "40",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }));
+};
+
+// src/components/Icons/index.tsx
+import clsx2 from "clsx";
+function Icon({ name, className, ...props }) {
+  let WeaverseIcon = Phosphor_exports[name];
+  let cls = clsx2("wv-icon", className);
+  return /* @__PURE__ */ React17.createElement(WeaverseIcon, {
+    className: cls,
+    ...props
+  });
+}
+
+// src/components/Modal/styled.ts
+import { Content, Overlay as Overlay2, Title } from "@radix-ui/react-dialog";
+import { keyframes, styled } from "@stitches/react";
+var overlayShow = keyframes({
+  "0%": { opacity: 0 },
+  "100%": { opacity: 1 }
+});
+var contentShow = keyframes({
+  "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
+  "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
+});
+var StyledOverlay = styled(Overlay2, {
+  display: "block !important",
+  backgroundColor: "rgba(0, 0, 0, .3)",
+  position: "fixed",
+  zIndex: 9999,
+  inset: 0,
+  animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
+});
+var StyledTitle = styled(Title, {
+  margin: "0 0 24px",
+  fontWeight: 500,
+  fontSize: 24,
+  "@media (max-width: 768px)": {
+    margin: "0 0 16px",
+    fontSize: 20
+  }
+});
+var StyledContent = styled(Content, {
+  backgroundColor: "white",
+  borderRadius: 6,
+  boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  padding: 24,
+  animation: `${contentShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`,
+  zIndex: 9999,
+  maxWidth: "90vw",
+  width: "auto",
+  "*": {
+    maxWidth: "100%"
+  },
+  "&:focus": { outline: "none" },
+  '&[data-size="fullscreen"]': {
+    width: "100vw",
+    height: "100vh",
+    maxWidth: "100vw",
+    borderRadius: 0
+  },
+  "@media (max-width: 768px)": {
+    width: "90vw",
+    padding: 12,
+    '&[data-size="fullscreen"]': {
+      width: "100vw"
+    }
+  }
+});
+var StyledCloseIcon = styled("button", {
+  all: "unset",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  borderRadius: "100%",
+  height: 25,
+  width: 25,
+  padding: 4,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "rgb(55, 65, 81)",
+  position: "absolute",
+  top: 8,
+  right: 8,
+  "&:hover": {
+    backgroundColor: "rgba(112, 112, 112, .1)"
+  },
+  svg: {
+    width: 20,
+    height: 20
+  }
+});
+
+// src/components/Modal/useOpenChangeEffect.ts
+import { useEffect as useEffect2 } from "react";
+function useOpenChangeEffect(props) {
+  let { open, defaultOpen, onOpenChange } = props;
+  useEffect2(() => {
+    let isOpen = open || defaultOpen;
+    if (isOpen) {
+      document.body.classList.add("wv-modal-open");
+    } else {
+      document.body.classList.remove("wv-modal-open");
+    }
+  }, [open, defaultOpen]);
+  let handleOpenChange = (open2) => {
+    if (open2) {
+      document.body.classList.add("wv-modal-open");
+    } else {
+      document.body.classList.remove("wv-modal-open");
+    }
+    onOpenChange?.(open2);
+  };
+  return handleOpenChange;
+}
+
+// src/components/Modal/index.tsx
+var Modal = (props) => {
+  let { children, open, defaultOpen, onOpenChange, ...rest } = props;
+  let handleOpenChange = useOpenChangeEffect(props);
+  return /* @__PURE__ */ React18.createElement(Root, {
+    open,
+    defaultOpen,
+    onOpenChange: handleOpenChange,
+    ...rest
+  }, children);
+};
+var ModalTrigger = Trigger;
+var ModalHeader = forwardRef9(
+  (props, ref) => {
+    let { children, ...rest } = props;
+    return /* @__PURE__ */ React18.createElement(StyledTitle, {
+      ref,
+      ...rest,
+      "data-wv-modal-header": true
+    }, children);
+  }
+);
+var ModalContent = forwardRef9(
+  (props, ref) => {
+    let { children, size, portal, ...rest } = props;
+    let modalContent = /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(StyledOverlay, null), /* @__PURE__ */ React18.createElement(StyledContent, {
+      ...rest,
+      onCloseAutoFocus: (e) => e.preventDefault(),
+      "data-wv-modal": true,
+      "data-size": size,
+      ref
+    }, /* @__PURE__ */ React18.createElement(ModalClose, null), /* @__PURE__ */ React18.createElement("div", {
+      className: "wv-modal-content"
+    }, children)));
+    if (portal) {
+      return /* @__PURE__ */ React18.createElement(Portal, null, modalContent);
+    }
+    return modalContent;
+  }
+);
+ModalContent.defaultProps = {
+  size: "auto",
+  portal: false
+};
+var ModalClose = forwardRef9(
+  (props, ref) => {
+    let { asChild, children, ...rest } = props;
+    let closeIcon = /* @__PURE__ */ React18.createElement(StyledCloseIcon, null, /* @__PURE__ */ React18.createElement(Icon, {
+      name: "X"
+    }));
+    return /* @__PURE__ */ React18.createElement(Close, {
+      asChild: true,
+      ...rest,
+      ref
+    }, asChild ? children : closeIcon);
+  }
+);
+
+// src/components/Spinner.tsx
+import React19 from "react";
+function Spinner() {
+  return /* @__PURE__ */ React19.createElement("span", {
+    className: "wv-spinner-wrapper"
+  }, /* @__PURE__ */ React19.createElement(Icon, {
+    name: "CircleNotch",
+    className: "wv-spinner"
+  }));
+}
+
+// src/components/Tooltip.tsx
+import React20 from "react";
+function Tooltip({ children }) {
+  return /* @__PURE__ */ React20.createElement("span", {
+    className: "wv-tooltip"
+  }, children);
+}
+
+// src/components/index.ts
+var Components = {
+  Placeholder: Placeholder_default,
+  Spinner,
+  ModalComponents: Modal_exports,
+  Icon,
+  Tooltip
+};
+
+// src/elements/Instagram.tsx
+var Instagram = forwardRef10(
+  (props, ref) => {
+    let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
+    let [media, setMedia] = useState([]);
+    let [error, setError] = useState(null);
+    useEffect4(() => {
+      if (token) {
+        let params = new URLSearchParams({
+          access_token: token,
+          fields: "id,media_type,caption,media_url,permalink,thumbnail_url"
+        });
+        fetch(`${INSTAGRAM_API}/me/media?${params.toString()}`).then((res) => res.json()).then((res) => {
+          if (res.error) {
+            setError(res);
+          } else {
+            setError(null);
+            setMedia([...res.data]);
+          }
+        }).catch(setError);
+      }
+    }, [token]);
+    if (!token || error) {
+      return /* @__PURE__ */ React21.createElement("div", {
+        ref,
+        ...rest
+      }, /* @__PURE__ */ React21.createElement(Components.Placeholder, {
+        element: "Instagram"
+      }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
+    }
+    let style = {
+      "--wv-ig-images-per-row": imagesPerRow,
+      "--wv-ig-images-gap": gap + "px"
+    };
+    return /* @__PURE__ */ React21.createElement("div", {
+      ref,
+      ...rest,
+      style
+    }, /* @__PURE__ */ React21.createElement("div", {
+      className: "wv-ig-media-container"
+    }, media.slice(0, numberOfImages).map((item) => {
+      let {
+        id,
+        permalink,
+        caption,
+        media_url,
+        media_type,
+        thumbnail_url
+      } = item;
+      if (media_type === "VIDEO") {
+        return /* @__PURE__ */ React21.createElement("video", {
+          key: id,
+          controls: true,
+          poster: thumbnail_url
+        }, /* @__PURE__ */ React21.createElement("source", {
+          src: media_url,
+          type: "video/mp4"
+        }));
+      }
+      return /* @__PURE__ */ React21.createElement("a", {
+        key: id,
+        href: permalink,
+        target: "_blank",
+        rel: "noreferrer"
+      }, /* @__PURE__ */ React21.createElement("img", {
+        alt: caption,
+        src: media_url
+      }));
+    })));
+  }
+);
+Instagram.defaultProps = {
+  token: "",
+  username: "",
+  numberOfImages: 8,
+  imagesPerRow: 4,
+  gap: 0
+};
+
+// src/elements/index.ts
+var Elements = {
+  Countdown: {
+    Component: Countdown_default,
+    type: "countdown",
+    defaultCss: css3
+  },
+  Button: {
+    Component: Button_default,
+    type: "button",
+    defaultCss: css
+  },
+  Container: {
+    Component: Container_default,
+    type: "container",
+    defaultCss: css2
+  },
+  Image: {
+    Component: Image_default,
+    type: "image",
+    defaultCss: css4
+  },
+  Layout: {
+    Component: Layout_default,
+    type: "layout",
+    defaultCss: css5
+  },
+  Map: {
+    Component: Map_default,
+    type: "map",
+    defaultCss: css6
+  },
+  Text: {
+    Component: Text_default,
+    type: "text",
+    defaultCss: css7
+  },
+  Video: {
+    Component: Video_default,
+    type: "video",
+    defaultCss: css8
+  }
+};
+
+// src/context.ts
+var createRootContext = (configs) => {
+  let rootContext = new Weaverse(configs);
+  Object.keys(Elements).forEach((key) => {
+    rootContext.registerElement(Elements[key]);
+  });
+  return rootContext;
+};
+var WeaverseContext = createContext({});
+var WeaverseContextProvider = WeaverseContext.Provider;
+var WeaverseContextConsumer = WeaverseContext.Consumer;
+
+// src/renderer.tsx
+import { isBrowser } from "@weaverse/core";
+import React22, { useContext as useContext4, useEffect as useEffect5, useRef, useState as useState2 } from "react";
+var WeaverseRoot = ({ context }) => {
+  let [, setData] = useState2(context.projectData);
+  let rootRef = useRef();
+  let renderRoot = () => setData({});
+  useEffect5(() => {
+    context.subscribe(renderRoot);
+    context.contentRootElement = rootRef.current;
+    return () => {
+      context.unsubscribe(renderRoot);
+    };
+  }, []);
+  let eventHandlers = context?.studioBridge?.eventHandlers || {};
+  let themeClass = context.stitchesInstance.theme.className;
+  if (context.projectData?.rootId) {
+    return /* @__PURE__ */ React22.createElement("div", {
+      className: `weaverse-content-root ${themeClass}`,
+      ...eventHandlers,
+      ref: rootRef
+    }, /* @__PURE__ */ React22.createElement(WeaverseContextProvider, {
+      value: context
+    }, /* @__PURE__ */ React22.createElement(ItemInstance, {
+      id: context.projectData.rootId
+    })));
+  }
+  return null;
+};
+var ItemComponent = ({ instance }) => {
+  let { stitchesInstance, elementInstances } = useContext4(WeaverseContext);
+  let [data, setData] = useState2(instance.data);
+  let { id, type, childIds = [], css: css9, className, ...rest } = data;
+  useEffect5(() => {
+    let render = (data2) => setData({ ...data2 });
+    instance.subscribe(render);
+    if (isBrowser && !instance.ref.current) {
+      Object.assign(instance.ref, {
+        current: document.querySelector(`[data-wv-id="${id}"]`)
+      });
+    }
+    return () => instance.unsubscribe(render);
+  }, []);
+  let Element = elementInstances.get(type);
+  if (Element?.Component) {
+    let Component = Element.Component;
+    if (Component.$$typeof === Symbol.for("react.forward_ref")) {
+      rest.ref = instance.ref;
+    }
+    return /* @__PURE__ */ React22.createElement(Component, {
+      key: id,
+      "data-wv-type": type,
+      "data-wv-id": id,
+      className: generateItemClassName(instance, stitchesInstance),
+      ...rest
+    }, childIds.map((id2) => /* @__PURE__ */ React22.createElement(ItemInstance, {
+      key: id2,
+      id: id2
+    })));
+  } else {
+    console.log(`Unknown element: ${type}`);
+    return null;
+  }
+};
+var ItemInstance = ({ id }) => {
+  let context = useContext4(WeaverseContext);
+  let { itemInstances } = context;
+  let instance = itemInstances.get(id);
+  if (!instance) {
+    return /* @__PURE__ */ React22.createElement("div", {
+      style: { display: "none" }
+    }, "Item instance ", id, " not found");
+  }
+  return /* @__PURE__ */ React22.createElement(ItemComponent, {
+    key: id,
+    instance
+  });
+};
+export {
+  Components,
+  Elements,
+  WeaverseContext,
+  WeaverseContextConsumer,
+  WeaverseContextProvider,
+  WeaverseRoot,
+  createRootContext
+};