slice-machine-ui 1.19.3-dev-environments.4 → 1.19.3-dev-next-release.2

package/out/_next/static/chunks/pages/slices-93b7af2624c85b8e.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[436],{74600:function(e,n,t){var i=t(34311),r=t(23779),o=i(function(e,n,t){return e+(t?" ":"")+r(n)});e.exports=o},26688:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/slices",function(){return t(12472)}])},56577:function(e,n,t){"use strict";t.d(n,{z:function(){return d}});var i=t(62230),r=t(85244),o=t(98240),l=t(52322),a=t(2784),c=t(75289),s=function(e,n){return e?"".concat(e,"-").concat(n):""},u=function(e){switch(e){case"white":case"secondaryMedium":case"secondarySmall":case"secondary":return"#1A1523";default:return"grey01"}},d=(0,a.forwardRef)(function(e,n){var t=e.label,a=e.Icon,d=e.type,f=e.form,m=e.isLoading,p=void 0!==m&&m,x=e.disabled,h=e.onClick,v=e.sx,y=e.iconSize,b=void 0===y?16:y,g=e.iconFill,j=e.variant,S=void 0===j?"primary":j,C=(0,o.Z)(e,["label","Icon","type","form","isLoading","disabled","onClick","sx","iconSize","iconFill","variant"]);return(0,l.jsx)(c.zx,(0,r.Z)((0,i.Z)({ref:n,sx:(0,i.Z)((0,r.Z)((0,i.Z)({},void 0===v?{}:v),{display:"flex",alignItems:"center",justifyContent:"center",gap:"8px"}),p?{cursor:"wait !important"}:{}),type:d,form:f,disabled:void 0!==x&&x||p,onClick:p?void 0:h,variant:S},C),{children:p?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(c.$j,{size:b,color:u(S),"data-cy":s(C["data-cy"],"spinner")}),a&&t]}):(0,l.jsxs)(l.Fragment,{children:[a&&(0,l.jsx)(a,{size:b,fill:g,"data-cy":s(C["data-cy"],"icon")}),t]})}))})},45466:function(e,n,t){"use strict";t.d(n,{c:function(){return j}});var i=t(22710),r=t(62230),o=t(85244),l=t(99267),a=t(52322),c=t(75289),s=t(2784),u=t(36131),d=t(68780),f=t(88932),m=t(38876),p=t(40147),x=t(82770);function h(){return(h=(0,i.Z)(function(e){var n,t,i,r,o,a,c;return(0,l.__generator)(this,function(l){switch(l.label){case 0:var s;return l.trys.push([0,3,,4]),n=e.sliceName,t=e.libraryName,i=e.onSuccess,s=n,r={id:(0,m.T3)(s),type:"SharedSlice",name:s,description:s,variations:[{id:v,name:(0,m.MP)(v),docURL:"...",version:"initial",description:(0,m.MP)(v),imageUrl:""},]},[4,p.j.slices.createSlice({libraryID:t,model:r})];case 1:if((o=l.sent().errors).length>0)throw o;return x.Xe.track({event:"slice:created",id:(0,m.MP)(n),name:n,library:t}),[4,i(r)];case 2:return l.sent(),[3,4];case 3:return a=l.sent(),c="Internal Error: Slice not created",console.error(c,a),f.Am.error(c),[3,4];case 4:return[2]}})})).apply(this,arguments)}var v="default",y=t(90374),b=t(66443),g=t(70041),j=function(e){var n,t=e.onClose,f=e.onSuccess,m=e.localLibraries,p=e.remoteSlices,v=(0,y.Z)().createSliceSuccess,j=(0,s.useState)(!1),S=j[0],C=j[1],k=(n=(0,i.Z)(function(e){var n,t;return(0,l.__generator)(this,function(r){switch(r.label){case 0:var o;return n=e.sliceName,t=e.from,C(!0),[4,function(e){return h.apply(this,arguments)}({sliceName:n,libraryName:t,onSuccess:(o=(0,i.Z)(function(e){var n;return(0,l.__generator)(this,function(n){switch(n.label){case 0:return[4,(0,x.y0)()];case 1:return v(n.sent().libraries),[4,f(e,t)];case 2:return n.sent(),[2]}})}),function(e){return o.apply(this,arguments)})})];case 1:return r.sent(),[2]}})}),function(e){return n.apply(this,arguments)});return(0,a.jsx)(d.Z,{dataCy:"create-slice-modal",isOpen:!0,widthInPx:"530px",isLoading:S,formId:"create-new-slice",close:t,buttonLabel:"Create",onSubmit:function(e){k(e)},initialValues:{sliceName:"",from:m[0].name},validate:function(e){return(0,b.h)(e,m,p)},content:{title:"Create a new slice"},children:function(e){var n=e.touched,t=e.values,i=e.setFieldValue,l=e.errors;return(0,a.jsxs)(c.xu,{children:[(0,a.jsx)(g.W,{name:"sliceName",label:"Slice Name",placeholder:"Pascalised Slice API ID (e.g. TextBlock)",error:n.sliceName?l.sliceName:void 0,dataCy:"slice-name-input"}),(0,a.jsx)(c.__,{htmlFor:"from",sx:{mb:2},children:"Target Library"}),(0,a.jsx)(u.ZP,{name:"from",options:m.map(function(e){return{value:e.name,label:e.name}}),onChange:function(e){return e?void i("from",e.value):null},defaultValue:{value:t.from,label:t.from},styles:{option:function(e){return(0,o.Z)((0,r.Z)({},e),{color:"#161618"})}},theme:function(e){return(0,o.Z)((0,r.Z)({},e),{colors:(0,o.Z)((0,r.Z)({},e.colors),{primary:"#E9E8EA"})})},menuPortalTarget:document.body})]})}})}},70041:function(e,n,t){"use strict";t.d(n,{W:function(){return a}});var i=t(62230),r=t(52322);t(2784);var o=t(63397),l=t(75289),a=function(e){var n=e.name,t=e.label,a=e.placeholder,c=e.error,s=e.dataCy,u=e.onChange;return(0,r.jsxs)(l.xu,{mb:3,children:[(0,r.jsx)(l.__,{htmlFor:n,mb:2,children:t}),(0,r.jsx)(o.gN,(0,i.Z)({name:n,type:"text",placeholder:a,as:l.II,autoComplete:"off"},u?{onChange:u}:null,s?{"data-cy":s}:null)),c?(0,r.jsx)(l.xv,{"data-cy":s?"".concat(s,"-error"):"input-error",sx:{color:"error",mt:1},children:c}):null]})}},66443:function(e,n,t){"use strict";t.d(n,{h:function(){return s}});var i=t(81541),r=t(75329),o=t(96009),l=t.n(o),a=t(74600),c=t.n(a);function s(e,n,t){var o=e.sliceName;if(!o)return{sliceName:"Cannot be empty"};if(!r.xo.exec(o))return{sliceName:"No special characters allowed"};if(c()(l()(o)).replace(/\s/gm,"")!==o.trim())return{sliceName:"Value has to be PascalCased"};if(o.match(/^\d/))return{sliceName:"Value cannot start with a number"};if(r.lS.includes(o))return{sliceName:"".concat(o," is reserved for Slice Machine use")};var a=n.flatMap(function(e){return e.components.map(function(e){return e.model.name})}),s=t.map(function(e){return e.name});if((0,i.Z)(a).concat((0,i.Z)(s)).includes(o))return{sliceName:"Slice name is already taken."}}},59469:function(e,n,t){"use strict";var i=t(62230),r=t(52322),o=t(75289);n.Z=function(e){var n=e.elems,t=e.renderElem,l=e.defineElementKey,a=e.gridTemplateMinPx,c=e.gridGap,s=e.sx;return(0,r.jsx)(o.xu,{as:"section",sx:(0,i.Z)({display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(".concat(void 0===a?"320px":a,", 1fr))"),gridGap:void 0===c?"16px":c,pt:2},s),children:n.map(function(e,n){return e?(0,r.jsx)("span",{children:t(e,n)},"".concat(l(e),"-").concat(n+1)):null})})}},68780:function(e,n,t){"use strict";var i=t(62230),r=t(85244),o=t(52322),l=t(37149),a=t.n(l),c=t(25812),s=t(63397),u=t(75289),d=t(56577),f=t(54132);n.Z=function(e){var n=e.children,t=e.close,l=e.isOpen,m=e.formId,p=e.validate,x=e.onSubmit,h=e.widthInPx,v=e.initialValues,y=e.content.title,b=e.cardProps,g=e.omitFooter,j=void 0!==g&&g,S=e.isLoading,C=void 0!==S&&S,k=e.buttonLabel,w=void 0===k?"Save":k,L=e.dataCy,I=e.actionMessage;return a().setAppElement("#__next"),(0,o.jsx)(c.Z,{isOpen:l,shouldCloseOnOverlayClick:!0,onRequestClose:t,contentLabel:y,style:{content:{width:null!=h?h:"900px"}},children:(0,o.jsx)(s.J9,{validateOnChange:!0,initialValues:v,validate:function(e){return p?p(e):void 0},onSubmit:function(e){x(e)},children:function(e){var l=e.isValid,a=e.isSubmitting,c=e.values,p=e.errors,x=e.touched,h=e.setFieldValue,v=e.setValues;return(0,o.jsx)(s.l0,(0,r.Z)((0,i.Z)({id:m},null!=L?{"data-cy":L}:null),{children:(0,o.jsx)(f.Z,(0,r.Z)((0,i.Z)({borderFooter:!0,footerSx:{p:3,position:"sticky",bottom:0,background:"gray"},bodySx:{px:4,py:4},sx:{border:"none"}},b),{Header:function(e){var n=e.radius;return(0,o.jsxs)(u.kC,{sx:{position:"sticky",top:0,zIndex:1,p:"16px",pl:4,bg:"headSection",alignItems:"center",justifyContent:"space-between",borderTopLeftRadius:n,borderTopRightRadius:n,borderBottom:function(e){var n;return"1px solid ".concat(null===(n=e.colors)||void 0===n?void 0:n.borders)}},children:[(0,o.jsx)(u.X6,{sx:{fontSize:"20px"},children:y}),(0,o.jsx)(u.x8,{type:"button",onClick:t})]})},Footer:j?null:(0,o.jsxs)(u.kC,{sx:{alignItems:"space-between"},children:[(0,o.jsx)(u.kC,{sx:{fontSize:"14px",alignItems:"center"},children:"function"==typeof I?I(e):I}),(0,o.jsxs)(u.kC,{sx:{ml:"auto"},children:[(0,o.jsx)(u.zx,{mr:2,type:"button",onClick:t,variant:"secondary",disabled:a||C,children:"Cancel"}),(0,o.jsx)(d.z,{label:w,form:m,type:"submit",disabled:!l||a||C,isLoading:a||C,sx:{fontWeight:"400",paddingBlock:"8px",paddingInline:"16px",fontSize:"14px",borderRadius:"4px"}})]})]}),children:n({isValid:l,isSubmitting:a,values:c,errors:p,touched:x,setFieldValue:h,setValues:v})}))}))}})})}},12472:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return V}});var i=t(81541),r=t(52322),o=t(22715),l=t(2784),a=t(97729),c=t.n(a),s=t(65077),u=t(75289),d=t(56580),f=t(5632),m=t(88932),p=t(75329),x=t(5327),h=t(45466),v=t(59469),y=t(36887),b=t(82770),g=function(e){var n=e.title,t=e.onCreateNew,i=e.buttonText,o=e.documentationComponent,l=e.videoPublicIdUrl;return(0,r.jsxs)(u.xu,{sx:{display:"flex",width:"80%",flexWrap:"wrap",justifyContent:"center"},children:[(0,r.jsx)(u.xu,{sx:function(e){var n;return{display:"flex",flex:1,alignItems:"center",minWidth:"400px",maxWidth:"70%",border:"1px solid ".concat(null===(n=e.colors)||void 0===n?void 0:n.grey02)}},children:(0,r.jsx)(y.nk,{cloudName:"dmtf1daqp",controls:!0,loop:!0,style:{maxWidth:"100%",objectFit:"contain"},publicId:l,onPlay:function(){b.Xe.track({event:"open-video-tutorials",video:l})}})}),(0,r.jsxs)(u.xu,{sx:function(e){var n;return{bg:"white",display:"flex",flexDirection:"column",border:"1px solid ".concat(null===(n=e.colors)||void 0===n?void 0:n.grey02),flex:1,minWidth:"400px",maxWidth:"70%"}},children:[(0,r.jsxs)(u.xu,{sx:function(e){var n;return{display:"flex",flexDirection:"column",p:4,borderBottom:"1px solid ".concat(null===(n=e.colors)||void 0===n?void 0:n.grey02)}},children:[(0,r.jsx)(u.X6,{as:"h3",variant:"heading",sx:{fontSize:"16px",lineHeight:"24px",mb:2},children:n}),(0,r.jsx)(u.xv,{variant:"xs",sx:{lineHeight:"24px",fontSize:"13px"},children:o})]}),(0,r.jsxs)(u.xu,{sx:{display:"flex",p:4,alignItems:"center"},children:[(0,r.jsx)(u.zx,{onClick:t,"data-cy":"empty-state-main-button",sx:{display:"flex",justifyContent:"center",alignItems:"center",flexShrink:0,mr:4},children:i}),(0,r.jsx)(u.xv,{sx:{fontSize:"12px",color:"grey04",maxWidth:"280px"},children:"It will be stored locally and you will be able to push it to your repository"})]})]})]})},j=t(84449),S=t(90374),C=t(68780),k=t(70041),w=t(77174),L=t(24340),I=t(75992),E=t(66443),N=function(e){var n=e.sliceName,t=e.sliceId,i=e.libName,o=(0,S.Z)(),l=o.renameSlice,a=o.closeModals,c=(0,d.v9)(function(e){return{isRenameSliceModalOpen:(0,w.gP)(e,L.q.RENAME_SLICE),localLibs:(0,I.Sd)(e),remoteLibs:(0,I.sT)(e)}}),s=c.isRenameSliceModalOpen,f=c.localLibs,m=c.remoteLibs,p=function(e){l(i,t,e.sliceName)};return(0,r.jsx)(C.Z,{dataCy:"rename-slice-modal",isOpen:s,widthInPx:"530px",formId:"rename-slice-modal-".concat(t),close:a,buttonLabel:"Rename",onSubmit:p,initialValues:{sliceName:n},content:{title:"Rename a slice"},validate:function(e){return(0,E.h)(e,f,m)},children:function(e){var n=e.touched,t=e.errors;return(0,r.jsx)(u.xu,{children:(0,r.jsx)(k.W,{name:"sliceName",label:"Slice Name","data-cy":"slice-name-input",placeholder:"Pascalised Slice API ID (e.g. TextBlock)",error:n.sliceName?t.sliceName:void 0,dataCy:"slice-name-input"})})}})},Z=t(25812),P=t(59326),R=t(54132),O=t(65186),_=t(56577),z=t(3098),F=t(32665),M=function(e){var n=e.sliceId,t=e.sliceName,i=e.libName,o=(0,d.v9)(function(e){return{isSliceModalOpen:(0,w.gP)(e,L.q.DELETE_SLICE),isDeletingSlice:(0,F.hg)(e,z.z.DELETE_SLICE)}}),l=o.isSliceModalOpen,a=o.isDeletingSlice,c=(0,S.Z)(),s=c.closeModals,f=c.deleteSlice,m=(0,P.B7)().theme;return(0,r.jsx)(Z.Z,{isOpen:l,shouldCloseOnOverlayClick:!0,style:{content:{maxWidth:612}},onRequestClose:s,children:(0,r.jsx)(R.Z,{bodySx:{p:0,bg:"white",position:"relative",height:"100%",padding:16},footerSx:{position:"sticky",bottom:0,p:0},sx:{border:"none"},borderFooter:!0,Header:function(){var e;return(0,r.jsxs)(u.kC,{sx:{position:"sticky",background:"gray",top:0,zIndex:1,p:"16px",alignItems:"center",justifyContent:"space-between",borderBottom:function(e){var n;return"1px solid ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.borders))}},children:[(0,r.jsxs)(u.kC,{sx:{alignItems:"center"},children:[(0,r.jsx)(O.$vK,{size:20,color:null===(e=m.colors)||void 0===e?void 0:e.greyIcon}),(0,r.jsx)(u.X6,{sx:{fontSize:"14px",fontWeight:"bold",ml:1},children:"Delete Slice"})]}),(0,r.jsx)(u.x8,{type:"button",onClick:s})]})},Footer:function(){return(0,r.jsxs)(u.kC,{sx:{justifyContent:"flex-end",height:64,alignItems:"center",paddingRight:16,borderTop:function(e){var n;return"1px solid ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.darkBorders))},backgroundColor:"gray"},children:[(0,r.jsx)(_.z,{label:"Cancel",variant:"secondary",onClick:function(){return s()},sx:{mr:"10px",fontWeight:"bold",color:"grey12",borderRadius:6}}),(0,r.jsx)(_.z,{label:"Delete",variant:"danger",isLoading:a,sx:{minHeight:39,minWidth:78},onClick:function(){return f(n,t,i)}})]})},children:(0,r.jsxs)(u.nv,{children:["This action will immediately make the following changes:",(0,r.jsxs)("ul",{children:[(0,r.jsxs)("li",{children:["Delete the"," ",(0,r.jsxs)(u.xv,{sx:{fontWeight:"bold"},children:[i,"/",t,"/"]})," ","directory."]}),(0,r.jsx)("li",{children:"Remove the Slice from all Slice Zones that use it."})]}),"The next time you push your changes to Prismic, the following change will happen:",(0,r.jsx)("ul",{children:(0,r.jsx)("li",{children:"Remove the Slice from the list of available Slices to use in the Page Builder."})}),"You will need to manually remove the Slice from any Pages that currently use it."]})})})},A=t(47731),T=t(65958),W=t(49451),D=t(13858),V=function(){var e,n,t,a,y,b,C=(0,f.useRouter)(),k=(0,S.Z)(),w=k.openRenameSliceModal,L=k.openDeleteSliceModal,E=(0,A.H)(),Z=E.modalPayload,P=E.onOpenModal,R=Z.sliceFilterFn,O=Z.defaultVariationSelector,_=(0,d.v9)(function(e){return{remoteSlices:(0,I.sT)(e),libraries:(0,I.Sd)(e)}}),z=_.remoteSlices,F=_.libraries,V=(0,l.useState)(!1),K=V[0],B=V[1],H=F.filter(function(e){return e.isLocal}),X=F.map(function(e){return e.components=(0,i.Z)(e.components).sort(function(e,n){return e.model.name.localeCompare(n.model.name)}),e}),q=(F||[]).map(function(e){return e.components}).flat(),U=q.length,G=(0,l.useState)(),Y=G[0],$=G[1];return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(c(),{children:(0,r.jsx)("title",{children:"Slices - Slice Machine"})}),(0,r.jsxs)(x.LN,{children:[(0,r.jsxs)(x.wd,{children:[(0,r.jsx)(x.Cx,{folder:"Slices"}),(null==H?void 0:H.length)!==0&&0!==U?(0,r.jsx)(x.K2,{children:(0,r.jsx)(o.zx,{"data-testid":"create-slice","data-cy":"create-slice",onClick:function(){B(!0)},startIcon:"add",children:"Create"})}):void 0]}),(0,r.jsxs)(x.RN,{children:[(0,r.jsx)(s.xR,{sx:{display:"flex",flexDirection:"column"},children:X.length>0?(0,r.jsx)(u.kC,{sx:{flex:1,flexDirection:"column"},children:0===U?(0,r.jsx)(u.kC,{sx:{flex:1,justifyContent:"center",alignItems:"center"},children:(0,r.jsx)(g,{title:"What are Slices?",onCreateNew:function(){B(!0)},buttonText:"Create one",videoPublicIdUrl:p.rd,documentationComponent:(0,r.jsxs)(r.Fragment,{children:['Slices are sections of your website. Prismic documents contain a dynamic "Slice Zone" that allows content creators to add, edit, and rearrange Slices to compose dynamic layouts for any page design.'," ",(0,r.jsx)(u.rU,{target:"_blank",href:"https://prismic.io/docs/core-concepts/slices",sx:function(e){var n;return{color:null==e?void 0:null===(n=e.colors)||void 0===n?void 0:n.primary}},children:"Learn more"}),"."]})})}):X.map(function(e){var n=e.name,t=e.isLocal,i=e.components;return(0,r.jsxs)(u.kC,{sx:{flexDirection:"column","&:not(:last-of-type)":{mb:4}},children:[(0,r.jsxs)(u.kC,{sx:{alignItems:"center",justifyContent:"space-between"},children:[(0,r.jsx)(u.kC,{sx:{alignItems:"center",fontSize:3,lineHeight:"48px",fontWeight:"heading",mb:1},children:(0,r.jsx)(u.xv,{children:n})}),!t&&(0,r.jsx)("p",{children:"⚠️ External libraries are read-only"})]}),(0,r.jsx)(v.Z,{elems:i,defineElementKey:function(e){return e.model.name},renderElem:function(e){return(0,r.jsx)(T.b,{action:{type:"menu",onRemove:function(){$(e),L()},onRename:function(){$(e),w()}},mode:"navigation",onUpdateScreenshot:function(){P({sliceFilterFn:function(n){return n.filter(function(n){return n.model.id===e.model.id})}})},slice:e,variant:"solid"})},gridGap:"32px 16px"})]},n)})}):void 0}),(null==H?void 0:H.length)>0&&(0,r.jsx)(j.Z,{slices:R(q),defaultVariationSelector:O}),(null==H?void 0:H.length)>0&&K&&(0,r.jsx)(h.c,{localLibraries:H,remoteSlices:z,onSuccess:function(e,n){var t=e.variations[0].id,i=W.Y.getBuilderPagePathname({libraryName:n,sliceName:e.name,variationId:t});C.push(i),m.Am.success((0,D.kQ)({path:"".concat(n,"/").concat(e.name,"/model.json")}))},onClose:function(){B(!1)}}),(0,r.jsx)(N,{sliceId:null!==(e=null==Y?void 0:Y.model.id)&&void 0!==e?e:"",sliceName:null!==(n=null==Y?void 0:Y.model.name)&&void 0!==n?n:"",libName:null!==(t=null==Y?void 0:Y.from)&&void 0!==t?t:"","data-cy":"rename-slice-modal"}),(0,r.jsx)(M,{sliceId:null!==(a=null==Y?void 0:Y.model.id)&&void 0!==a?a:"",sliceName:null!==(y=null==Y?void 0:Y.model.name)&&void 0!==y?y:"",libName:null!==(b=null==Y?void 0:Y.from)&&void 0!==b?b:""})]})]})]})}},76473:function(e,n,t){"use strict";t.d(n,{y1:function(){return g}});var i=t(2784);function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e}).apply(this,arguments)}t(52322);var o=["shift","alt","meta","mod","ctrl"],l={esc:"escape",return:"enter",".":"period",",":"comma","-":"slash"," ":"space","`":"backquote","#":"backslash","+":"bracketright",ShiftLeft:"shift",ShiftRight:"shift",AltLeft:"alt",AltRight:"alt",MetaLeft:"meta",MetaRight:"meta",OSLeft:"meta",OSRight:"meta",ControlLeft:"ctrl",ControlRight:"ctrl"};function a(e){return(l[e]||e).trim().toLowerCase().replace(/key|digit|numpad|arrow/,"")}function c(e,n){return void 0===n&&(n=","),e.split(n)}function s(e,n,t){void 0===n&&(n="+");var i,l=e.toLocaleLowerCase().split(n).map(function(e){return a(e)});return r({},{alt:l.includes("alt"),ctrl:l.includes("ctrl")||l.includes("control"),shift:l.includes("shift"),meta:l.includes("meta"),mod:l.includes("mod")},{keys:l.filter(function(e){return!o.includes(e)}),description:t})}"undefined"!=typeof document&&(document.addEventListener("keydown",function(e){void 0!==e.key&&f([a(e.key),a(e.code)])}),document.addEventListener("keyup",function(e){void 0!==e.key&&m([a(e.key),a(e.code)])})),"undefined"!=typeof window&&window.addEventListener("blur",function(){u.clear()});var u=new Set;function d(e){return Array.isArray(e)}function f(e){var n=Array.isArray(e)?e:[e];u.has("meta")&&u.forEach(function(e){var n;return!o.includes(e)&&u.delete(e.toLowerCase())}),n.forEach(function(e){return u.add(e.toLowerCase())})}function m(e){var n=Array.isArray(e)?e:[e];"meta"===e?u.clear():n.forEach(function(e){return u.delete(e.toLowerCase())})}function p(e,n){var t=e.target;void 0===n&&(n=!1);var i=t&&t.tagName;return d(n)?Boolean(i&&n&&n.some(function(e){return e.toLowerCase()===i.toLowerCase()})):Boolean(i&&n&&!0===n)}var x=function(e,n,t){void 0===t&&(t=!1);var i,r,o=n.alt,l=n.meta,c=n.mod,s=n.shift,f=n.ctrl,m=n.keys,p=e.key,x=e.code,h=e.ctrlKey,v=e.metaKey,y=e.shiftKey,b=e.altKey,g=a(x),j=p.toLowerCase();if(!t){if(!b===o&&"alt"!==j||!y===s&&"shift"!==j)return!1;if(c){if(!v&&!h)return!1}else if(!v===l&&"meta"!==j&&"os"!==j||!h===f&&"ctrl"!==j&&"control"!==j)return!1}return!!(m&&1===m.length&&(m.includes(j)||m.includes(g)))||(m?(void 0===r&&(r=","),(d(i=m)?i:i.split(r)).every(function(e){return u.has(e.trim().toLowerCase())})):!m)},h=(0,i.createContext)(void 0),v=(0,i.createContext)({hotkeys:[],enabledScopes:[],toggleScope:function(){},enableScope:function(){},disableScope:function(){}}),y=function(e){e.stopPropagation(),e.preventDefault(),e.stopImmediatePropagation()},b="undefined"!=typeof window?i.useLayoutEffect:i.useEffect;function g(e,n,t,r){var o,l,u=(0,i.useRef)(null),g=(0,i.useRef)(!1),j=t instanceof Array?r instanceof Array?void 0:r:t,S=d(e)?e.join(null==j?void 0:j.splitKey):e,C=t instanceof Array?t:r instanceof Array?r:void 0,k=(0,i.useCallback)(n,null!=C?C:[]),w=(0,i.useRef)(k);C?w.current=k:w.current=n;var L=(!function e(n,t){return n&&t&&"object"==typeof n&&"object"==typeof t?Object.keys(n).length===Object.keys(t).length&&Object.keys(n).reduce(function(i,r){return i&&e(n[r],t[r])},!0):n===t}((l=(0,i.useRef)(void 0)).current,j)&&(l.current=j),l.current),I=(0,i.useContext)(v).enabledScopes,E=(0,i.useContext)(h);return b(function(){if((null==L?void 0:L.enabled)!==!1&&(e=I,n=null==L?void 0:L.scopes,0===e.length&&n?(console.warn('A hotkey has the "scopes" option set, however no active scopes were found. If you want to use the global scopes feature, you need to wrap your app in a <HotkeysProvider>'),!0):!!(!n||e.some(function(e){return n.includes(e)})||e.includes("*")))){var e,n,t=function(e,n){var t,i;if(void 0===n&&(n=!1),!(p(e,["input","textarea","select"])&&!p(e,null==L?void 0:L.enableOnFormTags)||null!=L&&null!=L.ignoreEventWhen&&L.ignoreEventWhen(e))){if(null!==u.current&&document.activeElement!==u.current&&!u.current.contains(document.activeElement)){y(e);return}(null==(t=e.target)||!t.isContentEditable||null!=L&&L.enableOnContentEditable)&&c(S,null==L?void 0:L.splitKey).forEach(function(t){var i,r,o,l,a,c,u,d=s(t,null==L?void 0:L.combinationKey);if(x(e,d,null==L?void 0:L.ignoreModifiers)||null!=(u=d.keys)&&u.includes("*")){if(n&&g.current)return;if(i=e,r=d,("function"==typeof(o=null==L?void 0:L.preventDefault)&&o(i,r)||!0===o)&&i.preventDefault(),l=e,a=d,"function"==typeof(c=null==L?void 0:L.enabled)?!c(l,a):!0!==c&&void 0!==c){y(e);return}w.current(e,d),n||(g.current=!0)}})}},i=function(e){void 0!==e.key&&(f(a(e.code)),((null==L?void 0:L.keydown)===void 0&&(null==L?void 0:L.keyup)!==!0||null!=L&&L.keydown)&&t(e))},r=function(e){void 0!==e.key&&(m(a(e.code)),g.current=!1,null!=L&&L.keyup&&t(e,!0))},o=u.current||(null==j?void 0:j.document)||document;return o.addEventListener("keyup",r),o.addEventListener("keydown",i),E&&c(S,null==L?void 0:L.splitKey).forEach(function(e){return E.addHotkey(s(e,null==L?void 0:L.combinationKey,null==L?void 0:L.description))}),function(){o.removeEventListener("keyup",r),o.removeEventListener("keydown",i),E&&c(S,null==L?void 0:L.splitKey).forEach(function(e){return E.removeHotkey(s(e,null==L?void 0:L.combinationKey,null==L?void 0:L.description))})}}},[S,L,I]),u}}},function(e){e.O(0,[789,958,80,774,888,179],function(){return e(e.s=26688)}),_N_E=e.O()}]);

package/src/components/Divider/Divider.css.ts

@@ -1,31 +0,0 @@
-import { colors, sprinkles } from "@prismicio/editor-ui";
-import { style, styleVariants } from "@vanilla-extract/css";
-
-const base = style([
-  sprinkles({
-    width: "100%",
-    borderStyle: "none",
-    margin: 0,
-  }),
-]);
-
-export const variants = styleVariants({
-  dashed: [
-    base,
-    sprinkles({
-      borderColor: colors.currentColor,
-      borderTopStyle: "dashed",
-      borderWidth: 1,
-    }),
-  ],
-  edgeFaded: [
-    base,
-    sprinkles({
-      height: 1,
-    }),
-    {
-      backgroundImage:
-        "linear-gradient(to right, color-mix(in srgb, currentColor 0%, transparent), currentColor, color-mix(in srgb, currentColor 0%, transparent))",
-    },
-  ],
-});

package/src/components/Divider/Divider.stories.tsx

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { colors } from "@prismicio/editor-ui";
-
-import { Divider } from "./Divider";
-import { variants } from "./Divider.css";
-
-type Story = StoryObj<typeof meta>;
-
-const meta = {
-  component: Divider,
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: Object.keys(variants),
-    },
-    color: {
-      control: { type: "select" },
-      options: Object.keys(colors),
-    },
-  },
-} satisfies Meta<typeof Divider>;
-
-export default meta;
-
-export const Default = {
-  args: {},
-} satisfies Story;

