slice-machine-ui 2.18.1-alpha.jp-unauthorized-error-improvement.5 → 2.18.1-alpha.jp-unauthorized-error-improvement.7

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

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[33],{30755:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/slices/[lib]/[sliceName]/[variation]/simulator",function(){return n(49823)}])},44309:function(e,t,n){"use strict";n.d(t,{Z:function(){return l}});var r=n(5632),i=n(56580),o=n(7723);let s=(e,t,n)=>{var r;let i=null===(r=(0,o.Sd)(e))||void 0===r?void 0:r.find(e=>e.name.replace(/\//g,"--")===t);return null==i?void 0:i.components.find(e=>e.model.name===n)};var l=()=>{let e=(0,r.useRouter)(),{slice:t}=(0,i.v9)(t=>({slice:s(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}:{}}},33986:function(e,t,n){"use strict";n.d(t,{z:function(){return a}});var r=n(52322),i=n(2784),o=n(75289);let s=(e,t)=>e?"".concat(e,"-").concat(t):"",l=e=>{switch(e){case"white":case"secondaryMedium":case"secondarySmall":case"secondary":return"#1A1523";default:return"grey01"}},a=(0,i.forwardRef)((e,t)=>{let{label:n,Icon:i,type:a,form:c,isLoading:d=!1,disabled:u=!1,onClick:x,sx:h={},iconSize:p=16,iconFill:m,variant:g="primary",...f}=e;return(0,r.jsx)(o.zx,{ref:t,sx:{...h,display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",...d?{cursor:"wait !important"}:{}},type:a,form:c,disabled:u||d,onClick:d?void 0:x,variant:g,...f,children:d?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(o.$j,{size:p,color:l(g),"data-testid":s(f["data-testid"],"spinner")}),i&&n]}):(0,r.jsxs)(r.Fragment,{children:[i&&(0,r.jsx)(i,{size:p,fill:m,"data-testid":s(f["data-testid"],"icon")}),n]})})})},30527:function(e,t,n){"use strict";n.d(t,{Z:function(){return c},W:function(){return a}});var r=n(52322),i=n(2784),o=n(75289);let s=e=>{let{bg:t,background:n,sx:i,withRadius:s,radius:l,children:a}=e;return(0,r.jsx)(o.xu,{sx:{p:4,bg:t||n,...s?{borderBottomLeftRadius:l,borderBottomRightRadius:l}:null,...i},children:a})},l=(0,i.createContext)("6px"),a=()=>(0,i.useContext)(l),c=e=>{let{Header:t=null,SubHeader:n=null,Body:i=null,Footer:a=null,borderFooter:c=!1,radius:d="6px",bodySx:u={},footerSx:x={},sx:h=null,bg:p,background:m,children:g,...f}=e;return(0,r.jsx)(l.Provider,{value:d,children:(0,r.jsxs)(o.Zb,{sx:{border:e=>{var t;return"1px solid ".concat(String(null===(t=e.colors)||void 0===t?void 0:t.borders))},borderRadius:d,...h},...f,children:[t||null,n||null,(0,r.jsxs)(s,{bg:p,background:m,sx:u,withRadius:!a,children:[i?(0,r.jsx)(i,{}):null,g||null]}),a?(0,r.jsx)(s,{bg:p,background:m,sx:{...c?{borderTop:e=>{let{colors:t}=e;return"1px solid ".concat(String(null==t?void 0:t.borders))}}:null,...x},radius:d,withRadius:!0,children:"object"==typeof a?a:(0,r.jsx)(a,{})}):null]})})}},77823:function(e,t,n){"use strict";n.d(t,{q:function(){return a}});var r=n(52322),i=n(2784),o=n(65186),s=n(75289);let l=(0,i.memo)(e=>{let{src:t}=e;return(0,r.jsx)(s.Ee,{src:t,alt:"Preview image",sx:{maxHeight:"100%"}})}),a=e=>{let{src:t,sx:n}=e;return(0,r.jsx)(s.kC,{sx:{position:"relative",alignItems:"center",justifyContent:"center",overflow:"hidden",backgroundImage:"url(/pattern.png)",backgroundColor:"headSection",backgroundRepeat:"repeat",backgroundSize:"20px",borderRadius:"4px",...n},children:void 0!==t?(0,r.jsx)(l,{src:t}):(0,r.jsxs)(s.xv,{sx:{display:"flex",flexDirection:"column",alignItems:"center"},children:[(0,r.jsx)(o.eJU,{}),"You have no screenshot yet."]})})}},49823:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return en}});var r,i,o=n(52322),s=n(97729),l=n.n(s),a=n(5632),c=n.n(a),d=n(44309),u=n(86753),x=n(14226),h=n(25242),p=n(25865),m=n(14010),g=n(2784),f=n(56580),v=n(88932),b=n(75289),j=n(65077),C=n(94160),k=n(9385),w=function(e,t,n){let[r,i]=(0,g.useState)(e()),o=(0,g.useRef)(Date.now());return(0,g.useEffect)(()=>{let n=setTimeout(function(){Date.now()-o.current>=t&&(i(e()),o.current=Date.now())},t-(Date.now()-o.current));return()=>{clearTimeout(n)}},[t,...n]),r},S=n(30527),y=n(77823),E=n(55862),R=n(75966),D=n(34830),z=n(54597),I=e=>{let{sliceName:t,screenshotUrl:n}=e,{isScreenshotModalOpen:r}=(0,f.v9)(e=>({isScreenshotModalOpen:(0,R.gP)(e,D.q.SCREENSHOT_PREVIEW)})),{closeModals:i}=(0,z.Z)();return(0,o.jsx)(E.Z,{isOpen:r,shouldCloseOnOverlayClick:!0,contentLabel:"Screenshot Preview",portalClassName:"ScreenshotPreviewModal",onRequestClose:i,children:(0,o.jsx)(S.Z,{radius:"0px",bodySx:{p:0,bg:"#FFF",position:"relative",height:"100%",padding:16},footerSx:{position:"sticky",bottom:0,p:0},sx:{border:"none"},Header:(0,o.jsxs)(b.kC,{sx:{position:"sticky",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,o.jsxs)(b.X6,{sx:{fontSize:"14px"},children:["Screenshot Preview for ",t]}),(0,o.jsx)(b.x8,{type:"button",onClick:()=>i()})]}),Footer:()=>(0,o.jsx)(b.kC,{style:{justifyContent:"flex-end",height:64,alignItems:"center",paddingRight:16,borderTop:"1px solid #DCDBDD"},children:(0,o.jsx)(b.zx,{variant:"secondary",sx:{fontWeight:600},onClick:()=>i(),children:"Close"})}),children:(0,o.jsx)(y.q,{src:n,sx:{height:"320px"}})})})},O=n(26109),T=n(9149);let M=e=>({__TYPE__:"SharedSliceContent",variation:e,primary:{},items:[]});var W=n(85819),_=n(33986),P=e=>{let{children:t,sx:n}=e;return(0,o.jsx)(b.kC,{sx:{bg:"grey07",height:"90%",width:"100%",justifyContent:"center",alignItems:"center",zIndex:"1",...n},children:(0,o.jsx)(b.kC,{sx:{marginTop:"-128px",justifyContent:"center",flexDirection:"column",alignItems:"center"},children:t})})},N=e=>{let{onRetrigger:t}=e;return(0,o.jsxs)(P,{children:[(0,o.jsx)(b.Ee,{src:"/iframe-not-running.png",sx:{width:"320px"}}),(0,o.jsx)(b.xv,{sx:{color:"textClear",mb:2,fontSize:"14px",lineHeight:"24px",fontWeight:"600"},children:"Slice Machine can't render your slice"}),(0,o.jsxs)(b.xv,{sx:{color:"failedConnectText",maxWidth:"400px",textAlign:"center",fontSize:"12px",lineHeight:"22px"},children:["Ensure your website's development server is running by typing",(0,o.jsx)("br",{}),(0,o.jsx)(b.xv,{as:"code",variant:"styles.inlineCode",sx:{padding:"4px",borderRadius:"6px"},children:"npm run dev"}),"\xa0 in your terminal at the root of your website directory.",(0,o.jsx)("br",{})," If that doesn't work, see the\xa0",(0,o.jsx)(b.rU,{target:"_blank",href:"https://prismic.io/docs/slice-machine#simulate-slices",sx:{color:"link"},children:"troubleshooting instructions."})]}),(0,o.jsx)(_.z,{onClick:t,label:"Refresh",Icon:W.Fer,iconSize:20,iconFill:"#6F6E77",variant:"secondaryMedium",sx:{mt:"16px"}})]})},F=e=>(0,o.jsxs)("svg",{viewBox:"0 0 72 72",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,o.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M51.3304 19.693C50.9182 18.9787 50.2527 18.6526 50.2527 18.6526L64.7906 10.2077C65.5266 9.78011 66.4679 10.0339 66.8929 10.7745C67.3179 11.5151 67.0657 12.4622 66.3294 12.8898L52.639 20.8424C52.639 20.8424 51.7428 20.4072 51.3304 19.693Z",fill:"current"}),(0,o.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M47.6775 54.7814C58.0794 48.7394 61.6433 35.3572 55.6378 24.8917C54.7801 23.397 53.7736 22.0427 52.6481 20.8367L32.9428 32.2832C32.2068 32.7108 31.2655 32.457 30.8405 31.7165C30.4155 30.9757 30.6677 30.0287 31.4039 29.6011L50.2693 18.6425C43.486 13.2668 33.8645 12.2736 25.9299 16.8827C15.5282 22.9249 11.9642 36.3071 17.9697 46.7727C18.8274 48.2671 19.8339 49.6216 20.9595 50.8276L41.1791 39.0822C41.9151 38.6546 42.8564 38.9086 43.2814 39.6492C43.7064 40.3897 43.4542 41.3368 42.7182 41.7644L23.3384 53.0217C30.1217 58.3975 39.7432 59.3906 47.6775 54.7814Z",fill:"current"}),(0,o.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5.20645 61.7656C4.78145 61.0248 5.03367 60.078 5.76978 59.6502L20.9371 50.8398C20.9371 50.8398 21.8578 51.2406 22.3053 51.7062C22.7528 52.1717 23.361 53.0078 23.361 53.0078L7.30887 62.3323C6.57274 62.7599 5.63144 62.5061 5.20645 61.7656Z",fill:"current"})]}),L=n(75100),A=n(19909),B=e=>{let{defaultValue:t,variations:n,MenuItemAction:r,onChange:i}=e;return(0,o.jsxs)(b.xu,{sx:{py:0,flexDirection:"column",backgroundColor:"headSection",overflow:"auto",display:"flex",borderRadius:"4px",border:e=>{var t;return"1px solid ".concat(null===(t=e.colors)||void 0===t?void 0:t.borders)},boxShadow:"0 10px 10px rgba(0, 0, 0, 0.05)",maxHeight:340,minWidth:250,maxWidth:350,color:"text"},children:[(0,o.jsxs)(b.xv,{sx:{p:3,fontSize:12,color:"textClear"},children:[n.length," VARIATION",n.length>1?"S":""]}),(0,o.jsxs)(b.kC,{sx:{p:0,flexDirection:"column"},children:[n.map(e=>(0,o.jsx)(U,{value:e,isActive:e.id===t.id,onClick:i},e.id)),r||null]})]})};let U=e=>{let{value:t,isActive:n,onClick:r}=e;return(0,o.jsx)(b.xu,{sx:{px:3,py:2,color:n?"primary":"",cursor:"pointer",borderLeft:e=>{let{colors:t}=e;return"2px solid ".concat(n?null==t?void 0:t.primary:null==t?void 0:t.background)},borderRadius:0,bg:"background",":hover":{bg:"hoverBackground",borderLeft:e=>{let{colors:t}=e;return"2px solid ".concat(null==t?void 0:t.primary)}}},onClick:()=>r(t),children:t.name})};var H=e=>{let{buttonSx:t,defaultValue:n,variations:r,onNewVariation:i,onChange:s,sx:l,disabled:a}=e,[c,d]=(0,g.useState)(!1),[u,x]=(0,g.useState)(n||r[0]);(0,g.useEffect)(()=>{n&&x(n)},[n]);let h=function(e){d(!1),x(e),setTimeout(()=>s(e),210)},p=(0,o.jsx)(b.xu,{sx:{p:2},children:(0,o.jsx)(b.zx,{variant:"transparent",sx:{color:"text"},onClick:()=>{d(!1),i&&i()},children:"+ Add new variation"})});return(0,o.jsx)(b.xu,{sx:l,children:(0,o.jsx)(A.Popover,{align:"start",isOpen:c,onClickOutside:()=>d(!1),positions:["bottom"],padding:10,content:()=>(0,o.jsx)(B,{defaultValue:u,variations:r,onChange:h,MenuItemAction:i?p:void 0}),containerClassName:"variationSelectorContainer",children:(0,o.jsxs)(b.zx,{sx:{...t},variant:"dropDownButton",onClick:()=>d(!c),disabled:a,children:[u.name," ",c?(0,o.jsx)(L.bOz,{size:"16px","aria-label":"Collapse variations"}):(0,o.jsx)(L.mEq,{size:"16px","aria-label":"Expand variations"})]})})})};let Z=(e,t,n)=>{if(!t){c().push("/".concat(e.href,"/").concat(e.model.name));return}let r=function(e){let{lib:t,sliceName:n,variationId:r,options:i={},isSimulator:o}=e,s="/slices/[lib]/[sliceName]/[variation]".concat(o?"/simulator":""),l="/slices/".concat(t,"/").concat(n,"/").concat(r).concat(o?"/simulator":"");return{href:s,as:l,options:i,all:[s,l,i]}}({lib:e.href,sliceName:e.model.name,variationId:null==t?void 0:t.id,isSimulator:n});c().push(r.href,r.as,r.options)};var q=e=>{let{slice:t,variation:n,isDisplayEditor:r,toggleIsDisplayEditor:i,onSaveMock:s,actionsDisabled:l,isSavingMock:a}=e;return(0,o.jsxs)(b.kC,{sx:{p:"16px",display:"flex",bg:"grey07",gridTemplateRows:"1fr",borderBottom:"1px solid #DCDBDD",justifyContent:"space-between"},children:[(0,o.jsxs)(b.kC,{sx:{alignItems:"center"},children:[(0,o.jsx)(F,{height:"20px",width:"20px",fill:"#1A1523"}),(0,o.jsx)(b.xv,{sx:{ml:2,mr:"12px",fontSize:"14px",color:"#1A1523",fontWeight:"600",letterSpacing:"-0.15px"},children:t.model.name}),(0,o.jsx)(H,{defaultValue:n,variations:t.model.variations,onChange:e=>Z(t,e,!0),disabled:t.model.variations.length<=1||l})]}),(0,o.jsxs)(b.kC,{sx:{alignItems:"center",justifyContent:"space-between"},children:[(0,o.jsx)(b.kC,{sx:{alignItems:"center",justifyContent:"space-around"},children:(0,o.jsxs)(b.kC,{sx:{alignItems:"center",mr:4},children:[(0,o.jsx)(b.__,{htmlFor:"show-mock-editor",sx:{color:"#6F6E77",lineHeight:"16px",fontSize:"12px",fontWeight:"600",letterSpacing:"0px"},children:"Editor"}),(0,o.jsx)(b.rs,{id:"show-mock-editor",checked:r,onChange:i,disabled:l})]})}),(0,o.jsx)(_.z,{"data-testid":"save-mock",onClick:s,label:"Save mock content",disabled:a||l,variant:"primary",sx:{borderRadius:"6px",color:"#F1EEFE",fontWeight:"bold",border:"1px solid #5842C3",backgroundColor:"#6E56CF",boxShadow:"0px 1px 0px rgba(0, 0, 0, 0.04)","&:hover":{"&:not([disabled])":{backgroundColor:"#5842C3"}}}})]})]})},V=n(16),X=e=>{let{apiContent:t,screenDimensions:n,simulatorUrl:r,dryRun:i=!1,isScreenshot:s=!1,handleSimulatorConnectionResult:l}=e,[a,c]=function(){let[e,t]=(0,g.useState)(),n=(0,g.useRef)(),r=(0,g.useRef)();return[e,(0,g.useCallback)(async e=>{var i,o;if(null===(i=n.current)||void 0===i||i.disconnect(),null===(o=r.current)||void 0===o||o.disconnect(),t(void 0),null!=e){n.current=new V.SH(e);try{await n.current.connect(),t(n.current);let i=async()=>{var e;t(void 0),await (null===(e=n.current)||void 0===e?void 0:e.connect({},!0)),t(n.current)};r.current=new MutationObserver(e=>{e.forEach(e=>{"src"===e.attributeName&&i().catch(e=>{throw e})})}),r.current.observe(e,{attributeFilter:["src"]})}catch(e){console.error(e)}}},[])]}();(0,g.useEffect)(()=>{if(!r){l("failed");return}if(void 0!==a){if(!a.connected){l("failed"),console.warn("Trying to use a disconnected simulator client.");return}(async()=>{await a.setSliceZone([t])})().then(()=>{l("successful")}).catch(()=>{l("failed")})}},[a,t,r]);let[d,u]=(0,g.useState)(),x=function(e,t){let n=(0,g.useRef)();return(0,g.useCallback)(t=>{var r;null===(r=n.current)||void 0===r||r.disconnect(),null!==t&&(n.current=new ResizeObserver(n=>{let[r]=n,{height:i,width:o}=r.contentRect;e({blockSize:i,inlineSize:o},t)}),n.current.observe(t))},t)}(e=>{let{blockSize:t,inlineSize:n}=e;u({height:t,width:n})},[]);return(0,o.jsx)(b.kC,{ref:x,sx:{alignItems:"center",backgroundColor:"headSection",backgroundImage:"url(/pattern.png)",backgroundRepeat:"repeat",backgroundSize:"10px",border:s?void 0:e=>{var t;return"1px solid ".concat(String(null===(t=e.colors)||void 0===t?void 0:t.darkBorder))},borderRadius:s?void 0:8,display:"flex",height:"100%",justifyContent:"center",overflow:"hidden",...i?{display:"none"}:{}},children:r?(0,o.jsx)("iframe",{ref:c,src:r,style:{border:"none",maxHeight:"".concat(n.height,"px"),maxWidth:"".concat(n.width,"px"),minHeight:"".concat(n.height,"px"),minWidth:"".concat(n.width,"px"),overflowY:"auto",...d?{transform:"scale(".concat(function(e,t){let{height:n,width:r}=e,{height:i,width:o}=t;return r>o||n>i?r-o>n-i?o/r:i/n:1}(n,d),")")}:{display:"none"}}}):null})},K=e=>{let{defaultValue:t,options:n,onChange:r}=e;return(0,o.jsx)(b.xu,{sx:{py:0,flexDirection:"column",backgroundColor:"headSection",overflow:"auto",display:"flex",borderRadius:"6px",border:e=>{var t;return"1px solid ".concat(String(null===(t=e.colors)||void 0===t?void 0:t.darkBorder))},boxShadow:"0 10px 10px rgba(0, 0, 0, 0.05)",maxHeight:340,minWidth:180,maxWidth:350,color:"text"},children:(0,o.jsx)(b.kC,{sx:{p:0,flexDirection:"column"},children:n.map(e=>(0,o.jsx)(Y,{value:e,isActive:e===t,onClick:r}))})})};let Y=e=>{let{value:t,isActive:n,onClick:r}=e;return(0,o.jsx)(b.xu,{sx:{p:2,cursor:"pointer",fontSize:"14px",borderRadius:0,bg:n?"hoverBackground":"background",":hover":{bg:"hoverBackground"}},onClick:()=>r(t),children:t})},J=e=>{let{buttonSx:t,currentValue:n,options:r,onChange:i,disabled:s}=e,[l,a]=(0,g.useState)(!1),c=function(e){a(!1),setTimeout(()=>i(e),210)};return(0,o.jsx)(b.xu,{children:(0,o.jsx)(A.Popover,{align:"start",isOpen:l,onClickOutside:()=>a(!1),positions:["bottom"],padding:2,content:()=>(0,o.jsx)(K,{defaultValue:n,options:r,onChange:c}),children:(0,o.jsxs)(b.zx,{sx:t,variant:"dropDownButton",onClick:()=>a(!l),disabled:s,children:[n," ",l?(0,o.jsx)(L.bOz,{size:"24px"}):(0,o.jsx)(L.mEq,{size:"24px"})]})})})};(r=i||(i={})).DESKTOP="Desktop",r.TABLET="Tablet",r.MOBILE="Mobile",r.CUSTOM="Custom";let $={Desktop:{width:1280,height:800},Tablet:{width:1080,height:810},Mobile:{width:390,height:844}},Q=e=>{let{label:t,startValue:n,onChange:r,sx:i,disabled:s}=e,l=["e","-","+",",","."];return(0,o.jsxs)(b.kC,{sx:{alignItems:"center",...i},children:[(0,o.jsx)(b.__,{sx:{backgroundColor:"grey07",border:"transparent",borderRight:e=>{var t;return"1px solid ".concat(String(null===(t=e.colors)||void 0===t?void 0:t.darkBorder))},borderRadius:"6px 0px 0px 6px",width:26,height:30,color:"greyIcon",fontWeight:"bold",fontSize:"14px",alignItems:"center",justifyContent:"center",position:"absolute",ml:"1px"},htmlFor:"".concat(t,"-screensize-input"),children:t}),(0,o.jsx)(b.II,{type:"number",name:"".concat(t,"-screensize-input"),disabled:s,sx:{width:80,height:32,p:0,border:"1px solid #E4E2E4",borderRadius:"6px","&::-webkit-outer-spin-button,&::-webkit-inner-spin-button":{WebkitAppearance:"none",margin:0},color:"greyIcon",textAlign:"center",paddingLeft:26,"&:disabled":{cursor:"not-allowed","&:hover":{border:"1px solid #E4E2E4"},"&:active":{border:"1px solid #E4E2E4",boxShadow:"none"}}},onChange:r,value:n,min:"0",onKeyDown:e=>{l.includes(e.key)&&e.preventDefault()}})]})},G=e=>{let{handleScreenSizeChange:t,screenDimensions:n,actionsDisabled:r}=e,[s,l]=(0,g.useState)(i.DESKTOP),a=e=>{let n=Object.values($).findIndex(t=>JSON.stringify(t)===JSON.stringify(e));l(n<0?i.CUSTOM:Object.keys($)[n]),t(e)};return(0,o.jsx)(b.kC,{sx:{alignItems:"center",pb:"16px",justifyContent:"space-between",variant:"small"},children:(0,o.jsxs)(b.kC,{sx:{alignItems:"center",flex:1},children:[(0,o.jsx)(J,{options:Object.values(i),onChange:e=>{l(e),e!==i.CUSTOM.toString()&&t($[e])},buttonSx:{alignSelf:"start"},currentValue:s,disabled:r}),(0,o.jsx)(Q,{label:"W",startValue:n.width.toString(),onChange:e=>{a({...n,width:Number(e.target.value)})},disabled:r,sx:{mx:2}}),(0,o.jsx)(L.eSQ,{size:16,color:"#6F6E77"}),(0,o.jsx)(Q,{label:"H",startValue:n.height.toString(),onChange:e=>{a({...n,height:Number(e.target.value)})},disabled:r,sx:{ml:2}})]})})},ee=new p.S;var et=e=>{var t,n;let{slice:r,variation:s}=e,{updateSliceMockSuccess:l}=(0,z.Z)(),{simulatorUrl:a,endpoints:c}=(0,f.v9)(e=>({simulatorUrl:(0,T.x0)(e),endpoints:(0,T.gZ)(e)})),d=(0,g.useMemo)(()=>({embedApiEndpoint:new URL(c.PrismicEmbed),authStrategy:"cookie",unsplashApiBaseUrl:new URL(c.PrismicUnsplash),baseUrl:new URL("builder/",c.PrismicWroom)}),[c.PrismicEmbed,c.PrismicUnsplash,c.PrismicWroom]);(0,g.useEffect)(()=>{C.Xe.track({event:"slice-simulator:open"})},[]);let p=(0,g.useRef)(!1);(0,g.useEffect)(()=>{p.current=!0},[]);let S=e=>{p.current&&(p.current=!1,C.Xe.track({event:"editor:widget-used",sliceId:e}))},[y,E]=(0,g.useState)("waiting");(0,g.useEffect)(()=>{if("waiting"===y){let e=setTimeout(()=>{E("failed")},2e4);return()=>clearTimeout(e)}},[y]);let R=e=>{"waiting"===y&&("failed"===e?C.Xe.track({event:"slice-simulator:is-not-running"}):Z(!0),E(e))},[D,W]=(0,g.useState)($[i.DESKTOP]),_=(0,g.useMemo)(()=>O.id.fromSM(r.model),[r.model]),[F,L]=(0,g.useState)(null),A=(0,g.useMemo)(()=>{var e;return(null==F?void 0:F.variation)===s.id?F:(null===(e=r.mocks)||void 0===e?void 0:e.find(e=>e.variation===s.id))||M(s.id)},[F,s.id]),B=(0,g.useMemo)(()=>(0,h.renderSliceMock)(_,A).id,[]),U=w((0,g.useCallback)(()=>()=>({...(0,h.renderSliceMock)(_,A),id:B}),[_,A]),800,[_,A]),[H,Z]=(0,g.useState)(!1),[V,K]=(0,g.useState)(!1),Y=async()=>{if(F){K(!0);try{var e;let t={libraryID:r.from,sliceID:r.model.id,mocks:(null!==(e=r.mocks)&&void 0!==e?e:[]).filter(e=>e.variation!==F.variation).concat(F)},{errors:n}=await (0,C.y3)(t);if(n.length>0)throw n;l(t),v.Am.success("Saved")}catch(e){console.error("Error while saving mock",e),v.Am.error("Error saving content")}K(!1)}};return(0,o.jsxs)(b.kC,{sx:{flexDirection:"column",height:"100vh"},children:[(0,o.jsx)(q,{slice:r,variation:s,isDisplayEditor:H,actionsDisabled:"successful"!==y,toggleIsDisplayEditor:()=>Z(!H),onSaveMock:()=>void Y(),isSavingMock:V}),(0,o.jsx)(b.xu,{sx:{flex:1,bg:"grey07",p:3,display:"flex",flexDirection:"column",height:"calc(100% - 73px - 16px)"},children:(0,o.jsxs)(b.kC,{sx:{flex:1,flexDirection:"row",position:"relative",width:"100%",height:"100%"},children:[(0,o.jsxs)(j.xR,{sx:{display:"flex",height:"100%",flexDirection:"column",flex:1,minWidth:0},children:[(0,o.jsx)(G,{handleScreenSizeChange:W,screenDimensions:D,actionsDisabled:"successful"!==y}),"failed"===y?(0,o.jsx)(N,{onRetrigger:()=>{E("waiting")}}):null,"successful"===y?(0,o.jsx)(X,{apiContent:U,screenDimensions:D,simulatorUrl:a,handleSimulatorConnectionResult:R}):(0,o.jsx)(o.Fragment,{children:"waiting"===y?(0,o.jsxs)(P,{children:[(0,o.jsx)(b.$j,{variant:"styles.spinner"}),(0,o.jsx)(X,{apiContent:U,screenDimensions:D,simulatorUrl:a,dryRun:!0,handleSimulatorConnectionResult:R})]}):null})]}),"successful"===y&&H?(0,o.jsx)(b.kC,{className:"editor",sx:{flexDirection:"column",marginLeft:"16px",maxWidth:"440px",minWidth:"440px",overflowY:"auto"},children:(0,o.jsx)(k.h,{renderError:()=>(0,o.jsx)(x.ax,{title:"Editor error",description:"An error occurred while rendering the editor."}),children:(0,o.jsx)(g.Suspense,{children:(0,o.jsx)(m.aH,{client:ee,children:(0,o.jsx)(u.kS,{config:d,content:A,onContentChange:e=>{L(e),S(r.model.id)},sharedSlice:_},s.id)})})})}):null]})}),!!(null===(t=r.screenshots[s.id])||void 0===t?void 0:t.url)&&(0,o.jsx)(I,{sliceName:r.model.name,screenshotUrl:null===(n=r.screenshots[s.id])||void 0===n?void 0:n.url})]})};function en(){let e=(0,a.useRouter)(),{slice:t,variation:n}=(0,d.Z)();return void 0===t||void 0===n?(e.replace("/"),null):(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(l(),{children:(0,o.jsx)("title",{children:"Simulator: ".concat(t.model.name," - Slice Machine")})}),(0,o.jsx)(et,{slice:t,variation:n})]})}}},function(e){e.O(0,[789,872,429,888,774,179],function(){return e(e.s=30755)}),_N_E=e.O()}]);

package/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/[variation]-b4700a6332ea828c.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(57514)}])},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}:{}}},57514:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return eO}});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(14226),y=n(43388),g=n(23094),j=n(9385),b=n(18566),w=n(80148);async function C(e){let{errors:t,model:n}=await w.managerClient.customTypes.readCustomType({id:e});if(t.length>0)throw t;return n}var I=n(59294),k=n(14101),S=n(81229);let D=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"})]}),T=()=>{let{source:e}=(0,k.l)(),t=function(e){let t=(0,I.Ag)(e.query);return void 0!==t&&(0,I.ne)(e.asPath,t)?t:void 0}(e);return void 0!==t?(0,i.jsx)(j.h,{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)(E,{sourceCustomTypeId:t})})})}):null},E=e=>{let{sourceCustomTypeId:t}=e,n=(0,b.QT)(C,[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=I.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)(D,{}),children:["Return to ",n.label]}),(0,i.jsx)(x.E,{onClick:()=>{o(!1)},renderStartIcon:()=>(0,i.jsx)(S.T,{})})]})}},A=()=>(0,i.jsx)(x.E,{asChild:!0,invisible:!0,color:"grey",endIcon:"openInNew",sx:{alignSelf:"center"},onClick:()=>{d.Xe.track({event:"mcp:promo-link-clicked",source:"slice_editor",target:"docs"})},children:(0,i.jsx)("a",{href:"https://prismic.io/docs/ai#code-with-prismics-mcp-server",target:"_blank",children:"Boost your workflow in Cursor with Prismic MCP"})});var R=n(58446),L=n(56580),_=n(33710),F=n(77057),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 P=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"})})})},z=n(88866),Z=n(28316),K=n(88932),B=n(35289),H=n(63908),q=n(34166),W=n(3285),X=n(40141),G=n(49219),U=n(26109),Q=n(45440),Y=n(16086),J=n(358),$=n(5495),ee=n(39302);let et=[Q.C.Image,Q.C.Text,Q.C.StructuredText,Q.C.Link,Q.C.Select,Q.C.Boolean,Q.C.Number,Q.C.Color,Q.C.Date,Q.C.Table,Q.C.Embed,Q.C.Timestamp,Q.C.GeoPoint,Q.C.ContentRelationship,Q.C.LinkToMedia];var en=()=>{let{slice:e,setSlice:t,variation:n}=f(),[r,o]=(0,s.useState)(!1),a=[Q.C.Group,...et],l=!!(n.items&&Object.keys(n.items).length>0),d=i=>r=>{if(i===U.Rt.Items&&n.items&&Object.keys(n.items).length<=1){o(!0);return}t((0,H.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,H.L4)({slice:e,variationId:n.id,widgetArea:i,previousFieldId:o,newFieldId:a,newField:l}),()=>{"add"===s&&K.Am.success("Field added")}),s||(0,ee.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,H.xS)({slice:e,variationId:n.id,widgetArea:i,newFieldId:o,newField:l.type===z.GroupFieldType?G.Fl.fromSM(l):l}),()=>{K.Am.success("".concat("Group"===s?"Group":"Field"," added"))}),(0,$.V)({id:o,field:l})},m=e=>t=>""===t.apiId?u(e,{...t,apiId:t.newKey}):c(e,t),h=i=>r=>{if((0,Y.uS)(r))return;let{source:o,destination:a}=r;if(!a)return;let l=(0,H.gR)({slice:e,variationId:n.id,widgetArea:i,sourceIndex:o.index,destinationIndex:a.index});(0,Z.flushSync)(()=>t(l))};return(0,i.jsxs)(x.D,{flexDirection:"column",gap:18,children:[(0,i.jsxs)(B.aV,{children:[(0,i.jsx)(X.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:W.Z,widgetsArray:a,onDeleteItem:d(U.Rt.Primary),onSave:m(U.Rt.Primary),onDragEnd:h(U.Rt.Primary),poolOfFieldsToCheck:n.primary||[],renderHintBase:e=>{let{item:t}=e;return"slice.primary".concat((0,J.Ti)(t.key))},renderFieldAccessor:e=>"slice.primary".concat((0,J.Ti)(e)),testId:"static-zone-content",isRepeatableCustomType:void 0,emptyStateHeading:void 0}),l?(0,i.jsx)(X.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:et,fields:n.items,EditModal:W.Z,onDeleteItem:d(U.Rt.Items),onSave:m(U.Rt.Items),onDragEnd:h(U.Rt.Items),poolOfFieldsToCheck:n.items||[],renderHintBase:e=>{let{item:t}=e;return"item".concat((0,J.Ti)(t.key))},renderFieldAccessor:e=>"slice.items[i]".concat((0,J.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,H.Oh)({slice:e,variationId:n.id})),o(!1)},children:"Delete"})]})]})]})]}),(0,i.jsx)(q.rT,{type:"model",library:e.from,sliceId:e.model.id,variationId:n.id})]})},ei=n(6277),er=n(34887),eo=n.n(er);let ea=e=>{let{variant:t="dashed",color:n="currentColor",className:r}=e;return(0,i.jsx)("hr",{className:(0,ei.W)(eo()["variant-".concat(t)],r),style:{color:x.t.color[n]}})};var el=n(51507),es=n(27763),ed=n(21442);async function ec(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,q.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=es.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),K.Am.error(t),n}}let eu=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)(em,{children:"not"})," affect your documents until you ",(0,i.jsx)(em,{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 ec({component:r,router:l,saveSliceSuccess:u,variation:o});h(e)}catch(e){}c(!1),n()})()},loading:d,children:"Delete"})]})]})})]})},em=e=>(0,i.jsx)(x.bL,{...e,color:"inherit",component:"span",variant:"bold"});var eh=n(30195);async function ep(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),K.Am.error(t),n}}let ef=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{ep({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=ev.safeParse(e,{errorMap:ex});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"})]})]})})]})})},ev=eh.z.string().min(1),ex=e=>e.code===eh.z.ZodIssueCode.too_small?{message:"This field is required"}:{message:"Invalid value"};var ey=n(68105),eg=n(63397),ej=n(96009),eb=n.n(ej),ew=n(36131),eC=n(75289),eI=n(30527);function ek(e){let{children:t}=e,n=(0,eI.W)();return(0,i.jsx)(eC.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 eS=e=>{let{children:t,FooterContent:n,HeaderContent:r,close:o,sx:a={}}=e;return(0,i.jsx)(eI.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)(eC.x8,{onClick:o,type:"button"}):null]}),Footer:n?(0,i.jsxs)(eC.kC,{sx:{alignItems:"space-between",bg:"headSection",p:3},children:[(0,i.jsx)(eC.xu,{sx:{ml:"auto"}}),n]}):null,children:t})},eD=n(55862);let eT=e=>{let{msg:t}=e;return(0,i.jsx)(eC.xv,{as:"span",sx:{fontSize:12,color:"error",mt:"5px",ml:2},children:t||"Error!"})};var eE=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)(eD.Z,{isOpen:t,shouldCloseOnOverlayClick:!0,onRequestClose:()=>b(),contentLabel:"Widget Form Modal",style:{content:{maxWidth:"700px"}},children:(0,i.jsx)(eg.J9,{initialValues:{id:c,name:p,origin:v},onSubmit:C,children:(0,i.jsx)(eg.l0,{id:"variation-add",onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),C())},children:(0,i.jsx)(x.D,{children:(0,i.jsxs)(eS,{sx:{textAlign:"left"},HeaderContent:(0,i.jsx)(eC.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)(eC.__,{htmlFor:"name",sx:{mb:1},children:["Variation name*",l.name?(0,i.jsx)(eT,{msg:l.name}):""]}),(0,i.jsx)(eg.gN,{autoComplete:"off",id:"name",name:"name",placeholder:"e.g. Grid - With Icon",as:eC.II,maxLength:30,value:p,onChange:e=>{var t;f(t=e.currentTarget.value),m&&u(eb()(t))}}),(0,i.jsx)(eC.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)(eC.__,{htmlFor:"id",sx:{mb:1},children:["Variation ID*",l.id?(0,i.jsx)(eT,{msg:l.id}):""]}),(0,i.jsx)(eg.gN,{autoComplete:"off",id:"id",name:"id",placeholder:"e.g. gridWithIcon",as:eC.II,maxLength:30,value:c,onChange:e=>{var t;return t=e.currentTarget.value,void(h(!1),u(eb()(t)))}}),(0,i.jsx)(eC.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)(eC.__,{htmlFor:"origin",sx:{mb:1},children:"Duplicate from"}),(0,i.jsx)(ew.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"}})})]})]})})})})})},eA=n(20136),eR=n.n(eA);let eL=e=>{let{horizontalScroll:t=!1}=e,{slice:n,variation:r,setSlice:o}=f(),[l,c]=(0,s.useState)(),u=(0,ed.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)(ea,{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:eR().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)(e_,{screenshotChangesModal:u,setDialog:c,width:320})})})})]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e_,{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)(ey.Z,{slices:h([n]),defaultVariationSelector:p,onUploadSuccess:v}),(0,i.jsx)(ef,{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)(eu,{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)(eE,{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,H.Kp)({slice:n,id:e,name:t,copiedVariation:i});await (0,d.Ve)(r),g(r),o(r);let l=es.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),K.Am.error(e)}},variations:n.model.variations})]})},e_=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)(el.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 eF=()=>{let{slice:e,actionQueueStatus:t}=f(),n=(0,x.cj)({max:"large"});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:"Slices"}),(0,i.jsx)(y.g,{active:!0,children:e.model.name})]}),(0,i.jsxs)(R.K2,{children:[(0,i.jsx)(A,{}),(0,i.jsx)(g.X,{status:t}),(0,i.jsx)(P,{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)(eL,{horizontalScroll:n}),(0,i.jsx)(en,{})]}),(0,i.jsx)(T,{})]})]})};function eO(){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)(eF,{})]})}})}},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 k=(!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),S=(0,i.useContext)(x).enabledScopes,D=(0,i.useContext)(v);return g(function(){if((null==k?void 0:k.enabled)!==!1&&(e=null==k?void 0:k.scopes,0===S.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||S.some(function(t){return e.includes(t)})||S.includes("*")))){var e,t=function(e,t){var n;if(void 0===t&&(t=!1),!(p(e,["input","textarea","select"])&&!p(e,null==k?void 0:k.enableOnFormTags)||null!=k&&null!=k.ignoreEventWhen&&k.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!=k&&k.enableOnContentEditable)&&s(b,null==k?void 0:k.splitKey).forEach(function(n){var i,r,o,a=d(n,null==k?void 0:k.combinationKey);if(f(e,a,null==k?void 0:k.ignoreModifiers)||null!=(o=a.keys)&&o.includes("*")){if(t&&c.current)return;if(("function"==typeof(i=null==k?void 0:k.preventDefault)&&i(e,a)||!0===i)&&e.preventDefault(),"function"==typeof(r=null==k?void 0:k.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==k?void 0:k.keydown)===void 0&&(null==k?void 0:k.keyup)!==!0||null!=k&&k.keydown)&&t(e))},i=function(e){void 0!==e.key&&(h(l(e.code)),c.current=!1,null!=k&&k.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==k?void 0:k.splitKey).forEach(function(e){return D.addHotkey(d(e,null==k?void 0:k.combinationKey,null==k?void 0:k.description))}),function(){r.removeEventListener("keyup",i),r.removeEventListener("keydown",n),D&&s(b,null==k?void 0:k.splitKey).forEach(function(e){return D.removeHotkey(d(e,null==k?void 0:k.combinationKey,null==k?void 0:k.description))})}}},[b,k,S]),a}}},function(e){e.O(0,[898,789,917,525,461,139,397,183,50,349,34,630,658,888,774,179],function(){return e(e.s=31314)}),_N_E=e.O()}]);