(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[49502],{92346:(s,e,r)=>{"use strict";r.d(e,{Z:()=>n});/**
 * @license lucide-react v0.460.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */let n=(0,r(43349).Z)("ArrowLeft",[["path",{d:"m12 19-7-7 7-7",key:"1l729n"}],["path",{d:"M19 12H5",key:"x3x0zl"}]])},22936:(s,e,r)=>{"use strict";r.d(e,{Z:()=>n});/**
 * @license lucide-react v0.460.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */let n=(0,r(43349).Z)("RotateCw",[["path",{d:"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8",key:"1p45f6"}],["path",{d:"M21 3v5h-5",key:"1q7to0"}]])},3129:(s,e,r)=>{"use strict";r.d(e,{Z:()=>x});var n=r(67841),a=r(79477),t=r(64833),o=r(97718),i=r(49136);let l=a.forwardRef(function(s,e){let{Icon:r,iconSide:a="left",iconProps:t={},backgroundColor:o="var(--color-gray-900)",highlightColor:l="var(--color-gray-800)",boopEffect:x={rotation:10},children:b,style:v={},discouraged:g=!1,href:j,textAlign:f="center",...y}=s,[k,z]=(0,i.Z)(x);return(0,n.jsxs)(c,{ref:e,onMouseEnter:()=>{z()},style:{"--background-color":o,...v},"data-discouraged":g,href:j,as:"string"==typeof j?"a":"button",...y,children:[r&&(0,n.jsx)(d,{style:{order:"left"===a?1:3},children:(0,n.jsx)(u,{style:{"--background-color":l},children:(0,n.jsx)(m,{style:k,children:(0,n.jsx)(r,{size:20,...t})})})}),b&&(0,n.jsx)(h,{style:{order:2},children:b}),"true-center"===f&&(0,n.jsx)(p,{style:{order:"left"===a?3:1}})]})}),c=(0,t.z)("button")({name:"Wrapper",class:"w19mrn5v",propsAsIs:!1}),p=(0,t.z)("span")({name:"Col",class:"c1rpf4ut",propsAsIs:!1}),d=(0,t.z)(p)({name:"IconCol",class:"iwv8n0j",propsAsIs:!0}),u=(0,t.z)("span")({name:"IconBox",class:"i1qpbbb9",propsAsIs:!1}),m=(0,t.z)(o.q.span)({name:"IconWrapper",class:"i1m1cbkp",propsAsIs:!0}),h=(0,t.z)("span")({name:"ChildWrapper",class:"c7sw782",propsAsIs:!1}),x=l;r(96754)},56073:(s,e,r)=>{"use strict";r.d(e,{Z:()=>n});let n=(0,r(64833).z)("code")({name:"InlineCode",class:"i165vvr1",propsAsIs:!1});r(67787)},25967:(s,e,r)=>{"use strict";r.d(e,{Z:()=>t});var n=r(64833),a=r(21364);let t=(0,n.z)(a.Wc)({name:"Space",class:"s1hfctpl",propsAsIs:!0});r(55245)},42282:(s,e,r)=>{"use strict";r.d(e,{Z:()=>i});var n=r(79477),a=r(74631),t=r(87740);let o=s=>s instanceof MouseEvent,i=function(s){let{buffer:e=0,throttleBy:r=18,excludeTouchEvents:i,onEnterBox:l,onLeaveBox:c}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},p=(0,t.Z)(s),[d,u]=n.useState({x:null,y:null}),m=n.useRef(!1),h=n.useRef(l),x=n.useRef(c);return h.current=l,x.current=c,n.useEffect(()=>{let s=h.current,n=x.current,t=r=>{o(r)&&(r.preventDefault(),r.stopPropagation());let{clientX:a,clientY:t}=r;if(!p)return;if(!(a>=p.left-e&&a<=p.left+p.width+e&&t>=p.top-e&&t<=p.top+p.height+e)){m.current&&"function"==typeof n&&n(),m.current=!1;return}m.current||("function"==typeof s&&s(),m.current=!0);let i={x:a-p.left,y:t-p.top};m.current=!0,u(i)},[l,c]=(0,a.Ep)(t,r),[d,b]=(0,a.Ep)(s=>{t(s.touches[0])},r);return window.addEventListener("mousemove",l),i||window.addEventListener("touchmove",d),()=>{window.removeEventListener("mousemove",l),c(),i||(window.removeEventListener("touchmove",d),b())}},[p,e,r,i]),[d,p]}},49502:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>sX});var n=r(67841),a=r(79477),t=r(64833),o=r(42282),i=r(55158),l=r(28061);let c=(0,t.z)("div")({name:"Wrapper",class:"w1qszusq",propsAsIs:!1}),p=(0,t.z)("div")({name:"ImageWrapper",class:"isvxvbh",propsAsIs:!1}),d=(0,t.z)("img")({name:"Tokyo",class:"tvcyp0e",propsAsIs:!1}),u=(0,t.z)("div")({name:"Cursor",class:"ctfyewy",propsAsIs:!1}),m=(0,t.z)("div")({name:"CodeWrapper",class:"ck6v2m7",propsAsIs:!1});r(17490);let h=(0,t.z)("div")({name:"Wrapper",class:"wskxkqa",propsAsIs:!1}),x=(0,t.z)("img")({name:"Jerica",class:"j5sqeuc",propsAsIs:!1}),b=(0,t.z)("div")({name:"CodeWrapper",class:"c162apj7",propsAsIs:!1});r(4302);let v=(0,t.z)("div")({name:"Wrapper",class:"w1icc7dx",propsAsIs:!1}),g=(0,t.z)("div")({name:"Card",class:"c1l5p6hh",propsAsIs:!1}),j=(0,t.z)("div")({name:"CodeWrapper",class:"c1koe0ch",propsAsIs:!1});r(19545);let f=(0,t.z)("div")({name:"Wrapper",class:"w175hke3",propsAsIs:!1}),y=(0,t.z)("div")({name:"Label",class:"lma5bw3",propsAsIs:!1});r(24334);let k=(0,t.z)("div")({name:"Column",class:"cqyj72i",propsAsIs:!1}),z=(0,t.z)("img")({name:"Initial",class:"i1uvbyvl",propsAsIs:!1}),w=(0,t.z)("img")({name:"Img",class:"ivyzkeh",propsAsIs:!1}),I=(0,t.z)("div")({name:"Symbol",class:"sfuo6ds",propsAsIs:!1}),A=(0,t.z)("div")({name:"Squares",class:"sivonfy",propsAsIs:!1}),q=(0,t.z)(w)({name:"Mask",class:"m1i4un07",propsAsIs:!0});r(69140);let C=(0,t.z)("div")({name:"Column",class:"c1doekva",propsAsIs:!1}),B=(0,t.z)("img")({name:"Img",class:"i1ntii56",propsAsIs:!1}),Z=(0,t.z)("div")({name:"Symbol",class:"sy45si0",propsAsIs:!1}),W=(0,t.z)("div")({name:"FakeMask",class:"ftqb13p",propsAsIs:!1}),E=(0,t.z)("div")({name:"Blocker",class:"bar44ur",propsAsIs:!1}),L=(0,t.z)("div")({name:"Squares",class:"s1sm7kem",propsAsIs:!1});r(46401);var S=r(61417),P=r(48202),R=r(25967),M=r(3129);let T=(0,t.z)(R.Z)({name:"Wrapper",class:"w1icjxur",propsAsIs:!0}),H=(0,t.z)("div")({name:"Header",class:"hv1pb5o",propsAsIs:!1}),F=(0,t.z)("div")({name:"Backdrop",class:"bunns4",propsAsIs:!1}),G=(0,t.z)("div")({name:"Edge",class:"e9evofd",propsAsIs:!1}),V=(0,t.z)("div")({name:"BouncingBall",class:"b19n0c7a",propsAsIs:!1}),D=(0,t.z)("div")({name:"Actions",class:"ayr5vrn",propsAsIs:!1}),O=(0,t.z)(M.Z)({name:"Button",class:"b1qtwz37",propsAsIs:!0});r(36224);let U=(0,t.z)("div")({name:"Wrapper",class:"w1d4uhch",propsAsIs:!1}),_=(0,t.z)("img")({name:"Mascot",class:"m1wtl9k0",propsAsIs:!1}),N=(0,t.z)("div")({name:"CodeWrapper",class:"c1kud80y",propsAsIs:!1});r(78752);var J=r(92346),Y=r(25925),K=r(22936),Q=r(70231);let X=(0,t.z)("div")({name:"Wrapper",class:"w1bd8cgi",propsAsIs:!1}),$=(0,t.z)("div")({name:"Header",class:"hduekzx",propsAsIs:!1}),ss=(0,t.z)("div")({name:"TabBar",class:"t1xdhus0",propsAsIs:!1}),se=(0,t.z)("div")({name:"Tab",class:"tj6926w",propsAsIs:!1}),sr=(0,t.z)("div")({name:"TrafficLights",class:"t1vhg4x9",propsAsIs:!1}),sn=(0,t.z)("div")({name:"TrafficLight",class:"t8ndwpz",propsAsIs:!1}),sa=(0,t.z)(sn)({name:"Red",class:"rptyea",propsAsIs:!0}),st=(0,t.z)(sn)({name:"Yellow",class:"y1qao05t",propsAsIs:!0}),so=(0,t.z)(sn)({name:"Green",class:"g1v2ob21",propsAsIs:!0}),si=(0,t.z)("div")({name:"AddressBar",class:"a13tcou3",propsAsIs:!1}),sl=(0,t.z)("div")({name:"FakeBtn",class:"fn6azp",propsAsIs:!1}),sc=(0,t.z)("div")({name:"Address",class:"a1booqr",propsAsIs:!1}),sp=(0,t.z)(function(s){let e,{orientation:r,...a}=s;if("bottom-right"===r)e=0;else if("bottom-left"===r)e=90;else if("top-left"===r)e=180;else if("top-right"===r)e=270;else throw Error("Unrecognized orientation: "+r);return(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 16 16",preserveAspectRatio:"none",...a,children:(0,n.jsx)("path",{fill:"currentColor",d:"M0 16c8.837 0 16-7.163 16-16v16z",style:{transform:"rotate(".concat(e,"deg)"),transformOrigin:"center center"}})})})({name:"Corner",class:"choiq24",propsAsIs:!0}),sd=(0,t.z)(sp)({name:"LeftCorner",class:"lep27c6",propsAsIs:!0}),su=(0,t.z)(sp)({name:"RightCorner",class:"r2mz821",propsAsIs:!0}),sm=function(s){let{tabName:e="Some Example Website",url:r="https://designselement.com/example-website",maxHeight:a,children:t,style:o={},...i}=s,l=(0,Q.Z)();return(0,n.jsxs)(X,{...i,style:{...o,overflow:"firefox"===l?void 0:"hidden"},children:[(0,n.jsxs)($,{children:[(0,n.jsxs)(ss,{children:[(0,n.jsxs)(sr,{children:[(0,n.jsx)(sa,{}),(0,n.jsx)(st,{}),(0,n.jsx)(so,{})]}),(0,n.jsxs)(se,{children:[(0,n.jsx)(sd,{orientation:"bottom-right"}),(0,n.jsx)("span",{children:e}),(0,n.jsx)(su,{orientation:"bottom-left"})]})]}),(0,n.jsxs)(si,{children:[(0,n.jsx)(sl,{"aria-hidden":"true",children:(0,n.jsx)(J.Z,{size:14,strokeWidth:2.5})}),(0,n.jsx)(sl,{"aria-hidden":"true",children:(0,n.jsx)(Y.Z,{size:14,strokeWidth:2.5})}),(0,n.jsx)(sl,{"aria-hidden":"true",children:(0,n.jsx)(K.Z,{size:14,strokeWidth:2.5})}),(0,n.jsx)(sc,{children:(0,n.jsx)("span",{children:r})})]})]}),(0,n.jsx)("div",{style:{maxHeight:a,overflow:"string"==typeof a?"auto":"clip"},children:t})]})};r(81077);let sh=(0,t.z)(sm)({name:"Browser",class:"b1ciuxcz",propsAsIs:!0}),sx=(0,t.z)(R.Z)({name:"Wrapper",class:"wiq4f2u",propsAsIs:!0}),sb=(0,t.z)("div")({name:"Header",class:"h1rbjqq7",propsAsIs:!1}),sv=(0,t.z)("div")({name:"GlassyBackdrop",class:"gg7ehe1",propsAsIs:!1}),sg=(0,t.z)("img")({name:"BoatImg",class:"bamyhrc",propsAsIs:!1});r(90885);var sj=r(69448),sf=r(81431),sy=r(56073),sk=r(38339);let sz=(0,t.z)(sm)({name:"OuterWrapper",class:"o11h7o12",propsAsIs:!0}),sw=(0,t.z)(R.Z)({name:"Wrapper",class:"wi9xlz4",propsAsIs:!0}),sI=(0,t.z)("div")({name:"Header",class:"hpv2kfm",propsAsIs:!1}),sA=(0,t.z)("div")({name:"Backdrop",class:"b1dh7eg0",propsAsIs:!1}),sq=(0,t.z)("div")({name:"BackdropEdge",class:"bi95upp",propsAsIs:!1}),sC=(0,t.z)("p")({name:"Logo",class:"l19j3i1d",propsAsIs:!1}),sB=(0,t.z)("div")({name:"Content",class:"cufzfud",propsAsIs:!1}),sZ=(0,t.z)("p")({name:"OptionalP",class:"o1fnc03u",propsAsIs:!1}),sW=(0,t.z)("img")({name:"Cupcake",class:"c19tvtvc",propsAsIs:!1}),sE=(0,t.z)("div")({name:"Actions",class:"atopy0n",propsAsIs:!1}),sL=(0,t.z)(M.Z)({name:"Button",class:"b1t96eke",propsAsIs:!0});r(77805);let sS=(0,t.z)(R.Z)({name:"Wrapper",class:"wr5us8n",propsAsIs:!0}),sP=(0,t.z)("div")({name:"Header",class:"hhqru8",propsAsIs:!1}),sR=(0,t.z)("div")({name:"GlassyBackdrop",class:"g8qz4zc",propsAsIs:!1}),sM=(0,t.z)(sR)({name:"FixedGlassyBackdrop",class:"f1vokmyc",propsAsIs:!0}),sT=(0,t.z)("div")({name:"BouncingBall",class:"b1uj7lhw",propsAsIs:!1}),sH=(0,t.z)("div")({name:"Actions",class:"awqze7l",propsAsIs:!1}),sF=(0,t.z)(M.Z)({name:"Button",class:"b1rsl36b",propsAsIs:!0});r(90809);var sG=r(98585);let sV=(0,t.z)("div")({name:"OuterWrapper",class:"o18epsk2",propsAsIs:!1}),sD=(0,t.z)(sm)({name:"Browser",class:"b6b5bqw",propsAsIs:!0}),sO=(0,t.z)("div")({name:"Actions",class:"a111ymsy",propsAsIs:!1}),sU=(0,t.z)(R.Z)({name:"Wrapper",class:"w4xubrr",propsAsIs:!0}),s_=(0,t.z)("div")({name:"Header",class:"h1m7sl6v",propsAsIs:!1}),sN=(0,t.z)("div")({name:"GlassyBackdrop",class:"gulr24x",propsAsIs:!1}),sJ=(0,t.z)("div")({name:"HeaderContent",class:"h1k6d6pv",propsAsIs:!1}),sY=(0,t.z)("div")({name:"Title",class:"t1ltmapb",propsAsIs:!1}),sK=(0,t.z)("div")({name:"Body",class:"b182kq5h",propsAsIs:!1});r(68971);let sQ={BackdropInitialDemo:function(s){let{}=s,e=a.useRef(null),[r,t]=a.useState(!1),[h]=(0,o.Z)(e,{buffer:10,onEnterBox:()=>t(!0),onLeaveBox:()=>t(!1)}),x="number"==typeof h.x&&"number"==typeof h.y?{top:h.y,left:h.x}:{top:"80%",left:"50%"};return(0,n.jsx)(i.ZP,{initialValues:{sepia:50,brightness:130},controlPosition:"bottom",outputWrapper:null,controls:[(0,n.jsx)(i.vn,{id:"sepia",label:"Sepia",min:0,max:100,previewRenderer:s=>"".concat(s,"%")},"sepia"),(0,n.jsx)(i.vn,{id:"brightness",label:"Brightness",min:50,max:300,previewRenderer:s=>"".concat(s,"%")},"brightness")],children:s=>{let{sepia:a,brightness:t}=s;return(0,n.jsxs)(c,{children:[(0,n.jsxs)(p,{children:[(0,n.jsx)(d,{ref:e,src:"/images/backdrop-filter/tokyo.jpg",loading:"lazy"}),(0,n.jsx)(u,{style:{...x,"--scale":r?1:2,WebkitBackdropFilter:"sepia(".concat(a,"%) brightness(").concat(t,"%)"),backdropFilter:"sepia(".concat(a,"%) brightness(").concat(t,"%)")}})]}),(0,n.jsx)(m,{children:(0,n.jsx)(l.default,{lockedToColorMode:"dark",omitCopyButton:!0,lang:"css",code:".magic-ring {\n  backdrop-filter: sepia(".concat(a,"%) brightness(").concat(t,"%);\n}")})})]})}})},BasicBlur:function(s){let{}=s;return(0,n.jsx)(i.ZP,{initialValues:{radius:16},controlPosition:"bottom",outputWrapper:null,controlStyles:{gridTemplateColumns:"1fr"},controls:[(0,n.jsx)(i.vn,{id:"radius",label:"Blur radius",min:0,max:16,previewRenderer:s=>"".concat(s,"px"),wrapperStyle:{maxWidth:400,width:"100%",marginInline:"auto"}},"radius")],children:s=>{let{radius:e}=s;return(0,n.jsx)(n.Fragment,{children:(0,n.jsxs)(h,{children:[(0,n.jsx)(x,{alt:"My 3D mascot smiling with his tongue out. It’s very blurry, but dragging the slider makes it clearer",src:"/images/josh-originals/josh-tongue-dark.png",loading:"lazy",style:{filter:"blur(".concat(e,"px)")}}),(0,n.jsx)(b,{children:(0,n.jsx)(l.default,{lockedToColorMode:"dark",omitCopyButton:!0,lang:"css",code:".josh-mascot {\n  filter: blur(".concat(e,"px);\n}")})})]})})}})},BlurryText:function(s){let{}=s;return(0,n.jsx)(i.ZP,{initialValues:{radius:0,sepia:0},controlPosition:"bottom",outputWrapper:null,controls:[(0,n.jsx)(i.vn,{id:"radius",label:"Blur radius",min:0,max:16,step:.1,previewRenderer:s=>"".concat(s,"px")},"radius"),(0,n.jsx)(i.vn,{id:"sepia",label:"Sepia percentage",min:0,max:100,previewRenderer:s=>"".concat(s,"%")},"sepia")],children:s=>{let{radius:e,sepia:r}=s;return(0,n.jsxs)(v,{children:[(0,n.jsx)(g,{style:{filter:"blur(".concat(e,"px) sepia(").concat(r,"%)")},children:(0,n.jsx)("p",{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."})}),(0,n.jsx)(j,{children:(0,n.jsx)(l.default,{lockedToColorMode:"dark",omitCopyButton:!0,lang:"css",code:".lorem-card {\n  filter: blur(".concat(e,"px) sepia(").concat(r,"%);\n}")})})]})}})},EquationMaskIntro:function(){return(0,n.jsxs)(f,{children:[(0,n.jsxs)(k,{children:[(0,n.jsx)(y,{children:"Element"}),(0,n.jsx)(z,{src:"/images/backdrop-filter/tokyo.jpg"})]}),(0,n.jsx)(I,{children:"+"}),(0,n.jsxs)(k,{children:[(0,n.jsx)(y,{children:"Mask"}),(0,n.jsx)(A,{}),(0,n.jsx)(q,{src:"/images/backdrop-filter/tokyo-mask.png"})]}),(0,n.jsx)(I,{children:"="}),(0,n.jsxs)(k,{children:[(0,n.jsx)(y,{children:"Result"}),(0,n.jsx)(A,{}),(0,n.jsx)(w,{src:"/images/backdrop-filter/tokyo-masked.png"})]})]})},EquationMaskReal:function(){return(0,n.jsxs)(f,{children:[(0,n.jsxs)(C,{children:[(0,n.jsx)(y,{children:"Element"}),(0,n.jsx)(B,{src:"/images/backdrop-filter/mask-before.png"})]}),(0,n.jsx)(Z,{children:"+"}),(0,n.jsxs)(C,{children:[(0,n.jsx)(y,{children:"Mask"}),(0,n.jsxs)(W,{children:[(0,n.jsx)(L,{}),(0,n.jsx)(E,{})]})]}),(0,n.jsx)(Z,{children:"="}),(0,n.jsxs)(C,{children:[(0,n.jsx)(y,{children:"Result"}),(0,n.jsx)(B,{src:"/images/backdrop-filter/mask-after.png"})]})]})},GlassyEdge:function(){let[s,e]=a.useState("running");return(0,n.jsx)(i.ZP,{initialValues:{thickness:3,radius:8},controlPosition:"top",outputWrapper:null,controls:[(0,n.jsx)(i.vn,{id:"thickness",label:"Glass thickness",min:0,max:10,previewRenderer:s=>"".concat(s,"px")},"thickness"),(0,n.jsx)(i.vn,{id:"radius",label:"Edge blur radius",min:0,max:16,previewRenderer:s=>"".concat(s,"px")},"radius")],children:r=>{let{thickness:a,radius:t}=r;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(T,{children:[(0,n.jsxs)(H,{children:[(0,n.jsx)(F,{}),(0,n.jsx)(G,{style:{"--thickness":a+"px","--radius":t+"px"}})]}),(0,n.jsx)(V,{style:{animationPlayState:s}})]}),(0,n.jsx)(D,{children:(0,n.jsx)(O,{Icon:"running"===s?S.Z:P.Z,backgroundColor:"hsl(175deg 60% 25%)",highlightColor:"hsl(168deg 70% 35%)",onClick:()=>e("running"===s?"paused":"running"),children:"Play/Pause Animation"})})]})}})},HueRotate:function(s){let{}=s;return(0,n.jsx)(i.ZP,{initialValues:{rotation:0},controlPosition:"bottom",outputWrapper:null,controlStyles:{gridTemplateColumns:"1fr"},controls:[(0,n.jsx)(i.vn,{id:"rotation",label:"Hue rotation",min:0,max:360,previewRenderer:s=>"".concat(s,"deg"),wrapperStyle:{maxWidth:400,width:"100%",marginInline:"auto"}},"rotation")],children:s=>{let{rotation:e}=s;return(0,n.jsxs)(U,{children:[(0,n.jsx)(_,{alt:"My 3D mascot making a puzzled face. Dragging the slider causes him to become unnatural shades of green and pink.",src:"/images/newsletter/joy-of-react-mascot.png",loading:"lazy",style:{filter:"hue-rotate(".concat(e,"deg)")}}),(0,n.jsx)(N,{children:(0,n.jsx)(l.default,{omitCopyButton:!0,lockedToColorMode:"dark",lang:"css",code:".atom-fella {\n  filter: hue-rotate(".concat(e,"deg);\n}")})})]})}})},LeavingTheTop:function(s){let{withGradient:e}=s;return(0,n.jsx)(sh,{maxHeight:"250px",children:(0,n.jsxs)(sx,{children:[(0,n.jsx)(sb,{children:(0,n.jsx)(sv,{style:{background:e?"linear-gradient(\n    to bottom,\n    hsl(210deg 15% 6% / 1) 0%,\n    hsl(210deg 15% 6% / 0) 50%\n  )":"hsl(210deg 15% 6% / 0.1)"}})}),(0,n.jsx)(sg,{loading:"lazy",src:"/images/backdrop-filter/boats.jpg"})]})})},MainUseCaseDemo:function(s){let{}=s,[e,r]=a.useState("paused"),t=(0,sf.Z)(),o=(0,sj.Z)();return a.useEffect(()=>{r(o?"paused":"running")},[o]),(0,n.jsx)(sz,{children:(0,n.jsxs)(sw,{children:[(0,n.jsxs)(sI,{children:[(0,n.jsx)(sA,{}),(0,n.jsx)(sq,{}),(0,n.jsx)(sC,{children:"Some Website"})]}),(0,n.jsxs)(sB,{children:[(0,n.jsx)(sW,{src:"/images/backdrop-filter/cupcake.png",style:{animationPlayState:e}}),(0,n.jsxs)("p",{children:["This is an example website showing how I typically use"," ",(0,n.jsx)(sy.Z,{children:"backdrop-filter"})," to create glassy headers."]}),(0,n.jsx)(sZ,{children:"Notice that as the cupcake moves behind the header, it appears blurry, as it would if it was passing behind frosted glass."}),(0,n.jsx)(sE,{children:(0,n.jsx)(sL,{Icon:t?"running"===e?S.Z:P.Z:sk.Z,backgroundColor:"hsl(175deg 60% 25%)",highlightColor:"hsl(168deg 70% 35%)",boopEffect:{scale:1.1},onClick:()=>r("running"===e?"paused":"running"),children:"Play/Pause Animation"})})]})]})})},TheProblem:function(s){let{}=s,[e,r]=a.useState("running"),t=(0,sj.Z)();return a.useEffect(()=>{r(t?"paused":"running")},[t]),(0,n.jsx)(i.ZP,{initialValues:{mode:"default"},controlPosition:"top",customGrid:{gridTemplateColumns:"1fr"},outputWrapper:null,controls:[(0,n.jsx)(i.aU,{inline:!0,id:"mode",label:"",options:[{label:"Default",value:"default"},{label:"Tweaked",value:"fixed"}]},"mode")],children:s=>{let{mode:a}=s;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(sS,{children:[(0,n.jsx)(sP,{children:"default"===a?(0,n.jsx)(sR,{}):(0,n.jsx)(sM,{})}),(0,n.jsx)(sT,{style:{animationPlayState:e}})]}),(0,n.jsx)(sH,{children:(0,n.jsx)(sF,{Icon:"running"===e?S.Z:P.Z,backgroundColor:"hsl(175deg 60% 25%)",highlightColor:"hsl(168deg 70% 35%)",onClick:()=>r("running"===e?"paused":"running"),children:"Play/Pause Animation"})})]})}})},TooBusy:function(s){let{fix:e}=s,[r,t]=a.useState("blurrier"===e?12:5),[o,i]=a.useState("background"===e?.6:0);return(0,n.jsxs)(sV,{children:[(0,n.jsx)(sD,{maxHeight:"16rem",children:(0,n.jsxs)(sU,{children:[(0,n.jsxs)(s_,{style:{background:"hsl(210deg 15% 6% / ".concat(o,")")},children:[(0,n.jsx)(sN,{style:{"--radius":r+"px"}}),(0,n.jsxs)(sJ,{children:[(0,n.jsx)(sY,{children:"Some Website"}),(0,n.jsx)("nav",{children:(0,n.jsxs)("ul",{children:[(0,n.jsx)("li",{children:"Home"}),(0,n.jsx)("li",{children:"Shop"}),(0,n.jsx)("li",{children:"Contact"})]})})]})]}),(0,n.jsxs)(sK,{"aria-hidden":"true",children:[(0,n.jsx)("p",{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."}),(0,n.jsx)("p",{children:"It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."}),(0,n.jsx)("p",{children:'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.'})]})]})}),e&&(0,n.jsxs)(sO,{children:["blurrier"===e&&(0,n.jsx)(sG.Z,{id:"radius",label:"Blur radius",min:0,max:16,value:r,setValue:t,previewRenderer:s=>"".concat(s,"px")}),"background"===e&&(0,n.jsx)(sG.Z,{id:"opacity",label:"Background Opacity",min:0,max:1,step:.1,value:o,setValue:i})]})]})}};function sX(s){let{variant:e,...r}=s,a=sQ[e];if(!a)throw Error("Unrecognized variant: ".concat(e));return(0,n.jsx)(a,{...r||{}})}},96754:s=>{s.exports={w19mrn5v:"w19mrn5v",c1rpf4ut:"c1rpf4ut",iwv8n0j:"iwv8n0j",i1qpbbb9:"i1qpbbb9",i1m1cbkp:"i1m1cbkp",c7sw782:"c7sw782"}},81077:s=>{s.exports={w1bd8cgi:"w1bd8cgi",hduekzx:"hduekzx",t1xdhus0:"t1xdhus0",tj6926w:"tj6926w",t1vhg4x9:"t1vhg4x9",t8ndwpz:"t8ndwpz",rptyea:"rptyea",y1qao05t:"y1qao05t",g1v2ob21:"g1v2ob21",a13tcou3:"a13tcou3",fn6azp:"fn6azp",a1booqr:"a1booqr",choiq24:"choiq24",lep27c6:"lep27c6",r2mz821:"r2mz821"}},17490:s=>{s.exports={w1qszusq:"w1qszusq",isvxvbh:"isvxvbh",tvcyp0e:"tvcyp0e",ctfyewy:"ctfyewy",ck6v2m7:"ck6v2m7"}},4302:s=>{s.exports={wskxkqa:"wskxkqa",j5sqeuc:"j5sqeuc",c162apj7:"c162apj7"}},19545:s=>{s.exports={w1icc7dx:"w1icc7dx",c1l5p6hh:"c1l5p6hh",c1koe0ch:"c1koe0ch"}},24334:s=>{s.exports={w175hke3:"w175hke3",lma5bw3:"lma5bw3"}},69140:s=>{s.exports={cqyj72i:"cqyj72i",i1uvbyvl:"i1uvbyvl",ivyzkeh:"ivyzkeh",sfuo6ds:"sfuo6ds",sivonfy:"sivonfy",m1i4un07:"m1i4un07"}},46401:s=>{s.exports={c1doekva:"c1doekva",i1ntii56:"i1ntii56",sy45si0:"sy45si0",ftqb13p:"ftqb13p",bar44ur:"bar44ur",s1sm7kem:"s1sm7kem"}},36224:s=>{s.exports={w1icjxur:"w1icjxur",hv1pb5o:"hv1pb5o",bunns4:"bunns4",e9evofd:"e9evofd",b19n0c7a:"b19n0c7a","bounce-b19n0c7a":"bounce-b19n0c7a",ayr5vrn:"ayr5vrn",b1qtwz37:"b1qtwz37"}},78752:s=>{s.exports={w1d4uhch:"w1d4uhch",m1wtl9k0:"m1wtl9k0",c1kud80y:"c1kud80y"}},90885:s=>{s.exports={b1ciuxcz:"b1ciuxcz",wiq4f2u:"wiq4f2u",h1rbjqq7:"h1rbjqq7",gg7ehe1:"gg7ehe1",bamyhrc:"bamyhrc"}},77805:s=>{s.exports={o11h7o12:"o11h7o12",wi9xlz4:"wi9xlz4",hpv2kfm:"hpv2kfm",b1dh7eg0:"b1dh7eg0",bi95upp:"bi95upp",l19j3i1d:"l19j3i1d",cufzfud:"cufzfud",o1fnc03u:"o1fnc03u",c19tvtvc:"c19tvtvc","bounce-c19tvtvc":"bounce-c19tvtvc",atopy0n:"atopy0n",b1t96eke:"b1t96eke"}},90809:s=>{s.exports={wr5us8n:"wr5us8n",hhqru8:"hhqru8",g8qz4zc:"g8qz4zc",f1vokmyc:"f1vokmyc",b1uj7lhw:"b1uj7lhw","bounce-b1uj7lhw":"bounce-b1uj7lhw",awqze7l:"awqze7l",b1rsl36b:"b1rsl36b"}},68971:s=>{s.exports={o18epsk2:"o18epsk2",b6b5bqw:"b6b5bqw",a111ymsy:"a111ymsy",w4xubrr:"w4xubrr",h1m7sl6v:"h1m7sl6v",gulr24x:"gulr24x",h1k6d6pv:"h1k6d6pv",t1ltmapb:"t1ltmapb",b182kq5h:"b182kq5h"}}}]);
//# sourceMappingURL=49502.ca60978c66ab0c40.js.map