(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[45617],{15538:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>U});var s=r(87687),n=r(31928),a=r(20120),i=r(78262),o=r(30251);let l=(0,n.I)("div")({name:"Wrapper",class:"wchwcuz",propsAsIs:!1}),c=(0,n.I)("div")({name:"Outline",class:"ougllba",propsAsIs:!1}),p=(0,n.I)(o.CS.div)({name:"VisibleBox",class:"v139udzd",propsAsIs:!0}),x=function(e){let{size:t=80,extra:r,style:n,children:a}=e;return(0,s.jsxs)(l,{children:[(0,s.jsx)(c,{}),(0,s.jsx)(p,{style:{background:r?"var(--color-gray-500)":"var(--color-primary)",opacity:r?1:.8,...n},children:a})]})};r(12213);let d=(0,n.I)("code")({name:"Code0",class:"c159g22c",propsAsIs:!1});r(70393);let u=(0,n.I)("div")({name:"Wrapper",class:"w1kw2wmc",propsAsIs:!1});r(70995);let m=function(e){let{singleAxis:t,withText:r,x:n,y:a}=e,i=(0,o.zh)({transform:t?"scale(".concat(n,")"):"scale(".concat(n,", ").concat(a,")")});return(0,s.jsxs)(u,{children:[(0,s.jsx)(x,{style:i,children:r&&"Hello World"}),(0,s.jsxs)(d,{children:["transform: scale(",t?n:"".concat(n,", ").concat(a),");"]})]})},j=(0,n.I)("div")({name:"BoxRow",class:"bbmk1gc",propsAsIs:!1}),g=function(e){let{variant:t,x:r,y:n}=e,a="translate-percentage"===t?"%":"px",i=(0,o.zh)({transform:"translate(".concat(r).concat(a,", ").concat(n).concat(a,")")});return(0,s.jsxs)(u,{children:["translate-px-flow"===t?(0,s.jsxs)(j,{children:[(0,s.jsx)(x,{extra:!0}),(0,s.jsx)(x,{style:i}),(0,s.jsx)(x,{extra:!0})]}):(0,s.jsx)(x,{style:i}),(0,s.jsxs)(d,{children:["transform: translate(",r,a,", ",n,a,");"]})]})};r(57509),(0,n.I)("div")({name:"BoxRow",class:"b1775f9q",propsAsIs:!1});let b=function(e){let{variant:t,pixels:r,percentage:n}=e,a="translateX(calc(".concat(n,"% + ").concat(r,"px))"),i=(0,o.zh)({transform:a});return(0,s.jsxs)(u,{children:[(0,s.jsx)(x,{style:i}),(0,s.jsxs)(d,{children:["transform: ",a,";"]})]})},v=function(e){let{rotation:t,unit:r}=e,n=(0,o.zh)({transform:"rotate(".concat(t).concat(r,")")});return(0,s.jsxs)(u,{children:[(0,s.jsx)(x,{style:n}),(0,s.jsxs)(d,{children:["transform: rotate(",t,r,");"]})]})},h=function(e){let{variant:t,rotation:r,axis:n="x"}=e,a=n.toUpperCase(),i="skew"===t?"skew(".concat(r,"deg)"):"skew".concat(a,"(").concat(r,"deg)"),l=(0,o.zh)({transform:"skewX(".concat(r,"deg)")}),c=(0,o.zh)({transform:"skewY(".concat(r,"deg)")});return(0,s.jsxs)(u,{children:[(0,s.jsx)(x,{style:"x"===n?l:c,children:"Hello World"}),(0,s.jsxs)(d,{children:["transform: ",i,";"]})]})},f=function(e){let{translateX:t,rotation:r,variant:n}=e,a="multiple"===n?"translateX(".concat(t,"px) rotate(").concat(r,"deg)"):"rotate(".concat(r,"deg) translateX(").concat(t,"px)"),i=(0,o.zh)({transform:a});return(0,s.jsxs)(u,{children:[(0,s.jsx)(x,{style:i}),(0,s.jsxs)(d,{children:["transform: ",a,";"]})]})};var w=r(59341);let y=(0,n.I)(w.P.div)({name:"BoxWrapper",class:"b1jncdej",propsAsIs:!0}),I=(0,n.I)(w.P.div)({name:"IndicatorWrapper",class:"i15oiujs",propsAsIs:!0}),A=(0,n.I)(w.P.div)({name:"Indicator",class:"i1u2vg5i",propsAsIs:!0}),P=function(e){let{variant:t,rotation:r,scale:n,origin:a,showOriginIndicator:i}=e,l="origin"===t?"rotate(".concat(r,"deg)"):"scale(".concat(n,")"),c=(0,o.zh)({transform:l}),p=function(e){switch(e){case"center":return{left:"50%",top:"50%"};case"left top":return{left:"0%",top:"0%"};case"25px bottom":return{left:"25px",top:"100%"};case"0% 150%":return{left:"0%",top:"150%"};default:throw Error("Unrecognized origin: ".concat(e))}}(a);return(0,s.jsxs)(u,{children:[(0,s.jsxs)(y,{layout:!0,children:[(0,s.jsx)(x,{style:{...c,transformOrigin:a}}),(0,s.jsx)(I,{children:(0,s.jsx)(A,{layout:!0,style:{opacity:i?1:0,...p}})})]}),(0,s.jsxs)(d,{children:["transform: ",l,";",(0,s.jsx)("br",{}),"transform-origin: ",a,";"]})]})};r(50153);let k=(0,n.I)(w.P.div)({name:"BoxWrapper",class:"b4f6aen",propsAsIs:!0}),R=(0,n.I)(w.P.div)({name:"IndicatorWrapper",class:"ih2er14",propsAsIs:!0}),W=(0,n.I)(w.P.div)({name:"Indicator",class:"i1gr86ek",propsAsIs:!0}),z=function(e){let{variant:t,rotation:r,x:n,origin:a}=e,i="rotate(".concat(r,"deg) translateX(").concat(n,"px)"),l=(0,o.zh)({transform:i}),c=function(e){switch(e){case"center":return{left:"50%",top:"50%"};case"left top":return{left:"0%",top:"0%"};case"25px bottom":return{left:"25px",top:"100%"};case"0% 150%":return{left:"0%",top:"150%"};default:throw Error("Unrecognized origin: ".concat(e))}}(a);return(0,s.jsxs)(u,{children:[(0,s.jsxs)(k,{layout:!0,children:[(0,s.jsx)(x,{style:{...l,transformOrigin:a}}),(0,s.jsx)(R,{children:(0,s.jsx)(W,{layout:!0,style:c})})]}),(0,s.jsxs)(d,{children:["transform: ",i,";",(0,s.jsx)("br",{}),"transform-origin: ",a,";"]})]})};r(39709);let O=(0,n.I)("code")({name:"Code",class:"c18irxm6",propsAsIs:!1}),V=(0,n.I)("div")({name:"Box",class:"b7k1b71",propsAsIs:!1}),q=function(e){let{perspective:t}=e;return(0,s.jsxs)(u,{style:{perspective:"".concat(t,"px")},children:[(0,s.jsx)(V,{}),(0,s.jsxs)(O,{children:["perspective: ",t,"px;"]})]})};r(38417);let C=(0,n.I)("div")({name:"Box",class:"b2ep0qa",propsAsIs:!1}),S=function(e){let{enablePerspective:t}=e;return(0,s.jsx)(u,{style:{perspective:"true"===t?"250px":void 0},children:(0,s.jsx)(C,{})})};r(54584);let B=(0,n.I)("div")({name:"TvBox",class:"t2mqymg",propsAsIs:!1}),X=(0,n.I)(o.CS.img)({name:"Image",class:"ij09k0n",propsAsIs:!0}),T=function(e){let{isOn:t}=e,r=t?"scale(1, 1)":"scale(0.5, 0)",n=t?"brightness(100%)":"brightness(800%)",a=(0,o.zh)({transform:r,filter:n,immediate:t});return(0,s.jsxs)(u,{children:[(0,s.jsx)(B,{children:(0,s.jsx)(X,{alt:"Old-timey black-and-white video, showing people walking in a city",src:"/images/transforms/old-time.gif",style:a})}),(0,s.jsxs)(d,{children:["transform: ",r,";",(0,s.jsx)("br",{}),"filter: ",n,";"]})]})};r(91585);let E=(0,n.I)(i.A)({name:"OutputWrapper",class:"o1oxpglm",propsAsIs:!0}),U=function(e){let{variant:t}=e;switch(t){case"translate-px":case"translate-px-flow":return(0,s.jsx)(a.Ay,{id:t,outputWrapper:E,initialValues:{x:0,y:0},controls:[(0,s.jsx)(a.oP,{id:"x",label:"x",min:-50,max:50,previewRenderer:e=>"".concat(e,"px")},"x"),(0,s.jsx)(a.oP,{id:"y",label:"y",min:-50,max:50,previewRenderer:e=>"".concat(e,"px")},"y")],children:e=>{let{x:r,y:n}=e;return(0,s.jsx)(g,{variant:t,x:r,y:n})}});case"translate-percentage":return(0,s.jsx)(a.Ay,{id:t,outputWrapper:E,initialValues:{x:0,y:0},controls:[(0,s.jsx)(a.oP,{id:"x",label:"x",min:-100,max:100,previewRenderer:e=>"".concat(e,"%")},"x"),(0,s.jsx)(a.oP,{id:"y",label:"y",min:-100,max:100,previewRenderer:e=>"".concat(e,"%")},"y")],children:e=>{let{x:r,y:n}=e;return(0,s.jsx)(g,{variant:t,x:r,y:n})}});case"translate-calc":return(0,s.jsx)(a.Ay,{id:t,outputWrapper:E,initialValues:{percentage:0,pixels:0},controls:[(0,s.jsx)(a.oP,{id:"percentage",label:"Percentage",min:-100,max:100,previewRenderer:e=>"".concat(e,"%")},"percentage"),(0,s.jsx)(a.oP,{id:"pixels",label:"Pixels",min:-50,max:50,previewRenderer:e=>"".concat(e,"px")},"pixels")],children:e=>{let{percentage:r,pixels:n}=e;return(0,s.jsx)(b,{variant:t,percentage:r,pixels:n})}});case"tv-turn-off":return(0,s.jsx)(a.Ay,{id:t,outputWrapper:E,initialValues:{isOn:!0},controls:[(0,s.jsx)(a.wI,{id:"isOn",label:"Power status",options:[{label:"On",value:!0},{label:"Off",value:!1}]},"isOn")],children:e=>{let{isOn:t}=e;return(0,s.jsx)(T,{isOn:t})}});case"scale":case"scale-text":return(0,s.jsx)(a.Ay,{id:t,outputWrapper:E,initialValues:{ratio:1},controls:[(0,s.jsx)(a.oP,{id:"ratio",label:"Ratio",min:0,max:2,step:.05},"ratio")],children:e=>{let{ratio:r}=e;return(0,s.jsx)(m,{singleAxis:!0,withText:"scale-text"===t,x:r})}});case"scale-both":return(0,s.jsx)(a.Ay,{id:t,outputWrapper:E,initialValues:{x:1,y:1},controls:[(0,s.jsx)(a.oP,{id:"x",label:"x",min:0,max:2,step:.05},"x"),(0,s.jsx)(a.oP,{id:"y",label:"y",min:0,max:2,step:.05},"y")],children:e=>{let{x:t,y:r}=e;return(0,s.jsx)(m,{x:t,y:r})}});case"rotate-deg":case"rotate-turn":{let e="rotate-deg"===t?"deg":"turn";return(0,s.jsx)(a.Ay,{id:t,outputWrapper:E,initialValues:{rotation:0},controls:[(0,s.jsx)(a.oP,{id:"rotation",label:"Rotation",min:"deg"===e?-360:-1,max:"deg"===e?540:1,step:"turn"===e?.1:1,previewRenderer:t=>"".concat(t).concat(e)},"rotation")],children:t=>{let{rotation:r}=t;return(0,s.jsx)(v,{rotation:r,unit:e})}})}case"skew":return(0,s.jsx)(a.Ay,{id:t,outputWrapper:E,initialValues:{rotation:0},controls:[(0,s.jsx)(a.oP,{id:"rotation",label:"Skew",min:-45,max:45,previewRenderer:e=>"".concat(e,"deg")},"rotation")],children:e=>{let{rotation:r}=e;return(0,s.jsx)(h,{variant:t,rotation:r})}});case"skew-axes":return(0,s.jsx)(a.Ay,{id:t,outputWrapper:E,initialValues:{rotation:0,axis:"x"},controls:[(0,s.jsx)(a.oP,{id:"rotation",label:"Rotation",min:-45,max:45,previewRenderer:e=>"".concat(e,"deg")},"rotation"),(0,s.jsx)(a.wI,{id:"axis",label:"Axis",options:[{label:"X",value:"x"},{label:"Y",value:"y"}]},"axis")],children:e=>{let{rotation:r,axis:n}=e;return(0,s.jsx)(h,{variant:t,rotation:r,axis:n})}});case"multiple-reversed":case"multiple":{let e=[(0,s.jsx)(a.oP,{id:"x",label:"x",min:0,max:100,previewRenderer:e=>"".concat(e,"px")},"x"),(0,s.jsx)(a.oP,{id:"rotation",label:"Rotation",min:0,max:180,previewRenderer:e=>"".concat(e,"deg")},"rotation")];return"multiple-reversed"===t&&e.reverse(),(0,s.jsx)(a.Ay,{id:t,outputWrapper:E,initialValues:{x:0,rotation:0},controls:e,children:e=>{let{x:r,rotation:n}=e;return(0,s.jsx)(f,{translateX:r,rotation:n,variant:t})}})}case"origin":case"origin-scale":return(0,s.jsx)(a.Ay,{id:t,outputWrapper:E,initialValues:{rotation:0,scale:1,origin:"center",showOriginIndicator:!0},controls:["origin"===t?(0,s.jsx)(a.oP,{id:"rotation",label:"Rotation",min:0,max:360,previewRenderer:e=>"".concat(e,"deg")},"rotation"):(0,s.jsx)(a.oP,{id:"scale",label:"Scale",min:0,max:2,step:.05},"scale"),(0,s.jsx)(a.hd,{id:"origin",label:"Transform Origin",options:[{label:"center (default)",value:"center"},"left top","25px bottom","0% 150%"]},"origin"),(0,s.jsx)(a.wI,{id:"showOriginIndicator",label:"Show Origin",options:[{label:"true",value:!0},{label:"false",value:!1}]},"showOriginIndicator")],customGrid:{gridTemplateColumns:"1fr 1fr 1fr"},children:e=>{let{rotation:r,scale:n,origin:a,showOriginIndicator:i}=e;return(0,s.jsx)(P,{variant:t,rotation:r,scale:n,origin:a,showOriginIndicator:i})}});case"multiple-origin":return(0,s.jsx)(a.Ay,{id:t,outputWrapper:E,initialValues:{rotation:0,x:0,origin:"center"},controls:[(0,s.jsx)(a.oP,{id:"rotation",label:"Rotation",min:0,max:360,previewRenderer:e=>"".concat(e,"deg")},"rotation"),(0,s.jsx)(a.oP,{id:"x",label:"x",min:0,max:100,previewRenderer:e=>"".concat(e,"px")},"x"),(0,s.jsx)(a.hd,{id:"origin",label:"Transform Origin",options:[{label:"center (default)",value:"center"},"left top","25px bottom","0% 150%"]},"origin")],customGrid:{gridTemplateColumns:"1fr 1fr 1fr"},children:e=>{let{rotation:r,x:n,origin:a}=e;return(0,s.jsx)(z,{variant:t,rotation:r,x:n,origin:a})}});case"enable-perspective":return(0,s.jsx)(a.Ay,{id:t,initialValues:{enablePerspective:"false"},controls:[(0,s.jsx)(a.wI,{id:"enablePerspective",label:"Enable Perspective",options:["true","false"]},"enablePerspective")],children:e=>{let{enablePerspective:r}=e;return(0,s.jsx)(S,{variant:t,enablePerspective:r})}});case"perspective":return(0,s.jsx)(a.Ay,{id:t,initialValues:{perspective:250},controls:[(0,s.jsx)(a.oP,{id:"perspective",label:"Perspective",min:50,max:600,previewRenderer:e=>"".concat(e,"px")},"perspective")],children:e=>{let{perspective:r}=e;return(0,s.jsx)(q,{variant:t,perspective:r})}});default:return"Unrecognized variant"}};r(23515)},12213:e=>{e.exports={wchwcuz:"wchwcuz",ougllba:"ougllba",v139udzd:"v139udzd"}},70393:e=>{e.exports={c159g22c:"c159g22c"}},54584:e=>{e.exports={b2ep0qa:"b2ep0qa","boxSpin-b2ep0qa":"boxSpin-b2ep0qa"}},39709:e=>{e.exports={b4f6aen:"b4f6aen",ih2er14:"ih2er14",i1gr86ek:"i1gr86ek"}},50153:e=>{e.exports={b1jncdej:"b1jncdej",i15oiujs:"i15oiujs",i1u2vg5i:"i1u2vg5i"}},38417:e=>{e.exports={c18irxm6:"c18irxm6",b7k1b71:"b7k1b71","perspectiveSpin-b7k1b71":"perspectiveSpin-b7k1b71"}},91585:e=>{e.exports={t2mqymg:"t2mqymg",ij09k0n:"ij09k0n"}},23515:e=>{e.exports={o1oxpglm:"o1oxpglm"}},57509:e=>{e.exports={bbmk1gc:"bbmk1gc"}},70995:e=>{e.exports={w1kw2wmc:"w1kw2wmc"}}}]);
//# sourceMappingURL=45617.1d3627c83e679382.js.map