sanity-plugin-dashboard-widget-vercel 2.0.1 → 3.1.0

package/lib/index.js

@@ -1,2 +1,981 @@
-"use strict";var e;function t(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function r(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?t(Object(o),!0).forEach((function(t){n(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):t(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}Object.defineProperty(exports,"__esModule",{value:!0});var o=require("react/jsx-runtime"),a=require("@sanity/icons"),s=require("@sanity/ui"),i=require("@xstate/react"),l=require("groq"),c=require("react-query"),d=require("xstate"),u=require("react"),p=require("use-deep-compare-effect"),h=require("object-hash"),m=require("unfetch"),x=require("react-time-ago"),g=require("@hookform/resolvers/yup"),y=require("@sanity/uuid"),f=require("react-hook-form"),j=require("yup"),b=require("styled-components"),v=require("sanity"),D=require("javascript-time-ago"),E=require("javascript-time-ago/locale/en");function w(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function T(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var k=w(l),R=w(p),S=w(h),O=w(m),C=w(x),P=T(j),L=w(b),B=w(D),I=w(E);const q={BUILDING:"#f5a623",CANCELED:"#ff0000",ERROR:"#ff0000",READY:"#50e3c2",QUEUED:"#333"},z=e=>null,F=e=>e.sort(((e,t)=>e.name>t.name?1:e.name<t.name?-1:0)),A=()=>d.Machine({context:{message:"",results:[]},initial:"pending",states:{pending:{invoke:{src:"fetchDataService",onDone:{actions:["setResults"],target:"ready"},onError:{actions:["setMessage"],target:"failed"}}},ready:{initial:"unknown",on:{CREATE:{actions:["targetCreate"]},DELETE:{actions:["targetDelete"]},UPDATE:{actions:["targetUpdate"]}},states:{unknown:{always:[{cond:"hasData",target:"withData"},{cond:"hasNoData",target:"withoutData"}]},withData:{always:[{cond:"hasNoData",target:"withoutData"}]},withoutData:{always:[{cond:"hasData",target:"withData"}]}}},failed:{type:"final"}}},{actions:{setMessage:d.assign(((e,t)=>({message:t.data.details.description}))),setResults:d.assign(((e,t)=>({results:t.data}))),targetCreate:d.assign(((e,t)=>({results:F([...e.results,t.deploymentTarget])}))),targetDelete:d.assign(((e,t)=>({results:e.results.filter((e=>e._id!==t.id))}))),targetUpdate:d.assign(((e,t)=>{const{deploymentTarget:r}=t,n=e.results.findIndex((e=>e._id===r._id)),o=Object.assign([],e.results,{[n]:t.deploymentTarget});return{results:F(o)}}))},guards:{hasData:e=>{var t;return(null==(t=null==e?void 0:e.results)?void 0:t.length)>0},hasNoData:e=>{var t;return 0===(null==(t=null==e?void 0:e.results)?void 0:t.length)}}}),U=(e,t)=>{var n,o;const a=(e=>async(t,r)=>{const n=new URLSearchParams;if(n.set("projectId",e.projectId),e.teamId&&n.set("teamId",e.teamId),r)for(const[e,t]of r.entries())n.append(e,t);const o=await O.default("".concat(t,"?").concat(n.toString()),{headers:{Authorization:"Bearer ".concat(e.token)}});if(!o.ok)throw new Error("Response not OK");try{return o.json()}catch(e){throw new Error(e)}})(e),s=new URLSearchParams;s.set("limit",String(null==e?void 0:e.deployLimit));const{data:i,isFetching:l,isSuccess:d,error:u,refetch:p}=c.useQuery(S.default(e),(()=>a("https://api.vercel.com/v5/now/deployments",s)),{enabled:null==(n=null==t?void 0:t.enabled)||n,refetchInterval:2e4,refetchIntervalInBackground:!1,refetchOnMount:!0,refetchOnReconnect:"always",refetchOnWindowFocus:!1,retry:!1}),h=new URLSearchParams;h.set("limit","20");const{data:m,isFetching:x,isSuccess:g,error:y}=c.useQuery("".concat(S.default(e),"-aliases"),(()=>a("https://api.vercel.com/v3/now/aliases",h)),{enabled:!!i,refetchOnMount:!1,refetchOnReconnect:!1,refetchOnWindowFocus:!1,retry:!1}),f=null==m?void 0:m.aliases;let j;return f&&(j=null==(o=null==i?void 0:i.deployments)?void 0:o.map((e=>{const t=f.find((t=>t.deploymentId===e.uid));return r(r({},e),{},{alias:null==t?void 0:t.alias})}))),{deployments:j,error:y||u,isFetching:x||l,isSuccess:g&&d,refetch:p}},M=d.Machine({initial:"idle",states:{idle:{on:{REFRESH:"refreshing"}},refreshing:{on:{ERROR:"error",REFRESHED:"refreshed"}},refreshed:{on:{REFRESH:"refreshing"}},error:{on:{REFRESH:"refreshing"}}}});function H(){return s.useTheme().sanity.color.card.enabled}const V=e=>{const{children:t,colSpan:r,header:n,variant:a}=e;let i="table-cell",l="auto";switch(a){case"age":l="50px";break;case"branch":l="300px",i=["none","none","none","table-cell"];break;case"creator":l="80px";break;case"state":l="110px",i=["none","none","none","none","table-cell"]}const{border:c}=H();return n?o.jsx(s.Box,{as:"th",colSpan:r,display:i,paddingX:3,paddingY:2,style:{maxWidth:l,position:"relative",textAlign:"left",width:l},children:o.jsx(s.Label,{size:0,children:t})}):o.jsx(s.Box,{as:"td",colSpan:r,display:i,paddingX:3,paddingY:[2,2,3],style:{borderTop:"1px solid ".concat(c),maxWidth:l,position:"relative",textAlign:"left",width:l},children:t})},N=e=>{let{state:t}=e;return o.jsx(s.Box,{style:{backgroundColor:"".concat(q[t]),borderRadius:"20px",height:"9px",width:"9px"}})},_=e=>{var t,r,n,i;const{deployment:l}=e,c=u.useRef(new Date(l.created)),d=null==(t=null==l?void 0:l.meta)?void 0:t.githubCommitMessage,p=null==(r=null==l?void 0:l.meta)?void 0:r.githubCommitRef,h=null!=(n=l.alias)?n:l.url;return o.jsxs("tr",{children:[o.jsx(V,{children:o.jsxs(s.Flex,{align:"center",children:[o.jsx(s.Box,{display:["block","block","block","block","none"],marginRight:3,style:{flexShrink:0},children:o.jsx(N,{state:l.state})}),h?o.jsxs(o.Fragment,{children:[l.alias&&o.jsx(a.LinkIcon,{}),o.jsx(s.Box,{marginLeft:l.alias?1:0,children:o.jsx(s.Text,{muted:!("READY"===l.state),size:1,style:{textDecoration:"CANCELED"===l.state||"ERROR"===l.state?"line-through":"normal"},textOverflow:"ellipsis",children:"READY"===l.state?o.jsx("a",{href:"https://".concat(h),rel:"noopener noreferrer",target:"_blank",children:h}):h})})]}):o.jsx(s.Text,{size:1,children:"Uploading..."})]})}),o.jsx(V,{variant:"state",children:o.jsxs(s.Flex,{align:"center",children:[o.jsx(N,{state:l.state}),o.jsx(s.Box,{marginLeft:2,children:o.jsx(s.Text,{size:1,children:l.state.trim().toLowerCase().replace(/^[a-z]/i,(e=>e.toUpperCase()))})})]})}),o.jsx(V,{variant:"branch",children:o.jsxs(s.Stack,{space:2,children:[o.jsx(s.Text,{size:1,textOverflow:"ellipsis",children:p}),d&&o.jsx(s.Text,{muted:!0,size:1,textOverflow:"ellipsis",children:d})]})}),o.jsx(V,{variant:"age",children:o.jsx(s.Flex,{align:"center",children:o.jsx(s.Text,{size:1,children:o.jsx(C.default,{date:c.current,locale:"en-US",timeStyle:"mini"})})})}),o.jsx(V,{variant:"creator",children:o.jsx(s.Flex,{align:"center",justify:"center",children:o.jsx("img",{draggable:!1,src:"https://vercel.com/api/www/avatar/".concat(null==(i=null==l?void 0:l.creator)?void 0:i.uid,"?&s=48"),style:{borderRadius:"20px",height:"20px",width:"20px"}})})})]})},Y=e=>{const{deployHook:t,onDeploySuccess:r,targetName:n}=e,l=u.useMemo((()=>(e=>d.Machine({id:"deploy",initial:"idle",context:{disabled:!1,feedback:void 0,label:void 0,error:void 0},states:{idle:{entry:d.assign({feedback:()=>{},label:()=>"Deploy"}),on:{DEPLOY:"deploying"}},deploying:{entry:d.assign({disabled:()=>!0,label:()=>"Deploying"}),exit:d.assign({disabled:()=>!1,label:()=>"Deploy"}),invoke:{onDone:{target:"success"},onError:{target:"error",actions:d.assign({error:(e,t)=>t.data})},src:"deploy"}},success:{entry:[d.assign({feedback:()=>"Succesfully started!"})],exit:d.assign({feedback:()=>{}}),on:{DEPLOY:"deploying"}},error:{on:{DEPLOY:"deploying"}}}},{services:{deploy:()=>new Promise((async(t,r)=>{try{if(!e)return r(new Error("No deployHook URL defined"));const n=await O.default(e,{method:"POST"}),o=await n.json();return n.ok?t():r((null==o?void 0:o.error).message||n.statusText)}catch(e){return console.error("Unable to deploy with error:",e),r(new Error("Please check the developer console for more information"))}}))}}))(t)),[t]),[c,p,h]=i.useMachine(l),m=s.useToast(),x=c.matches("error"),g=c.matches("success");return u.useEffect((()=>{x&&m.push({closable:!0,description:"Unable to queue deploy for ".concat(n,": ").concat(c.context.error),duration:8e3,status:"error",title:"Vercel (dashboard)"}),g&&m.push({closable:!0,description:"Deploy queued for ".concat(n),duration:8e3,status:"success",title:"Vercel (dashboard)"})}),[x,g,m,n,c.context.error]),u.useEffect((()=>{h.onTransition((e=>{"success"===e.value&&r&&r()}))}),[h,r]),o.jsxs(s.Box,{padding:3,style:{position:"relative"},children:[o.jsx(z,{name:"Deploy",state:c}),o.jsx(s.Button,{disabled:c.context.disabled,fontSize:1,icon:a.UploadIcon,mode:"ghost",onClick:()=>{p({type:"DEPLOY"})},padding:3,text:"".concat(c.context.label," ").concat(n),tone:"default"})]})},X=()=>{const{border:e}=H();return o.jsx(s.Box,{style:{backgroundColor:e,borderRadius:"20px",height:"20px",userSelect:"none",width:"20px"}})},Q=e=>{const{rows:t}=e,{border:r}=H();return o.jsx(s.Box,{style:{backgroundColor:r,borderRadius:"3px",userSelect:"none",width:"100%"},children:o.jsx(s.Stack,{space:2,children:new Array(t).fill(void 0).map(((e,t)=>o.jsx(s.Text,{size:1,children:" "},t)))})})},W=()=>o.jsxs("tr",{children:[o.jsx(V,{children:o.jsx(Q,{rows:1})}),o.jsx(V,{variant:"state",children:o.jsx(Q,{rows:1})}),o.jsx(V,{variant:"branch",children:o.jsx(Q,{rows:2})}),o.jsx(V,{variant:"age",children:o.jsx(Q,{rows:1})}),o.jsx(V,{variant:"creator",children:o.jsx(s.Flex,{justify:"center",children:o.jsx(X,{})})})]}),J=e=>{const{deploymentTarget:t}=e,r=u.useRef(),[n,a]=i.useMachine(M),{deployments:l,error:c,isFetching:d,isSuccess:p,refetch:h}=U(t,{enabled:!n.matches("error")}),m=s.useToast(),x=n.matches("error");u.useEffect((()=>()=>{r.current&&clearTimeout(r.current)}),[]),u.useEffect((()=>{c&&a({type:"ERROR"}),d&&a({type:"REFRESH"}),!d&&p&&a({type:"REFRESHED"})}),[c,d,p,a]),R.default((()=>{n.matches("refreshing")||a({type:"REFRESH"})}),[t]),R.default((()=>{x&&m.push({closable:!0,description:"Unable to fetch deployments for ".concat(t.name),duration:8e3,status:"error",title:"Vercel (dashboard)"})}),[t,x]);const g=void 0!==l,y=l&&l.length>0,{border:f}=H();return o.jsxs(s.Box,{marginTop:3,style:{position:"relative"},children:[o.jsx(z,{name:"Refresh",state:n}),!n.matches("error")&&o.jsxs(o.Fragment,{children:[o.jsxs(s.Box,{as:"table",style:{borderBottom:"1px solid ".concat(f),borderCollapse:"collapse",display:"table",tableLayout:"fixed",width:"100%"},children:[o.jsx(s.Box,{as:"thead",style:{display:"table-header-group"},children:o.jsxs("tr",{children:[o.jsx(V,{header:!0,children:"Deployment"}),o.jsx(V,{header:!0,variant:"state",children:"State"}),o.jsx(V,{header:!0,variant:"branch",children:"Branch"}),o.jsx(V,{header:!0,variant:"age",children:"Age"}),o.jsx(V,{header:!0,variant:"age",children:"Creator"})]})}),o.jsxs(s.Box,{as:"tbody",style:{display:"table-header-group"},children:[!l&&new Array(null==t?void 0:t.deployLimit).fill(void 0).map(((e,t)=>o.jsx(W,{},t))),y&&(null==l?void 0:l.map((e=>o.jsx(_,{deployment:e},e.uid))))]})]}),g&&!y&&o.jsx(s.Box,{padding:3,style:{width:"100%"},children:o.jsx(s.Text,{muted:!0,size:1,children:"No deployments found. Don't forget to specify a valid team ID if your project belongs to a team."})})]}),n.matches("error")&&o.jsx(s.Box,{padding:3,children:o.jsx(s.Text,{muted:!0,size:1,children:"Unable to fetch recent deployments. Please check your network and deployment settings."})}),!n.matches("error")&&t.deployHook&&o.jsx(s.Box,{children:o.jsx(Y,{deployHook:t.deployHook,onDeploySuccess:()=>{r.current&&clearTimeout(r.current),r.current=setTimeout((()=>{h({cancelRefetch:!0,throwOnError:!0})}),4e3)},targetName:t.name})})]})},G=e=>{const{item:t,onDialogEdit:r}=e,n={deployHook:t.deployHook,deployLimit:t.deployLimit,name:t.name,projectId:t.projectId,teamId:t.teamId,token:t.token};return o.jsxs(s.Box,{style:{position:"relative"},children:[o.jsxs(s.Flex,{align:"center",justify:"space-between",marginTop:2,paddingX:3,children:[o.jsx(s.Text,{size:2,children:t.name}),o.jsx(s.Tooltip,{content:o.jsx(s.Box,{padding:2,children:o.jsx(s.Text,{muted:!0,size:1,children:"Edit deployment target"})}),placement:"left",children:o.jsx(s.Button,{fontSize:1,icon:a.EditIcon,mode:"bleed",onClick:()=>r(t)})})]}),o.jsx(J,{deploymentTarget:n})]})},K=e=>{const{items:t,onDialogEdit:r}=e;return o.jsx(s.Stack,{space:5,children:null==t?void 0:t.map((e=>o.jsx(G,{item:e,onDialogEdit:r},e._id)))})},Z=d.Machine({context:{formData:{},message:""},initial:"idle",states:{idle:{on:{CREATE:{actions:["createDocument"],target:"creating"},DELETE:{actions:["deleteDocument"],target:"deleting"},UPDATE:{actions:["updateDocument"],target:"updating"}}},creating:{invoke:{src:"createDocumentService",onDone:{target:"success"},onError:{actions:["setMessage"],target:"error"}},on:{RESOLVE:"success",REJECT:"error"}},updating:{invoke:{src:"updateDocumentService",onDone:{target:"success"},onError:{actions:["setMessage"],target:"error"}},on:{RESOLVE:"success",REJECT:"error"}},deleting:{invoke:{src:"deleteDocumentService",onDone:{target:"success"},onError:{actions:["setMessage"],target:"error"}},on:{RESOLVE:"success",REJECT:"error"}},success:{invoke:{src:"formSubmittedService"}},error:{}}},{actions:{setMessage:d.assign(((e,t)=>({message:t.data.details.description}))),createDocument:d.assign(((e,t)=>({formData:t.formData}))),deleteDocument:d.assign((()=>({}))),updateDocument:d.assign(((e,t)=>({formData:t.formData})))}}),$=e=>Object.keys(e).reduce(((t,r)=>{const n=e[r];return"object"==typeof n&&null!==n&&n.constructor!==Array?t[r]=$(n):""===n||void 0===n||0===(null==n?void 0:n.length)?t[r]=null:t[r]="string"==typeof n&&n?e[r].trim():e[r],t}),{}),ee=L.default(a.ErrorOutlineIcon)((e=>{let{theme:t}=e;return{color:t.sanity.color.spot.red}})),te=e=>{const{description:t,error:r,label:n,name:a}=e;return o.jsxs(s.Box,{marginBottom:3,children:[o.jsxs(s.Inline,{space:2,children:[o.jsx(s.Text,{as:"label",htmlFor:a,size:1,weight:"semibold",children:n}),r&&o.jsx(s.Text,{size:1,children:o.jsx(s.Tooltip,{content:o.jsx(s.Box,{padding:2,children:o.jsxs(s.Text,{muted:!0,size:1,children:[o.jsx(ee,{style:{marginRight:"0.1em"}}),r.message]})}),fallbackPlacements:["top","left"],placement:"right",portal:!0,children:o.jsx(ee,{})})})]}),t&&o.jsx(s.Box,{marginY:3,children:o.jsx(s.Text,{htmlFor:a,muted:!0,size:1,children:t})})]})},re=u.forwardRef(((e,t)=>{const{description:r,disabled:n,error:a,label:i,name:l,placeholder:c,value:d}=e;return o.jsxs(s.Box,{children:[o.jsx(te,{description:r,error:a,label:i,name:l}),o.jsx(s.TextInput,{autoComplete:"off",autoFocus:!0,defaultValue:d,disabled:n,id:l,name:l,placeholder:c,ref:t})]})}));function ne(){return v.useClient({apiVersion:"1"})}const oe=P.object().shape({deployHook:P.string().url("Deploy hook must be a valid URL"),deployLimit:P.number().positive().integer().min(1,"Deploy limit must no less than 1").max(15,"Deploy limit must no higher than 15").typeError("Deploy limit must be a number").required("Deploy limit must be a positive integer between 1 and 15"),name:P.string().required("Name cannot be empty"),projectId:P.string().required("Vercel Project ID cannot be empty"),teamId:P.string(),token:P.string().required("Vercel Account Token cannot be empty")}),ae=e=>{const{deploymentTarget:t,onClose:n,onCreate:a,onDelete:l,onUpdate:c}=e,d=ne(),[u,p]=i.useMachine(Z,{services:{formSubmittedService:async()=>{n()},createDocumentService:async(e,t)=>{let n;try{return n=await d.create(r({_id:"vercel.".concat(y.uuid()),_type:"vercel.deploymentTarget"},t.formData)),a&&a(n),Promise.resolve()}catch(e){return Promise.reject(e)}},deleteDocumentService:async()=>{if(t)try{return await d.delete(t._id),l&&l(t._id),Promise.resolve()}catch(e){return Promise.reject(e)}return Promise.resolve()},updateDocumentService:async(e,r)=>{let n;if(t)try{return n=await d.patch(t._id).set(r.formData).commit(),c&&c(n),Promise.resolve()}catch(e){return Promise.reject(e)}return Promise.resolve()}}}),h=u.matches("creating")||u.matches("deleting")||u.matches("updating"),{formState:{errors:m,isDirty:x,isValid:j},handleSubmit:b,register:v}=f.useForm({defaultValues:{deployHook:(null==t?void 0:t.deployHook)||"",deployLimit:(null==t?void 0:t.deployLimit)||5,name:null==t?void 0:t.name,projectId:null==t?void 0:t.projectId,teamId:(null==t?void 0:t.teamId)||"",token:null==t?void 0:t.token},mode:"onChange",resolver:g.yupResolver(oe)}),D=async e=>{const r=$(e);await p(t?"UPDATE":"CREATE",{formData:r})},E=()=>{p("DELETE",{id:null==t?void 0:t._id})},w=()=>o.jsx(s.Box,{padding:3,children:o.jsxs(s.Flex,{justify:t?"space-between":"flex-end",children:[t&&o.jsx(s.Button,{disabled:h,fontSize:1,mode:"bleed",onClick:E,text:"Delete",tone:"critical"}),o.jsx(s.Button,{disabled:h||!x||!j,fontSize:1,onClick:b(D),text:t?"Update and close":"Create",tone:"primary"})]})});return o.jsx(s.Dialog,{footer:o.jsx(w,{}),header:"".concat(t?"Edit":"Create"," deployment target"),id:"create",onClose:n,width:1,zOffset:600001,children:o.jsxs(s.Box,{as:"form",padding:4,onSubmit:b(D),children:[o.jsx("button",{style:{display:"none"},tabIndex:-1,type:"submit"}),o.jsxs(s.Stack,{space:5,children:[o.jsx(re,{disabled:h,description:"Name displayed in this plugin (e.g. production, staging)",error:null==m?void 0:m.name,label:"Name",name:"name",ref:v}),o.jsx(re,{disabled:h,error:null==m?void 0:m.token,label:"Vercel Account Token",name:"token",ref:v}),o.jsx(re,{disabled:h,error:null==m?void 0:m.projectId,label:"Vercel Project ID",name:"projectId",ref:v}),o.jsx(re,{description:"Required only if your project is owned by a team account",disabled:h,error:null==m?void 0:m.teamId,label:"Vercel Team ID (optional)",name:"teamId",ref:v}),o.jsx(re,{description:"Enter a valid deploy hook URL to enable manual deploys",disabled:h,error:null==m?void 0:m.deployHook,label:"Vercel Deploy Hook (optional)",name:"deployHook",ref:v}),o.jsx(re,{disabled:h,error:null==m?void 0:m.deployLimit,label:"Number of deploys to display",name:"deployLimit",ref:v({valueAsNumber:!0})})]})]})})},se=()=>d.Machine({context:{editDeploymentTarget:void 0},initial:"idle",states:{idle:{entry:d.assign({editDeploymentTarget:()=>{}}),on:{CREATE:"create",EDIT:{actions:["setEditDeploymentTarget"],target:"edit"}}},edit:{on:{CLOSE:"idle"}},create:{on:{CLOSE:"idle"}}}},{actions:{setEditDeploymentTarget:d.assign(((e,t)=>({editDeploymentTarget:t.deploymentTarget})))}}),ie=()=>{const t=ne(),[r,n]=i.useMachine(A,{services:{fetchDataService:()=>{return t.fetch(k.default(e||(r=['*[_type == "','"] | order(name asc)'],n||(n=r.slice(0)),e=Object.freeze(Object.defineProperties(r,{raw:{value:Object.freeze(n)}}))),"vercel.deploymentTarget")).then((e=>e));var r,n}}}),[l,d]=i.useMachine(se),u=new c.QueryClient({defaultOptions:{queries:{cacheTime:0,staleTime:0}}}),p=()=>{d("CLOSE")},h=()=>{d("CREATE")};return o.jsx(s.ToastProvider,{zOffset:600002,children:o.jsxs(c.QueryClientProvider,{client:u,children:[o.jsxs(s.Card,{radius:2,style:{overflow:"hidden "},children:[o.jsx(z,{name:"List",state:r}),o.jsxs(s.Flex,{align:"center",justify:"space-between",paddingX:3,paddingY:2,children:[o.jsx(s.Text,{size:5,weight:"semibold",children:"Vercel deployments"}),o.jsx(s.Tooltip,{content:o.jsx(s.Box,{padding:2,children:o.jsx(s.Text,{muted:!0,size:1,children:"Create new deployment target"})}),placement:"left",children:o.jsx(s.Button,{fontSize:1,icon:a.AddIcon,onClick:h,mode:"bleed"})})]}),o.jsxs(s.Box,{children:[r.matches("pending")&&o.jsx(s.Box,{paddingX:3,paddingY:4,children:o.jsx(s.Text,{children:"Loading..."})}),r.matches("ready.withoutData")&&o.jsx(s.Box,{paddingX:3,paddingY:4,children:o.jsxs(s.Text,{children:["No deployment targets found."," ",o.jsx("a",{onClick:h,style:{cursor:"pointer"},children:"Create a new target?"})]})}),r.matches("ready.withData")&&o.jsx(K,{items:r.context.results,onDialogEdit:e=>{d("EDIT",{deploymentTarget:e})}}),r.matches("failed")&&o.jsx(s.Box,{paddingX:3,paddingY:4,children:o.jsx(s.Text,{children:"Failed to retrieve deployment targets. Please check the developer console log for more information."})})]})]}),l.matches("create")&&o.jsx(ae,{onClose:p,onCreate:e=>{n("CREATE",{deploymentTarget:e})}}),l.matches("edit")&&o.jsx(ae,{deploymentTarget:l.context.editDeploymentTarget,onClose:p,onDelete:e=>{n("DELETE",{id:e})},onUpdate:e=>{n("UPDATE",{deploymentTarget:e})}})]})})};B.default.addDefaultLocale(I.default),exports.vercelWidget=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};var t;return{name:"vercel",component:ie,layout:null!=(t=e.layout)?t:{width:"full"}}};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), react$1 = require("@xstate/react"), reactQuery = require("react-query"), xstate = require("xstate"), react = require("react"), useDeepCompareEffect = require("use-deep-compare-effect"), hash = require("object-hash"), fetch = require("unfetch"), ReactTimeAgo = require("react-time-ago"), yup$1 = require("@hookform/resolvers/yup"), uuid = require("@sanity/uuid"), reactHookForm = require("react-hook-form"), yup = require("yup"), styledComponents = require("styled-components"), sanity = require("sanity"), TimeAgo = require("javascript-time-ago"), en = require("javascript-time-ago/locale/en");
+function _interopDefaultCompat(e) {
+  return e && typeof e == "object" && "default" in e ? e : { default: e };
+}
+function _interopNamespaceCompat(e) {
+  if (e && typeof e == "object" && "default" in e) return e;
+  var n = /* @__PURE__ */ Object.create(null);
+  return e && Object.keys(e).forEach(function(k) {
+    if (k !== "default") {
+      var d = Object.getOwnPropertyDescriptor(e, k);
+      Object.defineProperty(n, k, d.get ? d : {
+        enumerable: !0,
+        get: function() {
+          return e[k];
+        }
+      });
+    }
+  }), n.default = e, Object.freeze(n);
+}
+var useDeepCompareEffect__default = /* @__PURE__ */ _interopDefaultCompat(useDeepCompareEffect), hash__default = /* @__PURE__ */ _interopDefaultCompat(hash), fetch__default = /* @__PURE__ */ _interopDefaultCompat(fetch), ReactTimeAgo__default = /* @__PURE__ */ _interopDefaultCompat(ReactTimeAgo), yup__namespace = /* @__PURE__ */ _interopNamespaceCompat(yup), TimeAgo__default = /* @__PURE__ */ _interopDefaultCompat(TimeAgo), en__default = /* @__PURE__ */ _interopDefaultCompat(en);
+const API_ENDPOINT_DEPLOYMENTS = "https://api.vercel.com/v5/now/deployments", API_ENDPOINT_ALIASES = "https://api.vercel.com/v3/now/aliases", API_VERSION = "1", DEPLOYMENT_TARGET_DOCUMENT_TYPE = "vercel.deploymentTarget", VERCEL_STATUS_COLORS = {
+  BUILDING: "#f5a623",
+  CANCELED: "#ff0000",
+  ERROR: "#ff0000",
+  READY: "#50e3c2",
+  QUEUED: "#333"
+}, WIDGET_NAME = "Vercel (dashboard)", Z_INDEX_DIALOG = 600001, Z_INDEX_TOAST_PROVIDER = 600002, StateDebug = (props) => null, sortByTargetName = (items) => items.sort((a, b) => a.name > b.name ? 1 : a.name < b.name ? -1 : 0), deploymentTargetListMachine = () => xstate.Machine(
+  {
+    context: {
+      message: "",
+      results: []
+    },
+    initial: "pending",
+    states: {
+      pending: {
+        invoke: {
+          src: "fetchDataService",
+          onDone: { actions: ["setResults"], target: "ready" },
+          onError: { actions: ["setMessage"], target: "failed" }
+        }
+      },
+      ready: {
+        initial: "unknown",
+        on: {
+          CREATE: { actions: ["targetCreate"] },
+          DELETE: { actions: ["targetDelete"] },
+          UPDATE: { actions: ["targetUpdate"] }
+        },
+        states: {
+          unknown: {
+            always: [
+              { cond: "hasData", target: "withData" },
+              { cond: "hasNoData", target: "withoutData" }
+            ]
+          },
+          withData: {
+            always: [{ cond: "hasNoData", target: "withoutData" }]
+          },
+          withoutData: {
+            always: [{ cond: "hasData", target: "withData" }]
+          }
+        }
+      },
+      failed: {
+        type: "final"
+      }
+    }
+  },
+  {
+    actions: {
+      setMessage: xstate.assign((_context, event) => ({
+        message: event.data.details.description
+      })),
+      setResults: xstate.assign((_context, event) => ({
+        results: event.data
+      })),
+      targetCreate: xstate.assign((context, event) => ({
+        results: sortByTargetName([...context.results, event.deploymentTarget])
+      })),
+      targetDelete: xstate.assign((context, event) => ({
+        results: context.results.filter((target) => target._id !== event.id)
+      })),
+      targetUpdate: xstate.assign((context, event) => {
+        const { deploymentTarget } = event, index = context.results.findIndex((target) => target._id === deploymentTarget._id), updatedResults = Object.assign([], context.results, {
+          [index]: event.deploymentTarget
+        });
+        return {
+          results: sortByTargetName(updatedResults)
+        };
+      })
+    },
+    guards: {
+      hasData: (context) => context?.results?.length > 0,
+      hasNoData: (context) => context?.results?.length === 0
+    }
+  }
+), fetcher = (deploymentTarget) => async (url, extraParams) => {
+  const params = new URLSearchParams();
+  if (params.set("projectId", deploymentTarget.projectId), deploymentTarget.teamId && params.set("teamId", deploymentTarget.teamId), extraParams)
+    for (const [k, v] of extraParams.entries())
+      params.append(k, v);
+  const response = await fetch__default.default(`${url}?${params.toString()}`, {
+    headers: {
+      Authorization: `Bearer ${deploymentTarget.token}`
+    }
+  });
+  if (!response.ok)
+    throw new Error("Response not OK");
+  try {
+    return response.json();
+  } catch (err) {
+    throw new Error(err);
+  }
+}, useDeployments = (deploymentTarget, options) => {
+  const fetchUrl = fetcher(deploymentTarget), deployParams = new URLSearchParams();
+  deployParams.set("limit", String(deploymentTarget?.deployLimit));
+  const {
+    data: deploymentsData,
+    isFetching: deploymentsIsFetching,
+    isSuccess: deploymentsIsSuccess,
+    error: deploymentsError,
+    refetch
+  } = reactQuery.useQuery(
+    hash__default.default(deploymentTarget),
+    // key
+    () => fetchUrl(API_ENDPOINT_DEPLOYMENTS, deployParams),
+    {
+      enabled: options?.enabled ?? !0,
+      refetchInterval: 2e4,
+      // ms
+      refetchIntervalInBackground: !1,
+      refetchOnMount: !0,
+      refetchOnReconnect: "always",
+      refetchOnWindowFocus: !1,
+      retry: !1
+    }
+  ), aliasParams = new URLSearchParams();
+  aliasParams.set("limit", "20");
+  const {
+    data: aliasesData,
+    isFetching: aliasesIsFetching,
+    isSuccess: aliasesIsSuccess,
+    error: aliasesError
+  } = reactQuery.useQuery(
+    `${hash__default.default(deploymentTarget)}-aliases`,
+    // key
+    () => fetchUrl(API_ENDPOINT_ALIASES, aliasParams),
+    {
+      enabled: !!deploymentsData,
+      refetchOnMount: !1,
+      refetchOnReconnect: !1,
+      refetchOnWindowFocus: !1,
+      retry: !1
+    }
+  ), aliases = aliasesData?.aliases;
+  let deploymentsWithAlias;
+  return aliases && (deploymentsWithAlias = deploymentsData?.deployments?.map((val) => {
+    const alias = aliases.find((a) => a.deploymentId === val.uid);
+    return {
+      ...val,
+      alias: alias?.alias
+    };
+  })), {
+    deployments: deploymentsWithAlias,
+    error: aliasesError || deploymentsError,
+    isFetching: aliasesIsFetching || deploymentsIsFetching,
+    isSuccess: aliasesIsSuccess && deploymentsIsSuccess,
+    refetch
+  };
+}, refreshMachine = xstate.Machine({
+  initial: "idle",
+  states: {
+    idle: {
+      on: {
+        REFRESH: "refreshing"
+      }
+    },
+    refreshing: {
+      on: {
+        ERROR: "error",
+        REFRESHED: "refreshed"
+      }
+    },
+    refreshed: {
+      on: {
+        REFRESH: "refreshing"
+      }
+    },
+    error: {
+      on: {
+        REFRESH: "refreshing"
+      }
+    }
+  }
+});
+function useCardColor() {
+  return ui.useTheme().sanity.color.card.enabled;
+}
+const TableCell = (props) => {
+  const { children, colSpan, header, variant } = props;
+  let display = "table-cell", cellWidth = "auto";
+  switch (variant) {
+    case "age":
+      cellWidth = "50px";
+      break;
+    case "branch":
+      cellWidth = "300px", display = ["none", "none", "none", "table-cell"];
+      break;
+    case "creator":
+      cellWidth = "80px";
+      break;
+    case "state":
+      cellWidth = "110px", display = ["none", "none", "none", "none", "table-cell"];
+      break;
+  }
+  const { border } = useCardColor();
+  return header ? /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Box,
+    {
+      as: "th",
+      colSpan,
+      display,
+      paddingX: 3,
+      paddingY: 2,
+      style: {
+        maxWidth: cellWidth,
+        position: "relative",
+        textAlign: "left",
+        width: cellWidth
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: 0, children })
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Box,
+    {
+      as: "td",
+      colSpan,
+      display,
+      paddingX: 3,
+      paddingY: [2, 2, 3],
+      style: {
+        borderTop: `1px solid ${border}`,
+        maxWidth: cellWidth,
+        position: "relative",
+        textAlign: "left",
+        width: cellWidth
+      },
+      children
+    }
+  );
+}, StatusDot = ({ state }) => /* @__PURE__ */ jsxRuntime.jsx(
+  ui.Box,
+  {
+    style: {
+      backgroundColor: `${VERCEL_STATUS_COLORS[state]}`,
+      borderRadius: "20px",
+      height: "9px",
+      width: "9px"
+    }
+  }
+), Deployment = (props) => {
+  const { deployment } = props, date = react.useRef(new Date(deployment.created)), commitMessage = deployment?.meta?.githubCommitMessage, commitRef = deployment?.meta?.githubCommitRef, targetUrl = deployment.alias ?? deployment.url;
+  return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Box,
+        {
+          display: ["block", "block", "block", "block", "none"],
+          marginRight: 3,
+          style: { flexShrink: 0 },
+          children: /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { state: deployment.state })
+        }
+      ),
+      targetUrl ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        deployment.alias && /* @__PURE__ */ jsxRuntime.jsx(icons.LinkIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: deployment.alias ? 1 : 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            muted: deployment.state !== "READY",
+            size: 1,
+            style: {
+              textDecoration: deployment.state === "CANCELED" || deployment.state === "ERROR" ? "line-through" : "normal"
+            },
+            textOverflow: "ellipsis",
+            children: deployment.state === "READY" ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: `https://${targetUrl}`, rel: "noopener noreferrer", target: "_blank", children: targetUrl }) : targetUrl
+          }
+        ) })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: "Uploading..." })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TableCell, { variant: "state", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { state: deployment.state }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: deployment.state.trim().toLowerCase().replace(/^[a-z]/i, (t) => t.toUpperCase()) }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TableCell, { variant: "branch", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, textOverflow: "ellipsis", children: commitRef }),
+      commitMessage && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, textOverflow: "ellipsis", children: commitMessage })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TableCell, { variant: "age", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ReactTimeAgo__default.default, { date: date.current, locale: "en-US", timeStyle: "mini" }) }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TableCell, { variant: "creator", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        draggable: !1,
+        src: `https://vercel.com/api/www/avatar/${deployment?.creator?.uid}?&s=48`,
+        style: {
+          borderRadius: "20px",
+          height: "20px",
+          width: "20px"
+        }
+      }
+    ) }) })
+  ] });
+}, deployMachine = (deployHook) => xstate.Machine(
+  // Machine
+  {
+    id: "deploy",
+    initial: "idle",
+    context: {
+      disabled: !1,
+      feedback: void 0,
+      label: void 0,
+      error: void 0
+    },
+    states: {
+      idle: {
+        entry: xstate.assign({
+          feedback: () => {
+          },
+          label: () => "Deploy"
+        }),
+        on: {
+          DEPLOY: "deploying"
+        }
+      },
+      deploying: {
+        entry: xstate.assign({
+          disabled: () => !0,
+          label: () => "Deploying"
+        }),
+        exit: xstate.assign({
+          disabled: () => !1,
+          label: () => "Deploy"
+        }),
+        invoke: {
+          onDone: {
+            target: "success"
+          },
+          onError: {
+            target: "error",
+            actions: xstate.assign({
+              error: (_context, event) => event.data
+            })
+          },
+          src: "deploy"
+        }
+      },
+      success: {
+        entry: [xstate.assign({ feedback: () => "Succesfully started!" })],
+        exit: xstate.assign({
+          feedback: () => {
+          }
+        }),
+        on: {
+          DEPLOY: "deploying"
+        }
+      },
+      error: {
+        on: {
+          DEPLOY: "deploying"
+        }
+      }
+    }
+  },
+  // Config
+  {
+    services: {
+      deploy: () => new Promise(async (resolve, reject) => {
+        try {
+          if (!deployHook)
+            return reject(new Error("No deployHook URL defined"));
+          const res = await fetch__default.default(deployHook, { method: "POST" }), data = await res.json();
+          if (!res.ok) {
+            const errorMessage = (data?.error).message || res.statusText;
+            return reject(errorMessage);
+          }
+          return resolve();
+        } catch (err) {
+          return console.error("Unable to deploy with error:", err), reject(new Error("Please check the developer console for more information"));
+        }
+      })
+    }
+  }
+), DeployButton = (props) => {
+  const { deployHook, onDeploySuccess, targetName } = props, machine = react.useMemo(() => deployMachine(deployHook), [deployHook]), [deployState, deployStateTransition, deployStateInterpreter] = react$1.useMachine(machine), toast = ui.useToast(), isError = deployState.matches("error"), isSuccess = deployState.matches("success"), handleDeploy = () => {
+    deployStateTransition({ type: "DEPLOY" });
+  };
+  return react.useEffect(() => {
+    isError && toast.push({
+      closable: !0,
+      description: `Unable to queue deploy for ${targetName}: ${deployState.context.error}`,
+      duration: 8e3,
+      status: "error",
+      title: WIDGET_NAME
+    }), isSuccess && toast.push({
+      closable: !0,
+      description: `Deploy queued for ${targetName}`,
+      duration: 8e3,
+      status: "success",
+      title: WIDGET_NAME
+    });
+  }, [isError, isSuccess, toast, targetName, deployState.context.error]), react.useEffect(() => {
+    deployStateInterpreter.onTransition((state) => {
+      state.value === "success" && onDeploySuccess && onDeploySuccess();
+    });
+  }, [deployStateInterpreter, onDeploySuccess]), /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { padding: 3, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StateDebug, { name: "Deploy", state: deployState }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        disabled: deployState.context.disabled,
+        fontSize: 1,
+        icon: icons.UploadIcon,
+        mode: "ghost",
+        onClick: handleDeploy,
+        padding: 3,
+        text: `${deployState.context.label} ${targetName}`,
+        tone: "default"
+      }
+    )
+  ] });
+}, PlaceholderAvatar = () => {
+  const { border } = useCardColor();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Box,
+    {
+      style: {
+        backgroundColor: border,
+        borderRadius: "20px",
+        height: "20px",
+        userSelect: "none",
+        width: "20px"
+      }
+    }
+  );
+}, PlaceholderText = (props) => {
+  const { rows } = props, { border } = useCardColor();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Box,
+    {
+      style: {
+        backgroundColor: border,
+        borderRadius: "3px",
+        userSelect: "none",
+        width: "100%"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 2, children: new Array(rows).fill(void 0).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: "\xA0" }, index)) })
+    }
+  );
+}, DeploymentPlaceholder = () => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderText, { rows: 1 }) }),
+  /* @__PURE__ */ jsxRuntime.jsx(TableCell, { variant: "state", children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderText, { rows: 1 }) }),
+  /* @__PURE__ */ jsxRuntime.jsx(TableCell, { variant: "branch", children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderText, { rows: 2 }) }),
+  /* @__PURE__ */ jsxRuntime.jsx(TableCell, { variant: "age", children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderText, { rows: 1 }) }),
+  /* @__PURE__ */ jsxRuntime.jsx(TableCell, { variant: "creator", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderAvatar, {}) }) })
+] }), Deployments = (props) => {
+  const { deploymentTarget } = props, refTimeout = react.useRef(null), [refreshState, refreshStateTransition] = react$1.useMachine(refreshMachine), { deployments, error, isFetching, isSuccess, refetch } = useDeployments(deploymentTarget, {
+    enabled: !refreshState.matches("error")
+  }), toast = ui.useToast(), isError = refreshState.matches("error"), handleDeploySuccess = () => {
+    refTimeout.current && clearTimeout(refTimeout.current), refTimeout.current = setTimeout(() => {
+      refetch({
+        cancelRefetch: !0,
+        throwOnError: !0
+      });
+    }, 4e3);
+  };
+  react.useEffect(() => () => {
+    refTimeout.current && clearTimeout(refTimeout.current);
+  }, []), react.useEffect(() => {
+    error && refreshStateTransition({ type: "ERROR" }), isFetching && refreshStateTransition({ type: "REFRESH" }), !isFetching && isSuccess && refreshStateTransition({ type: "REFRESHED" });
+  }, [error, isFetching, isSuccess, refreshStateTransition]), useDeepCompareEffect__default.default(() => {
+    refreshState.matches("refreshing") || refreshStateTransition({ type: "REFRESH" });
+  }, [deploymentTarget]), useDeepCompareEffect__default.default(() => {
+    isError && toast.push({
+      closable: !0,
+      description: `Unable to fetch deployments for ${deploymentTarget.name}`,
+      duration: 8e3,
+      status: "error",
+      title: WIDGET_NAME
+    });
+  }, [deploymentTarget, isError]);
+  const hasFetched = typeof deployments < "u", hasDeployments = deployments && deployments.length > 0, { border } = useCardColor();
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { marginTop: 3, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StateDebug, { name: "Refresh", state: refreshState }),
+    !refreshState.matches("error") && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Box,
+        {
+          as: "table",
+          style: {
+            borderBottom: `1px solid ${border}`,
+            borderCollapse: "collapse",
+            display: "table",
+            tableLayout: "fixed",
+            width: "100%"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { as: "thead", style: { display: "table-header-group" }, children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TableCell, { header: !0, children: "Deployment" }),
+              /* @__PURE__ */ jsxRuntime.jsx(TableCell, { header: !0, variant: "state", children: "State" }),
+              /* @__PURE__ */ jsxRuntime.jsx(TableCell, { header: !0, variant: "branch", children: "Branch" }),
+              /* @__PURE__ */ jsxRuntime.jsx(TableCell, { header: !0, variant: "age", children: "Age" }),
+              /* @__PURE__ */ jsxRuntime.jsx(TableCell, { header: !0, variant: "age", children: "Creator" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { as: "tbody", style: { display: "table-header-group" }, children: [
+              !deployments && new Array(deploymentTarget?.deployLimit).fill(void 0).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(DeploymentPlaceholder, {}, index)),
+              hasDeployments && deployments?.map((deployment) => /* @__PURE__ */ jsxRuntime.jsx(Deployment, { deployment }, deployment.uid))
+            ] })
+          ]
+        }
+      ),
+      hasFetched && !hasDeployments && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: "No deployments found. Don't forget to specify a valid team ID if your project belongs to a team." }) })
+    ] }),
+    refreshState.matches("error") && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: "Unable to fetch recent deployments. Please check your network and deployment settings." }) }),
+    !refreshState.matches("error") && deploymentTarget.deployHook && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      DeployButton,
+      {
+        deployHook: deploymentTarget.deployHook,
+        onDeploySuccess: handleDeploySuccess,
+        targetName: deploymentTarget.name
+      }
+    ) })
+  ] });
+}, DeploymentTarget = (props) => {
+  const { item, onDialogEdit } = props, deploymentTarget = {
+    deployHook: item.deployHook,
+    deployLimit: item.deployLimit,
+    name: item.name,
+    projectId: item.projectId,
+    teamId: item.teamId,
+    token: item.token
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", justify: "space-between", marginTop: 2, paddingX: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, children: item.name }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Tooltip,
+        {
+          content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: "Edit deployment target" }) }),
+          placement: "left",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fontSize: 1, icon: icons.EditIcon, mode: "bleed", onClick: () => onDialogEdit(item) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Deployments, { deploymentTarget })
+  ] });
+}, DeploymentTargets = (props) => {
+  const { items, onDialogEdit } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 5, children: items?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(DeploymentTarget, { item, onDialogEdit }, item._id)) });
+}, formMachine = xstate.Machine(
+  {
+    context: {
+      formData: {},
+      message: ""
+    },
+    initial: "idle",
+    states: {
+      idle: {
+        on: {
+          CREATE: {
+            actions: ["createDocument"],
+            target: "creating"
+          },
+          DELETE: {
+            actions: ["deleteDocument"],
+            target: "deleting"
+          },
+          UPDATE: {
+            actions: ["updateDocument"],
+            target: "updating"
+          }
+        }
+      },
+      creating: {
+        invoke: {
+          src: "createDocumentService",
+          onDone: { target: "success" },
+          onError: { actions: ["setMessage"], target: "error" }
+        },
+        on: {
+          RESOLVE: "success",
+          REJECT: "error"
+        }
+      },
+      updating: {
+        invoke: {
+          src: "updateDocumentService",
+          onDone: { target: "success" },
+          onError: { actions: ["setMessage"], target: "error" }
+        },
+        on: {
+          RESOLVE: "success",
+          REJECT: "error"
+        }
+      },
+      deleting: {
+        invoke: {
+          src: "deleteDocumentService",
+          onDone: { target: "success" },
+          onError: { actions: ["setMessage"], target: "error" }
+        },
+        on: {
+          RESOLVE: "success",
+          REJECT: "error"
+        }
+      },
+      success: {
+        invoke: {
+          src: "formSubmittedService"
+        }
+      },
+      error: {}
+    }
+  },
+  {
+    actions: {
+      setMessage: xstate.assign((_context, event) => ({
+        message: event.data.details.description
+      })),
+      createDocument: xstate.assign((_context, event) => ({
+        formData: event.formData
+      })),
+      deleteDocument: xstate.assign(() => ({
+        // id: event.id,
+      })),
+      updateDocument: xstate.assign((_context, event) => ({
+        formData: event.formData
+      }))
+    }
+  }
+), sanitizeFormData = (formData) => Object.keys(formData).reduce((acc, key) => {
+  const val = formData[key];
+  return typeof val == "object" && val !== null && val.constructor !== Array ? acc[key] = sanitizeFormData(val) : val === "" || typeof val > "u" || val?.length === 0 ? acc[key] = null : typeof val == "string" && val ? acc[key] = formData[key].trim() : acc[key] = formData[key], acc;
+}, {}), StyledErrorOutlineIcon = styledComponents.styled(icons.ErrorOutlineIcon)(({ theme }) => ({
+  color: theme.sanity.color.spot.red
+})), FormFieldInputLabel = (props) => {
+  const { description, error, label, name } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { marginBottom: 3, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: name, size: 1, weight: "semibold", children: label }),
+      error && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Tooltip,
+        {
+          content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { muted: !0, size: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StyledErrorOutlineIcon, { style: { marginRight: "0.1em" } }),
+            error.message
+          ] }) }),
+          fallbackPlacements: ["top", "left"],
+          placement: "right",
+          portal: !0,
+          children: /* @__PURE__ */ jsxRuntime.jsx(StyledErrorOutlineIcon, {})
+        }
+      ) })
+    ] }),
+    description && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginY: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { htmlFor: name, muted: !0, size: 1, children: description }) })
+  ] });
+}, FormFieldInputText = react.forwardRef((props, ref) => {
+  const { description, disabled, error, label, name, placeholder, value } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FormFieldInputLabel, { description, error, label, name }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.TextInput,
+      {
+        autoComplete: "off",
+        autoFocus: !0,
+        defaultValue: value,
+        disabled,
+        id: name,
+        name,
+        placeholder,
+        ref
+      }
+    )
+  ] });
+});
+function useSanityClient() {
+  return sanity.useClient({ apiVersion: API_VERSION });
+}
+const formSchema = yup__namespace.object().shape({
+  deployHook: yup__namespace.string().url("Deploy hook must be a valid URL"),
+  deployLimit: yup__namespace.number().positive().integer().min(1, "Deploy limit must no less than 1").max(15, "Deploy limit must no higher than 15").typeError("Deploy limit must be a number").required("Deploy limit must be a positive integer between 1 and 15"),
+  name: yup__namespace.string().required("Name cannot be empty"),
+  projectId: yup__namespace.string().required("Vercel Project ID cannot be empty"),
+  teamId: yup__namespace.string(),
+  token: yup__namespace.string().required("Vercel Account Token cannot be empty")
+}), DialogForm = (props) => {
+  const { deploymentTarget, onClose, onCreate, onDelete, onUpdate } = props, client = useSanityClient(), [formState, formStateTransition] = react$1.useMachine(formMachine, {
+    services: {
+      formSubmittedService: async () => {
+        onClose();
+      },
+      // TODO: refactor
+      createDocumentService: async (_context, event) => {
+        let document;
+        try {
+          return document = await client.create({
+            _id: `vercel.${uuid.uuid()}`,
+            _type: DEPLOYMENT_TARGET_DOCUMENT_TYPE,
+            ...event.formData
+          }), onCreate && onCreate(document), Promise.resolve();
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      },
+      // TODO: refactor
+      deleteDocumentService: async () => {
+        if (deploymentTarget)
+          try {
+            return await client.delete(deploymentTarget._id), onDelete && onDelete(deploymentTarget._id), Promise.resolve();
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        return Promise.resolve();
+      },
+      // TODO: refactor
+      updateDocumentService: async (_context, event) => {
+        let document;
+        if (deploymentTarget)
+          try {
+            return document = await client.patch(deploymentTarget._id).set(event.formData).commit(), onUpdate && onUpdate(document), Promise.resolve();
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        return Promise.resolve();
+      }
+    }
+  }), formUpdating = formState.matches("creating") || formState.matches("deleting") || formState.matches("updating"), {
+    // Read the formState before render to subscribe the form state through Proxy
+    formState: { errors, isDirty, isValid },
+    handleSubmit,
+    register
+  } = reactHookForm.useForm({
+    defaultValues: {
+      deployHook: deploymentTarget?.deployHook || "",
+      deployLimit: deploymentTarget?.deployLimit || 5,
+      name: deploymentTarget?.name,
+      projectId: deploymentTarget?.projectId,
+      teamId: deploymentTarget?.teamId || "",
+      token: deploymentTarget?.token
+    },
+    mode: "onChange",
+    resolver: yup$1.yupResolver(formSchema)
+  }), onSubmit = async (formData) => {
+    const sanitizedFormData = sanitizeFormData(formData);
+    await formStateTransition(deploymentTarget ? "UPDATE" : "CREATE", {
+      formData: sanitizedFormData
+    });
+  }, handleDelete = () => {
+    formStateTransition("DELETE", { id: deploymentTarget?._id });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Dialog,
+    {
+      footer: /* @__PURE__ */ jsxRuntime.jsx(() => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: deploymentTarget ? "space-between" : "flex-end", children: [
+        deploymentTarget && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            disabled: formUpdating,
+            fontSize: 1,
+            mode: "bleed",
+            onClick: handleDelete,
+            text: "Delete",
+            tone: "critical"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            disabled: formUpdating || !isDirty || !isValid,
+            fontSize: 1,
+            onClick: handleSubmit(onSubmit),
+            text: deploymentTarget ? "Update and close" : "Create",
+            tone: "primary"
+          }
+        )
+      ] }) }), {}),
+      header: `${deploymentTarget ? "Edit" : "Create"} deployment target`,
+      id: "create",
+      onClose,
+      width: 1,
+      zOffset: Z_INDEX_DIALOG,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { as: "form", padding: 4, onSubmit: handleSubmit(onSubmit), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { style: { display: "none" }, tabIndex: -1, type: "submit" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 5, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FormFieldInputText,
+            {
+              disabled: formUpdating,
+              description: "Name displayed in this plugin (e.g. production, staging)",
+              error: errors?.name,
+              label: "Name",
+              name: "name",
+              ref: register
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FormFieldInputText,
+            {
+              disabled: formUpdating,
+              error: errors?.token,
+              label: "Vercel Account Token",
+              name: "token",
+              ref: register
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FormFieldInputText,
+            {
+              disabled: formUpdating,
+              error: errors?.projectId,
+              label: "Vercel Project ID",
+              name: "projectId",
+              ref: register
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FormFieldInputText,
+            {
+              description: "Required only if your project is owned by a team account",
+              disabled: formUpdating,
+              error: errors?.teamId,
+              label: "Vercel Team ID (optional)",
+              name: "teamId",
+              ref: register
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FormFieldInputText,
+            {
+              description: "Enter a valid deploy hook URL to enable manual deploys",
+              disabled: formUpdating,
+              error: errors?.deployHook,
+              label: "Vercel Deploy Hook (optional)",
+              name: "deployHook",
+              ref: register
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FormFieldInputText,
+            {
+              disabled: formUpdating,
+              error: errors?.deployLimit,
+              label: "Number of deploys to display",
+              name: "deployLimit",
+              ref: register({ valueAsNumber: !0 })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}, dialogMachine = () => xstate.Machine(
+  {
+    context: {
+      editDeploymentTarget: void 0
+    },
+    initial: "idle",
+    states: {
+      idle: {
+        entry: xstate.assign({
+          editDeploymentTarget: () => {
+          }
+        }),
+        on: {
+          CREATE: "create",
+          EDIT: {
+            actions: ["setEditDeploymentTarget"],
+            target: "edit"
+          }
+        }
+      },
+      edit: {
+        on: {
+          CLOSE: "idle"
+        }
+      },
+      create: {
+        on: {
+          CLOSE: "idle"
+        }
+      }
+    }
+  },
+  {
+    actions: {
+      setEditDeploymentTarget: xstate.assign((_context, event) => ({
+        editDeploymentTarget: event.deploymentTarget
+      }))
+    }
+  }
+), Widget = () => {
+  const client = useSanityClient(), [deploymentTargetListState, deploymentTargetListStateTransition] = react$1.useMachine(
+    deploymentTargetListMachine,
+    {
+      services: {
+        fetchDataService: () => client.fetch(`*[_type == "${DEPLOYMENT_TARGET_DOCUMENT_TYPE}"] | order(name asc)`).then((result) => result)
+      }
+    }
+  ), [dialogState, dialogStateTransition] = react$1.useMachine(dialogMachine), queryClient = new reactQuery.QueryClient({
+    defaultOptions: {
+      queries: {
+        cacheTime: 0,
+        staleTime: 0
+      }
+    }
+  }), handleDialogClose = () => {
+    dialogStateTransition("CLOSE");
+  }, handleDialogShowCreate = () => {
+    dialogStateTransition("CREATE");
+  }, handleDialogShowEdit = (deploymentTarget) => {
+    dialogStateTransition("EDIT", { deploymentTarget });
+  }, handleTargetCreate = (deploymentTarget) => {
+    deploymentTargetListStateTransition("CREATE", { deploymentTarget });
+  }, handleTargetDelete = (id) => {
+    deploymentTargetListStateTransition("DELETE", { id });
+  }, handleTargetUpdate = (deploymentTarget) => {
+    deploymentTargetListStateTransition("UPDATE", { deploymentTarget });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.ToastProvider, { zOffset: Z_INDEX_TOAST_PROVIDER, children: /* @__PURE__ */ jsxRuntime.jsxs(reactQuery.QueryClientProvider, { client: queryClient, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, { radius: 2, style: { overflow: "hidden " }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StateDebug, { name: "List", state: deploymentTargetListState }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", justify: "space-between", paddingX: 3, paddingY: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 5, weight: "semibold", children: "Vercel deployments" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Tooltip,
+          {
+            content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: "Create new deployment target" }) }),
+            placement: "left",
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fontSize: 1, icon: icons.AddIcon, onClick: handleDialogShowCreate, mode: "bleed" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { children: [
+        deploymentTargetListState.matches("pending") && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 3, paddingY: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Loading..." }) }),
+        deploymentTargetListState.matches("ready.withoutData") && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 3, paddingY: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { children: [
+          "No deployment targets found.",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("a", { onClick: handleDialogShowCreate, style: { cursor: "pointer" }, children: "Create a new target?" })
+        ] }) }),
+        deploymentTargetListState.matches("ready.withData") && /* @__PURE__ */ jsxRuntime.jsx(
+          DeploymentTargets,
+          {
+            items: deploymentTargetListState.context.results,
+            onDialogEdit: handleDialogShowEdit
+          }
+        ),
+        deploymentTargetListState.matches("failed") && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 3, paddingY: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Failed to retrieve deployment targets. Please check the developer console log for more information." }) })
+      ] })
+    ] }),
+    dialogState.matches("create") && /* @__PURE__ */ jsxRuntime.jsx(DialogForm, { onClose: handleDialogClose, onCreate: handleTargetCreate }),
+    dialogState.matches("edit") && /* @__PURE__ */ jsxRuntime.jsx(
+      DialogForm,
+      {
+        deploymentTarget: dialogState.context.editDeploymentTarget,
+        onClose: handleDialogClose,
+        onDelete: handleTargetDelete,
+        onUpdate: handleTargetUpdate
+      }
+    )
+  ] }) });
+};
+TimeAgo__default.default.addDefaultLocale(en__default.default);
+function vercelWidget(config = {}) {
+  return {
+    name: "vercel",
+    component: Widget,
+    layout: config.layout ?? { width: "full" }
+  };
+}
+exports.vercelWidget = vercelWidget;
 //# sourceMappingURL=index.js.map