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