slice-machine-ui 2.17.2-beta.3 → 2.17.3-alpha.dani-git-integration.2

package/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/[variation]-bd5e45632c419567.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[136],{31314:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/slices/[lib]/[sliceName]/[variation]",function(){return n(92578)}])},50477:function(e,t,n){"use strict";n.d(t,{NG:function(){return s},xU:function(){return a}});var i=n(18566),r=n(2784),o=n(80148);function a(e){let t=(0,r.useCallback)(t=>(0,i.VA)(l,[e],t),[e]);return{customTypes:(0,i.QT)(l,[e]),updateCustomTypes:t}}async function l(e){let{errors:t,models:n}=await o.managerClient.customTypes.readAllCustomTypes(e?{format:e}:void 0);if(t.length>0)throw t;return n.map(e=>{let{model:t}=e;return t})}function s(e){(0,i.gw)(l,[]),(0,i.gw)(l,[e])}},44309:function(e,t,n){"use strict";n.d(t,{Z:function(){return l}});var i=n(5632),r=n(56580),o=n(7723);let a=(e,t,n)=>{var i;let r=null===(i=(0,o.Sd)(e))||void 0===i?void 0:i.find(e=>e.name.replace(/\//g,"--")===t);return null==r?void 0:r.components.find(e=>e.model.name===n)};var l=()=>{let e=(0,i.useRouter)(),{slice:t}=(0,r.v9)(t=>({slice:a(t,e.query.lib,e.query.sliceName)}));if(!t)return{};let n=t.model.variations.find(t=>t.id===e.query.variation);return n?{slice:t,variation:n}:{}}},92578:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return eN}});var i=n(52322),r=n(97729),o=n.n(r),a=n(5632),l=n(74217),s=n(2784),d=n(94160),c=n(68968),u=n(23710),m=n(54597);let h=(0,s.createContext)(void 0);function p(e){let{children:t,initialSlice:n}=e,r=(0,a.useRouter)(),[o,p]=(0,s.useState)(n),{actionQueueStatus:f,setNextAction:v}=(0,u.c)({errorMessage:"Failed to save slice. Check your browser's console for more information."}),{saveSliceSuccess:x}=(0,m.Z)(),y=(0,l.R9)(x),{syncChanges:g}=(0,c.g)(),j=(0,s.useMemo)(()=>{let e=r.query.variation,t=o.model.variations.find(t=>t.id===e);if(t)return t;throw Error("Variation not found")},[o,r]),b=(0,s.useCallback)((e,t)=>{p(e),v(async()=>{let{errors:n}=await (0,d.Ve)(e);if(n.length>0)throw n;let{errors:i,mocks:r}=await (0,d.pL)({libraryID:e.from,sliceID:e.model.id});if(i.length>0)throw i;y({...e,mocks:r}),g(),null==t||t()})},[v,y,g]),w=(0,s.useMemo)(()=>({actionQueueStatus:f,slice:o,setSlice:b,variation:j}),[f,o,b,j]);return(0,i.jsx)(h.Provider,{value:w,children:"function"==typeof t?t(w):t})}function f(){let e=(0,s.useContext)(h);if(!e)throw Error("SliceBuilderProvider not found");return e}var v=n(44309),x=n(56803),y=n(43388),g=n(23094),j=n(63470),b=n(17378),w=n(18566),C=n(80148);async function I(e){let{errors:t,model:n}=await C.managerClient.customTypes.readCustomType({id:e});if(t.length>0)throw t;return n}var S=n(59294),k=n(14101),D=n(81229);let T=e=>(0,i.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,i.jsx)("path",{d:"M9.5 12L6 9.5L9.5 7V9.5V12Z",fill:"currentColor"}),(0,i.jsx)("path",{d:"M6 9.5H11C14.3 9.5 17 12.2 17 15.5V17.5M6 9.5L9.5 12V9.5V7L6 9.5Z",stroke:"currentColor",strokeLinecap:"round"})]}),E=()=>{let{source:e}=(0,k.l)(),t=function(e){let t=(0,S.Ag)(e.query);return void 0!==t&&(0,S.ne)(e.asPath,t)?t:void 0}(e);return void 0!==t?(0,i.jsx)(b.S,{children:(0,i.jsx)(s.Suspense,{children:(0,i.jsx)(x.D,{bottom:32,justifyContent:"center",position:"fixed",right:0,width:"100vw",children:(0,i.jsx)(A,{sourceCustomTypeId:t})})})}):null},A=e=>{let{sourceCustomTypeId:t}=e,n=(0,w.QT)(I,[t]),[r,o]=(0,s.useState)(!0),l=(0,a.useRouter)();if(void 0===n||!r)return null;{let{format:e,id:t}=n,r=S.cd[e].getBuilderPagePathname(t);return(0,i.jsxs)(x.F,{density:"compact",color:"dark",children:[(0,i.jsxs)(x.E,{onClick:()=>{l.push(r)},renderStartIcon:()=>(0,i.jsx)(T,{}),children:["Return to ",n.label]}),(0,i.jsx)(x.E,{onClick:()=>{o(!1)},renderStartIcon:()=>(0,i.jsx)(D.T,{})})]})}};var R=n(51384),L=n(56580),_=n(33710),F=n(67557),O=n(39180),N=n(7974),V=n(79384);let M=e=>{let{children:t,open:n,onClose:r}=e;return(0,i.jsxs)(F.zs,{open:n,trigger:t,onClose:r,children:[(0,i.jsx)(F.Ev,{children:"Simulate your slices"}),(0,i.jsx)(F.LB,{component:"video",cloudName:"dmtf1daqp",loop:!1,autoPlay:!1,publicId:N.Sn,poster:"/simulator-video-thumbnail.png",controls:!0,onPlay:()=>{d.Xe.track({event:"open-video-tutorials",video:N.Sn})}}),(0,i.jsx)(F.OJ,{children:"Minimize context-switching by previewing your Slice components in the simulator."}),(0,i.jsx)(F.Rp,{children:"Got it"})]})};var z=e=>{let{disabled:t}=e,n=(0,a.useRouter)(),r=(0,s.useRef)(null),{setSeenSimulatorToolTip:o}=(0,m.Z)(),{hasSeenSimulatorTooltip:l}=(0,L.v9)(e=>({hasSeenSimulatorTooltip:(0,V.bv)(e)}));(0,s.useEffect)(()=>{let e=r.current;e&&!l&&setTimeout(()=>_.Z.show(e),5e3)},[l]);let d=()=>{if(o(),r.current){let{current:e}=r;_.Z.hide(e)}};return(0,i.jsx)("span",{"data-tip":!0,"data-tip-disable":!1,"data-for":"simulator-button-tooltip",ref:r,children:(0,i.jsx)(M,{open:!l,onClose:d,children:(0,i.jsx)(x.E,{"data-tip":!0,"data-testid":"simulator-open-button",onClick:()=>{d(),window.open("".concat(n.asPath,"/simulator"),N.pq)},disabled:t,renderStartIcon:()=>(0,i.jsx)(O.z,{color:x.t.color.grey1,height:"24px",style:{transform:"scale(calc(4 / 3))"},width:"24px"}),children:"Simulate"})})})},P=n(31860),Z=n(88866),K=n(28316),H=n(88932),q=n(35289),B=n(63908),W=n(34166),X=n(3285),G=n(40141),U=n(49219),Q=n(26109),Y=n(45440),J=n(16086),$=n(358),ee=n(5495),et=n(39302);let en=[Y.C.Image,Y.C.Text,Y.C.StructuredText,Y.C.Link,Y.C.Select,Y.C.Boolean,Y.C.Number,Y.C.Color,Y.C.Date,Y.C.Table,Y.C.Embed,Y.C.Timestamp,Y.C.GeoPoint,Y.C.ContentRelationship,Y.C.LinkToMedia];var ei=()=>{let{slice:e,setSlice:t,variation:n}=f(),[r,o]=(0,s.useState)(!1),a=[Y.C.Group,...en],l=!!(n.items&&Object.keys(n.items).length>0),d=i=>r=>{if(i===Q.Rt.Items&&n.items&&Object.keys(n.items).length<=1){o(!0);return}t((0,B.AK)({slice:e,variationId:n.id,widgetArea:i,fieldId:r}))},c=(i,r)=>{let{apiId:o,newKey:a,value:l,inGroupFieldAction:s}=r;t((0,B.L4)({slice:e,variationId:n.id,widgetArea:i,previousFieldId:o,newFieldId:a,newField:l}),()=>{"add"===s&&H.Am.success("Field added")}),s||(0,et.Z)({previousId:o,id:a,field:l})},u=(i,r)=>{let{apiId:o,value:l}=r,{type:s}=l,d=a.find(e=>e.CUSTOM_NAME===s||e.TYPE_NAME===s);if(!d)throw Error("Unsupported Field Type: ".concat(s));try{d.schema.validateSync(l,{stripUnknown:!1})}catch(e){throw Error('Model is invalid for widget "'.concat(l.type,'".'))}t((0,B.xS)({slice:e,variationId:n.id,widgetArea:i,newFieldId:o,newField:l.type===Z.GroupFieldType?U.Fl.fromSM(l):l}),()=>{H.Am.success("".concat("Group"===s?"Group":"Field"," added"))}),(0,ee.V)({id:o,field:l})},m=e=>t=>""===t.apiId?u(e,{...t,apiId:t.newKey}):c(e,t),h=i=>r=>{if((0,J.uS)(r))return;let{source:o,destination:a}=r;if(!a)return;let l=(0,B.gR)({slice:e,variationId:n.id,widgetArea:i,sourceIndex:o.index,destinationIndex:a.index});(0,K.flushSync)(()=>t(l))};return(0,i.jsxs)(x.D,{flexDirection:"column",gap:18,children:[(0,i.jsxs)(q.aV,{children:[(0,i.jsx)(G.Z,{zoneType:"slice",zoneTypeFormat:void 0,tabId:void 0,title:"Fields",dataTip:" The non-repeatable zone\n  is for fields<br/> that should appear once, like a<br/>\n  section title.\n",fields:n.primary,EditModal:X.Z,widgetsArray:a,onDeleteItem:d(Q.Rt.Primary),onSave:m(Q.Rt.Primary),onDragEnd:h(Q.Rt.Primary),poolOfFieldsToCheck:n.primary||[],renderHintBase:e=>{let{item:t}=e;return"slice.primary".concat((0,$.Ti)(t.key))},renderFieldAccessor:e=>"slice.primary".concat((0,$.Ti)(e)),testId:"static-zone-content",isRepeatableCustomType:void 0,emptyStateHeading:void 0}),l?(0,i.jsx)(G.Z,{zoneType:"slice",zoneTypeFormat:void 0,tabId:void 0,isRepeatable:!0,title:"Repeatable Zone",dataTip:"The repeatable zone is for a group<br/>\n  of fields that you want to be able to repeat an<br/>\n  indeterminate number of times, like FAQs",widgetsArray:en,fields:n.items,EditModal:X.Z,onDeleteItem:d(Q.Rt.Items),onSave:m(Q.Rt.Items),onDragEnd:h(Q.Rt.Items),poolOfFieldsToCheck:n.items||[],renderHintBase:e=>{let{item:t}=e;return"item".concat((0,$.Ti)(t.key))},renderFieldAccessor:e=>"slice.items[i]".concat((0,$.Ti)(e)),testId:"slice-repeatable-zone",isRepeatableCustomType:void 0,emptyStateHeading:"No fields"}):null,(0,i.jsxs)(x.ae,{size:"small",open:r,onOpenChange:e=>o(e),children:[(0,i.jsx)(x.al,{icon:"delete",title:"Delete field"}),(0,i.jsxs)(x.aj,{children:[(0,i.jsx)(x.D,{padding:24,gap:12,flexDirection:"column",children:e.model.variations.length>1?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)("strong",{children:["This action will permanently remove the repeatable zone from the ",e.model.name," slice ",n.name," variation."]}),(0,i.jsx)("div",{children:"Other variations will be left untouched. To reimplement repeatable fields later, use a group field instead of the repeatable zone."})]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)("strong",{children:["This action will permanently remove the repeatable zone from the ",e.model.name,"."]}),(0,i.jsx)("div",{children:"To reimplement repeatable fields later, use a group field instead of the repeatable zone."})]})}),(0,i.jsxs)(x.ah,{children:[(0,i.jsx)(x.ai,{}),(0,i.jsx)(x.af,{color:"tomato",onClick:()=>{t((0,B.Oh)({slice:e,variationId:n.id})),o(!1)},children:"Delete"})]})]})]})]}),(0,i.jsx)(W.rT,{type:"model",library:e.from,sliceId:e.model.id,variationId:n.id})]})},er=n(6277),eo=n(34887),ea=n.n(eo);let el=e=>{let{variant:t="dashed",color:n="currentColor",className:r}=e;return(0,i.jsx)("hr",{className:(0,er.W)(ea()["variant-".concat(t)],r),style:{color:x.t.color[n]}})};var es=n(51507),ed=n(27763),ec=n(21442);async function eu(e){try{let{errors:t}=await (0,d.Ve)(e.component);if(t.length>0)throw t;let{errors:n}=await (0,d.Xi)({libraryID:e.component.from,sliceID:e.component.model.id,variationID:e.variation.id});if(n.length>0)throw n;(0,W.tB)({type:"model",library:e.component.from,sliceId:e.component.model.id,variationId:e.variation.id});let{slice:i,errors:r}=await (0,d.X$)(e.component.from,e.component.model.id);if(r.length>0)throw r;if(!i)throw Error("Could not read variation `".concat(e.variation.name,"`"));let{mocks:o}=await (0,d.pL)({libraryID:e.component.from,sliceID:e.component.model.id}),a=ed.Y.getBuilderPagePathname({libraryName:e.component.href,sliceName:i.name,variationId:i.variations[0].id});await e.router.replace(a);let l={...e.component,model:i,mocks:o};return e.saveSliceSuccess(l),l}catch(n){let t="Could not delete variation `".concat(e.variation.name,"`");throw console.error(t,n),H.Am.error(t),n}}let em=e=>{let{isOpen:t,onClose:n,slice:r,variation:o}=e,l=(0,a.useRouter)(),[d,c]=(0,s.useState)(!1),{saveSliceSuccess:u}=(0,m.Z)(),{setSlice:h}=f();return(0,i.jsxs)(x.ae,{open:t,onOpenChange:e=>!e&&n(),size:{width:448,height:"auto"},children:[(0,i.jsx)(x.al,{icon:"delete",title:"Delete variation"}),(0,i.jsx)(x.aj,{children:(0,i.jsxs)(x.D,{flexDirection:"column",children:[(0,i.jsxs)(x.bL,{color:"grey11",sx:{marginBlock:16,marginInline:16},children:["This action will remove the variation from the slice model and delete associated files. When you push your changes, the variation will disappear from your repository. This update will"," ",(0,i.jsx)(eh,{children:"not"})," affect your documents until you ",(0,i.jsx)(eh,{children:"edit"})," ","them manually."]}),(0,i.jsxs)(x.ah,{children:[(0,i.jsx)(x.ai,{size:"medium"}),(0,i.jsx)(x.af,{size:"medium",color:"tomato",onClick:()=>{o&&(async()=>{c(!0);try{let e=await eu({component:r,router:l,saveSliceSuccess:u,variation:o});h(e)}catch(e){}c(!1),n()})()},loading:d,children:"Delete"})]})]})})]})},eh=e=>(0,i.jsx)(x.bL,{...e,color:"inherit",component:"span",variant:"bold"});var ep=n(30195);async function ef(e){try{let{errors:t}=await (0,d.Ve)(e.component);if(t.length>0)throw t;let{errors:n}=await (0,d.eH)(e.component,{...e.variation,name:e.variationName});if(n.length>0)throw n;let{slice:i,errors:r}=await (0,d.X$)(e.component.from,e.component.model.id);if(r.length>0)throw r;if(!i)throw Error("Could not read variation `".concat(e.variation.name,"`"));let{mocks:o}=await (0,d.pL)({libraryID:e.component.from,sliceID:e.component.model.id}),a={...e.component,model:i,mocks:o};return e.saveSliceSuccess(a),a}catch(n){let t="Could not rename variation `".concat(e.variation.name,"`");throw console.error(t,n),H.Am.error(t),n}}let ev=e=>{let{isOpen:t,onClose:n,slice:r,variation:o}=e,[a,d]=(0,s.useState)(!1),[c,u]=(0,s.useState)(""),[h,p]=(0,s.useState)(),{setSlice:v}=f(),{saveSliceSuccess:y}=(0,m.Z)();return(0,l.pQ)(t,()=>{if(t&&(null==o?void 0:o.name)!==c){var e;u(null!==(e=null==o?void 0:o.name)&&void 0!==e?e:""),p(void 0)}}),(0,i.jsx)(i.Fragment,{children:(0,i.jsxs)(x.ae,{open:t,onOpenChange:e=>!e&&n(),size:{width:448,height:"auto"},children:[(0,i.jsx)(x.al,{icon:"edit",title:"Rename variation"}),(0,i.jsx)(x.aj,{children:(0,i.jsxs)(x.aJ,{onSubmit:function(){if(!h&&o){d(!0);try{ef({component:r,saveSliceSuccess:y,variation:o,variationName:c.trim()}).then(e=>{v(e)})}catch(e){}d(!1),n()}},children:[(0,i.jsxs)(x.D,{flexDirection:"column",gap:8,padding:16,children:[(0,i.jsx)(x.bL,{variant:"normal",color:"grey11",children:"This action will rename the variation in the slice model. When you push your changes, the variation will be renamed in your repository."}),(0,i.jsx)(x.D,{flexDirection:"column",gap:4,children:(0,i.jsx)(x.aM,{type:"text",label:"Variation name *",placeholder:"Variation name",error:h,value:c,onValueChange:function(e){u(e),p(function(e){let t=ex.safeParse(e,{errorMap:ey});if(t.error)return t.error.errors[0].message}(e))}})})]}),(0,i.jsxs)(x.ah,{children:[(0,i.jsx)(x.ai,{size:"medium"}),(0,i.jsx)(x.af,{type:"submit",size:"medium",loading:a,disabled:!!h,children:"Rename"})]})]})})]})})},ex=ep.z.string().min(1),ey=e=>e.code===ep.z.ZodIssueCode.too_small?{message:"This field is required"}:{message:"Invalid value"};var eg=n(68105),ej=n(63397),eb=n(96009),ew=n.n(eb),eC=n(36131),eI=n(75289),eS=n(30527);function ek(e){let{children:t}=e,n=(0,eS.W)();return(0,i.jsx)(eI.kC,{sx:{p:3,pl:4,bg:"headSection",alignItems:"center",justifyContent:"space-between",borderTopLeftRadius:n,borderTopRightRadius:n,borderBottom:e=>{var t;return"1px solid ".concat(null===(t=e.colors)||void 0===t?void 0:t.borders)}},children:t})}var eD=e=>{let{children:t,FooterContent:n,HeaderContent:r,close:o,sx:a={}}=e;return(0,i.jsx)(eS.Z,{borderFooter:!0,footerSx:{p:0},bodySx:{pt:2,pb:4,px:4},sx:{border:"none",...a},Header:(0,i.jsxs)(ek,{children:[r,o?(0,i.jsx)(eI.x8,{onClick:o,type:"button"}):null]}),Footer:n?(0,i.jsxs)(eI.kC,{sx:{alignItems:"space-between",bg:"headSection",p:3},children:[(0,i.jsx)(eI.xu,{sx:{ml:"auto"}}),n]}):null,children:t})},eT=n(55862);let eE=e=>{let{msg:t}=e;return(0,i.jsx)(eI.xv,{as:"span",sx:{fontSize:12,color:"error",mt:"5px",ml:2},children:t||"Error!"})};var eA=e=>{let{isOpen:t,onClose:n,onSubmit:r,initialVariation:o,variations:a}=e,[l,d]=(0,s.useState)({}),[c,u]=(0,s.useState)(""),[m,h]=(0,s.useState)(!0),[p,f]=(0,s.useState)(""),[v,y]=(0,s.useState)({value:o.id,label:o.name}),[g,j]=(0,s.useState)(!1);function b(){w(),n()}function w(){u(""),f(""),d({}),h(!0),y({value:o.id,label:o.name})}async function C(){let e=function(e){let{id:t,name:n,origin:i}=e,r=t&&t.length?null:{id:"Required!"},o=a.find(e=>e.id===t)?{id:"This id already exists!"}:null,l=n&&n.length?null:{name:"Required!"},s=i.value.length&&a.find(e=>e.id===i.value)?null:{id:"You must select an existing variation!"},d=t&&t.length&&!/^[A-Za-z0-9]+([A-Za-z0-9]+)*$/.exec(t)&&{id:"No special characters allowed"};return{...r,...o,...l,...s,...d}}({id:c,name:p,origin:v});if(Object.keys(e).length)d(e);else{let e=a.find(e=>e.id===v.value);e&&(j(!0),await r(c,p,e),j(!1),b())}}return(0,s.useEffect)(()=>{w()},[o,t]),(0,i.jsx)(eT.Z,{isOpen:t,shouldCloseOnOverlayClick:!0,onRequestClose:()=>b(),contentLabel:"Widget Form Modal",style:{content:{maxWidth:"700px"}},children:(0,i.jsx)(ej.J9,{initialValues:{id:c,name:p,origin:v},onSubmit:C,children:(0,i.jsx)(ej.l0,{id:"variation-add",onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),C())},children:(0,i.jsx)(x.D,{children:(0,i.jsxs)(eD,{sx:{textAlign:"left"},HeaderContent:(0,i.jsx)(eI.xv,{as:"h2",children:"Add new Variation"}),FooterContent:(0,i.jsxs)(x.D,{gap:16,alignItems:"center",children:[(0,i.jsx)(x.E,{onClick:b,color:"grey",children:"Cancel"}),(0,i.jsx)(x.E,{type:"submit",loading:g,children:"Submit"})]}),close:b,children:[(0,i.jsxs)(x.D,{flexDirection:"column",padding:{block:16},children:[(0,i.jsxs)(eI.__,{htmlFor:"name",sx:{mb:1},children:["Variation name*",l.name?(0,i.jsx)(eE,{msg:l.name}):""]}),(0,i.jsx)(ej.gN,{autoComplete:"off",id:"name",name:"name",placeholder:"e.g. Grid - With Icon",as:eI.II,maxLength:30,value:p,onChange:e=>{var t;f(t=e.currentTarget.value),m&&u(ew()(t))}}),(0,i.jsx)(eI.xv,{children:"It will appear here in Slice Machine, and in the page editor in Prismic"})]}),(0,i.jsxs)(x.D,{flexDirection:"column",padding:{bottom:16},children:[(0,i.jsxs)(eI.__,{htmlFor:"id",sx:{mb:1},children:["Variation ID*",l.id?(0,i.jsx)(eE,{msg:l.id}):""]}),(0,i.jsx)(ej.gN,{autoComplete:"off",id:"id",name:"id",placeholder:"e.g. gridWithIcon",as:eI.II,maxLength:30,value:c,onChange:e=>{var t;return t=e.currentTarget.value,void(h(!1),u(ew()(t)))}}),(0,i.jsx)(eI.xv,{children:"It's generated automatically based on the variation name and will appear in the API responses."})]}),(0,i.jsxs)(x.D,{flexDirection:"column",padding:{bottom:8},children:[(0,i.jsx)(eI.__,{htmlFor:"origin",sx:{mb:1},children:"Duplicate from"}),(0,i.jsx)(eC.ZP,{name:"origin",options:a.map(e=>({value:e.id,label:e.name})),onChange:e=>{e&&y(e)},defaultValue:v,maxMenuHeight:150,theme:e=>({...e,colors:{...e.colors,text:"text",primary:"background"}})})]})]})})})})})},eR=n(20136),eL=n.n(eR);let e_=e=>{let{horizontalScroll:t=!1}=e,{slice:n,variation:r,setSlice:o}=f(),[l,c]=(0,s.useState)(),u=(0,ec.H)(),{sliceFilterFn:h,defaultVariationSelector:p,onUploadSuccess:v}=u.modalPayload,y=(0,a.useRouter)(),{saveSliceSuccess:g}=(0,m.Z)(),j=n.model.variations.length;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(x.D,{flexDirection:"column",gap:16,children:t?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(el,{variant:"edgeFaded",color:"grey6"}),(0,i.jsxs)(x.D,{justifyContent:"space-between",children:[(0,i.jsxs)(x.bL,{color:"grey11",children:[j," variation",1!==j&&"s"]}),(0,i.jsx)(x.E,{onClick:()=>{c({type:"ADD_VARIATION"})},startIcon:"add",color:"grey",children:"Add a variation"})]}),(0,i.jsx)("div",{className:eL().hideScrollbar,style:{height:"240px",position:"relative",marginRight:"-32px",overflowX:"scroll",scrollSnapType:"x mandatory"},children:(0,i.jsx)("div",{style:{position:"absolute",paddingRight:"32px"},children:(0,i.jsx)(x.D,{flexDirection:"row",gap:16,children:(0,i.jsx)(eF,{screenshotChangesModal:u,setDialog:c,width:320})})})})]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(eF,{screenshotChangesModal:u,setDialog:c}),(0,i.jsx)("div",{style:{bottom:x.t.space[0],marginBottom:"-".concat(x.t.space[16]),position:"sticky"},children:(0,i.jsxs)(x.D,{backgroundColor:"grey2",flexDirection:"column",padding:{bottom:40,inline:24},children:[(0,i.jsx)(x.aS,{sx:{left:0,position:"absolute",right:0}}),(0,i.jsx)(x.E,{color:"grey",onClick:()=>{c({type:"ADD_VARIATION"})},startIcon:"add",sx:{position:"relative"},children:"Add a variation"})]})})]})}),(0,i.jsx)(eg.Z,{slices:h([n]),defaultVariationSelector:p,onUploadSuccess:v}),(0,i.jsx)(ev,{isOpen:(null==l?void 0:l.type)==="RENAME_VARIATION",onClose:()=>{c(void 0)},slice:n,variation:null==l?void 0:l.variation}),(0,i.jsx)(em,{isOpen:(null==l?void 0:l.type)==="DELETE_VARIATION",onClose:()=>{c(void 0)},slice:n,variation:null==l?void 0:l.variation}),(0,i.jsx)(eA,{initialVariation:r,isOpen:(null==l?void 0:l.type)==="ADD_VARIATION",onClose:()=>{c(void 0)},onSubmit:async(e,t,i)=>{try{let{slice:r,variation:a}=(0,B.Kp)({slice:n,id:e,name:t,copiedVariation:i});await (0,d.Ve)(r),g(r),o(r);let l=ed.Y.getBuilderPagePathname({libraryName:r.href,sliceName:r.model.name,variationId:a.id});y.replace(l)}catch(n){let e="Could not add variation `".concat(t,"`");console.error(e,n),H.Am.error(e)}},variations:n.model.variations})]})},eF=e=>{let{screenshotChangesModal:t,setDialog:n,width:r}=e,{slice:o,variation:a,setSlice:l}=f(),s={scrollSnapAlign:"start"};return(0,i.jsx)(i.Fragment,{children:o.model.variations.map(e=>(0,i.jsx)("div",{style:void 0!==r?{...s,width:r}:s,children:(0,i.jsx)(es.b,{action:{type:"menu",onRename:()=>{n({type:"RENAME_VARIATION",variation:e})},onRemove:()=>{n({type:"DELETE_VARIATION",variation:e})},removeDisabled:o.model.variations.length<=1},mode:"navigation",onUpdateScreenshot:()=>{t.onOpenModal({sliceFilterFn:e=>e,defaultVariationSelector:{sliceID:o.model.id,variationID:e.id},onUploadSuccess:e=>{l(e)}})},replace:!0,selected:e.id===a.id,slice:o,variant:"outlined",variationId:e.id},e.id)},e.id))})};var eO=()=>{let{slice:e,actionQueueStatus:t}=f(),n=(0,x.cj)({max:"large"}),r=(0,j.k)();return(0,i.jsxs)(R.LN,{children:[(0,i.jsxs)(R.wd,{children:[(0,i.jsx)(R.Xq,{url:"/slices"}),(0,i.jsxs)(R.Cx,{children:[(0,i.jsx)(y.g,{children:(0,P._)((0,P.f)(r.value))}),(0,i.jsx)(y.g,{active:!0,children:e.model.name})]}),(0,i.jsxs)(R.K2,{children:[(0,i.jsx)(g.X,{status:t}),(0,i.jsx)(z,{disabled:"done"!==t})]})]}),(0,i.jsxs)(R.RN,{children:[(0,i.jsxs)(x.D,{display:"grid",alignItems:"flex-start",gap:16,...n?{gridTemplateRows:"304px 1fr"}:{gridTemplateColumns:"320px 1fr"},children:[(0,i.jsx)(e_,{horizontalScroll:n}),(0,i.jsx)(ei,{})]}),(0,i.jsx)(E,{})]})]})};function eN(){let e=(0,a.useRouter)(),{slice:t,variation:n}=(0,v.Z)();return void 0===t||void 0===n?(e.replace("/"),null):(0,i.jsx)(p,{initialSlice:t,children:e=>{let{slice:t}=e;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o(),{children:(0,i.jsxs)("title",{children:[t.model.name," - Slice Machine"]})}),(0,i.jsx)(eO,{})]})}})}},34887:function(e){e.exports={base:"Divider_base__4eT6E","variant-dashed":"Divider_variant-dashed__4Lvrj Divider_base__4eT6E","variant-edgeFaded":"Divider_variant-edgeFaded__049V2 Divider_base__4eT6E"}},20136:function(e){e.exports={hideScrollbar:"VariationsList_hideScrollbar__cHCIS"}},76473:function(e,t,n){"use strict";n.d(t,{y1:function(){return j}});var i=n(2784);function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}n(52322);var o=["shift","alt","meta","mod","ctrl"],a={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 l(e){return(a[e]||e).trim().toLowerCase().replace(/key|digit|numpad|arrow/,"")}function s(e,t){return void 0===t&&(t=","),e.split(t)}function d(e,t,n){void 0===t&&(t="+");var i=e.toLocaleLowerCase().split(t).map(function(e){return l(e)}),a={alt:i.includes("alt"),ctrl:i.includes("ctrl")||i.includes("control"),shift:i.includes("shift"),meta:i.includes("meta"),mod:i.includes("mod")},s=i.filter(function(e){return!o.includes(e)});return r({},a,{keys:s,description:n})}"undefined"!=typeof document&&(document.addEventListener("keydown",function(e){void 0!==e.key&&m([l(e.key),l(e.code)])}),document.addEventListener("keyup",function(e){void 0!==e.key&&h([l(e.key),l(e.code)])})),"undefined"!=typeof window&&window.addEventListener("blur",function(){c.clear()});var c=new Set;function u(e){return Array.isArray(e)}function m(e){var t=Array.isArray(e)?e:[e];c.has("meta")&&c.forEach(function(e){return!o.includes(e)&&c.delete(e.toLowerCase())}),t.forEach(function(e){return c.add(e.toLowerCase())})}function h(e){var t=Array.isArray(e)?e:[e];"meta"===e?c.clear():t.forEach(function(e){return c.delete(e.toLowerCase())})}function p(e,t){var n=e.target;void 0===t&&(t=!1);var i=n&&n.tagName;return u(t)?!!(i&&t&&t.some(function(e){return e.toLowerCase()===i.toLowerCase()})):!!(i&&t&&!0===t)}var f=function(e,t,n){void 0===n&&(n=!1);var i,r=t.alt,o=t.meta,a=t.mod,s=t.shift,d=t.ctrl,m=t.keys,h=e.key,p=e.code,f=e.ctrlKey,v=e.metaKey,x=e.shiftKey,y=e.altKey,g=l(p),j=h.toLowerCase();if(!n){if(!y===r&&"alt"!==j||!x===s&&"shift"!==j)return!1;if(a){if(!v&&!f)return!1}else if(!v===o&&"meta"!==j&&"os"!==j||!f===d&&"ctrl"!==j&&"control"!==j)return!1}return!!(m&&1===m.length&&(m.includes(j)||m.includes(g)))||(m?(void 0===i&&(i=","),(u(m)?m:m.split(i)).every(function(e){return c.has(e.trim().toLowerCase())})):!m)},v=(0,i.createContext)(void 0),x=(0,i.createContext)({hotkeys:[],enabledScopes:[],toggleScope:function(){},enableScope:function(){},disableScope:function(){}}),y=function(e){e.stopPropagation(),e.preventDefault(),e.stopImmediatePropagation()},g="undefined"!=typeof window?i.useLayoutEffect:i.useEffect;function j(e,t,n,r){var o,a=(0,i.useRef)(null),c=(0,i.useRef)(!1),j=n instanceof Array?r instanceof Array?void 0:r:n,b=u(e)?e.join(null==j?void 0:j.splitKey):e,w=n instanceof Array?n:r instanceof Array?r:void 0,C=(0,i.useCallback)(t,null!=w?w:[]),I=(0,i.useRef)(C);w?I.current=C:I.current=t;var S=(!function e(t,n){return t&&n&&"object"==typeof t&&"object"==typeof n?Object.keys(t).length===Object.keys(n).length&&Object.keys(t).reduce(function(i,r){return i&&e(t[r],n[r])},!0):t===n}((o=(0,i.useRef)(void 0)).current,j)&&(o.current=j),o.current),k=(0,i.useContext)(x).enabledScopes,D=(0,i.useContext)(v);return g(function(){if((null==S?void 0:S.enabled)!==!1&&(e=null==S?void 0:S.scopes,0===k.length&&e?(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):!!(!e||k.some(function(t){return e.includes(t)})||k.includes("*")))){var e,t=function(e,t){var n;if(void 0===t&&(t=!1),!(p(e,["input","textarea","select"])&&!p(e,null==S?void 0:S.enableOnFormTags)||null!=S&&null!=S.ignoreEventWhen&&S.ignoreEventWhen(e))){if(null!==a.current&&document.activeElement!==a.current&&!a.current.contains(document.activeElement)){y(e);return}(null==(n=e.target)||!n.isContentEditable||null!=S&&S.enableOnContentEditable)&&s(b,null==S?void 0:S.splitKey).forEach(function(n){var i,r,o,a=d(n,null==S?void 0:S.combinationKey);if(f(e,a,null==S?void 0:S.ignoreModifiers)||null!=(o=a.keys)&&o.includes("*")){if(t&&c.current)return;if(("function"==typeof(i=null==S?void 0:S.preventDefault)&&i(e,a)||!0===i)&&e.preventDefault(),"function"==typeof(r=null==S?void 0:S.enabled)?!r(e,a):!0!==r&&void 0!==r){y(e);return}I.current(e,a),t||(c.current=!0)}})}},n=function(e){void 0!==e.key&&(m(l(e.code)),((null==S?void 0:S.keydown)===void 0&&(null==S?void 0:S.keyup)!==!0||null!=S&&S.keydown)&&t(e))},i=function(e){void 0!==e.key&&(h(l(e.code)),c.current=!1,null!=S&&S.keyup&&t(e,!0))},r=a.current||(null==j?void 0:j.document)||document;return r.addEventListener("keyup",i),r.addEventListener("keydown",n),D&&s(b,null==S?void 0:S.splitKey).forEach(function(e){return D.addHotkey(d(e,null==S?void 0:S.combinationKey,null==S?void 0:S.description))}),function(){r.removeEventListener("keyup",i),r.removeEventListener("keydown",n),D&&s(b,null==S?void 0:S.splitKey).forEach(function(e){return D.removeHotkey(d(e,null==S?void 0:S.combinationKey,null==S?void 0:S.description))})}}},[b,S,k]),a}}},function(e){e.O(0,[898,789,917,525,461,139,397,183,44,349,34,630,658,888,774,179],function(){return e(e.s=31314)}),_N_E=e.O()}]);

package/out/_next/static/chunks/pages/slices-4a60cd5f2c71327e.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[436],{74600:function(e,t,n){var i=n(34311),o=n(23779),r=i(function(e,t,n){return e+(n?" ":"")+o(t)});e.exports=r},26688:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/slices",function(){return n(31562)}])},34166:function(e,t,n){"use strict";n.d(t,{nZ:function(){return d},rT:function(){return f},tB:function(){return u}});var i=n(52322),o=n(56803),r=n(2784),l=n(30195),s=n(94160),a=n(76611),c=n(5683);function d(e){let{type:t,library:n,sliceId:i,variationId:o,langSmithUrl:r}=e,l=(0,c.i)({type:t,library:n,sliceId:i,variationId:o}),s=JSON.stringify({langSmithUrl:r});localStorage.setItem(l,s)}function u(e){let{type:t,library:n,sliceId:i,variationId:o}=e,r=(0,c.i)({type:t,library:n,sliceId:i,variationId:o});localStorage.removeItem(r)}function f(e){let{type:t,library:n,sliceId:d,variationId:u}=e,{key:f,value:m,done:x}=function(e){let{type:t,library:n,sliceId:i,variationId:o}=e,r=(0,c.i)({type:t,library:n,sliceId:i,variationId:o}),[s,d]=(0,a.V)(r,void 0,{schema:l.z.object({langSmithUrl:l.z.string().url().optional()})});return{key:r,value:s,done:()=>d(void 0)}}({type:t,library:n,sliceId:d,variationId:u}),[h,p]=(0,r.useState)(),v=e=>()=>{m&&(p(f),s.Xe.track({event:"slice-generation-feedback",type:t,sliceId:d,variationId:u,feedback:e,langSmithUrl:m.langSmithUrl}),x())};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o.be,{children:(0,i.jsx)(o.bQ,{anchor:(0,i.jsx)(o.D,{width:"100%",justifyContent:"center",position:"absolute",bottom:64}),icon:"check",title:"Thanks for your feedback!",seconds:2,open:!!h,onOpenChange:e=>{e||p(void 0)}},h)}),(0,i.jsx)(o.i,{children:m&&(0,i.jsxs)(o.D,{flexDirection:"row",justifyContent:"end",gap:8,alignItems:"center",children:[(0,i.jsx)(o.bL,{color:"grey11",children:"Did the AI get it right?"}),(0,i.jsxs)(o.D,{flexDirection:"row",gap:4,children:[(0,i.jsx)(o.c3,{side:"bottom",sideOffset:4,variant:"text",content:"Looks good",children:(0,i.jsx)(o.aZ,{variant:"solid",size:"small",icon:"thumbUp",onClick:v("up")})}),(0,i.jsx)(o.c3,{side:"bottom",sideOffset:4,variant:"text",content:"Needs improvement",children:(0,i.jsx)(o.aZ,{variant:"solid",size:"small",icon:"thumbDown",onClick:v("down")})})]})]})})]})}},76611:function(e,t,n){"use strict";n.d(t,{V:function(){return o}});var i=n(2784);function o(e,t,n){let{schema:o}=null!=n?n:{},r=()=>{try{let n=localStorage.getItem(e);if(null==n)return t;if(!o)return JSON.parse(n);return o.parse(JSON.parse(n))}catch(e){return t}},[l,s]=(0,i.useState)(r),[a,c]=(0,i.useState)(e);return a!==e&&(c(e),s(r())),[l,(0,i.useCallback)(n=>{s(i=>{let o;if(void 0===(o="function"==typeof n?n(i):n)){try{localStorage.removeItem(e)}catch(e){return i}return t}try{localStorage.setItem(e,JSON.stringify(o))}catch(e){return i}return o})},[e,t])]}},33986:function(e,t,n){"use strict";n.d(t,{z:function(){return a}});var i=n(52322),o=n(2784),r=n(75289);let l=(e,t)=>e?"".concat(e,"-").concat(t):"",s=e=>{switch(e){case"white":case"secondaryMedium":case"secondarySmall":case"secondary":return"#1A1523";default:return"grey01"}},a=(0,o.forwardRef)((e,t)=>{let{label:n,Icon:o,type:a,form:c,isLoading:d=!1,disabled:u=!1,onClick:f,sx:m={},iconSize:x=16,iconFill:h,variant:p="primary",...v}=e;return(0,i.jsx)(r.zx,{ref:t,sx:{...m,display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",...d?{cursor:"wait !important"}:{}},type:a,form:c,disabled:u||d,onClick:d?void 0:f,variant:p,...v,children:d?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.$j,{size:x,color:s(p),"data-testid":l(v["data-testid"],"spinner")}),o&&n]}):(0,i.jsxs)(i.Fragment,{children:[o&&(0,i.jsx)(o,{size:x,fill:h,"data-testid":l(v["data-testid"],"icon")}),n]})})})},46999:function(e,t,n){"use strict";n.d(t,{W:function(){return l}});var i=n(52322),o=n(63397);n(2784);var r=n(75289);let l=e=>{let{name:t,label:n,placeholder:l,error:s,testId:a,onChange:c}=e;return(0,i.jsxs)(r.xu,{mb:3,children:[(0,i.jsx)(r.__,{htmlFor:t,mb:2,children:n}),(0,i.jsx)(o.gN,{name:t,type:"text",placeholder:l,as:r.II,autoComplete:"off",...c?{onChange:c}:null,...a?{"data-testid":a}:null}),s?(0,i.jsx)(r.xv,{"data-testid":a?"".concat(a,"-error"):"input-error",sx:{color:"error",mt:1},children:s}):null]})}},59532:function(e,t,n){"use strict";var i=n(52322),o=n(63397),r=n(37149),l=n.n(r),s=n(75289),a=n(33986),c=n(55862),d=n(30527);function u(e){let{children:t}=e,n=(0,d.W)();return(0,i.jsx)(s.kC,{sx:{position:"sticky",top:0,zIndex:1,p:"16px",pl:4,bg:"headSection",alignItems:"center",justifyContent:"space-between",borderTopLeftRadius:n,borderTopRightRadius:n,borderBottom:e=>{var t;return"1px solid ".concat(null===(t=e.colors)||void 0===t?void 0:t.borders)}},children:t})}t.Z=function(e){let{children:t,close:n,isOpen:r,formId:f,validate:m,onSubmit:x,widthInPx:h,initialValues:p,content:{title:v},cardProps:y,omitFooter:g=!1,isLoading:b=!1,buttonLabel:j="Save",testId:k,actionMessage:S}=e;return l().setAppElement("#__next"),(0,i.jsx)(c.Z,{isOpen:r,shouldCloseOnOverlayClick:!0,onRequestClose:n,contentLabel:v,style:{content:{width:null!=h?h:"900px"}},children:(0,i.jsx)(o.J9,{initialValues:p,validate:e=>m?m(e):void 0,onSubmit:e=>{x(e)},children:e=>{let{isValid:r,isSubmitting:l,values:c,errors:m,touched:x,setFieldValue:h,setValues:p}=e;return(0,i.jsx)(o.l0,{id:f,...null!=k?{"data-testid":k}:null,children:(0,i.jsx)(d.Z,{borderFooter:!0,footerSx:{p:3,position:"sticky",bottom:0,background:"gray"},bodySx:{px:4,py:4},sx:{border:"none"},...y,Header:(0,i.jsxs)(u,{children:[(0,i.jsx)(s.X6,{sx:{fontSize:"20px"},children:v}),(0,i.jsx)(s.x8,{type:"button",onClick:n})]}),Footer:g?null:(0,i.jsxs)(s.kC,{sx:{alignItems:"space-between"},children:[(0,i.jsx)(s.kC,{sx:{fontSize:"14px",alignItems:"center"},children:"function"==typeof S?S(e):S}),(0,i.jsxs)(s.kC,{sx:{ml:"auto"},children:[(0,i.jsx)(s.zx,{mr:2,type:"button",onClick:n,variant:"secondary",disabled:l||b,children:"Cancel"}),(0,i.jsx)(a.z,{label:j,form:f,type:"submit",disabled:!r||l||b,isLoading:l||b,sx:{fontWeight:"400",paddingBlock:"8px",paddingInline:"16px",fontSize:"14px",borderRadius:"4px"}})]})]}),children:t({isValid:r,isSubmitting:l,values:c,errors:m,touched:x,setFieldValue:h,setValues:p})})})}})})}},31562:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return Q}});var i=n(52322),o=n(56803),r=n(97729),l=n.n(r),s=n(5632),a=n(2784),c=n(56580),d=n(88932),u=n(65077),f=n(75289),m=n(43388),x=n(22654),h=n(63470),p=n(91589),v=n(27213),y=n(51507),g=n(27763),b=n(21442),j=n(51384),k=n(65186),S=n(59326),w=n(34166),C=n(80148);async function I(e){let{sliceName:t,sliceID:n,libraryID:i,sliceVariationIds:o,onSuccess:r}=e;try{let{errors:e}=await C.managerClient.slices.deleteSlice({libraryID:i,sliceID:n});if(e.length>0)throw e;o.forEach(e=>{(0,w.tB)({type:"model",library:i,sliceId:n,variationId:e})}),r(),d.Am.success("Successfully deleted slice “".concat(t,"”"))}catch(n){let e="An unexpected error happened while deleting slice “".concat(t,"”.");console.error(e,n),d.Am.error(e)}}var L=n(68968),E=n(33986),O=n(30527),R=n(55862),A=n(54597);let N=e=>{var t;let{isOpen:n,libName:o,sliceId:r,sliceName:l,sliceVariationIds:s,onClose:c}=e,[d,u]=(0,a.useState)(!1),{deleteSliceSuccess:m}=(0,A.Z)(),{syncChanges:x}=(0,L.g)(),{theme:h}=(0,S.B7)(),p=async()=>{u(!0),await I({libraryID:o,sliceID:r,sliceName:l,sliceVariationIds:s,onSuccess:()=>{m(r,o),x()}}),c(),u(!1)};return(0,i.jsx)(R.Z,{isOpen:n,shouldCloseOnOverlayClick:!0,style:{content:{maxWidth:612}},onRequestClose:c,children:(0,i.jsx)(O.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:(0,i.jsxs)(f.kC,{sx:{position:"sticky",background:"gray",top:0,zIndex:1,p:"16px",alignItems:"center",justifyContent:"space-between",borderBottom:e=>{var t;return"1px solid ".concat(String(null===(t=e.colors)||void 0===t?void 0:t.borders))}},children:[(0,i.jsxs)(f.kC,{sx:{alignItems:"center"},children:[(0,i.jsx)(k.$vK,{size:20,color:null===(t=h.colors)||void 0===t?void 0:t.greyIcon}),(0,i.jsx)(f.X6,{sx:{fontSize:"14px",fontWeight:"bold",ml:1},children:"Delete Slice"})]}),(0,i.jsx)(f.x8,{type:"button",onClick:c})]}),Footer:()=>(0,i.jsxs)(f.kC,{sx:{justifyContent:"flex-end",height:64,alignItems:"center",paddingRight:16,borderTop:e=>{var t;return"1px solid ".concat(String(null===(t=e.colors)||void 0===t?void 0:t.darkBorders))},backgroundColor:"gray"},children:[(0,i.jsx)(E.z,{label:"Cancel",variant:"secondary",onClick:c,sx:{mr:"10px",fontWeight:"bold",color:"grey12",borderRadius:6}}),(0,i.jsx)(E.z,{label:"Delete",variant:"danger",isLoading:d,sx:{minHeight:39,minWidth:78},onClick:()=>{p()}})]}),children:(0,i.jsxs)(f.nv,{children:["This action will immediately make the following changes:",(0,i.jsxs)("ul",{children:[(0,i.jsxs)("li",{children:["Delete the"," ",(0,i.jsxs)(f.xv,{sx:{fontWeight:"bold"},children:[o,"/",l,"/"]})," ","directory."]}),(0,i.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,i.jsx)("ul",{children:(0,i.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."]})})})};var z=n(36887),D=n(94160),_=e=>{let{title:t,onCreateNew:n,buttonText:o,documentationComponent:r,videoPublicIdUrl:l,...s}=e;return(0,i.jsxs)(f.xu,{sx:{display:"flex",width:"80%",flexWrap:"wrap",justifyContent:"center"},...s,children:[(0,i.jsx)(f.xu,{sx:e=>{var t;return{display:"flex",flex:1,alignItems:"center",minWidth:"400px",maxWidth:"70%",border:"1px solid ".concat(null===(t=e.colors)||void 0===t?void 0:t.grey02)}},children:(0,i.jsx)(z.nk,{cloudName:"dmtf1daqp",controls:!0,loop:!0,style:{maxWidth:"100%",objectFit:"contain"},publicId:l,onPlay:()=>{D.Xe.track({event:"open-video-tutorials",video:l})}})}),(0,i.jsxs)(f.xu,{sx:e=>{var t;return{bg:"white",display:"flex",flexDirection:"column",border:"1px solid ".concat(null===(t=e.colors)||void 0===t?void 0:t.grey02),flex:1,minWidth:"400px",maxWidth:"70%"}},children:[(0,i.jsxs)(f.xu,{sx:e=>{var t;return{display:"flex",flexDirection:"column",p:4,borderBottom:"1px solid ".concat(null===(t=e.colors)||void 0===t?void 0:t.grey02)}},children:[(0,i.jsx)(f.X6,{as:"h3",variant:"heading",sx:{fontSize:"16px",lineHeight:"24px",mb:2},children:t}),(0,i.jsx)(f.xv,{variant:"xs",sx:{lineHeight:"24px",fontSize:"13px"},children:r})]}),(0,i.jsxs)(f.xu,{sx:{display:"flex",p:4,alignItems:"center"},children:[(0,i.jsx)(f.zx,{onClick:n,"data-testid":"empty-state-main-button",sx:{display:"flex",justifyContent:"center",alignItems:"center",flexShrink:0,mr:4},children:o}),(0,i.jsx)(f.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"})]})]})]})},W=n(6256),P=n(63908),F=n(26109);async function Z(e){let{slice:t,newSliceName:n,onSuccess:i}=e;try{let e=(0,P.PQ)(t,n),{errors:o}=await C.managerClient.slices.renameSlice({libraryID:t.from,model:F.id.fromSM(e.model)});if(o.length>0)throw o;i(e),d.Am.success("Slice name updated")}catch(n){let e="An unexpected error happened while renaming “".concat(t.model.name,"”.");console.error(e,n),d.Am.error(e)}}var T=n(7723),B=n(59532),K=n(46999),H=n(63019);let X=e=>{var t,n;let{slice:o,isOpen:r,onClose:l}=e,{renameSliceSuccess:s}=(0,A.Z)(),{syncChanges:a}=(0,L.g)(),{localLibs:d,remoteLibs:u}=(0,c.v9)(e=>({localLibs:(0,T.Sd)(e),remoteLibs:(0,T.sT)(e)})),m=null!==(t=null==o?void 0:o.model.name)&&void 0!==t?t:"",x=async e=>{o&&(await Z({slice:o,newSliceName:e.sliceName,onSuccess:e=>{s(e.from,e.model),a()}}),l())};return(0,i.jsx)(B.Z,{testId:"rename-slice-modal",isOpen:r,widthInPx:"530px",formId:"rename-slice-modal-".concat(null!==(n=null==o?void 0:o.model.id)&&void 0!==n?n:""),close:l,buttonLabel:"Rename",onSubmit:e=>void x(e),initialValues:{sliceName:m},content:{title:"Rename a slice"},validate:e=>(0,H.h)(e,d,u),children:e=>{let{touched:t,errors:n}=e;return(0,i.jsx)(f.xu,{children:(0,i.jsx)(K.W,{name:"sliceName",label:"Slice Name","data-testid":"slice-name-input",placeholder:"Pascalised Slice API ID (e.g. TextBlock)",error:t.sliceName?n.sliceName:void 0,testId:"slice-name-input"})})}})};var U=n(21151),M=n(68105),V=n(39204),J=n(7974),q=n(31860),Q=()=>{var e,t,n,r;let k=(0,x.l)(),S=(0,s.useRouter)(),{modalPayload:w,onOpenModal:I}=(0,b.H)(),{openLoginModal:L}=(0,A.Z)(),E=(0,h.k)(),O=(0,v.F)({menuType:"Dropdown",sectionsNamingExperiment:E}),{sliceFilterFn:R,defaultVariationSelector:z}=w,{remoteSlices:D,libraries:P}=(0,c.v9)(e=>({remoteSlices:(0,T.sT)(e),libraries:(0,T.Sd)(e)})),[F,Z]=(0,a.useState)(!1),[B,K]=(0,a.useState)(!1),[H,Q]=(0,a.useState)(!1),[Y,G]=(0,a.useState)(!1),$=P.filter(e=>e.isLocal),ee=P.map(e=>(e.components=[...e.components].sort((e,t)=>e.model.name.localeCompare(t.model.name)),e)),et=(P||[]).map(e=>e.components).flat(),en=et.length,[ei,eo]=(0,a.useState)(),er=()=>{K(!0)},el=()=>{Q(!0)},es=async()=>{await C.managerClient.user.checkIsLoggedIn()?G(!0):L()},ea=()=>{G(!1)};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(l(),{children:(0,i.jsxs)("title",{children:[(0,q._)((0,q.f)(E.value))," - Slice Machine"]})}),(0,i.jsxs)(j.LN,{children:[(0,i.jsxs)(j.wd,{children:[(0,i.jsx)(j.Cx,{children:(0,i.jsx)(m.g,{children:(0,q._)((0,q.f)(E.value))})}),(null==$?void 0:$.length)!==0&&0!==en?(0,i.jsxs)(o.ar,{children:[(0,i.jsx)(o.av,{children:(0,i.jsx)(o.E,{color:"purple",startIcon:"add","data-testid":"add-new-slice-dropdown",children:"Add"})}),(0,i.jsxs)(o.as,{align:"end",children:[k.eligible&&(0,i.jsx)(o.at,{renderStartIcon:()=>O.fromImage.BackgroundIcon,onSelect:()=>void es(),description:O.fromImage.description,children:O.fromImage.title}),(0,i.jsx)(o.at,{renderStartIcon:()=>O.fromScratch.BackgroundIcon,onSelect:()=>Z(!0),description:O.fromScratch.description,children:O.fromScratch.title})]})]}):void 0]}),(0,i.jsxs)(j.RN,{children:[(0,i.jsx)(u.xR,{sx:{display:"flex",flexDirection:"column"},children:ee.length>0?(0,i.jsx)(f.kC,{sx:{flex:1,flexDirection:"column"},children:0===en?(0,i.jsx)(f.kC,{sx:{flex:1,justifyContent:"center",alignItems:"center"},children:(0,i.jsx)(_,{title:"What are ".concat((0,q._)(E.value),"?"),onCreateNew:()=>{Z(!0)},buttonText:"Create one",videoPublicIdUrl:J.rd,documentationComponent:(0,i.jsxs)(i.Fragment,{children:[(0,q._)((0,q.f)(E.value))," ",'are sections of your website. Prismic documents contain a dynamic "',(0,q.f)(E.value)," ",'Zone" that allows content creators to add, edit, and rearrange ',(0,q._)(E.value)," ","to compose dynamic layouts for any page design."," ",(0,i.jsx)(f.rU,{target:"_blank",href:"https://prismic.io/docs/core-concepts/slices",sx:e=>{var t;return{color:null==e?void 0:null===(t=e.colors)||void 0===t?void 0:t.primary}},children:"Learn more"}),"."]}),"data-testid":"slices-table-blank-slate"})}):ee.map(e=>{let{name:t,isLocal:n,components:o}=e;return(0,i.jsxs)(f.kC,{sx:{flexDirection:"column","&:not(:last-of-type)":{mb:4}},children:[(0,i.jsxs)(f.kC,{sx:{alignItems:"center",justifyContent:"space-between"},children:[(0,i.jsx)(f.kC,{sx:{alignItems:"center",fontSize:3,lineHeight:"48px",fontWeight:"heading",mb:1},children:(0,i.jsx)(f.xv,{children:E.eligible&&1===ee.length?"Your ".concat((0,q._)(E.value)):t})}),!n&&(0,i.jsx)("p",{children:"⚠️ External libraries are read-only"})]}),(0,i.jsx)(U.Z,{elems:o,defineElementKey:e=>e.model.name,renderElem:e=>(0,i.jsx)(y.b,{action:{type:"menu",onRemove:()=>{eo(e),er()},onRename:()=>{eo(e),el()}},mode:"navigation",onUpdateScreenshot:()=>{I({sliceFilterFn:t=>t.filter(t=>t.model.id===e.model.id)})},slice:e,variant:"solid"}),gridGap:"32px 16px"})]},t)})}):void 0}),(null==$?void 0:$.length)>0&&(0,i.jsx)(M.Z,{slices:R(et),defaultVariationSelector:z}),(null==$?void 0:$.length)>0&&F&&(0,i.jsx)(W.c,{localLibraries:$,location:"slices",remoteSlices:D,onSuccess:(e,t)=>{let n=e.variations[0].id,i=g.Y.getBuilderPagePathname({libraryName:t,sliceName:e.name,variationId:n});S.push(i),d.Am.success((0,V.kQ)({sectionsNamingExperiment:E,path:"".concat(t,"/").concat(e.name,"/model.json")}))},onClose:()=>{Z(!1)}}),(0,i.jsx)(X,{isOpen:H,slice:ei,onClose:()=>{Q(!1)},"data-testid":"rename-slice-modal"}),(0,i.jsx)(N,{isOpen:B,libName:null!==(e=null==ei?void 0:ei.from)&&void 0!==e?e:"",sliceId:null!==(t=null==ei?void 0:ei.model.id)&&void 0!==t?t:"",sliceName:null!==(n=null==ei?void 0:ei.model.name)&&void 0!==n?n:"",sliceVariationIds:(null!==(r=null==ei?void 0:ei.model.variations)&&void 0!==r?r:[]).map(e=>e.id),onClose:()=>{K(!1)}}),(0,i.jsx)(p.S,{open:Y,location:"slices",onSuccess:e=>{let{library:t}=e;d.Am.success((0,i.jsx)(V.GX,{message:"".concat((0,q.f)(E.value),"(s) added to ").concat(E.value," zone and created at: "),path:t})),ea()},onClose:ea})]})]})]})}},5683:function(e,t,n){"use strict";n.d(t,{i:function(){return r},v:function(){return o}});let i=e=>"slice-machine_".concat(e),o=i("staticFieldsInfoDialogDismissed");function r(e){let{type:t,library:n,sliceId:o,variationId:r}=e;return i(["ai-feedback",t,n,o,r].join("#"))}},76473:function(e,t,n){"use strict";n.d(t,{y1:function(){return b}});var i=n(2784);function o(){return(o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}n(52322);var r=["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 s(e){return(l[e]||e).trim().toLowerCase().replace(/key|digit|numpad|arrow/,"")}function a(e,t){return void 0===t&&(t=","),e.split(t)}function c(e,t,n){void 0===t&&(t="+");var i=e.toLocaleLowerCase().split(t).map(function(e){return s(e)}),l={alt:i.includes("alt"),ctrl:i.includes("ctrl")||i.includes("control"),shift:i.includes("shift"),meta:i.includes("meta"),mod:i.includes("mod")},a=i.filter(function(e){return!r.includes(e)});return o({},l,{keys:a,description:n})}"undefined"!=typeof document&&(document.addEventListener("keydown",function(e){void 0!==e.key&&f([s(e.key),s(e.code)])}),document.addEventListener("keyup",function(e){void 0!==e.key&&m([s(e.key),s(e.code)])})),"undefined"!=typeof window&&window.addEventListener("blur",function(){d.clear()});var d=new Set;function u(e){return Array.isArray(e)}function f(e){var t=Array.isArray(e)?e:[e];d.has("meta")&&d.forEach(function(e){return!r.includes(e)&&d.delete(e.toLowerCase())}),t.forEach(function(e){return d.add(e.toLowerCase())})}function m(e){var t=Array.isArray(e)?e:[e];"meta"===e?d.clear():t.forEach(function(e){return d.delete(e.toLowerCase())})}function x(e,t){var n=e.target;void 0===t&&(t=!1);var i=n&&n.tagName;return u(t)?!!(i&&t&&t.some(function(e){return e.toLowerCase()===i.toLowerCase()})):!!(i&&t&&!0===t)}var h=function(e,t,n){void 0===n&&(n=!1);var i,o=t.alt,r=t.meta,l=t.mod,a=t.shift,c=t.ctrl,f=t.keys,m=e.key,x=e.code,h=e.ctrlKey,p=e.metaKey,v=e.shiftKey,y=e.altKey,g=s(x),b=m.toLowerCase();if(!n){if(!y===o&&"alt"!==b||!v===a&&"shift"!==b)return!1;if(l){if(!p&&!h)return!1}else if(!p===r&&"meta"!==b&&"os"!==b||!h===c&&"ctrl"!==b&&"control"!==b)return!1}return!!(f&&1===f.length&&(f.includes(b)||f.includes(g)))||(f?(void 0===i&&(i=","),(u(f)?f:f.split(i)).every(function(e){return d.has(e.trim().toLowerCase())})):!f)},p=(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()},g="undefined"!=typeof window?i.useLayoutEffect:i.useEffect;function b(e,t,n,o){var r,l=(0,i.useRef)(null),d=(0,i.useRef)(!1),b=n instanceof Array?o instanceof Array?void 0:o:n,j=u(e)?e.join(null==b?void 0:b.splitKey):e,k=n instanceof Array?n:o instanceof Array?o:void 0,S=(0,i.useCallback)(t,null!=k?k:[]),w=(0,i.useRef)(S);k?w.current=S:w.current=t;var C=(!function e(t,n){return t&&n&&"object"==typeof t&&"object"==typeof n?Object.keys(t).length===Object.keys(n).length&&Object.keys(t).reduce(function(i,o){return i&&e(t[o],n[o])},!0):t===n}((r=(0,i.useRef)(void 0)).current,b)&&(r.current=b),r.current),I=(0,i.useContext)(v).enabledScopes,L=(0,i.useContext)(p);return g(function(){if((null==C?void 0:C.enabled)!==!1&&(e=null==C?void 0:C.scopes,0===I.length&&e?(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):!!(!e||I.some(function(t){return e.includes(t)})||I.includes("*")))){var e,t=function(e,t){var n;if(void 0===t&&(t=!1),!(x(e,["input","textarea","select"])&&!x(e,null==C?void 0:C.enableOnFormTags)||null!=C&&null!=C.ignoreEventWhen&&C.ignoreEventWhen(e))){if(null!==l.current&&document.activeElement!==l.current&&!l.current.contains(document.activeElement)){y(e);return}(null==(n=e.target)||!n.isContentEditable||null!=C&&C.enableOnContentEditable)&&a(j,null==C?void 0:C.splitKey).forEach(function(n){var i,o,r,l=c(n,null==C?void 0:C.combinationKey);if(h(e,l,null==C?void 0:C.ignoreModifiers)||null!=(r=l.keys)&&r.includes("*")){if(t&&d.current)return;if(("function"==typeof(i=null==C?void 0:C.preventDefault)&&i(e,l)||!0===i)&&e.preventDefault(),"function"==typeof(o=null==C?void 0:C.enabled)?!o(e,l):!0!==o&&void 0!==o){y(e);return}w.current(e,l),t||(d.current=!0)}})}},n=function(e){void 0!==e.key&&(f(s(e.code)),((null==C?void 0:C.keydown)===void 0&&(null==C?void 0:C.keyup)!==!0||null!=C&&C.keydown)&&t(e))},i=function(e){void 0!==e.key&&(m(s(e.code)),d.current=!1,null!=C&&C.keyup&&t(e,!0))},o=l.current||(null==b?void 0:b.document)||document;return o.addEventListener("keyup",i),o.addEventListener("keydown",n),L&&a(j,null==C?void 0:C.splitKey).forEach(function(e){return L.addHotkey(c(e,null==C?void 0:C.combinationKey,null==C?void 0:C.description))}),function(){o.removeEventListener("keyup",i),o.removeEventListener("keydown",n),L&&a(j,null==C?void 0:C.splitKey).forEach(function(e){return L.removeHotkey(c(e,null==C?void 0:C.combinationKey,null==C?void 0:C.description))})}}},[j,C,I]),l}}},function(e){e.O(0,[898,789,397,44,34,658,268,888,774,179],function(){return e(e.s=26688)}),_N_E=e.O()}]);

package/out/_next/static/css/e5f781f20e24a5ea.css

@@ -1 +0,0 @@
-.FieldSet_flex__r2Zbg{all:unset;display:flex}.FieldSet_column__esHjW{flex-direction:column}.FieldSet_root__MYqY8{border-color:var(--grey6);border-radius:6px;border-style:solid;border-width:1px;box-shadow:var(--box-shadow-1);overflow-x:hidden}.FieldSet_row__DZZjD{align-items:center;flex-direction:row;gap:8px;padding-inline:16px}.FieldSet_borderBottom__WVCMK{box-sizing:border-box}.FieldSet_borderBottom__WVCMK:not(:last-child){border-bottom:1px solid var(--grey6)}.FieldSet_legend__4k9_l{background-color:var(--grey2);height:48px;order:0}.FieldSet_header__cR_f3{background-color:var(--grey2);height:72px;order:1}.FieldSet_content__WzxRs{background-color:var(--grey1);order:2;padding:16px}.FieldSet_list__mILoo{max-height:256px;order:2;overflow-y:auto}.FieldSet_listItem__QOhSB{background-color:var(--grey1);flex-shrink:0;height:64px}.FieldSet_borderTop__KfoL_:not(:first-child){box-shadow:0 -1px 0 0 var(--grey6)}.FieldSet_footer__1VWxY{background-color:var(--grey1);height:48px;order:3;padding-right:8px}

package/out/settings.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cc9b10286400c2b9.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cc9b10286400c2b9.css" data-n-g=""/><link rel="preload" href="/_next/static/css/e5f781f20e24a5ea.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e5f781f20e24a5ea.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="/_next/static/chunks/webpack-b3522fdebabf510a.js" defer=""></script><script src="/_next/static/chunks/framework-ab7ddb551c23d05a.js" defer=""></script><script src="/_next/static/chunks/main-c46f4dcf6e3174bd.js" defer=""></script><script src="/_next/static/chunks/pages/_app-33d293c68b7c0a17.js" defer=""></script><script src="/_next/static/chunks/397-e6c340070a3bcb41.js" defer=""></script><script src="/_next/static/chunks/pages/settings-01f4aeb9112a1f87.js" defer=""></script><script src="/_next/static/8xVz5YQwOY20VZPYTBtRF/_buildManifest.js" defer=""></script><script src="/_next/static/8xVz5YQwOY20VZPYTBtRF/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/settings","query":{},"buildId":"8xVz5YQwOY20VZPYTBtRF","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>

package/src/components/FieldSet/FieldSet.module.css

@@ -1,84 +0,0 @@
-.flex {
-  all: unset;
-  display: flex;
-}
-
-.column {
-  composes: flex;
-  flex-direction: column;
-}
-
-.root {
-  composes: column;
-  border-color: var(--grey6);
-  border-radius: 6px;
-  border-style: solid;
-  border-width: 1px;
-  box-shadow: var(--box-shadow-1);
-  overflow-x: hidden;
-}
-
-.row {
-  composes: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: 8px;
-  padding-inline: 16px;
-}
-
-.borderBottom {
-  box-sizing: border-box;
-  &:not(:last-child) {
-    border-bottom-color: var(--grey6);
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-  }
-}
-
-.legend {
-  composes: row borderBottom;
-  background-color: var(--grey2);
-  height: 48px;
-  order: 0;
-}
-
-.header {
-  composes: row borderBottom;
-  background-color: var(--grey2);
-  height: 72px;
-  order: 1;
-}
-
-.content {
-  composes: column;
-  background-color: var(--grey1);
-  order: 2;
-  padding: 16px;
-}
-
-.list {
-  composes: column;
-  max-height: 256px;
-  order: 2;
-  overflow-y: auto;
-}
-
-.listItem {
-  composes: row borderBottom;
-  background-color: var(--grey1);
-  flex-shrink: 0;
-  height: 64px;
-}
-
-.borderTop:not(:first-child) {
-  /* stylelint-disable-next-line declaration-property-value-allowed-list -- Displays a 1 px top border outside the element. */
-  box-shadow: 0 -1px 0 0 var(--grey6);
-}
-
-.footer {
-  composes: row borderTop;
-  background-color: var(--grey1);
-  height: 48px;
-  order: 3;
-  padding-right: 8px;
-}

package/src/components/FieldSet/FieldSet.module.css.d.ts

@@ -1,16 +0,0 @@
-declare const styles: {
-  readonly "borderBottom": string;
-  readonly "borderTop": string;
-  readonly "column": string;
-  readonly "content": string;
-  readonly "flex": string;
-  readonly "footer": string;
-  readonly "header": string;
-  readonly "legend": string;
-  readonly "list": string;
-  readonly "listItem": string;
-  readonly "root": string;
-  readonly "row": string;
-};
-export = styles;
-

package/src/components/FieldSet/FieldSet.stories.tsx

@@ -1,244 +0,0 @@
-import {
-  Box,
-  Button,
-  ButtonGroup,
-  IconButton,
-  Select,
-  SelectItem,
-  Skeleton,
-  Text,
-  theme,
-} from "@prismicio/editor-ui";
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { BitbucketIcon } from "../../icons/BitbucketIcon";
-import { GitHubIcon } from "../../icons/GitHubIcon";
-import { GitLabIcon } from "../../icons/GitLabIcon";
-import {
-  FieldSet,
-  FieldSetContent,
-  FieldSetFooter,
-  FieldSetHeader,
-  FieldSetLegend,
-  FieldSetList,
-  FieldSetListItem,
-} from "./FieldSet";
-
-type Story = StoryObj<typeof meta>;
-
-const meta = {
-  component: FieldSet,
-  argTypes: {
-    children: { control: { disable: true } },
-  },
-} satisfies Meta<typeof FieldSet>;
-
-export default meta;
-
-export const Default = {
-  args: {
-    children: (
-      <>
-        <FieldSetLegend />
-        <FieldSetHeader />
-        <FieldSetList>
-          <FieldSetListItem action={<Button color="grey">Action</Button>} />
-        </FieldSetList>
-        <FieldSetFooter action={<IconButton icon="openInNew" />} />
-      </>
-    ),
-  },
-} satisfies Story;
-
-export const WithButtonGroupContent = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
-        <FieldSetContent>
-          <ButtonGroup color="grey">
-            <Button
-              renderStartIcon={() => <GitHubIcon color={theme.color.grey11} />}
-              sx={{ flexBasis: 0, flexGrow: 1 }}
-            >
-              GitHub
-            </Button>
-            <Button
-              disabled
-              renderStartIcon={() => (
-                <BitbucketIcon color={theme.color.grey11} />
-              )}
-              sx={{ flexBasis: 0, flexGrow: 1 }}
-            >
-              Bitbucket{" "}
-              <Text color="inherit" variant="small">
-                (soon)
-              </Text>
-            </Button>
-            <Button
-              disabled
-              renderStartIcon={() => <GitLabIcon color={theme.color.grey11} />}
-              sx={{ flexBasis: 0, flexGrow: 1 }}
-            >
-              GitLab{" "}
-              <Text color="inherit" variant="small">
-                (soon)
-              </Text>
-            </Button>
-          </ButtonGroup>
-        </FieldSetContent>
-        <FieldSetFooter action={<IconButton icon="openInNew" />}>
-          Learn more about Prismic for Git
-        </FieldSetFooter>
-      </>
-    ),
-  },
-  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
-} satisfies Story;
-
-export const LoadingWithHeaderAndList = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
-        <FieldSetHeader>
-          <OwnerSelect disabled />
-        </FieldSetHeader>
-        <FieldSetList>
-          {[...Array(4).keys()].map((index) => (
-            <FieldSetListItem
-              action={<Skeleton height={32} width={67.59} />}
-              key={index}
-            >
-              <Skeleton
-                height={24}
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore TODO(DT-1918): add `verticalAlign: "middle"` to the `sx` prop.
-                sx={{ verticalAlign: "middle" }}
-                width={129.92}
-              />
-            </FieldSetListItem>
-          ))}
-        </FieldSetList>
-        <FieldSetFooter action={<IconButton icon="openInNew" />}>
-          Learn more about Prismic for Git
-        </FieldSetFooter>
-      </>
-    ),
-  },
-  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
-};
-
-export const WithHeaderAndListOverflow = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
-        <FieldSetHeader>
-          <OwnerSelect />
-        </FieldSetHeader>
-        <FieldSetList>
-          {[...Array(100).keys()].map((index) => (
-            <FieldSetListItem
-              action={<Button color="grey">Connect</Button>}
-              key={index}
-            >
-              Repository <Text color="grey11">• xd ago</Text>
-            </FieldSetListItem>
-          ))}
-        </FieldSetList>
-        <FieldSetFooter action={<IconButton icon="openInNew" />}>
-          Learn more about Prismic for Git
-        </FieldSetFooter>
-      </>
-    ),
-  },
-  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
-};
-
-export const WithSingleListItem = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
-        <FieldSetList>
-          <FieldSetListItem action={<Button color="grey">Disconnect</Button>}>
-            Repository <Text color="grey11">• xd ago</Text>
-          </FieldSetListItem>
-        </FieldSetList>
-        <FieldSetFooter action={<IconButton icon="openInNew" />}>
-          Learn more about Prismic for Git
-        </FieldSetFooter>
-      </>
-    ),
-  },
-  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
-};
-
-export const WithHeaderAndBoxContent = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
-        <FieldSetHeader>
-          <OwnerSelect />
-        </FieldSetHeader>
-        <FieldSetContent>
-          <Box
-            flexDirection="column"
-            /*
-             * TODO: these `padding` values actually don't match Figma, but they
-             * are the closest allowed by the `Box` component.
-             */
-            padding={{ block: 72, inline: 100 }}
-          >
-            <Text align="center" variant="emphasized">
-              No Results Found
-            </Text>
-            <Text align="center" color="grey11">
-              Try selecting a different Git account or organization on the top
-              left.
-            </Text>
-          </Box>
-        </FieldSetContent>
-        <FieldSetFooter action={<IconButton icon="openInNew" />}>
-          Learn more about Prismic for Git
-        </FieldSetFooter>
-      </>
-    ),
-  },
-  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
-};
-
-type OwnerSelectProps = { disabled?: boolean };
-
-function OwnerSelect(props: OwnerSelectProps) {
-  return (
-    <Select
-      {...props}
-      color="grey"
-      constrainContentWidth
-      flexContent
-      placeholder="Owner"
-      renderStartIcon={() => <GitHubIcon color={theme.color.grey11} />}
-      size="large"
-      sx={{ width: "calc(50% - 8px)" }}
-    >
-      {[...Array(2).keys()].map((index) => (
-        <SelectItem
-          key={index}
-          renderStartIcon={() => <GitHubIcon color={theme.color.grey11} />}
-          size="large"
-          value={`owner-${index}`}
-        >
-          Owner
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}

package/src/components/FieldSet/FieldSet.tsx

@@ -1,67 +0,0 @@
-import { Text } from "@prismicio/editor-ui";
-import type { FC, PropsWithChildren, ReactNode } from "react";
-
-import styles from "./FieldSet.module.css";
-
-export const FieldSet: FC<PropsWithChildren> = (props) => (
-  <div {...props} className={styles.root} />
-);
-
-export const FieldSetLegend: FC<PropsWithChildren> = ({
-  children,
-  ...otherProps
-}) => (
-  <div {...otherProps} className={styles.legend}>
-    <Text color="grey11" component="span" noWrap variant="smallBold">
-      {children}
-    </Text>
-  </div>
-);
-
-export const FieldSetHeader: FC<PropsWithChildren> = (props) => (
-  <div {...props} className={styles.header} />
-);
-
-export const FieldSetContent: FC<PropsWithChildren> = (props) => (
-  <div {...props} className={styles.content} />
-);
-
-export const FieldSetList: FC<PropsWithChildren> = (props) => (
-  <ul {...props} className={styles.list} />
-);
-
-type FieldSetListItemProps = PropsWithChildren<{ action?: ReactNode }>;
-
-export const FieldSetListItem: FC<FieldSetListItemProps> = ({
-  action,
-  children,
-  ...otherProps
-}) => (
-  <li {...otherProps} className={styles.listItem}>
-    <Text component="span" noWrap variant="bold" sx={{ flexGrow: 1 }}>
-      {children}
-    </Text>
-    {action}
-  </li>
-);
-
-type FieldSetFooterProps = PropsWithChildren<{ action?: ReactNode }>;
-
-export const FieldSetFooter: FC<FieldSetFooterProps> = ({
-  action,
-  children,
-  ...otherProps
-}) => (
-  <div {...otherProps} className={styles.footer}>
-    <Text
-      color="grey11"
-      component="span"
-      noWrap
-      variant="small"
-      sx={{ flexGrow: 1 }}
-    >
-      {children}
-    </Text>
-    {action}
-  </div>
-);

package/src/components/FieldSet/index.ts

@@ -1,9 +0,0 @@
-export {
-  FieldSet,
-  FieldSetContent,
-  FieldSetFooter,
-  FieldSetHeader,
-  FieldSetLegend,
-  FieldSetList,
-  FieldSetListItem,
-} from "./FieldSet";

package/src/features/settings/SettingsPage.tsx

@@ -1,50 +0,0 @@
-import { Box } from "@prismicio/editor-ui";
-import Head from "next/head";
-import { useRouter } from "next/router";
-import { type FC, useEffect } from "react";
-
-import { BreadcrumbItem } from "@/components/Breadcrumb";
-import { ConnectGitRepository } from "@/features/settings/git/ConnectGitRepository";
-import { useGitIntegrationExperiment } from "@/features/settings/git/useGitIntegrationExperiment";
-import {
-  AppLayout,
-  AppLayoutBreadcrumb,
-  AppLayoutContent,
-  AppLayoutHeader,
-} from "@/legacy/components/AppLayout";
-
-export const SettingsPage: FC = () => {
-  const gitIntegrationExperiment = useGitIntegrationExperiment();
-  const router = useRouter();
-
-  // TODO(DT-1801): implement a 404 page.
-  useEffect(() => {
-    if (!gitIntegrationExperiment.eligible) {
-      void router.replace("/");
-    }
-  }, [gitIntegrationExperiment.eligible, router]);
-
-  if (!gitIntegrationExperiment.eligible) {
-    return null;
-  }
-
-  return (
-    <>
-      <Head>
-        <title>Settings - Slice Machine</title>
-      </Head>
-      <AppLayout>
-        <AppLayoutHeader>
-          <AppLayoutBreadcrumb>
-            <BreadcrumbItem>Settings</BreadcrumbItem>
-          </AppLayoutBreadcrumb>
-        </AppLayoutHeader>
-        <AppLayoutContent>
-          <Box flexDirection="column" maxWidth={600}>
-            <ConnectGitRepository />
-          </Box>
-        </AppLayoutContent>
-      </AppLayout>
-    </>
-  );
-};