package/src/components/Divider/Divider.tsx

@@ -1,25 +0,0 @@
-import { FC } from "react";
-import { colors, sprinkles } from "@prismicio/editor-ui";
-import clsx from "clsx";
-
-import * as styles from "./Divider.css";
-
-type DividerProps = {
-  color?: keyof typeof colors;
-  variant?: "dashed" | "edgeFaded";
-  className?: string;
-};
-
-export const Divider: FC<DividerProps> = (props) => {
-  const { variant = "dashed", color = "currentColor", className } = props;
-
-  return (
-    <hr
-      className={clsx(
-        styles.variants[variant],
-        sprinkles({ color: colors[color] }),
-        className,
-      )}
-    />
-  );
-};

package/src/components/Divider/index.ts

@@ -1 +0,0 @@
-export { Divider } from "./Divider";

package/src/components/SideNav/SideNavEnvironmentSelector.css.ts

@@ -1,69 +0,0 @@
-import { colors, sprinkles } from "@prismicio/editor-ui";
-import { style, styleVariants } from "@vanilla-extract/css";
-
-export const logo = style([
-  sprinkles({
-    height: 40,
-    width: 40,
-  }),
-  {
-    display: "block",
-  },
-]);
-
-const environmentDotBase = style([
-  sprinkles({
-    flexShrink: 0,
-    borderRadius: "50%",
-  }),
-  {
-    width: 10,
-    height: 10,
-  },
-]);
-
-export const environmentDot = styleVariants({
-  prod: [environmentDotBase, sprinkles({ backgroundColor: colors.purple10 })],
-  stage: [environmentDotBase, sprinkles({ backgroundColor: colors.indigo10 })],
-  dev: [environmentDotBase, sprinkles({ backgroundColor: colors.amber10 })],
-});
-
-export const menuItemEnvironmentDot = sprinkles({
-  marginRight: 2,
-  marginLeft: 2,
-});
-
-export const activeEnvironmentDot = style([
-  sprinkles({
-    position: "absolute",
-    bottom: 0,
-    right: 0,
-    outlineWidth: 3,
-    outlineColor: colors.grey2,
-    outlineStyle: "solid",
-  }),
-  {
-    transform: "translate(50%, 50%)",
-  },
-]);
-
-export const activeEnvironmentName = style([
-  sprinkles({
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-  }),
-  {
-    fontWeight: 500,
-    lineHeight: "1.25rem",
-  },
-]);
-
-export const actionRequiredLabel = style([
-  sprinkles({
-    color: colors.purple10,
-  }),
-  {
-    fontWeight: 500,
-  },
-]);

