(window.__LOADABLE_LOADED_CHUNKS__=window.__LOADABLE_LOADED_CHUNKS__||[]).push([[78],{458:function(e,t,n){"use strict";n.r(t),n.d(t,"ImageComparer",(function(){return U}));var r=n(0),a=n.n(r),o=n(2),i=n(13),c=n.n(i);const l=["transition"];function s(){return(s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}const u=Object(r.forwardRef)((e,t)=>{let{transition:n}=e,r=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,l);const o={position:"absolute",top:0,left:0,width:"100%",height:"100%",transition:n?"clip-path "+n:void 0,userSelect:"none",willChange:"clip-path, transition",KhtmlUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"};return a.a.createElement("div",s({},r,{style:o,"data-rcs":"clip-item",ref:t}))});u.displayName="ContainerClip";const d=Object(r.forwardRef)((e,t)=>{let{children:n,disabled:r,portrait:o,position:i,transition:c}=e;const l={position:"absolute",top:0,width:o?"100%":void 0,height:o?void 0:"100%",background:"none",border:0,padding:0,pointerEvents:"all",appearance:"none",WebkitAppearance:"none",MozAppearance:"none",outline:0,transform:o?"translate3d(0, -50% ,0)":"translate3d(-50%, 0, 0)",transition:c?`${o?"top":"left"} ${c}`:void 0};return a.a.createElement("button",{ref:t,"aria-label":"Drag to move or focus and use arrow keys","aria-orientation":o?"vertical":"horizontal","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":i,"data-rcs":"handle-container",disabled:r,role:"slider",style:l},n)});d.displayName="ThisHandleContainer";const b=["className","disabled","buttonStyle","linesStyle","portrait","style"];function p(){return(p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}const m=e=>{let{flip:t}=e;const n={width:0,height:0,borderTop:"8px solid transparent",borderRight:"10px solid",borderBottom:"8px solid transparent",transform:t?"rotate(180deg)":void 0};return a.a.createElement("div",{className:"__rcs-handle-arrow",style:n})},f=e=>{let{className:t="__rcs-handle-root",disabled:n,buttonStyle:r,linesStyle:o,portrait:i,style:c}=e,l=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,b);const s=Object.assign({display:"flex",flexDirection:i?"row":"column",placeItems:"center",height:"100%",cursor:n?"not-allowed":i?"ns-resize":"ew-resize",pointerEvents:"none",color:"#fff"},c),u=Object.assign({flexGrow:1,height:i?2:"100%",width:i?"100%":2,backgroundColor:"currentColor",pointerEvents:"auto",boxShadow:"0 0 4px rgba(0,0,0,.5)"},o),d=Object.assign({display:"grid",gridAutoFlow:"column",gap:8,placeContent:"center",flexShrink:0,width:56,height:56,borderRadius:"50%",borderStyle:"solid",borderWidth:2,pointerEvents:"auto",backdropFilter:"blur(7px)",WebkitBackdropFilter:"blur(7px)",backgroundColor:"rgba(0, 0, 0, 0.125)",boxShadow:"0 0 4px rgba(0,0,0,.35)",transform:i?"rotate(90deg)":void 0},r);return a.a.createElement("div",p({},l,{className:t,style:s}),a.a.createElement("div",{className:"__rcs-handle-line",style:u}),a.a.createElement("div",{className:"__rcs-handle-button",style:d},a.a.createElement(m,null),a.a.createElement(m,{flip:!0})),a.a.createElement("div",{className:"__rcs-handle-line",style:u}))},h=["boxSizing","objectFit","objectPosition"];let g;!function(e){e.ARROW_LEFT="ArrowLeft",e.ARROW_RIGHT="ArrowRight",e.ARROW_UP="ArrowUp",e.ARROW_DOWN="ArrowDown"}(g||(g={}));const O=function(e){let t=void 0===e?{}:e,{boxSizing:n="border-box",objectFit:r="cover",objectPosition:a="center center"}=t,o=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(t,h);return Object.assign({display:"block",width:"100%",height:"100%",maxWidth:"100%",boxSizing:n,objectFit:r,objectPosition:a},o)},v=(e,t,n,a)=>{const o=Object(r.useRef)();Object(r.useEffect)(()=>{o.current=t},[t]),Object(r.useEffect)(()=>{if(!n||!n.addEventListener)return;const t=e=>o.current&&o.current(e);return n.addEventListener(e,t,a),()=>{n.removeEventListener(e,t,a)}},[e,n,a])},j="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?r.useLayoutEffect:r.useEffect,y=["boundsPadding","browsingContext","changePositionOnHover","disabled","handle","itemOne","itemTwo","keyboardIncrement","onlyHandleDraggable","onPositionChange","portrait","position","style","transition"];function w(){return(w=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}const x={capture:!1,passive:!0},E={capture:!0,passive:!1},R=e=>{e.preventDefault(),e.currentTarget.focus()},k=Object(r.forwardRef)((e,t)=>{let{boundsPadding:n=0,browsingContext:o=globalThis,changePositionOnHover:i=!1,disabled:c=!1,handle:l,itemOne:s,itemTwo:b,keyboardIncrement:p="5%",onlyHandleDraggable:m=!1,onPositionChange:h,portrait:O=!1,position:k=50,style:C,transition:N}=e,_=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,y);const A=Object(r.useRef)(null),S=Object(r.useRef)(null),P=Object(r.useRef)(null),L=Object(r.useRef)(k),[z,W]=Object(r.useState)(!1),[D,M]=Object(r.useState)(!0),B=Object(r.useRef)(!1),[I,U]=Object(r.useState)(),H=(e=>{const t=Object(r.useRef)(e);return Object(r.useEffect)(()=>{t.current=e}),t.current})(k),T=Object(r.useCallback)((function(e){let{x:t,y:r,isOffset:a}=e;const i=A.current,c=P.current,l=S.current,{width:s,height:u,left:d,top:b}=i.getBoundingClientRect();if(0===s||0===u)return;const p=O?a?r-b-o.scrollY:r:a?t-d-o.scrollX:t,m=Math.min(Math.max(p/(O?u:s)*100,0),100),f=O?u/(i.offsetHeight||1):s/(i.offsetWidth||1),g=n*f/(O?u:s)*100,v=Math.min(Math.max(m,g*f),100-g*f);L.current=m,c.setAttribute("aria-valuenow",""+Math.round(L.current)),c.style.top=O?v+"%":"0",c.style.left=O?"0":v+"%",l.style.clipPath=O?`inset(${v}% 0 0 0)`:`inset(0 0 0 ${v}%)`,h&&h(L.current)}),[n,h,O,o]);Object(r.useEffect)(()=>{const{width:e,height:t}=A.current.getBoundingClientRect(),n=k===H?L.current:k;T({x:e/100*n,y:t/100*n})},[n,k,O,H,T]);const F=Object(r.useCallback)(e=>{e.preventDefault(),c||0!==e.button||(T({isOffset:!0,x:e.pageX,y:e.pageY}),W(!0),M(!0))},[c,T]),Y=Object(r.useCallback)((function(e){T({isOffset:!0,x:e.pageX,y:e.pageY}),M(!1)}),[T]),K=Object(r.useCallback)(()=>{W(!1),M(!0)},[]),$=Object(r.useCallback)(e=>{let{width:t,height:n}=e;const{width:r,height:a}=A.current.getBoundingClientRect();T({x:t/100*L.current*r/t,y:n/100*L.current*a/n})},[T]),G=Object(r.useCallback)(e=>{if(!Object.values(g).includes(e.key))return;e.preventDefault(),M(!0);const{top:t,left:n}=P.current.getBoundingClientRect(),{width:r,height:a}=A.current.getBoundingClientRect(),o="string"==typeof p?parseFloat(p):p/r*100,i=O?e.key===g.ARROW_LEFT||e.key===g.ARROW_DOWN:e.key===g.ARROW_RIGHT||e.key===g.ARROW_UP,c=Math.min(Math.max(i?L.current+o:L.current-o,0),100);T({x:O?n:r*c/100,y:O?a*c/100:t})},[p,O,T]);Object(r.useEffect)(()=>{U(m?P.current:A.current)},[m]),Object(r.useEffect)(()=>{const e=A.current,t=()=>{z||K()};return i&&(e.addEventListener("pointermove",Y,x),e.addEventListener("pointerleave",t,x)),()=>{e.removeEventListener("pointermove",Y),e.removeEventListener("pointerleave",t)}},[i,Y,K,z]),Object(r.useEffect)(()=>(z&&!B.current&&(o.addEventListener("pointermove",Y,x),o.addEventListener("pointerup",K,x),B.current=!0),()=>{B.current&&(o.removeEventListener("pointermove",Y),o.removeEventListener("pointerup",K),B.current=!1)}),[Y,K,z,o]),Object(r.useImperativeHandle)(t,()=>({rootContainer:A.current,handleContainer:P.current,setPosition(e){const{width:t,height:n}=A.current.getBoundingClientRect();T({x:t/100*e,y:n/100*e})}}),[T]),((e,t)=>{const n=Object(r.useRef)(),a=Object(r.useCallback)(()=>{e.current&&n.current&&n.current.observe(e.current)},[e]);j(()=>(n.current=new ResizeObserver(e=>{let[n]=e;return t(n.contentRect)}),a(),()=>{n.current&&n.current.disconnect()}),[t,a])})(A,$),v("keydown",G,P.current,E),v("click",R,P.current,E),v("pointerdown",F,I,E);const X=l||a.a.createElement(f,{disabled:c,portrait:O}),q=D?N:void 0,J=Object.assign({position:"relative",display:"flex",overflow:"hidden",cursor:z?O?"ns-resize":"ew-resize":void 0,touchAction:"none",userSelect:"none",KhtmlUserSelect:"none",msUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},C);return a.a.createElement("div",w({},_,{ref:A,style:J,"data-rcs":"root"}),s,a.a.createElement(u,{ref:S,transition:q},b),a.a.createElement(d,{disabled:c,portrait:O,position:Math.round(L.current),ref:P,transition:q},X))});k.displayName="ReactCompareSlider";const C=["style"];function N(){return(N=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}Object(r.forwardRef)((e,t)=>{let{style:n}=e,r=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,C);const o=O(n);return a.a.createElement("img",N({ref:t},r,{style:o,"data-rcs":"image"}))}).displayName="ReactCompareSliderImage";var _=n(738),A=n(28),S=n(51),P=n(203),L=n(1),z=n(21),W=n(205),D=n(57),M=n(27),B=n(10),I=n(15);function U(e){let{title:t,description:n,image1:o,image2:i}=e;const l=Object(r.useRef)(null),s=Object(r.useRef)(50);return a.a.createElement(F,null,a.a.createElement(_.a,{title:t,description:n,className:T.intro}),a.a.createElement(k,{itemOne:a.a.createElement(H,{src:o.src,alt:o.alt}),itemTwo:a.a.createElement(H,{src:i.src,alt:i.alt}),handle:a.a.createElement("div",{className:T.handle},a.a.createElement("span",{className:T.line}),a.a.createElement("span",{className:T.circle})),className:T.slider,ref:l,onPositionChange:e=>s.current=e,boundsPadding:11}),a.a.createElement("div",{className:T.buttons},a.a.createElement("button",{onClick:()=>{var e;return null==(e=l.current)||null==e.setPosition?void 0:e.setPosition(Math.max(s.current-5,0))},className:c()(T.button,D.a.A11YButton)},a.a.createElement(S.a,{text:"Move slider left"}),a.a.createElement(A.b,{iconId:A.a.ArrowLeft,className:T.icon})),a.a.createElement("button",{onClick:()=>{var e;return null==(e=l.current)||null==e.setPosition?void 0:e.setPosition(Math.min(s.current+5,100))},className:c()(T.button,D.a.A11YButton)},a.a.createElement(S.a,{text:"Move slider right"}),a.a.createElement(A.b,{iconId:A.a.ArrowRight,className:T.icon}))))}function H(e){let{src:t,alt:n}=e;return a.a.createElement("div",{className:T["image-wrap"]},a.a.createElement(P.d,{src:t,alt:n,layout:P.a.Fill,className:T.image}))}const T=Object(z.b)("image-comparer",["intro","slider","image-wrap","image","handle","line","circle","buttons","button","icon"]),F=o.d.div.withConfig({componentId:"sc-60foad-0"})([".","{margin-bottom:32px;","}.","{}.","{position:relative;min-height:300px;width:100%;height:calc(100% - 36px - 18px);margin:18px 0 36px;background-color:",";}.","{object-fit:contain;padding:32px !important;}button:focus-visible .","{--handle-colour:",";--handle-border-width:2px;--handle-border-colour:",";}.","{cursor:ew-resize;height:100%;width:40px;position:relative;--handle-colour:",";--handle-border-width:0px;--handle-border-colour:transparent;}.","{position:absolute;top:0;left:calc(50% - 2px);display:block;height:100%;width:4px;background-color:var(--handle-colour);outline-style:solid;outline-width:var(--handle-border-width);outline-color:var(--handle-border-colour);}.","{position:absolute;bottom:0;width:20px;height:20px;border-radius:50%;background-color:var(--handle-colour);left:10px;border-style:solid;border-width:var(--handle-border-width);border-color:var(--handle-border-colour);}.","{display:flex;justify-content:center;gap:48px;margin-top:24px;}.","{"," display:flex;}.","{fill:",";width:24px;}"],T.intro,Object(B.a)(I.a.mlarge,Object(o.c)(["margin-bottom:64px;"])),T.slider,T["image-wrap"],e=>{let{theme:t}=e;return t.altBackgroundColor},T.image,T.handle,M.a.backgroundColor,L.a.black,T.handle,L.a.blue,T.line,T.circle,T.buttons,T.button,Object(W.a)(),T.icon,L.a.blue)},716:function(e,t,n){"use strict";n.d(t,"a",(function(){return f}));var r=n(0),a=n.n(r),o=n(13),i=n.n(o),c=n(2),l=n(158),s=n(24),u=n(4),d=n(21),b=n(10),p=n(15),m=n(1);function f(e){let{title:t,description:n,className:r}=e;return Object(u.a)(t)||Object(u.a)(n)?a.a.createElement(O,{className:i()(h.className,r)},Object(u.a)(t)&&a.a.createElement("h2",{className:h.title},t),Object(u.a)(n)&&a.a.createElement(l.default,{content:n,className:h.description})):s.a}const h=Object(d.b)("component-intro-texts",["title","description"]),g=p.a.mlarge,O=c.d.div.withConfig({componentId:"sc-1yhks3o-0"})(["&.","{.","{color:",";font-size:22px;line-height:33px;margin-top:0;","}."," + .","{margin-top:10px;","}.","{&,& > *{font-size:15px;line-height:26px;","}}"],h.className,h.title,m.a.slate,Object(b.a)(g,Object(c.c)(["font-size:26px;line-height:39px;"])),h.title,h.description,Object(b.a)(g,Object(c.c)(["margin-top:15px;"])),h.description,Object(b.a)(g,Object(c.c)(["font-size:16px;line-height:28px;"])))},738:function(e,t,n){"use strict";n.d(t,"a",(function(){return m}));var r=n(716),a=n(0),o=n.n(a),i=n(13),c=n.n(i),l=n(2),s=n(24),u=n(4),d=n(21),b=n(10),p=n(15);function m(e){let{title:t,description:n,className:a}=e;return Object(u.a)(t)||Object(u.a)(n)?o.a.createElement(g,{className:c()(f.className,a)},o.a.createElement(r.a,{className:f.column,title:t,description:n})):s.a}const f=Object(d.b)("component-intro",["column"]),h=p.a.mlarge,g=l.d.div.withConfig({componentId:"fry207-0"})(["&.","{--column-gap:10px;--column-count:6;display:grid;grid-template-columns:repeat(var(--column-count),minmax(0,1fr));column-gap:var(--column-gap);","}.","{grid-column:1 / -1;","}"],f.className,Object(b.a)(h,Object(l.c)(["--column-gap:20px;--column-count:12;"])),f.column,Object(b.a)(h,Object(l.c)(["grid-column:span 7 / span 7;"])))}}]);
//# sourceMappingURL=imageComparer.cc.99d01f3d1246e59bfa7a.mjs.map