(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[75027],{75027:(e,s,r)=>{"use strict";r.r(s),r.d(s,{default:()=>$});var t=r(67841),n=r(64833),a=r(55158),o=r(62867);let l=(0,n.z)("div")({name:"Wrapper",class:"w17oy6mt",propsAsIs:!1}),c=(0,n.z)("div")({name:"Box",class:"b1fz102o",propsAsIs:!1}),i=(0,n.z)("div")({name:"BoxWrapper",class:"b109vafp",propsAsIs:!1}),p=(0,n.z)(c)({name:"BoringShadow",class:"b5zw5v9",propsAsIs:!0}),d=(0,n.z)(c)({name:"NiceShadow",class:"noy4egv",propsAsIs:!0}),x=(0,n.z)("p")({name:"Annotation",class:"a188gpzw",propsAsIs:!1}),u=function(){return(0,t.jsxs)(l,{children:[(0,t.jsxs)(i,{children:[(0,t.jsx)(x,{children:"Typical Shadow"}),(0,t.jsx)(p,{})]}),(0,t.jsxs)(i,{children:[(0,t.jsx)(x,{children:"Optimized Shadow"}),(0,t.jsx)(d,{})]})]})};r(23281);var h=r(79477),b=r(97718);/**
 * @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 v=(0,r(43349).Z)("MousePointer",[["path",{d:"M12.586 12.586 19 19",key:"ea5xo7"}],["path",{d:"M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z",key:"277e5u"}]]);var f=r(74631),w=r(87740);let m=(0,n.z)("code")({name:"Code0",class:"c1qen91c",propsAsIs:!1});r(38990);let j=(0,n.z)(b.q.div)({name:"Box",class:"bygqr01",propsAsIs:!0});r(87461);let y="cubic-bezier(0.25, 0.05, 0.1, 1.05)",g=(0,n.z)("button")({name:"Wrapper",class:"w6dft06",propsAsIs:!1}),z=(0,n.z)(j)({name:"Card",class:"c116lxk9",propsAsIs:!0}),A=(0,n.z)("span")({name:"Light",class:"luu37fq",propsAsIs:!1}),I=(0,n.z)("p")({name:"InteractiveNotice",class:"ihr44i0",propsAsIs:!1}),q=function(e){let{variant:s,distance:r=1}=e,n=h.useRef(),a=h.useRef(),o=h.useRef(),l=(0,w.Z)(n),c=h.useRef(l);c.current=l;let[i,p]=h.useState("initial"),[d,x]=h.useState({});h.useEffect(()=>{let e;let s=e=>{if(!l)return;let s=e.clientX<l.left||e.clientX>l.left+l.width||e.clientY<l.top||e.clientY>l.top+l.height;"reset"===i&&s||("active"===i&&s&&p("aborted"),"reset"!==i||s||p("active"),x({x:e.clientX-l.left,y:e.clientY-l.top}))};return window.addEventListener("mousemove",s),()=>{window.removeEventListener("mousemove",s),window.clearTimeout(e)}},[i,l]),h.useEffect(()=>{let e=c.current;"aborted"===i?o.current=window.setTimeout(()=>{p("reset"),x({x:e.width/2,y:48})},1e3):"active"===i&&window.clearTimeout(o.current)},[i]);let u=function(e,s,r,t){var n;if("initial"===e)return null;let a=null===(n=r.current)||void 0===n?void 0:n.getBoundingClientRect();if(!a||!t)return null;let o={x:a.left-t.x,y:a.top-t.y},l={x:o.x+a.width/2,y:o.y+a.height/2},c=s.x-l.x,i=s.y-l.y,p=(0,f.Ag)(c,400,-400,-20,20),d=(0,f.Ag)(i,400,-400,-20,20);return"".concat(p,"px ").concat(d,"px 8px hsl(285deg 30% 40% / 0.5)")}(i,d,a,l);function b(){"initial"===i&&p("active")}return(0,t.jsxs)(g,{ref:n,onMouseEnter:b,onFocus:()=>{b(),x({x:l.width/2,y:48})},onKeyDown:function(e){switch(e.key){case"ArrowUp":return e.preventDefault(),x({x:d.x,y:(0,f.uZ)(d.y-20,0,l.height)});case"ArrowLeft":return e.preventDefault(),x({x:(0,f.uZ)(d.x-20,0,l.width),y:d.y});case"ArrowRight":return e.preventDefault(),x({x:(0,f.uZ)(d.x+20,0,l.width),y:d.y});case"ArrowDown":return e.preventDefault(),x({x:d.x,y:(0,f.uZ)(d.y+20,0,l.height)})}},onBlur:()=>{p("reset")},children:[(0,t.jsx)(z,{ref:a,style:{"--drop-shadow":"drop-shadow(".concat(u,")"),"--box-shadow":u,transition:"reset"===i?"filter 1000ms ".concat(y):"none"}}),(0,t.jsx)(A,{style:{opacity:"initial"===i?0:1,transform:"translate(".concat(d.x,"px, ").concat(d.y,"px)"),transition:"reset"===i?"transform 1000ms ".concat(y):"none"}}),(0,t.jsxs)(I,{style:{opacity:"initial"===i?1:0},children:[(0,t.jsx)(v,{size:16})," Hover, focus, or tap to interact"]})]})};function k(e){let{distance:s}=e,r=(0,f.RW)((0,f.Fv)(s,0,1,0,16),1),n=(0,f.RW)((0,f.Fv)(s,0,1,0,8),1),a=(0,f.RW)((0,f.Fv)(s,0,1,0,16),1),o=(0,f.RW)((0,f.Fv)(s,0,1,.5,.25),2),l=(0,f.Fv)(s,0,1,1,1.1),c="".concat(n.toFixed(1),"px ").concat(a.toFixed(1),"px ").concat(r.toFixed(1),"px hsl(0deg 0% 0% / ").concat(o.toFixed(2),")"),i=(0,b.q_)({transform:"scale(".concat(l,")"),boxShadow:c});return(0,t.jsxs)(B,{children:[(0,t.jsx)(F,{style:i}),(0,t.jsxs)(m,{children:["box-shadow: ",c,";"]})]})}r(79940);let W=(0,n.z)(a.ob)({name:"DesignDistanceOutputWrapper",class:"d7z31sd",propsAsIs:!0}),B=(0,n.z)("div")({name:"Wrapper",class:"w1vybjb4",propsAsIs:!1}),F=(0,n.z)(j)({name:"Foreground",class:"f1mdxofm",propsAsIs:!0}),S=function(e){let{variant:s}=e;return(0,t.jsx)(a.ZP,{id:s,outputWrapper:W,initialValues:{distance:.5},controls:[(0,t.jsx)(a.vn,{id:"distance",label:"Elevation",min:0,max:1,step:.01},"distance")],children:e=>{let{distance:s}=e;return(0,t.jsx)(k,{distance:s})}})};r(53294);let R=(0,n.z)("div")({name:"Wrapper",class:"w2yc2sw",propsAsIs:!1}),D=(0,n.z)("div")({name:"Contents",class:"cbvqfv9",propsAsIs:!1}),C=(0,n.z)("div")({name:"Header",class:"h15oaflr",propsAsIs:!1}),E=(0,n.z)("img")({name:"Logo",class:"l17ajy8m",propsAsIs:!1}),Z=(0,n.z)("div")({name:"ShadowWrapper",class:"srrvskh",propsAsIs:!1}),T=(0,n.z)(C)({name:"HeaderShadow",class:"h1xhgd2a",propsAsIs:!0}),L=(0,n.z)("div")({name:"ButtonWrapper",class:"b1qcr22",propsAsIs:!1}),N=(0,n.z)("div")({name:"ButtonGroup",class:"bnrrm2c",propsAsIs:!1}),_=(0,n.z)("button")({name:"Button",class:"b1jrv6gx",propsAsIs:!1});(0,n.z)("div")({name:"ButtonShadow",class:"b1qjj503",propsAsIs:!1});let M=(0,n.z)("div")({name:"Dialog",class:"dc6h6k7",propsAsIs:!1}),O=(0,n.z)(M)({name:"DialogShadow",class:"ddj1mbk",propsAsIs:!0}),X=(0,n.z)("div")({name:"DialogActions",class:"d1ffyuf5",propsAsIs:!1}),Y=function(e){let{variant:s,reveal:r,enableShadows:n}=e;return(0,t.jsx)(R,{children:(0,t.jsxs)(D,{style:{"--rotate":(0,f.Fv)(r,0,100,0,-45)+"deg"},children:[(0,t.jsxs)(Z,{children:[n&&(0,t.jsx)(T,{}),n&&(0,t.jsx)(O,{})]}),(0,t.jsxs)(C,{style:{"--z":n?(0,f.Fv)(r,0,100,0,60)+"px":0},children:[(0,t.jsx)(E,{src:"/images/designing-shadows/fake-logo.svg"}),(0,t.jsxs)(N,{children:[(0,t.jsx)(L,{children:(0,t.jsx)(_,{children:"Log in"})}),(0,t.jsx)(L,{children:(0,t.jsx)(_,{children:"Sign up"})})]})]}),(0,t.jsxs)(M,{style:{"--z":n?(0,f.Fv)(r,0,100,0,120)+"px":0},children:[(0,t.jsx)("h2",{children:"Are you sure?"}),(0,t.jsx)("p",{children:"This action cannot be undone."}),(0,t.jsx)(X,{children:(0,t.jsxs)(N,{children:[(0,t.jsx)(L,{children:(0,t.jsx)(_,{children:"Cancel"})}),(0,t.jsx)(L,{children:(0,t.jsx)(_,{children:"Confirm"})})]})})]})]})})};r(13922);let H=(0,n.z)("div")({name:"Wrapper",class:"w19w3au4",propsAsIs:!1}),P=(0,n.z)("div")({name:"Box",class:"be4ccq3",propsAsIs:!1}),G=(0,n.z)(P)({name:"BoxOne",class:"b1oylxy0",propsAsIs:!0}),U=(0,n.z)(P)({name:"BoxTwo",class:"bt2d6sb",propsAsIs:!0}),V=(0,n.z)(P)({name:"BoxThree",class:"br7i4hf",propsAsIs:!0}),K=(0,n.z)(P)({name:"BoxFour",class:"b1l9iwpe",propsAsIs:!0}),J=function(){return(0,t.jsxs)(H,{children:[(0,t.jsx)(G,{}),(0,t.jsx)(U,{}),(0,t.jsx)(V,{}),(0,t.jsx)(K,{})]})};r(45454);let Q=(0,n.z)(o.Z)({name:"LayersOutputWrapper",class:"lbqgwex",propsAsIs:!0}),$=e=>{let{variant:s}=e;switch(s){case"shadow-mess":return(0,t.jsx)(J,{});case"before-and-after":return(0,t.jsx)(u,{});case"grabbable-light":return(0,t.jsx)(q,{});case"design-distance":return(0,t.jsx)(S,{});case"layers":return(0,t.jsx)(a.ZP,{id:s,initialValues:{reveal:0,enableShadows:!0},customGrid:{gridTemplateColumns:"2fr 1fr"},outputWrapper:Q,controls:[(0,t.jsx)(a.vn,{id:"reveal",label:"Reveal",min:0,max:100,previewRenderer:e=>"".concat(e,"%")},"reveal"),(0,t.jsx)(a.Xr,{id:"enableShadows",label:"Include Elevation",options:[{label:"Yes",value:!0},{label:"No",value:!1}]},"enableShadows")],children:e=>{let{reveal:r,enableShadows:n}=e;return(0,t.jsx)(Y,{variant:s,reveal:r,enableShadows:n})}});default:return"Unrecognized variant"}};r(27475)},23281:e=>{e.exports={w17oy6mt:"w17oy6mt",b1fz102o:"b1fz102o",b109vafp:"b109vafp",b5zw5v9:"b5zw5v9",noy4egv:"noy4egv",a188gpzw:"a188gpzw"}},87461:e=>{e.exports={bygqr01:"bygqr01"}},38990:e=>{e.exports={c1qen91c:"c1qen91c"}},53294:e=>{e.exports={d7z31sd:"d7z31sd",w1vybjb4:"w1vybjb4",f1mdxofm:"f1mdxofm",bygqr01:"bygqr01"}},79940:e=>{e.exports={w6dft06:"w6dft06",c116lxk9:"c116lxk9",bygqr01:"bygqr01",luu37fq:"luu37fq",ihr44i0:"ihr44i0"}},13922:e=>{e.exports={w2yc2sw:"w2yc2sw",cbvqfv9:"cbvqfv9",h15oaflr:"h15oaflr",l17ajy8m:"l17ajy8m",srrvskh:"srrvskh",h1xhgd2a:"h1xhgd2a",b1qcr22:"b1qcr22",bnrrm2c:"bnrrm2c",b1jrv6gx:"b1jrv6gx",dc6h6k7:"dc6h6k7",ddj1mbk:"ddj1mbk",d1ffyuf5:"d1ffyuf5"}},27475:e=>{e.exports={lbqgwex:"lbqgwex"}},45454:e=>{e.exports={w19w3au4:"w19w3au4",be4ccq3:"be4ccq3",b1oylxy0:"b1oylxy0",bt2d6sb:"bt2d6sb",br7i4hf:"br7i4hf",b1l9iwpe:"b1l9iwpe"}}}]);
//# sourceMappingURL=75027.e1fc2587bb16d732.js.map