package/src/components/SideNav/SideNavEnvironmentSelector.tsx

@@ -1,163 +0,0 @@
-import {
-  Box,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  Icon,
-  IconButton,
-  Text,
-} from "@prismicio/editor-ui";
-import { Environment } from "@slicemachine/manager/client";
-import type { FC } from "react";
-import clsx from "clsx";
-
-import LogoIcon from "@src/icons/LogoIcon";
-
-import * as styles from "./SideNavEnvironmentSelector.css";
-
-type SideNavEnvironmentSelectorProps = {
-  variant?: "default" | "unauthorized";
-  environments?: Environment[];
-  activeEnvironment?: Environment;
-  onSelect?: (environment: Environment) => void | Promise<void>;
-  onLogInClick?: () => void;
-};
-
-export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
-  props,
-) => {
-  const {
-    variant = "default",
-    environments = [],
-    activeEnvironment,
-    onSelect,
-    onLogInClick,
-  } = props;
-
-  const isProductionEnvironmentActive = activeEnvironment?.kind === "prod";
-
-  return (
-    <Box alignItems="center" gap={16}>
-      <Box position="relative">
-        <LogoIcon className={styles.logo} />
-        {activeEnvironment !== undefined && (
-          <EnvironmentDot
-            kind={activeEnvironment.kind}
-            className={styles.activeEnvironmentDot}
-          />
-        )}
-      </Box>
-      <Box flexGrow={1} flexDirection="column" overflow="hidden">
-        <Text component="span" variant="small" color="grey11">
-          Environment
-        </Text>
-        {variant === "unauthorized" ? (
-          <Text component="span" className={styles.actionRequiredLabel}>
-            Login required
-          </Text>
-        ) : activeEnvironment === undefined ? (
-          <Text component="span" className={styles.actionRequiredLabel}>
-            Select environment
-          </Text>
-        ) : (
-          <Text component="span" className={styles.activeEnvironmentName}>
-            {isProductionEnvironmentActive
-              ? "Production"
-              : activeEnvironment?.name}
-          </Text>
-        )}
-      </Box>
-      <Box flexShrink={0}>
-        {variant === "unauthorized" ? (
-          <IconButton icon="arrowForward" onClick={onLogInClick} />
-        ) : !activeEnvironment || environments.length > 1 ? (
-          <EnvironmentDropdownMenu
-            environments={environments}
-            activeEnvironment={activeEnvironment}
-            onSelect={onSelect}
-          />
-        ) : null}
-      </Box>
-    </Box>
-  );
-};
-
-type EnvironmentDropdownMenuProps = Pick<
-  SideNavEnvironmentSelectorProps,
-  "environments" | "activeEnvironment" | "onSelect"
->;
-
-const EnvironmentDropdownMenu: FC<EnvironmentDropdownMenuProps> = (props) => {
-  const { environments = [], activeEnvironment, onSelect } = props;
-
-  return (
-    <DropdownMenu modal>
-      <DropdownMenuTrigger>
-        <IconButton icon="unfoldMore" />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" minWidth={256}>
-        <DropdownMenuLabel>Regular Environments</DropdownMenuLabel>
-        {environments.map((environment) =>
-          environment.kind !== "dev" ? (
-            <EnvironmentDropdownMenuItem
-              key={environment.domain}
-              environment={environment}
-              onSelect={onSelect}
-              isActive={environment.domain === activeEnvironment?.domain}
-            />
-          ) : (
-            <>
-              <DropdownMenuLabel>Personal Environment</DropdownMenuLabel>
-              <EnvironmentDropdownMenuItem
-                key={environment.domain}
-                environment={environment}
-                onSelect={onSelect}
-                isActive={environment.domain === activeEnvironment?.domain}
-              />
-            </>
-          ),
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
-
-type EnvironmentDropdownMenuItemProps = {
-  environment: Environment;
-  isActive?: boolean;
-} & Pick<SideNavEnvironmentSelectorProps, "onSelect">;
-
-const EnvironmentDropdownMenuItem: FC<EnvironmentDropdownMenuItemProps> = (
-  props,
-) => {
-  const { environment, onSelect, isActive } = props;
-  const isProductionEnvironment = environment.kind === "prod";
-
-  return (
-    <DropdownMenuItem
-      startIcon={
-        <EnvironmentDot
-          kind={environment.kind}
-          className={styles.menuItemEnvironmentDot}
-        />
-      }
-      endIcon={Boolean(isActive) ? <Icon name="check" /> : undefined}
-      onSelect={() => void onSelect?.(environment)}
-    >
-      {isProductionEnvironment ? "Production" : environment.name}
-    </DropdownMenuItem>
-  );
-};
-
-type EnvironmentDotProps = {
-  kind: Environment["kind"];
-  className?: string;
-};
-
-const EnvironmentDot: FC<EnvironmentDotProps> = (props) => {
-  const { kind, className } = props;
-
-  return <div className={clsx(styles.environmentDot[kind], className)} />;
-};

package/src/features/environments/actions/getActiveEnvironmentDomain.ts

@@ -1,11 +0,0 @@
-import { managerClient } from "@src/managerClient";
-
-export async function getActiveEnvironmentDomain() {
-  try {
-    const { environment } = await managerClient.project.readEnvironment();
-
-    return { activeEnvironmentDomain: environment };
-  } catch (error) {
-    return { error };
-  }
-}

package/src/features/environments/actions/getEnvironments.ts

@@ -1,12 +0,0 @@
-import { managerClient } from "@src/managerClient";
-
-export async function getEnvironments() {
-  try {
-    const environments =
-      await managerClient.prismicRepository.fetchEnvironments();
-
-    return { environments };
-  } catch (error) {
-    return { error };
-  }
-}

package/src/features/environments/actions/setEnvironment.ts

@@ -1,18 +0,0 @@
-import { revalidateData } from "@prismicio/editor-support/Suspense";
-import { Environment } from "@slicemachine/manager/client";
-
-import { getLegacySliceMachineState } from "@src/features/legacyState/actions/getLegacySliceMachineState";
-import { managerClient } from "@src/managerClient";
-
-import { getActiveEnvironmentDomain } from "./getActiveEnvironmentDomain";
-
-export async function setEnvironment(
-  environment: Pick<Environment, "domain">,
-): Promise<void> {
-  await managerClient.project.updateEnvironment({
-    environment: environment.domain,
-  });
-
-  revalidateData(getActiveEnvironmentDomain, []);
-  revalidateData(getLegacySliceMachineState, []);
-}

package/src/features/environments/useActiveEnvironment.ts

@@ -1,38 +0,0 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
-
-import { getActiveEnvironmentDomain } from "./actions/getActiveEnvironmentDomain";
-import { useEnvironments } from "./useEnvironments";
-
-export function useActiveEnvironment() {
-  const { environments, error: useEnvironmentsError } = useEnvironments();
-  const { activeEnvironmentDomain, error: getActiveEnvironmentError } =
-    useRequest(getActiveEnvironmentDomain, []);
-
-  if (useEnvironmentsError !== undefined) {
-    return { error: useEnvironmentsError };
-  }
-
-  if (getActiveEnvironmentError !== undefined) {
-    return { error: getActiveEnvironmentError };
-  }
-
-  const activeEnvironment = environments?.find((environment) => {
-    if (activeEnvironmentDomain === undefined) {
-      return environment.kind === "prod";
-    }
-
-    return environment.domain === activeEnvironmentDomain;
-  });
-
-  if (!activeEnvironment) {
-    return {
-      error: new Error(
-        `The active environment (${
-          activeEnvironmentDomain ?? "Production"
-        }) does not match one of the repository's environments.`,
-      ),
-    };
-  }
-
-  return { activeEnvironment };
-}

package/src/features/environments/useEnvironments.ts

@@ -1,7 +0,0 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
-
-import { getEnvironments } from "./actions/getEnvironments";
-
-export function useEnvironments() {
-  return useRequest(getEnvironments, []);
-}

package/src/features/legacyState/actions/getLegacySliceMachineState.ts

@@ -1,53 +0,0 @@
-import ServerState from "@models/server/ServerState";
-import { Slices } from "@lib/models/common/Slice";
-import { CustomTypes } from "@lib/models/common/CustomType";
-import { managerClient } from "@src/managerClient";
-
-export async function getLegacySliceMachineState() {
-  const rawState = await managerClient.getState();
-
-  // `rawState` from the client contains non-SM-specific models. We need to
-  // transform the data to something SM recognizes.
-  const state: ServerState = {
-    ...rawState,
-    libraries: rawState.libraries.map((library) => {
-      return {
-        ...library,
-        components: library.components.map((component) => {
-          return {
-            ...component,
-            model: Slices.toSM(component.model),
-
-            // Replace screnshot Blobs with URLs.
-            screenshots: Object.fromEntries(
-              Object.entries(component.screenshots).map(
-                ([variationID, screenshot]) => {
-                  return [
-                    variationID,
-                    {
-                      ...screenshot,
-                      url: URL.createObjectURL(screenshot.data),
-                    },
-                  ];
-                },
-              ),
-            ),
-          };
-        }),
-      };
-    }),
-    customTypes: rawState.customTypes.map((customTypeModel) => {
-      return CustomTypes.toSM(customTypeModel);
-    }),
-    remoteCustomTypes: rawState.remoteCustomTypes.map(
-      (remoteCustomTypeModel) => {
-        return CustomTypes.toSM(remoteCustomTypeModel);
-      },
-    ),
-    remoteSlices: rawState.remoteSlices.map((remoteSliceModel) => {
-      return Slices.toSM(remoteSliceModel);
-    }),
-  };
-
-  return state;
-}

package/src/features/legacyState/useLegacySliceMachineState.ts

@@ -1,7 +0,0 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
-
-import { getLegacySliceMachineState } from "./actions/getLegacySliceMachineState";
-
-export function useLegacySliceMachineState() {
-  return useRequest(getLegacySliceMachineState, []);
-}