slice-machine-ui 1.26.1-alpha.aa-playground-script.5 → 1.26.1-beta.2

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

@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[33],{30755:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/slices/[lib]/[sliceName]/[variation]/simulator",function(){return t(68156)}])},56577:function(e,n,t){"use strict";t.d(n,{z:function(){return d}});var i=t(62230),r=t(85244),o=t(98240),s=t(52322),c=t(2784),a=t(75289),l=function(e,n){return e?"".concat(e,"-").concat(n):""},u=function(e){switch(e){case"white":case"secondaryMedium":case"secondarySmall":case"secondary":return"#1A1523";default:return"grey01"}},d=(0,c.forwardRef)(function(e,n){var t=e.label,c=e.Icon,d=e.type,x=e.form,f=e.isLoading,h=void 0!==f&&f,v=e.disabled,p=e.onClick,g=e.sx,m=e.iconSize,b=void 0===m?16:m,j=e.iconFill,C=e.variant,S=void 0===C?"primary":C,k=(0,o.Z)(e,["label","Icon","type","form","isLoading","disabled","onClick","sx","iconSize","iconFill","variant"]);return(0,s.jsx)(a.zx,(0,r.Z)((0,i.Z)({ref:n,sx:(0,i.Z)((0,r.Z)((0,i.Z)({},void 0===g?{}:g),{display:"flex",alignItems:"center",justifyContent:"center",gap:"8px"}),h?{cursor:"wait !important"}:{}),type:d,form:x,disabled:void 0!==v&&v||h,onClick:h?void 0:p,variant:S},k),{children:h?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a.$j,{size:b,color:u(S),"data-testid":l(k["data-testid"],"spinner")}),c&&t]}):(0,s.jsxs)(s.Fragment,{children:[c&&(0,s.jsx)(c,{size:b,fill:j,"data-testid":l(k["data-testid"],"icon")}),t]})}))})},54132:function(e,n,t){"use strict";t.d(n,{Z:function(){return l}});var i=t(62230),r=t(85244),o=t(98240),s=t(52322);t(2784);var c=t(75289),a=function(e){var n=e.bg,t=e.background,r=e.sx,o=e.withRadius,a=e.radius,l=e.children;return(0,s.jsx)(c.xu,{sx:(0,i.Z)({p:4,bg:n||t},o?{borderBottomLeftRadius:a,borderBottomRightRadius:a}:null,r),children:l})},l=function(e){var n=e.Header,t=void 0===n?null:n,l=e.SubHeader,u=void 0===l?null:l,d=e.Body,x=void 0===d?null:d,f=e.Footer,h=void 0===f?null:f,v=e.borderFooter,p=e.radius,g=void 0===p?"6px":p,m=e.bodySx,b=e.footerSx,j=e.sx,C=e.bg,S=e.background,k=e.children,y=(0,o.Z)(e,["Header","SubHeader","Body","Footer","borderFooter","radius","bodySx","footerSx","sx","bg","background","children"]);return(0,s.jsxs)(c.Zb,(0,r.Z)((0,i.Z)({sx:(0,i.Z)({border:function(e){var n;return"1px solid ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.borders))},borderRadius:g},void 0===j?null:j)},y),{children:[t?(0,s.jsx)(t,{radius:g}):null,u?(0,s.jsx)(u,{radius:g}):null,(0,s.jsxs)(a,{bg:C,background:S,sx:void 0===m?{}:m,withRadius:!h,children:[x?(0,s.jsx)(x,{}):null,k||null]}),h?(0,s.jsx)(a,{bg:C,background:S,sx:(0,i.Z)({},void 0!==v&&v?{borderTop:function(e){var n=e.colors;return"1px solid ".concat(String(null==n?void 0:n.borders))}}:null,void 0===b?{}:b),radius:g,withRadius:!0,children:"object"==typeof h?h:(0,s.jsx)(h,{})}):null]}))}},61931:function(e,n,t){"use strict";t.d(n,{q:function(){return l}});var i=t(62230),r=t(52322),o=t(2784),s=t(75289),c=t(65186),a=(0,o.memo)(function(e){var n=e.src;return(0,r.jsx)(s.Ee,{src:n,alt:"Preview image",sx:{maxHeight:"100%"}})}),l=function(e){var n=e.src,t=e.sx;return(0,r.jsx)(s.kC,{sx:(0,i.Z)({position:"relative",alignItems:"center",justifyContent:"center",overflow:"hidden",backgroundImage:"url(/pattern.png)",backgroundColor:"headSection",backgroundRepeat:"repeat",backgroundSize:"20px",borderRadius:"4px"},t),children:void 0!==n?(0,r.jsx)(a,{src:n}):(0,r.jsxs)(s.xv,{sx:{display:"flex",flexDirection:"column",alignItems:"center"},children:[(0,r.jsx)(c.eJU,{}),"You have no screenshot yet."]})})}},68156:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return es}});var i,r,o,s=t(52322),c=t(97729),a=t.n(c),l=t(5632),u=t.n(l),d=t(22710),x=t(62230),f=t(85244),h=t(99267),v=t(2784),p=t(71463),g=t(22715),m=t(88932),b=t(75289),j=t(65077),C=t(56577),S=t(19909),k=function(e){var n=e.defaultValue,t=e.variations,i=e.MenuItemAction,r=e.onChange;return(0,s.jsxs)(b.xu,{sx:{py:0,flexDirection:"column",backgroundColor:"headSection",overflow:"auto",display:"flex",borderRadius:"4px",border:function(e){var n;return"1px solid ".concat(null===(n=e.colors)||void 0===n?void 0:n.borders)},boxShadow:"0 10px 10px rgba(0, 0, 0, 0.05)",maxHeight:340,minWidth:250,maxWidth:350,color:"text"},children:[(0,s.jsxs)(b.xv,{sx:{p:3,fontSize:12,color:"textClear"},children:[t.length," VARIATION",t.length>1?"S":""]}),(0,s.jsxs)(b.kC,{sx:{p:0,flexDirection:"column"},children:[t.map(function(e){return(0,s.jsx)(y,{value:e,isActive:e.id===n.id,onClick:r},e.id)}),i||null]})]})},y=function(e){var n=e.value,t=e.isActive,i=e.onClick;return(0,s.jsx)(b.xu,{sx:{px:3,py:2,color:t?"primary":"",cursor:"pointer",borderLeft:function(e){var n=e.colors;return"2px solid ".concat(t?null==n?void 0:n.primary:null==n?void 0:n.background)},borderRadius:0,bg:"background",":hover":{bg:"hoverBackground",borderLeft:function(e){var n=e.colors;return"2px solid ".concat(null==n?void 0:n.primary)}}},onClick:function(){return i(n)},children:n.name})},w=t(75100),E=function(e){var n=e.buttonSx,t=e.defaultValue,i=e.variations,r=e.onNewVariation,o=e.onChange,c=e.sx,a=e.disabled,l=(0,v.useState)(!1),u=l[0],d=l[1],f=(0,v.useState)(t||i[0]),h=f[0],p=f[1];(0,v.useEffect)(function(){t&&p(t)},[t]);var g=function(e){d(!1),p(e),setTimeout(function(){return o(e)},210)},m=(0,s.jsx)(b.xu,{sx:{p:2},children:(0,s.jsx)(b.zx,{variant:"transparent",sx:{color:"text"},onClick:function(){d(!1),r&&r()},children:"+ Add new variation"})});return(0,s.jsx)(b.xu,{sx:c,children:(0,s.jsx)(S.Popover,{align:"start",isOpen:u,onClickOutside:function(){return d(!1)},positions:["bottom"],padding:10,content:function(){return(0,s.jsx)(k,{defaultValue:h,variations:i,onChange:g,MenuItemAction:r?m:void 0})},containerClassName:"variationSelectorContainer",children:(0,s.jsxs)(b.zx,{sx:(0,x.Z)({},n),variant:"dropDownButton",onClick:function(){return d(!u)},disabled:a,children:[h.name," ",u?(0,s.jsx)(w.bOz,{size:"16px","aria-label":"Collapse variations"}):(0,s.jsx)(w.mEq,{size:"16px","aria-label":"Expand variations"})]})})})},R=function(e){return(0,s.jsxs)("svg",(0,f.Z)((0,x.Z)({viewBox:"0 0 72 72",xmlns:"http://www.w3.org/2000/svg"},e),{children:[(0,s.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,s.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,s.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"})]}))},Z=function(e,n,t){if(!n){u().push("/".concat(e.href,"/").concat(e.model.name));return}var i,r,o,s,c,a,l,d,x,f=(r=(i={lib:e.href,sliceName:e.model.name,variationId:null==n?void 0:n.id,isSimulator:t}).lib,o=i.sliceName,s=i.variationId,a=void 0===(c=i.options)?{}:c,l=i.isSimulator,d="/slices/[lib]/[sliceName]/[variation]".concat(l?"/simulator":""),x="/slices/".concat(r,"/").concat(o,"/").concat(s).concat(l?"/simulator":""),{href:d,as:x,options:a,all:[d,x,a]});u().push(f.href,f.as,f.options)},D=function(e){var n=e.slice,t=e.variation,i=e.isDisplayEditor,r=e.toggleIsDisplayEditor,o=e.onSaveMock,c=e.actionsDisabled,a=e.isSavingMock;return(0,s.jsxs)(b.kC,{sx:{p:"16px",display:"flex",bg:"grey07",gridTemplateRows:"1fr",borderBottom:"1px solid #DCDBDD",justifyContent:"space-between"},children:[(0,s.jsxs)(b.kC,{sx:{alignItems:"center"},children:[(0,s.jsx)(R,{height:"20px",width:"20px",fill:"#1A1523"}),(0,s.jsx)(b.xv,{sx:{ml:2,mr:"12px",fontSize:"14px",color:"#1A1523",fontWeight:"600",letterSpacing:"-0.15px"},children:n.model.name}),(0,s.jsx)(E,{defaultValue:t,variations:n.model.variations,onChange:function(e){return Z(n,e,!0)},disabled:n.model.variations.length<=1||c})]}),(0,s.jsxs)(b.kC,{sx:{alignItems:"center",justifyContent:"space-between"},children:[(0,s.jsx)(b.kC,{sx:{alignItems:"center",justifyContent:"space-around"},children:(0,s.jsxs)(b.kC,{sx:{alignItems:"center",mr:4},children:[(0,s.jsx)(b.__,{htmlFor:"show-mock-editor",sx:{color:"#6F6E77",lineHeight:"16px",fontSize:"12px",fontWeight:"600",letterSpacing:"0px"},children:"Editor"}),(0,s.jsx)(b.rs,{id:"show-mock-editor",checked:i,onChange:r,disabled:c})]})}),(0,s.jsx)(C.z,{"data-testid":"save-mock",onClick:o,label:"Save mock content",disabled:a||c,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"}}}})]})]})},I=t(82770),z=t(56580),O=t(39092),M=function(e){var n=e.defaultValue,t=e.options,i=e.onChange;return(0,s.jsx)(b.xu,{sx:{py:0,flexDirection:"column",backgroundColor:"headSection",overflow:"auto",display:"flex",borderRadius:"6px",border:function(e){var n;return"1px solid ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.darkBorder))},boxShadow:"0 10px 10px rgba(0, 0, 0, 0.05)",maxHeight:340,minWidth:180,maxWidth:350,color:"text"},children:(0,s.jsx)(b.kC,{sx:{p:0,flexDirection:"column"},children:t.map(function(e){return(0,s.jsx)(_,{value:e,isActive:e===n,onClick:i})})})})},_=function(e){var n=e.value,t=e.isActive,i=e.onClick;return(0,s.jsx)(b.xu,{sx:{p:2,cursor:"pointer",fontSize:"14px",borderRadius:0,bg:t?"hoverBackground":"background",":hover":{bg:"hoverBackground"}},onClick:function(){return i(n)},children:n})},T=function(e){var n=e.buttonSx,t=e.currentValue,i=e.options,r=e.onChange,o=e.disabled,c=(0,v.useState)(!1),a=c[0],l=c[1],u=function(e){l(!1),setTimeout(function(){return r(e)},210)};return(0,s.jsx)(b.xu,{children:(0,s.jsx)(S.Popover,{align:"start",isOpen:a,onClickOutside:function(){return l(!1)},positions:["bottom"],padding:2,content:function(){return(0,s.jsx)(M,{defaultValue:t,options:i,onChange:u})},children:(0,s.jsxs)(b.zx,{sx:n,variant:"dropDownButton",onClick:function(){return l(!a)},disabled:o,children:[t," ",a?(0,s.jsx)(w.bOz,{size:"24px"}):(0,s.jsx)(w.mEq,{size:"24px"})]})})})},F=t(67557);(o=i||(i={})).DESKTOP="Desktop",o.TABLET="Tablet",o.MOBILE="Mobile",o.CUSTOM="Custom";var N=(r={},(0,F.Z)(r,i.DESKTOP,{width:1280,height:800}),(0,F.Z)(r,i.TABLET,{width:1080,height:810}),(0,F.Z)(r,i.MOBILE,{width:390,height:844}),r),B=function(e){var n=e.label,t=e.startValue,i=e.onChange,r=e.sx,o=e.disabled,c=["e","-","+",",","."];return(0,s.jsxs)(b.kC,{sx:(0,x.Z)({alignItems:"center"},r),children:[(0,s.jsx)(b.__,{sx:{backgroundColor:"grey07",border:"transparent",borderRight:function(e){var n;return"1px solid ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.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(n,"-screensize-input"),children:n}),(0,s.jsx)(b.II,{type:"number",name:"".concat(n,"-screensize-input"),disabled:o,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:i,value:t,min:"0",onKeyDown:function(e){c.includes(e.key)&&e.preventDefault()}})]})},A=function(e){var n=e.handleScreenSizeChange,t=e.screenDimensions,r=e.actionsDisabled,o=(0,v.useState)(i.DESKTOP),c=o[0],a=o[1],l=function(e){a(e),e!==i.CUSTOM&&n(N[e])},u=function(e){var t=Object.values(N).findIndex(function(n){return JSON.stringify(n)===JSON.stringify(e)}),r=t<0?i.CUSTOM:Object.keys(N)[t];a(r),n(e)};return(0,s.jsx)(b.kC,{sx:{alignItems:"center",pb:"16px",justifyContent:"space-between",variant:"small"},children:(0,s.jsxs)(b.kC,{sx:{alignItems:"center",flex:1},children:[(0,s.jsx)(T,{options:Object.values(i),onChange:l,buttonSx:{alignSelf:"start"},currentValue:c,disabled:r}),(0,s.jsx)(B,{label:"W",startValue:t.width.toString(),onChange:function(e){u((0,f.Z)((0,x.Z)({},t),{width:Number(e.target.value)}))},disabled:r,sx:{mx:2}}),(0,s.jsx)(w.eSQ,{size:16,color:"#6F6E77"}),(0,s.jsx)(B,{label:"H",startValue:t.height.toString(),onChange:function(e){u((0,f.Z)((0,x.Z)({},t),{height:Number(e.target.value)}))},disabled:r,sx:{ml:2}})]})})},L=t(25812),P=t(77174),W=t(24340),H=t(90374),U=t(54132),V=t(61931),q=function(e){var n=e.sliceName,t=e.screenshotUrl,i=(0,z.v9)(function(e){return{isScreenshotModalOpen:(0,P.gP)(e,W.q.SCREENSHOT_PREVIEW)}}).isScreenshotModalOpen,r=(0,H.Z)().closeModals;return(0,s.jsx)(L.Z,{isOpen:i,shouldCloseOnOverlayClick:!0,contentLabel:"Screenshot Preview",portalClassName:"ScreenshotPreviewModal",onRequestClose:r,children:(0,s.jsx)(U.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:function(){return(0,s.jsxs)(b.kC,{sx:{position:"sticky",top:0,zIndex:1,p:"16px",alignItems:"center",justifyContent:"space-between",borderBottom:function(e){var n;return"1px solid ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.borders))}},children:[(0,s.jsxs)(b.X6,{sx:{fontSize:"14px"},children:["Screenshot Preview for ",n]}),(0,s.jsx)(b.x8,{type:"button",onClick:function(){return r()}})]})},Footer:function(){return(0,s.jsx)(b.kC,{style:{justifyContent:"flex-end",height:64,alignItems:"center",paddingRight:16,borderTop:"1px solid #DCDBDD"},children:(0,s.jsx)(b.zx,{variant:"secondary",sx:{fontWeight:600},onClick:function(){return r()},children:"Close"})})},children:(0,s.jsx)(V.q,{src:t,sx:{height:"320px"}})})})},X=t(25242),K=t(81541),Y=function(e,n,t){var i=(0,v.useState)(e()),r=i[0],o=i[1],s=(0,v.useRef)(Date.now());return(0,v.useEffect)(function(){var t=setTimeout(function(){Date.now()-s.current>=n&&(o(e()),s.current=Date.now())},n-(Date.now()-s.current));return function(){clearTimeout(t)}},[n].concat((0,K.Z)(t))),r},J=t(17064),$=t(16),Q=function(e){var n,t,i,r,o,c,a,l=e.apiContent,u=e.screenDimensions,f=e.simulatorUrl,p=e.dryRun,g=e.isScreenshot,m=void 0!==g&&g,j=e.handleSimulatorConnectionResult,C=(0,J.Z)((t=(n=(0,v.useState)())[0],i=n[1],r=(0,v.useRef)(),o=(0,v.useRef)(),a=(0,v.useCallback)((c=(0,d.Z)(function(e){var n,t,s,c;return(0,h.__generator)(this,function(a){switch(a.label){case 0:if(null===(n=r.current)||void 0===n||n.disconnect(),null===(t=o.current)||void 0===t||t.disconnect(),i(void 0),!(null!=e))return[3,4];r.current=new $.SH(e),a.label=1;case 1:return a.trys.push([1,3,,4]),[4,r.current.connect()];case 2:var l;return a.sent(),i(r.current),l=(0,d.Z)(function(){var e;return(0,h.__generator)(this,function(n){switch(n.label){case 0:return i(void 0),[4,null===(e=r.current)||void 0===e?void 0:e.connect({},!0)];case 1:return n.sent(),i(r.current),[2]}})}),s=function(){return l.apply(this,arguments)},o.current=new MutationObserver(function(e){e.forEach(function(e){"src"===e.attributeName&&s().catch(function(e){throw e})})}),o.current.observe(e,{attributeFilter:["src"]}),[3,4];case 3:return c=a.sent(),console.error(c),[3,4];case 4:return[2]}})}),function(e){return c.apply(this,arguments)}),[]),[t,a]),2),S=C[0],k=C[1];(0,v.useEffect)(function(){var e;if(!f){j("failed");return}if(void 0!==S){if(!S.connected){j("failed"),console.warn("Trying to use a disconnected simulator client.");return}(e=(0,d.Z)(function(){return(0,h.__generator)(this,function(e){switch(e.label){case 0:return[4,S.setSliceZone([l])];case 1:return e.sent(),[2]}})}),function(){return e.apply(this,arguments)})().then(function(){j("successful")}).catch(function(){j("failed")})}},[S,l,f]);var y,w,E,R,Z,D,I,z,O,M=(0,v.useState)(),_=M[0],T=M[1],F=(y=function(e){var n;T({height:e.blockSize,width:e.inlineSize})},E=(0,v.useRef)(),(0,v.useCallback)(function(e){var n;null===(n=E.current)||void 0===n||n.disconnect(),null!==e&&(E.current=new ResizeObserver(function(n){var t,i=(0,J.Z)(n,1)[0].contentRect;y({blockSize:i.height,inlineSize:i.width},e)}),E.current.observe(e))},[]));return(0,s.jsx)(b.kC,{ref:F,sx:(0,x.Z)({alignItems:"center",backgroundColor:"headSection",backgroundImage:"url(/pattern.png)",backgroundRepeat:"repeat",backgroundSize:"10px",border:m?void 0:function(e){var n;return"1px solid ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.darkBorder))},borderRadius:m?void 0:8,display:"flex",height:"100%",justifyContent:"center",overflow:"hidden"},void 0!==p&&p?{display:"none"}:{}),children:f?(0,s.jsx)("iframe",{ref:k,src:f,style:(0,x.Z)({border:"none",maxHeight:"".concat(u.height,"px"),maxWidth:"".concat(u.width,"px"),minHeight:"".concat(u.height,"px"),minWidth:"".concat(u.width,"px"),overflowY:"auto"},_?{transform:"scale(".concat((R=u,Z=_,D=R.height,I=R.width,z=Z.height,O=Z.width,I>O||D>z?I-O>D-z?O/I:z/D:1),")")}:{display:"none"})}):null})},G=t(8564),ee=function(e){var n=e.children,t=e.sx;return(0,s.jsx)(b.kC,{sx:(0,x.Z)({bg:"grey07",height:"90%",width:"100%",justifyContent:"center",alignItems:"center",zIndex:"1"},t),children:(0,s.jsx)(b.kC,{sx:{marginTop:"-128px",justifyContent:"center",flexDirection:"column",alignItems:"center"},children:n})})},en=t(85819),et=function(e){var n=e.onRetrigger;return(0,s.jsxs)(ee,{children:[(0,s.jsx)(b.Ee,{src:"/iframe-not-running.png",sx:{width:"320px"}}),(0,s.jsx)(b.xv,{sx:{color:"textClear",mb:2,fontSize:"14px",lineHeight:"24px",fontWeight:"600"},children:"Slice Machine can't render your Slice"}),(0,s.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,s.jsx)("br",{}),(0,s.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,s.jsx)("br",{})," If that doesn't work, see the\xa0",(0,s.jsx)(b.rU,{target:"_blank",href:"https://prismic.io/docs/slice-machine#simulate-slices",sx:{color:"link"},children:"troubleshooting instructions."})]}),(0,s.jsx)(C.z,{onClick:n,label:"Refresh",Icon:en.Fer,iconSize:20,iconFill:"#6F6E77",variant:"secondaryMedium",sx:{mt:"16px"}})]})},ei=t(53559),er=function(e){var n,t,r=e.slice,o=e.variation,c=(0,H.Z)().updateSliceMockSuccess,a=(0,z.v9)(function(e){return{simulatorUrl:(0,O.x0)(e),endpoints:(0,O.gZ)(e)}}),l=a.simulatorUrl,u=a.endpoints,C=(0,v.useMemo)(function(){return{embedsUrl:u.PrismicOembed,env:"prod",unsplashUrl:u.PrismicUnsplash}},[u.PrismicOembed,u.PrismicUnsplash]);(0,v.useEffect)(function(){I.Xe.track({event:"slice-simulator:open"})},[]);var S=(0,v.useRef)(!1);(0,v.useEffect)(function(){S.current=!0},[]);var k=function(e){S.current&&(S.current=!1,I.Xe.track({event:"editor:widget-used",sliceId:e}))},y=(0,v.useState)("waiting"),w=y[0],E=y[1];(0,v.useEffect)(function(){if("waiting"===w){var e=setTimeout(function(){E("failed")},2e4);return function(){return clearTimeout(e)}}},[w]);var R,Z=function(e){"waiting"===w&&("failed"===e?I.Xe.track({event:"slice-simulator:is-not-running"}):er(!0),E(e))},M=function(){E("waiting")},_=(0,v.useState)(N[i.DESKTOP]),T=_[0],F=_[1],B=(0,v.useMemo)(function(){return ei.id.fromSM(r.model)},[r.model]),L=(0,v.useState)(null),P=L[0],W=L[1],U=(0,v.useMemo)(function(){var e,n;return(null==P?void 0:P.variation)===o.id?P:(null===(e=r.mocks)||void 0===e?void 0:e.find(function(e){return e.variation===o.id}))||{__TYPE__:"SharedSliceContent",variation:n=o.id,primary:{},items:[]}},[P,o.id]),V=(0,v.useMemo)(function(){return(0,X.renderSliceMock)(B,U).id},[]),K=(0,v.useCallback)(function(){return function(){return(0,f.Z)((0,x.Z)({},(0,X.renderSliceMock)(B,U)),{id:V})}},[B,U]),J=Y(K,800,[B,U,]),$=(0,v.useState)(!1),en=$[0],er=$[1],eo=(0,v.useState)(!1),es=eo[0],ec=eo[1],ea=(R=(0,d.Z)(function(){var e,n,t,i;return(0,h.__generator)(this,function(o){switch(o.label){case 0:if(!P)return[3,5];ec(!0),o.label=1;case 1:return o.trys.push([1,3,,4]),n={libraryID:r.from,sliceID:r.model.id,mocks:(null!==(e=r.mocks)&&void 0!==e?e:[]).filter(function(e){return e.variation!==P.variation}).concat(P)},[4,(0,I.y3)(n)];case 2:if((t=o.sent().errors).length>0)throw t;return c(n),m.Am.success("Saved"),[3,4];case 3:return i=o.sent(),console.error("Error while saving mock",i),m.Am.error("Error saving content"),[3,4];case 4:ec(!1),o.label=5;case 5:return[2]}})}),function(){return R.apply(this,arguments)});return(0,s.jsxs)(b.kC,{sx:{flexDirection:"column",height:"100vh"},children:[(0,s.jsx)(D,{slice:r,variation:o,isDisplayEditor:en,actionsDisabled:"successful"!==w,toggleIsDisplayEditor:function(){return er(!en)},onSaveMock:function(){ea()},isSavingMock:es}),(0,s.jsx)(b.xu,{sx:{flex:1,bg:"grey07",p:3,display:"flex",flexDirection:"column",height:"calc(100% - 73px - 16px)"},children:(0,s.jsxs)(b.kC,{sx:{flex:1,flexDirection:"row",position:"relative",width:"100%",height:"100%"},children:[(0,s.jsxs)(j.xR,{sx:{display:"flex",height:"100%",flexDirection:"column",flex:1,minWidth:0},children:[(0,s.jsx)(A,{handleScreenSizeChange:F,screenDimensions:T,actionsDisabled:"successful"!==w}),"failed"===w?(0,s.jsx)(et,{onRetrigger:M}):null,"successful"===w?(0,s.jsx)(Q,{apiContent:J,screenDimensions:T,simulatorUrl:l,handleSimulatorConnectionResult:Z}):(0,s.jsx)(s.Fragment,{children:"waiting"===w?(0,s.jsxs)(ee,{children:[(0,s.jsx)(b.$j,{variant:"styles.spinner"}),(0,s.jsx)(Q,{apiContent:J,screenDimensions:T,simulatorUrl:l,dryRun:!0,handleSimulatorConnectionResult:Z})]}):null})]}),"successful"===w&&en?(0,s.jsx)(b.kC,{className:"editor",sx:{flexDirection:"column",marginLeft:"16px",maxWidth:"440px",minWidth:"440px",overflowY:"auto"},children:(0,s.jsx)(G.S,{renderError:function(){return(0,s.jsx)(g.Iq,{title:"Editor error",description:"An error occurred while rendering the editor."})},children:(0,s.jsx)(v.Suspense,{children:(0,s.jsx)(p.kS,{config:C,content:U,onContentChange:function(e){W(e),k(r.model.id)},sharedSlice:B},o.id)})})}):null]})}),!!(null===(n=r.screenshots[o.id])||void 0===n?void 0:n.url)&&(0,s.jsx)(q,{sliceName:r.model.name,screenshotUrl:null===(t=r.screenshots[o.id])||void 0===t?void 0:t.url})]})},eo=t(25998);function es(){var e=(0,l.useRouter)(),n=(0,eo.Z)(),t=n.slice,i=n.variation;return void 0===t||void 0===i?(e.replace("/"),null):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a(),{children:(0,s.jsx)("title",{children:"Simulator: ".concat(t.model.name," - Slice Machine")})}),(0,s.jsx)(er,{slice:t,variation:i})]})}},25998:function(e,n,t){"use strict";t.d(n,{Z:function(){return c}});var i=t(5632),r=t(56580),o=t(95200),s=function(e,n,t){var i,r=null===(i=(0,o.Sd)(e))||void 0===i?void 0:i.find(function(e){return e.name.replace(/\//g,"--")===n});return null==r?void 0:r.components.find(function(e){return e.model.name===t})},c=function(){var e=(0,i.useRouter)(),n=(0,r.v9)(function(n){return{slice:s(n,e.query.lib,e.query.sliceName)}}).slice;if(!n)return{};var t=n.model.variations.find(function(n){return n.id===e.query.variation});return t?{slice:n,variation:t}:{}}}},function(e){e.O(0,[789,872,851,46,774,888,179],function(){return e(e.s=30755)}),_N_E=e.O()}]);