@weaverse/react 0.7.52 → 0.7.54

package/dist/index.js

@@ -1 +1,1525 @@
-"use strict";var mt=Object.create;var _=Object.defineProperty;var dt=Object.getOwnPropertyDescriptor;var ct=Object.getOwnPropertyNames;var ut=Object.getPrototypeOf,ft=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var o in t)_(e,o,{get:t[o],enumerable:!0})},V=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of ct(t))!ft.call(e,n)&&n!==o&&_(e,n,{get:()=>t[n],enumerable:!(r=dt(t,n))||r.enumerable});return e},S=(e,t,o)=>(V(e,t,"default"),o&&V(o,t,"default")),p=(e,t,o)=>(o=e!=null?mt(ut(e)):{},V(t||!e||!e.__esModule?_(o,"default",{value:e,enumerable:!0}):o,e)),gt=e=>V(_({},"__esModule",{value:!0}),e);var k={};Z(k,{Components:()=>oe,Elements:()=>Y,WeaverseContext:()=>C,WeaverseContextConsumer:()=>Ft,WeaverseContextProvider:()=>re,WeaverseRoot:()=>$t,createRootContext:()=>_t});module.exports=gt(k);S(k,require("@weaverse/core"),module.exports);var it=require("@weaverse/core"),lt=require("react");var D=p(require("react")),ne=require("react");var ie=D.forwardRef((e,t)=>{let{isDesignMode:o}=(0,ne.useContext)(C),{text:r,clickAction:n,linkTo:i,openInNewTab:l,...a}=e;return n==="none"?D.createElement("button",{ref:t,...a},r):D.createElement("a",{ref:t,href:o?void 0:i,target:l?"_blank":"_self",rel:"noreferrer",...a},r)});ie.defaultProps={type:"button",text:"Button",clickAction:"none",linkTo:"",openInNewTab:!1};var le={"@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"}}},se=ie;var F=p(require("react")),ae=(0,F.forwardRef)((e,t)=>{let{children:o,...r}=e;return F.default.createElement("div",{ref:t,...r},o)}),pe={"@desktop":{display:"flex",alignItems:"flex-start",justifyContent:"flex-start",gridArea:"1 / 1 / 3 / 6",overflow:"hidden"}};ae.defaultProps={};var me=ae;var w=p(require("react"));var de=["days","hours","minutes","seconds"],$="wv-cd-evergreen-start",ce="https://graph.instagram.com";var ue=p(require("clsx"));function ht(e){return{"@desktop":e["@desktop"],"@mobile":e["@mobile"]}}var J={};function fe(e,t){let{css:o,type:r,className:n=""}=e.data,i="",l="",a=e.Element?.permanentCss;if(a)if(r in J)l=J[r];else{let{className:u}=t.css(a)();Object.assign(J,{[r]:u}),l=u}if(i=l,o){let u=ht(o),x=t.css(u)().className||"",{stitchesClass:b}=e,m=(e.ref.current?.className||"").replace(b,"").replace(n,"").replace(l,"").trim();i=(0,ue.default)(l,n,x,m),e.stitchesClass=x}return i}function ge(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 ve(e){let t=e.match(/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/);return t?t[1]:null}function ye(e){let t=e.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(.+)/);return t?t[1]:null}var U=p(require("react"));function he({value:e,label:t}){return U.default.createElement("div",{className:"wv-cd-block"},U.default.createElement("div",{className:"wv-cd-number"},typeof e=="string"?e:e.toString().padStart(2,"0")),t&&U.default.createElement("div",{className:"wv-cd-label"},t))}var we=(0,w.forwardRef)((e,t)=>{let{isDesignMode:o}=(0,w.useContext)(C),{timerType:r,startTime:n,endTime:i,periods:l,redirectWhenTimerStops:a,redirectUrl:u,openInNewTab:x,showColon:b,showLabel:m,...f}=e,[v,h]=w.default.useState(0),I=l*60*1e3,N=()=>{!o&&a&&u&&window.open(u,x?"_blank":"_self")},A=()=>{let d=n;if(r==="evergreen"){let B=localStorage.getItem($);B?(d=Number.parseInt(B),d+I<Date.now()&&(d=Date.now(),localStorage.setItem($,d.toString()))):(d=Date.now(),localStorage.setItem($,d.toString()))}return d},K=d=>d<Date.now()&&i>Date.now(),q=()=>{let d=A(),B=r==="fixed-time"?i:d+I,X=K(d)?Math.max(B-Date.now(),0):0;X>0&&X<1e3&&N(),h(X)};(0,w.useEffect)(()=>{let d=setInterval(q,1e3);return()=>{clearInterval(d)}},[n,i,I,r]);let pt=ge(v);return w.default.createElement("div",{ref:t,...f},de.map(d=>w.default.createElement(w.default.Fragment,{key:d},w.default.createElement(he,{label:m?d:"",value:v===0?"--":pt[d]}),d!=="seconds"&&w.default.createElement("div",{className:"wv-cd-separator"},b&&w.default.createElement("span",null,":")))))}),xe={"@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"}}}};we.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 be=we;var H=p(require("react")),Ce=H.default.forwardRef((e,t)=>{let{src:o,alt:r,objectFit:n,objectPosition:i,clickAction:l,openLinkInNewTab:a,linkTo:u,...x}=e,b={"--img-object-fit":n,"--img-object-position":i},m=H.default.createElement("img",{alt:r,"data-blink-src":o});return l==="openLink"&&u&&(m=H.default.createElement("a",{href:u,target:a?"_blank":"_self"},m)),H.default.createElement("div",{ref:t,...x,style:b},m)}),Pe={"@desktop":{display:"flex",overflow:"hidden",img:{width:"100%",height:"100%",objectFit:"var(--img-object-fit, cover)",objectPosition:"var(--img-object-position, center)"}}};Ce.defaultProps={src:"https://ucarecdn.com/cf54e41e-36a0-4547-a140-a302e0387890/",alt:"Image alt text",objectFit:"cover",objectPosition:"center",clickAction:"none",openLinkInNewTab:!1,linkTo:""};var ke=Ce;var L=p(require("react"));var Q=p(require("react"));function Se(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?Q.default.createElement("div",{style:i,className:"wv-layout-background"},o&&Q.default.createElement("img",{width:"100%",height:"100%","data-blink-src":o,alt:"Section background"})):null}var Ee=p(require("react"));function Te(e){let{enableOverlay:t,overlayOpacity:o}=e;if(t){let r={["--layout-overlay-opacity"]:o/100};return Ee.default.createElement("div",{className:"wv-layout-overlay",style:r})}return null}var Ie=(0,L.forwardRef)((e,t)=>{let{children:o,rows:r,gap:n,rowSize:i,columns:l,contentSize:a,gridSize:u,backgroundColor:x,backgroundImage:b,objectFit:m,objectPosition:f,enableOverlay:v,overlayOpacity:h,...I}=e,N={"--layout-content-width":"100vw","--content-size":a+"px","--grid-size":u+"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 L.default.createElement("div",{ref:t,...I,style:N},L.default.createElement(Se,{imgUrl:b,bgColor:x,objectFit:m,objectPosition:f}),L.default.createElement(Te,{enableOverlay:v,overlayOpacity:h}),L.default.createElement("div",{"data-layout-content":!0},o))}),Le={"@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"}}};Ie.defaultProps={contentSize:1600,gridSize:1224,rows:16,columns:12,gap:16,rowSize:48};var Me=Ie;var O=p(require("react")),We=(0,O.forwardRef)((e,t)=>{let{place:o,zoom:r,...n}=e;return O.default.createElement("div",{ref:t,...n},O.default.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"}}))}),je={"@desktop":{iframe:{border:"none"}},"@mobile":{iframe:{border:"none"}}};We.defaultProps={place:"Hanoi",zoom:14};var Ne=We;var z=p(require("react")),De=z.forwardRef((e,t)=>{let{children:o,value:r,...n}=e;return z.createElement("div",{ref:t,...n},z.createElement("div",{className:"wv-text-content",dangerouslySetInnerHTML:{__html:r}}))}),He={"@desktop":{padding:"10px",overflow:"hidden",".wv-text-content":{wordBreak:"break-word",overflowWrap:"break-word",whiteSpace:"break-spaces"}}};De.defaultProps={value:"<p>The quick brown fox jumps over the lazy dog</p>"};var Oe=De;var P=p(require("react"));var G=p(require("react"));function ze(e){let{src:t,type:o,controls:r,autoPlay:n,loop:i,muted:l}=e;return G.default.createElement("video",{controls:r,autoPlay:n,loop:i,muted:l,controlsList:"nodownload",disablePictureInPicture:!0},G.default.createElement("source",{src:t,type:o||"video/mp4"}),G.default.createElement("source",{src:t,type:"video/ogg"}),"Your browser does not support the video tag.")}var Ae=p(require("react"));function Be(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 Ae.default.createElement("iframe",{src:a,width:"100%",height:"100%",allowFullScreen:!0})}var Ve=p(require("react"));function _e(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 Ve.default.createElement("iframe",{src:a,width:"100%",height:"100%",allowFullScreen:!0,allow:`accelerometer;${r?"autoplay;":""} clipboard-write; encrypted-media; gyroscope; picture-in-picture`})}var Fe=(0,P.forwardRef)((e,t)=>{let{isDesignMode:o}=(0,P.useContext)(C),{src:r,controls:n,poster:i,autoPlay:l,loop:a,muted:u,...x}=e,m={src:r,controls:n,poster:i,autoPlay:!o&&l,loop:a,muted:u},f,v=ve(r),h=ye(r);return v?f=P.default.createElement(_e,{...m,youtubeId:v}):h?f=P.default.createElement(Be,{...m,vimeoId:h}):f=P.default.createElement(ze,{...m}),P.default.createElement("div",{ref:t,...x},f)}),$e={"@desktop":{video:{height:"100%",width:"100%",aspectRatio:"16 / 9"},iframe:{border:"none"}},"@mobile":{iframe:{border:"none"}}};Fe.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 Ue=Fe;var y=p(require("react"));var M=p(require("react")),St=(0,M.forwardRef)((e,t)=>{let{element:o,children:r,...n}=e;return M.default.createElement("div",{"data-wv-placeholder":!0,ref:t,...n},M.default.createElement("div",{style:{fontWeight:600,marginBottom:"10px"}},o),M.default.createElement("div",null,r))}),Ge=St;var ee={};Z(ee,{Modal:()=>zt,ModalClose:()=>tt,ModalContent:()=>et,ModalHeader:()=>Bt,ModalTrigger:()=>At});var T=require("@radix-ui/react-dialog"),g=p(require("react"));var Ye=p(require("react"));var R={};Z(R,{ArrowLeft:()=>Mt,ArrowRight:()=>Wt,CircleNotch:()=>Et,Eye:()=>Dt,Image:()=>jt,Minus:()=>It,Plus:()=>Lt,ShoppingCart:()=>Nt,X:()=>Tt});var s=p(require("react")),Et=e=>s.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",...e},s.default.createElement("circle",{style:{opacity:".25"},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),s.default.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"})),Tt=e=>s.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",fill:"currentColor",viewBox:"0 0 256 256",...e},s.default.createElement("rect",{width:"256",height:"256",fill:"none"}),s.default.createElement("line",{x1:"200",y1:"56",x2:"56",y2:"200",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}),s.default.createElement("line",{x1:"200",y1:"200",x2:"56",y2:"56",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"})),It=e=>s.default.createElement("svg",{width:"196",height:"196",fill:"currentColor",stroke:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",...e},s.default.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"})),Lt=e=>s.default.createElement("svg",{width:"196",height:"196",fill:"currentColor",stroke:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",...e},s.default.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"})),Mt=e=>s.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"192",height:"192",fill:"currentColor",viewBox:"0 0 256 256",...e},s.default.createElement("rect",{width:"256",height:"256",fill:"none"}),s.default.createElement("line",{x1:"216",y1:"128",x2:"40",y2:"128",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),s.default.createElement("polyline",{points:"112 56 40 128 112 200",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"})),Wt=e=>s.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"192",height:"192",fill:"currentColor",viewBox:"0 0 256 256",...e},s.default.createElement("rect",{width:"256",height:"256",fill:"none"}),s.default.createElement("line",{x1:"40",y1:"128",x2:"216",y2:"128",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),s.default.createElement("polyline",{points:"144 56 216 128 144 200",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"})),jt=e=>s.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",fill:"currentColor",viewBox:"0 0 640 512",...e},s.default.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"})),Nt=e=>s.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"192",height:"192",fill:"currentColor",viewBox:"0 0 256 256",...e},s.default.createElement("rect",{width:"256",height:"256",fill:"none"}),s.default.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.default.createElement("circle",{cx:"80",cy:"204",r:"20",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),s.default.createElement("circle",{cx:"184",cy:"204",r:"20",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),s.default.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"})),Dt=e=>s.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"192",height:"192",fill:"currentColor",viewBox:"0 0 256 256",...e},s.default.createElement("rect",{width:"256",height:"256",fill:"none"}),s.default.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.default.createElement("circle",{cx:"128",cy:"128",r:"40",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}));var Ke=p(require("clsx"));function W({name:e,className:t,...o}){let r=R[e],n=(0,Ke.default)("wv-icon",t);return Ye.default.createElement(r,{className:n,...o})}var j=require("@radix-ui/react-dialog"),E=require("@stitches/react"),Ht=(0,E.keyframes)({"0%":{opacity:0},"100%":{opacity:1}}),Ot=(0,E.keyframes)({"0%":{opacity:0,transform:"translate(-50%, -48%) scale(.96)"},"100%":{opacity:1,transform:"translate(-50%, -50%) scale(1)"}}),qe=(0,E.styled)(j.Overlay,{display:"block !important",backgroundColor:"rgba(0, 0, 0, .3)",position:"fixed",zIndex:9999,inset:0,animation:`${Ht} 300ms cubic-bezier(0.16, 1, 0.3, 1)`}),Xe=(0,E.styled)(j.Title,{margin:"0 0 24px",fontWeight:500,fontSize:24,"@media (max-width: 768px)":{margin:"0 0 16px",fontSize:20}}),Ze=(0,E.styled)(j.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:`${Ot} 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"}}}),Je=(0,E.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}});var Qe=require("react");function Re(e){let{open:t,defaultOpen:o,onOpenChange:r}=e;return(0,Qe.useEffect)(()=>{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 zt=e=>{let{children:t,open:o,defaultOpen:r,onOpenChange:n,...i}=e,l=Re(e);return g.default.createElement(T.Root,{open:o,defaultOpen:r,onOpenChange:l,...i},t)},At=T.Trigger,Bt=(0,g.forwardRef)((e,t)=>{let{children:o,...r}=e;return g.default.createElement(Xe,{ref:t,...r,"data-wv-modal-header":!0},o)}),et=(0,g.forwardRef)((e,t)=>{let{children:o,size:r,portal:n,...i}=e,l=g.default.createElement(g.default.Fragment,null,g.default.createElement(qe,null),g.default.createElement(Ze,{...i,onCloseAutoFocus:a=>a.preventDefault(),"data-wv-modal":!0,"data-size":r,ref:t},g.default.createElement(tt,null),g.default.createElement("div",{className:"wv-modal-content"},o)));return n?g.default.createElement(T.Portal,null,l):l});et.defaultProps={size:"auto",portal:!1};var tt=(0,g.forwardRef)((e,t)=>{let{asChild:o,children:r,...n}=e,i=g.default.createElement(Je,null,g.default.createElement(W,{name:"X"}));return g.default.createElement(T.Close,{asChild:!0,...n,ref:t},o?r:i)});var te=p(require("react"));function ot(){return te.default.createElement("span",{className:"wv-spinner-wrapper"},te.default.createElement(W,{name:"CircleNotch",className:"wv-spinner"}))}var rt=p(require("react"));function nt({children:e}){return rt.default.createElement("span",{className:"wv-tooltip"},e)}var oe={Placeholder:Ge,Spinner:ot,ModalComponents:ee,Icon:W,Tooltip:nt};var Vt=(0,y.forwardRef)((e,t)=>{let{token:o,username:r,numberOfImages:n,imagesPerRow:i,gap:l,...a}=e,[u,x]=(0,y.useState)([]),[b,m]=(0,y.useState)(null);if((0,y.useEffect)(()=>{if(o){let v=new URLSearchParams({access_token:o,fields:"id,media_type,caption,media_url,permalink,thumbnail_url"});fetch(`${ce}/me/media?${v.toString()}`).then(h=>h.json()).then(h=>{h.error?m(h):(m(null),x([...h.data]))}).catch(m)}},[o]),!o||b)return y.default.createElement("div",{ref:t,...a},y.default.createElement(oe.Placeholder,{element:"Instagram"},o?"Invalid or expired token!":"Connect to Instagram to display photos on your site."));let f={"--wv-ig-images-per-row":i,"--wv-ig-images-gap":l+"px"};return y.default.createElement("div",{ref:t,...a,style:f},y.default.createElement("div",{className:"wv-ig-media-container"},u.slice(0,n).map(v=>{let{id:h,permalink:I,caption:N,media_url:A,media_type:K,thumbnail_url:q}=v;return K==="VIDEO"?y.default.createElement("video",{key:h,controls:!0,poster:q},y.default.createElement("source",{src:A,type:"video/mp4"})):y.default.createElement("a",{key:h,href:I,target:"_blank",rel:"noreferrer"},y.default.createElement("img",{alt:N,src:A}))})))});Vt.defaultProps={token:"",username:"",numberOfImages:8,imagesPerRow:4,gap:0};var Y={Countdown:{Component:be,type:"countdown",defaultCss:xe},Button:{Component:se,type:"button",defaultCss:le},Container:{Component:me,type:"container",defaultCss:pe},Image:{Component:ke,type:"image",defaultCss:Pe},Layout:{Component:Me,type:"layout",defaultCss:Le},Map:{Component:Ne,type:"map",defaultCss:je},Text:{Component:Oe,type:"text",defaultCss:He},Video:{Component:Ue,type:"video",defaultCss:$e}};var _t=e=>{let t=new it.Weaverse(e);return Object.keys(Y).forEach(o=>{t.registerElement(Y[o])}),t},C=(0,lt.createContext)({}),re=C.Provider,Ft=C.Consumer;var st=require("@weaverse/core"),c=p(require("react"));var $t=({context:e})=>{let[,t]=(0,c.useState)(e.projectData),o=(0,c.useRef)(),r=()=>t({});(0,c.useEffect)(()=>(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.default.createElement("div",{className:`weaverse-content-root ${i}`,...n,ref:o},c.default.createElement(re,{value:e},c.default.createElement(at,{id:e.projectData.rootId}))):null},Ut=({instance:e})=>{let{stitchesInstance:t,elementInstances:o}=(0,c.useContext)(C),[r,n]=(0,c.useState)(e.data),{id:i,type:l,childIds:a=[],css:u,className:x,...b}=r;(0,c.useEffect)(()=>{let f=v=>n({...v});return e.subscribe(f),st.isBrowser&&!e.ref.current&&Object.assign(e.ref,{current:document.querySelector(`[data-wv-id="${i}"]`)}),()=>e.unsubscribe(f)},[]);let m=o.get(l);if(m?.Component){let f=m.Component;return f.$$typeof===Symbol.for("react.forward_ref")&&(b.ref=e.ref),c.default.createElement(f,{key:i,"data-wv-type":l,"data-wv-id":i,className:fe(e,t),...b},a.map(v=>c.default.createElement(at,{key:v,id:v})))}else return console.log(`Unknown element: ${l}`),null},at=({id:e})=>{let t=(0,c.useContext)(C),{itemInstances:o}=t,r=o.get(e);return r?c.default.createElement(Ut,{key:e,instance:r}):c.default.createElement("div",{style:{display:"none"}},"Item instance ",e," not found")};0&&(module.exports={Components,Elements,WeaverseContext,WeaverseContextConsumer,WeaverseContextProvider,WeaverseRoot,createRootContext});
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Components: () => Components,
+  Elements: () => Elements,
+  WeaverseContext: () => WeaverseContext,
+  WeaverseContextConsumer: () => WeaverseContextConsumer,
+  WeaverseContextProvider: () => WeaverseContextProvider,
+  WeaverseRoot: () => WeaverseRoot,
+  createRootContext: () => createRootContext
+});
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("@weaverse/core"), module.exports);
+
+// src/context.ts
+var import_core = require("@weaverse/core");
+var import_react26 = require("react");
+
+// src/elements/Button.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
+var Button = React.forwardRef((props, ref) => {
+  let { isDesignMode } = (0, import_react.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
+var import_react2 = __toESM(require("react"));
+var Container = (0, import_react2.forwardRef)(
+  (props, ref) => {
+    let { children, ...rest } = props;
+    return /* @__PURE__ */ import_react2.default.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
+var import_react4 = __toESM(require("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
+var import_clsx = __toESM(require("clsx"));
+function formatCSS(css10) {
+  return {
+    "@desktop": css10["@desktop"],
+    "@mobile": css10["@mobile"]
+  };
+}
+var permanentClasses = {};
+function generateItemClassName(instance, stitchesInstance) {
+  let { css: css10, 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 (css10) {
+    let formattedCss = formatCSS(css10);
+    let newStitchesClass = stitchesInstance.css(formattedCss)().className || "";
+    let { stitchesClass } = instance;
+    let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
+    className = (0, import_clsx.default)(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
+var import_react3 = __toESM(require("react"));
+function TimerBlock({ value, label }) {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: "wv-cd-block"
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: "wv-cd-number"
+  }, typeof value === "string" ? value : value.toString().padStart(2, "0")), label && /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: "wv-cd-label"
+  }, label));
+}
+
+// src/elements/Countdown/index.tsx
+var Countdown = (0, import_react4.forwardRef)(
+  (props, ref) => {
+    const { isDesignMode } = (0, import_react4.useContext)(WeaverseContext);
+    let {
+      timerType,
+      startTime: startTimeProp,
+      endTime: endTimeProp,
+      periods: periodsProp,
+      redirectWhenTimerStops,
+      redirectUrl,
+      openInNewTab,
+      showColon,
+      showLabel,
+      ...rest
+    } = props;
+    const [remaining, setRemaining] = import_react4.default.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);
+    };
+    (0, import_react4.useEffect)(() => {
+      let intervalFlag = setInterval(
+        handleRemaining,
+        1e3
+      );
+      return () => {
+        clearInterval(intervalFlag);
+      };
+    }, [startTimeProp, endTimeProp, periods, timerType]);
+    const timer = getTime(remaining);
+    return /* @__PURE__ */ import_react4.default.createElement("div", {
+      ref,
+      ...rest
+    }, TIMES.map((time) => {
+      return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, {
+        key: time
+      }, /* @__PURE__ */ import_react4.default.createElement(TimerBlock, {
+        label: showLabel ? time : "",
+        value: remaining === 0 ? "--" : timer[time]
+      }), time !== "seconds" && /* @__PURE__ */ import_react4.default.createElement("div", {
+        className: "wv-cd-separator"
+      }, showColon && /* @__PURE__ */ import_react4.default.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
+var import_react5 = __toESM(require("react"));
+var Image = import_react5.default.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__ */ import_react5.default.createElement("img", {
+      alt,
+      "data-blink-src": src
+    });
+    if (clickAction === "openLink" && linkTo) {
+      let target = openLinkInNewTab ? "_blank" : "_self";
+      content = /* @__PURE__ */ import_react5.default.createElement("a", {
+        href: linkTo,
+        target
+      }, content);
+    }
+    return /* @__PURE__ */ import_react5.default.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
+var import_react8 = __toESM(require("react"));
+
+// src/elements/Layout/Background.tsx
+var import_react6 = __toESM(require("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__ */ import_react6.default.createElement("div", {
+      style,
+      className: "wv-layout-background"
+    }, imgUrl && /* @__PURE__ */ import_react6.default.createElement("img", {
+      width: "100%",
+      height: "100%",
+      "data-blink-src": imgUrl,
+      alt: "Section background"
+    }));
+  }
+  return null;
+}
+
+// src/elements/Layout/Overlay.tsx
+var import_react7 = __toESM(require("react"));
+function Overlay(props) {
+  let { enableOverlay, overlayOpacity } = props;
+  if (enableOverlay) {
+    let style = {
+      ["--layout-overlay-opacity"]: overlayOpacity / 100
+    };
+    return /* @__PURE__ */ import_react7.default.createElement("div", {
+      className: "wv-layout-overlay",
+      style
+    });
+  }
+  return null;
+}
+
+// src/elements/Layout/index.tsx
+var Layout = (0, import_react8.forwardRef)((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__ */ import_react8.default.createElement("div", {
+    ref,
+    ...rest,
+    style
+  }, /* @__PURE__ */ import_react8.default.createElement(Background, {
+    imgUrl: backgroundImage,
+    bgColor: backgroundColor,
+    objectFit,
+    objectPosition
+  }), /* @__PURE__ */ import_react8.default.createElement(Overlay, {
+    enableOverlay,
+    overlayOpacity
+  }), /* @__PURE__ */ import_react8.default.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
+var import_react9 = __toESM(require("react"));
+var Map = (0, import_react9.forwardRef)((props, ref) => {
+  let { place, zoom, ...rest } = props;
+  return /* @__PURE__ */ import_react9.default.createElement("div", {
+    ref,
+    ...rest
+  }, /* @__PURE__ */ import_react9.default.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
+var React10 = __toESM(require("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
+var import_react13 = __toESM(require("react"));
+
+// src/elements/Video/HTMLVideo.tsx
+var import_react10 = __toESM(require("react"));
+function HTMLVideo(props) {
+  let { src, type, controls, autoPlay, loop, muted } = props;
+  return /* @__PURE__ */ import_react10.default.createElement("video", {
+    controls,
+    autoPlay,
+    loop,
+    muted,
+    controlsList: "nodownload",
+    disablePictureInPicture: true
+  }, /* @__PURE__ */ import_react10.default.createElement("source", {
+    src,
+    type: type || "video/mp4"
+  }), /* @__PURE__ */ import_react10.default.createElement("source", {
+    src,
+    type: "video/ogg"
+  }), "Your browser does not support the video tag.");
+}
+
+// src/elements/Video/Vimeo.tsx
+var import_react11 = __toESM(require("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__ */ import_react11.default.createElement("iframe", {
+    src: vimeoSrc,
+    width: "100%",
+    height: "100%",
+    allowFullScreen: true
+  });
+}
+
+// src/elements/Video/Youtube.tsx
+var import_react12 = __toESM(require("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__ */ import_react12.default.createElement("iframe", {
+    src: youtubeSrc,
+    width: "100%",
+    height: "100%",
+    allowFullScreen: true,
+    allow
+  });
+}
+
+// src/elements/Video/index.tsx
+var Video = (0, import_react13.forwardRef)((props, ref) => {
+  let { isDesignMode } = (0, import_react13.useContext)(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__ */ import_react13.default.createElement(Youtube, {
+      ...videoProps,
+      youtubeId
+    });
+  } else if (vimeoId) {
+    content = /* @__PURE__ */ import_react13.default.createElement(Vimeo, {
+      ...videoProps,
+      vimeoId
+    });
+  } else {
+    content = /* @__PURE__ */ import_react13.default.createElement(HTMLVideo, {
+      ...videoProps
+    });
+  }
+  return /* @__PURE__ */ import_react13.default.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
+var import_react25 = __toESM(require("react"));
+
+// src/components/Placeholder.tsx
+var import_react14 = __toESM(require("react"));
+var Placeholder = (0, import_react14.forwardRef)(
+  (props, ref) => {
+    let { element, children, ...rest } = props;
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
+      "data-wv-placeholder": true,
+      ref,
+      ...rest
+    }, /* @__PURE__ */ import_react14.default.createElement("div", {
+      style: { fontWeight: 600, marginBottom: "10px" }
+    }, element), /* @__PURE__ */ import_react14.default.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
+});
+var import_react_dialog2 = require("@radix-ui/react-dialog");
+var import_react19 = __toESM(require("react"));
+
+// src/components/Icons/index.tsx
+var import_react16 = __toESM(require("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
+});
+var import_react15 = __toESM(require("react"));
+var CircleNotch = (props) => {
+  return /* @__PURE__ */ import_react15.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props
+  }, /* @__PURE__ */ import_react15.default.createElement("circle", {
+    style: { opacity: ".25" },
+    cx: "12",
+    cy: "12",
+    r: "10",
+    stroke: "currentColor",
+    strokeWidth: "4"
+  }), /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ import_react15.default.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ import_react15.default.createElement("line", {
+    x1: "200",
+    y1: "56",
+    x2: "56",
+    y2: "200",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("svg", {
+    width: "196",
+    height: "196",
+    fill: "currentColor",
+    stroke: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 384 512",
+    ...props
+  }, /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("svg", {
+    width: "196",
+    height: "196",
+    fill: "currentColor",
+    stroke: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 384 512",
+    ...props
+  }, /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ import_react15.default.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ import_react15.default.createElement("line", {
+    x1: "216",
+    y1: "128",
+    x2: "40",
+    y2: "128",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }), /* @__PURE__ */ import_react15.default.createElement("polyline", {
+    points: "112 56 40 128 112 200",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }));
+};
+var ArrowRight = (props) => {
+  return /* @__PURE__ */ import_react15.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ import_react15.default.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ import_react15.default.createElement("line", {
+    x1: "40",
+    y1: "128",
+    x2: "216",
+    y2: "128",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }), /* @__PURE__ */ import_react15.default.createElement("polyline", {
+    points: "144 56 216 128 144 200",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }));
+};
+var Image2 = (props) => {
+  return /* @__PURE__ */ import_react15.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    fill: "currentColor",
+    viewBox: "0 0 640 512",
+    ...props
+  }, /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ import_react15.default.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("circle", {
+    cx: "80",
+    cy: "204",
+    r: "20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }), /* @__PURE__ */ import_react15.default.createElement("circle", {
+    cx: "184",
+    cy: "204",
+    r: "20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }), /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ import_react15.default.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("circle", {
+    cx: "128",
+    cy: "128",
+    r: "40",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }));
+};
+
+// src/components/Icons/index.tsx
+var import_clsx2 = __toESM(require("clsx"));
+function Icon({ name, className, ...props }) {
+  let WeaverseIcon = Phosphor_exports[name];
+  let cls = (0, import_clsx2.default)("wv-icon", className);
+  return /* @__PURE__ */ import_react16.default.createElement(WeaverseIcon, {
+    className: cls,
+    ...props
+  });
+}
+
+// src/components/Modal/styled.ts
+var import_react_dialog = require("@radix-ui/react-dialog");
+var import_react17 = require("@stitches/react");
+var overlayShow = (0, import_react17.keyframes)({
+  "0%": { opacity: 0 },
+  "100%": { opacity: 1 }
+});
+var contentShow = (0, import_react17.keyframes)({
+  "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
+  "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
+});
+var StyledOverlay = (0, import_react17.styled)(import_react_dialog.Overlay, {
+  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 = (0, import_react17.styled)(import_react_dialog.Title, {
+  margin: "0 0 24px",
+  fontWeight: 500,
+  fontSize: 24,
+  "@media (max-width: 768px)": {
+    margin: "0 0 16px",
+    fontSize: 20
+  }
+});
+var StyledContent = (0, import_react17.styled)(import_react_dialog.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 = (0, import_react17.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
+var import_react18 = require("react");
+function useOpenChangeEffect(props) {
+  let { open, defaultOpen, onOpenChange } = props;
+  (0, import_react18.useEffect)(() => {
+    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__ */ import_react19.default.createElement(import_react_dialog2.Root, {
+    open,
+    defaultOpen,
+    onOpenChange: handleOpenChange,
+    ...rest
+  }, children);
+};
+var ModalTrigger = import_react_dialog2.Trigger;
+var ModalHeader = (0, import_react19.forwardRef)(
+  (props, ref) => {
+    let { children, ...rest } = props;
+    return /* @__PURE__ */ import_react19.default.createElement(StyledTitle, {
+      ref,
+      ...rest,
+      "data-wv-modal-header": true
+    }, children);
+  }
+);
+var ModalContent = (0, import_react19.forwardRef)(
+  (props, ref) => {
+    let { children, size, portal, ...rest } = props;
+    let modalContent = /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react19.default.createElement(StyledContent, {
+      ...rest,
+      onCloseAutoFocus: (e) => e.preventDefault(),
+      "data-wv-modal": true,
+      "data-size": size,
+      ref
+    }, /* @__PURE__ */ import_react19.default.createElement(ModalClose, null), /* @__PURE__ */ import_react19.default.createElement("div", {
+      className: "wv-modal-content"
+    }, children)));
+    if (portal) {
+      return /* @__PURE__ */ import_react19.default.createElement(import_react_dialog2.Portal, null, modalContent);
+    }
+    return modalContent;
+  }
+);
+ModalContent.defaultProps = {
+  size: "auto",
+  portal: false
+};
+var ModalClose = (0, import_react19.forwardRef)(
+  (props, ref) => {
+    let { asChild, children, ...rest } = props;
+    let closeIcon = /* @__PURE__ */ import_react19.default.createElement(StyledCloseIcon, null, /* @__PURE__ */ import_react19.default.createElement(Icon, {
+      name: "X"
+    }));
+    return /* @__PURE__ */ import_react19.default.createElement(import_react_dialog2.Close, {
+      asChild: true,
+      ...rest,
+      ref
+    }, asChild ? children : closeIcon);
+  }
+);
+
+// src/components/Spinner.tsx
+var import_react20 = __toESM(require("react"));
+function Spinner() {
+  return /* @__PURE__ */ import_react20.default.createElement("span", {
+    className: "wv-spinner-wrapper"
+  }, /* @__PURE__ */ import_react20.default.createElement(Icon, {
+    name: "CircleNotch",
+    className: "wv-spinner"
+  }));
+}
+
+// src/components/Tooltip.tsx
+var import_react21 = __toESM(require("react"));
+function Tooltip({ children }) {
+  return /* @__PURE__ */ import_react21.default.createElement("span", {
+    className: "wv-tooltip"
+  }, children);
+}
+
+// src/components/Slider/index.tsx
+var import_clsx4 = __toESM(require("clsx"));
+var import_react23 = require("keen-slider/react");
+var import_react24 = __toESM(require("react"));
+
+// src/components/Slider/Arrows.tsx
+var import_clsx3 = __toESM(require("clsx"));
+var import_react22 = __toESM(require("react"));
+function Arrows(props) {
+  let { currentSlide, instanceRef, className } = props;
+  let { stitchesInstance } = (0, import_react22.useContext)(WeaverseContext);
+  let { className: cssClass } = stitchesInstance.css(css9)();
+  let isFirstSlide = currentSlide === 0;
+  let isLastSlide = false;
+  if (instanceRef.current) {
+    isLastSlide = currentSlide === instanceRef?.current?.track?.details?.maxIdx;
+  }
+  let _className = (0, import_clsx3.default)(className, cssClass);
+  let arrowLeftClass = (0, import_clsx3.default)(
+    "wv-slider-arrow arrow--left",
+    isFirstSlide && "arrow--disabled"
+  );
+  let arrowRightClass = (0, import_clsx3.default)(
+    "wv-slider-arrow arrow--right",
+    isLastSlide && "arrow--disabled"
+  );
+  return /* @__PURE__ */ import_react22.default.createElement("div", {
+    className: _className
+  }, /* @__PURE__ */ import_react22.default.createElement("button", {
+    type: "button",
+    className: arrowLeftClass,
+    onClick: (e) => {
+      e.stopPropagation();
+      instanceRef?.current?.prev();
+    }
+  }, /* @__PURE__ */ import_react22.default.createElement(Icon, {
+    name: "ArrowLeft"
+  })), /* @__PURE__ */ import_react22.default.createElement("button", {
+    type: "button",
+    className: arrowRightClass,
+    onClick: (e) => {
+      e.stopPropagation();
+      instanceRef?.current?.next();
+    }
+  }, /* @__PURE__ */ import_react22.default.createElement(Icon, {
+    name: "ArrowRight"
+  })));
+}
+var css9 = {
+  "@desktop": {
+    ".wv-slider-arrow": {
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      width: "44px",
+      height: "44px",
+      padding: "8px",
+      color: "#191919",
+      backgroundColor: "#f2f2f2",
+      textAlign: "center",
+      transition: "all 0.2s ease-in-out",
+      borderRadius: "4px",
+      border: "none",
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: "#191919",
+        color: "#f2f2f2"
+      },
+      svg: {
+        verticalAlign: "middle",
+        width: "22px",
+        height: "22px"
+      },
+      "&.arrow--left": {
+        left: "-80px"
+      },
+      "&.arrow--right": {
+        right: "-80px"
+      },
+      "&.arrow--disabled": {
+        opacity: 0.5
+      }
+    }
+  },
+  "@mobile": {
+    ".wv-slider-arrow": {
+      display: "none"
+    }
+  }
+};
+
+// src/components/Slider/index.tsx
+function Slider({ children, className }) {
+  let [currentSlide, setCurrentSlide] = (0, import_react24.useState)(0);
+  let [created, setCreated] = (0, import_react24.useState)(false);
+  let [ref, instanceRef] = (0, import_react23.useKeenSlider)({
+    slides: { perView: 4, spacing: 16 },
+    breakpoints: {
+      "(max-width: 1024px)": {
+        slides: { perView: 3, spacing: 16 }
+      },
+      "(max-width: 768px)": {
+        slides: {
+          perView: 1,
+          spacing: 32
+        }
+      }
+    },
+    created: () => {
+      setCreated(true);
+    },
+    slideChanged: (slider) => {
+      setCurrentSlide(slider.track.details.rel);
+    }
+  });
+  let _className = (0, import_clsx4.default)("keen-slider", className);
+  let arrowsClass = (0, import_clsx4.default)(className && `${className}-arrows`);
+  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, /* @__PURE__ */ import_react24.default.createElement("div", {
+    ref,
+    className: _className
+  }, /* @__PURE__ */ import_react24.default.createElement("link", {
+    rel: "stylesheet",
+    href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
+  }), children), created && instanceRef?.current && /* @__PURE__ */ import_react24.default.createElement(Arrows, {
+    currentSlide,
+    instanceRef,
+    className: arrowsClass
+  }));
+}
+
+// src/components/index.ts
+var Components = {
+  Placeholder: Placeholder_default,
+  Spinner,
+  ModalComponents: Modal_exports,
+  Icon,
+  Slider,
+  Tooltip
+};
+
+// src/elements/Instagram.tsx
+var Instagram = (0, import_react25.forwardRef)(
+  (props, ref) => {
+    let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
+    let [media, setMedia] = (0, import_react25.useState)([]);
+    let [error, setError] = (0, import_react25.useState)(null);
+    (0, import_react25.useEffect)(() => {
+      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__ */ import_react25.default.createElement("div", {
+        ref,
+        ...rest
+      }, /* @__PURE__ */ import_react25.default.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__ */ import_react25.default.createElement("div", {
+      ref,
+      ...rest,
+      style
+    }, /* @__PURE__ */ import_react25.default.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__ */ import_react25.default.createElement("video", {
+          key: id,
+          controls: true,
+          poster: thumbnail_url
+        }, /* @__PURE__ */ import_react25.default.createElement("source", {
+          src: media_url,
+          type: "video/mp4"
+        }));
+      }
+      return /* @__PURE__ */ import_react25.default.createElement("a", {
+        key: id,
+        href: permalink,
+        target: "_blank",
+        rel: "noreferrer"
+      }, /* @__PURE__ */ import_react25.default.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 import_core.Weaverse(configs);
+  Object.keys(Elements).forEach((key) => {
+    rootContext.registerElement(Elements[key]);
+  });
+  return rootContext;
+};
+var WeaverseContext = (0, import_react26.createContext)({});
+var WeaverseContextProvider = WeaverseContext.Provider;
+var WeaverseContextConsumer = WeaverseContext.Consumer;
+
+// src/renderer.tsx
+var import_core2 = require("@weaverse/core");
+var import_react27 = __toESM(require("react"));
+var WeaverseRoot = ({ context }) => {
+  let [, setData] = (0, import_react27.useState)(context.projectData);
+  let rootRef = (0, import_react27.useRef)();
+  let renderRoot = () => setData({});
+  (0, import_react27.useEffect)(() => {
+    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__ */ import_react27.default.createElement("div", {
+      className: `weaverse-content-root ${themeClass}`,
+      ...eventHandlers,
+      ref: rootRef
+    }, /* @__PURE__ */ import_react27.default.createElement(WeaverseContextProvider, {
+      value: context
+    }, /* @__PURE__ */ import_react27.default.createElement(ItemInstance, {
+      id: context.projectData.rootId
+    })));
+  }
+  return null;
+};
+var ItemComponent = ({ instance }) => {
+  let { stitchesInstance, elementInstances } = (0, import_react27.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react27.useState)(instance.data);
+  let { id, type, childIds = [], css: css10, className, ...rest } = data;
+  (0, import_react27.useEffect)(() => {
+    let render = (data2) => setData({ ...data2 });
+    instance.subscribe(render);
+    if (import_core2.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__ */ import_react27.default.createElement(Component, {
+      key: id,
+      "data-wv-type": type,
+      "data-wv-id": id,
+      className: generateItemClassName(instance, stitchesInstance),
+      ...rest
+    }, childIds.map((id2) => /* @__PURE__ */ import_react27.default.createElement(ItemInstance, {
+      key: id2,
+      id: id2
+    })));
+  } else {
+    console.log(`Unknown element: ${type}`);
+    return null;
+  }
+};
+var ItemInstance = ({ id }) => {
+  let context = (0, import_react27.useContext)(WeaverseContext);
+  let { itemInstances } = context;
+  let instance = itemInstances.get(id);
+  if (!instance) {
+    return /* @__PURE__ */ import_react27.default.createElement("div", {
+      style: { display: "none" }
+    }, "Item instance ", id, " not found");
+  }
+  return /* @__PURE__ */ import_react27.default.createElement(ItemComponent, {
+    key: id,
+    instance
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Components,
+  Elements,
+  WeaverseContext,
+  WeaverseContextConsumer,
+  WeaverseContextProvider,
+  WeaverseRoot,
+  createRootContext
+});