@microlink/hover-react
Version:
Turn links into beautiful previews.
40 lines (34 loc) • 42.6 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/objectWithoutProperties"),n=require("@babel/runtime/helpers/extends"),r=require("react"),o=require("@babel/runtime/helpers/taggedTemplateLiteral"),a=require("styled-components"),i=require("@microlink/mql");const l=["accessibility","debounce","ellipsis","is","lines","text"];function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function s(t){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?c(Object(r),!0).forEach(function(n){e(t,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}const u=e=>{let{accessibility:n=!0,debounce:o=300,ellipsis:a="…",is:i="div",lines:c=3,text:u}=e,d=t(e,l);const p=r.useRef(null),m=r.useRef("."),f=s(s({ref:p},n?{title:u}:{}),d),g=r.useMemo(()=>"string"==typeof u&&u.length>0,[u]),b=r.useCallback(()=>{var e,t,n,r;if(!g)return;const o=e=>{m.current=e,null!=p.current&&(p.current.innerText=e)};o(".");const i=((null!==(t=null===(e=p.current)||void 0===e?void 0:e.clientHeight)&&void 0!==t?t:0)+1)*c+1,l="…"===a?5:1.2*a.length;let s=0,d=0,f=u.length;for(;s<=f;){if(d=Math.floor((s+f)/2),o(u.slice(0,d)),d===u.length)return;(null!==(r=null===(n=p.current)||void 0===n?void 0:n.clientHeight)&&void 0!==r?r:0)<=i?s=d+1:f=d-1}o(u.slice(0,Math.max(d-l,0)).trim()+a)},[a,g,c,u]);return r.useEffect(()=>{b();const e=((e,t)=>{let n;const r=()=>{n=void 0,e()};return()=>{const o=null==n;clearTimeout(n),n=setTimeout(r,t),o&&e()}})(b,o);return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[b,o]),g?r.createElement(i,f,m.current):null};function d(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var p,m={exports:{}};var f,g={exports:{}};var b,h=d(e=>function(){if(p)return m.exports;p=1;const e=new RegExp("^(".concat([/^(:{2}f{4}:)?10(?:\.\d{1,3}){3}$/,/^(:{2}f{4}:)?127(?:\.\d{1,3}){3}$/,/^(::f{4}:)?169\.254\.([1-9]|1?\d\d|2[0-4]\d|25[0-4])\.\d{1,3}$/,/^(:{2}f{4}:)?(172\.1[6-9]|172\.2\d|172\.3[01])(?:\.\d{1,3}){2}$/,/^(:{2}f{4}:)?192\.168(?:\.\d{1,3}){2}$/,/^f[cd][\da-f]{2}(::1$|:[\da-f]{1,4}){1,7}$/,/^fe[89ab][\da-f](::1$|:[\da-f]{1,4}){1,7}$/,/^localhost$|^0\.0\.0\.0$/].map(e=>e.source).join("|"),")$"));return m.exports=e.test.bind(e),m.exports.regex=e,m.exports}()(e)||function(){if(f)return g.exports;f=1;const e=new RegExp("^(".concat([/^\[(::1|::)\]$/].map(e=>e.source).join("|"),")$"));return g.exports=e.test.bind(e),g.exports.regex=e,g.exports}()(e));const y="undefined"==typeof window,v=e=>"function"==typeof e,w=e=>"object"==typeof e,x=e=>null==e,k=e=>w(e)?e.url:e,$=function(){return a.css(b||(b=o(["\n @media (max-width: 48em) {\n ",";\n }\n "])),a.css(...arguments))},z=e=>"large"===e,O=e=>"small"===e,E=e=>h(new URL(e).hostname)?e:"https://images.weserv.nl/?".concat(new URLSearchParams({url:e,default:e,l:9,af:"",il:"",n:-1}).toString()),S=!y&&"IntersectionObserver"in window,C=e=>{const t=parseInt(e,10);return[Math.floor(t/3600),Math.floor(t/60)%60,t%60].filter((e,t)=>e>0||t>0).map(e=>e>=10?e:"0".concat(e)).join(":")},P=(e,t,n)=>{switch(!0){case e<=t:return t;case e>=n:return n;default:return e}},M="microlink_card",j="".concat(M,"__content"),D="".concat(M,"__media"),_="".concat(D,"__controls"),N={main:M,content:j,title:"".concat(j,"_title"),description:"".concat(j,"_description"),url:"".concat(j,"_url"),mediaWrapper:"".concat(D,"_wrapper"),media:D,image:"".concat(D,"_image"),videoWrapper:"".concat(D,"_video_wrapper"),video:"".concat(D,"_video"),audioWrapper:"".concat(D,"_audio_wrapper"),audio:"".concat(D,"_audio"),mediaControls:_,playbackControl:"".concat(_,"_playback"),volumeControl:"".concat(_,"_volume"),rwControl:"".concat(_,"_rewind"),ffwControl:"".concat(_,"_fast_forward"),rateControl:"".concat(_,"_rate"),progressBar:"".concat(_,"_progress_bar"),progressTime:"".concat(_,"_progress_time"),spinner:"".concat(_,"_spinner"),iframe:"".concat(M,"__iframe")},R=["useNanoClamp","children"];var F,T;function L(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function V(t){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?L(Object(r),!0).forEach(function(n){e(t,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):L(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}const I=a.styled(e=>{let{children:t,className:n,lines:o}=e;return x(t)?null:r.createElement(u,{className:n,lines:o,text:t,is:"p"})})(F||(F=o(["\n &&& {\n text-align: inherit;\n font-weight: inherit;\n font-family: inherit;\n color: inherit;\n margin: 0;\n\n ","\n }\n"])),e=>{let{$useNanoClamp:t}=e;return!t&&a.css(T||(T=o(["\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n "])))}),U=e=>{let{useNanoClamp:o=!0,children:a}=e,i=t(e,R);const l=o?i:V(V({},i),{},{as:"p",title:a});return r.createElement(I,n({$useNanoClamp:o},l),a)},W={short:"100ms",medium:"150ms",long:"300ms"},B={short:"cubic-bezier(.25,.8,.25,1)",medium:"cubic-bezier(.25,.8,.25,1)",long:"cubic-bezier(.4, 0, .2, 1)"},H=(e,t)=>{const n="".concat(W[t]," ").concat(B[t]);return e.map(e=>"".concat(e," ").concat(n)).join(", ")},q=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return H(t,"short")},X=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return H(t,"medium")},A=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return H(t,"long")},K="InterUI, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif",J="'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",G=["autoPlay","children","controls","loop","mediaRef","muted","playsInline","size"];function Q(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function Y(t){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?Q(Object(r),!0).forEach(function(n){e(t,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):Q(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}const Z={},ee=r.createContext(Z),te=e=>{let{autoPlay:n,children:o,controls:a,loop:i,mediaRef:l,muted:c,playsInline:s,size:u}=e,d=t(e,G);const[p,m]=r.useState(Z),f=r.useCallback(e=>m(t=>Y(Y({},t),e)),[]),g=r.useMemo(()=>({autoPlay:n,controls:a,loop:i,mediaRef:l,muted:c,playsInline:s,size:u}),[n,a,i,l,c,s,u]),b=r.useMemo(()=>({props:g,state:p,updateState:f}),[g,p,f]);return r.createElement(ee.Provider,{value:b},o(d))};var ne,re,oe,ae,ie,le,ce,se,ue,de,pe,me;const fe=/^www\./,ge="16px",be=a.css(ne||(ne=o(["\n ",";\n"])),$(re||(re=o(["\n > p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n "])))),he=a.styled("div").attrs({className:N.content})(oe||(oe=o(["\n display: flex;\n padding: 10px 15px;\n min-width: 0;\n box-sizing: border-box;\n ",";\n"])),e=>{let{$cardSize:t}=e;return a.css(ae||(ae=o(["\n flex: ",";\n justify-content: ",";\n flex-direction: ",";\n align-items: ",";\n "])),z(t)?"0 0 125px":1,O(t)?"space-between":"space-around",O(t)?"row":"column",O(t)?"center":"stretch")}),ye=a.styled("header").attrs({className:N.title})(ie||(ie=o(["\n text-align: left;\n font-weight: bold;\n margin: 0;\n width: 100%;\n ","\n"])),e=>{let{$cardSize:t}=e;return a.css(le||(le=o(["\n flex-grow: ",";\n font-size: ",";\n\n ","\n "])),O(t)?.8:1.2,O(t)?"15px":"16px",O(t)&&a.css(ce||(ce=o(["\n min-width: 0;\n padding-right: 14px;\n "]))))}),ve=a.styled("div").attrs({className:N.description})(se||(se=o(["\n text-align: left;\n font-size: 14px;\n flex-grow: 2;\n margin: auto 0;\n line-height: 18px;\n font-weight: normal;\n ",";\n"])),e=>{let{$cardSize:t}=e;return!z(t)&&be}),we=a.styled("footer").attrs({className:N.url})(ue||(ue=o(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: left;\n margin: 0;\n flex-grow: 0;\n font-weight: normal;\n ",";\n"])),e=>{let{$cardSize:t}=e;return a.css(de||(de=o(["\n font-size: ",";\n ","\n "])),O(t)?"10px":"12px",!O(t)&&"width: 100%;")}),xe=a.styled(U)(pe||(pe=o(["\n opacity: 0.75;\n transition: ",";\n will-change: opacity;\n\n .",":hover & {\n opacity: 1;\n }\n"])),X("opacity"),N.main),ke=a.styled("span").attrs({title:"microlink.io"})(me||(me=o(["\n background: url('https://cdn.microlink.io/logo/logo.svg') no-repeat center\n center;\n display: block;\n margin-left: 15px;\n transition: ",";\n will-change: filter, opacity;\n &:not(:hover) {\n filter: grayscale(100%);\n opacity: 0.75;\n }\n\n min-width: ",";\n width: ",";\n background-size: ",";\n height: ",";\n"])),X("filter","opacity"),ge,ge,ge,"12px"),$e=()=>{const{state:{description:e,title:t,url:n},props:{size:o}}=r.useContext(ee),a=O(o),i=r.useMemo(()=>(e=>{if(x(e))return"";const{hostname:t}=new URL(e);return t.replace(fe,"")})(n),[n]),l=r.useCallback(e=>{e.preventDefault(),window.open("https://www.microlink.io","_blank")},[]);return r.createElement(he,{$cardSize:o},r.createElement(ye,{$cardSize:o},r.createElement(U,{$useNanoClamp:!1},t)),!a&&r.createElement(ve,{$cardSize:o},r.createElement(U,{lines:2},e)),r.createElement(we,{$cardSize:o},r.createElement(xe,{$useNanoClamp:!1},i),r.createElement(ke,{onClick:l})))};var ze,Oe,Ee,Se;const Ce=a.keyframes(ze||(ze=o(["\n 0% {\n background: #e1e8ed;\n }\n 70% {\n background: #cdd4d8;\n }\n 100% {\n background: #e1e8ed;\n }\n"]))),Pe=a.keyframes(Oe||(Oe=o(["\n 0% {\n background: #e1e8ed;\n }\n 70% {\n background: #dce3e8;\n }\n 100% {\n background: #e1e8ed;\n }\n"]))),Me=a.css(Ee||(Ee=o(["\n animation: "," .75s linear infinite;\n"])),Ce),je=a.css(Se||(Se=o(["\n animation: "," 1.25s linear infinite;\n"])),Pe);var De,_e,Ne;const Re=a.styled("img")(De||(De=o(["\n height: 1px;\n width: 1px;\n position: absolute;\n z-index: -1;\n"]))),Fe=a.css(_e||(_e=o(["\n &::after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: #e1e8ed;\n z-index: 1;\n transition: ",";\n will-change: opacity;\n\n ",";\n }\n"])),X("opacity","visibility"),e=>{let{$isLoading:t}=e;return a.css(Ne||(Ne=o(["\n opacity: ",";\n visibility: ",";\n "])),t?1:0,t?"$visible":"hidden")});var Te,Le,Ve,Ie,Ue;const We={small:a.css(Te||(Te=o(["\n flex: 0 0 48px;\n "]))),normal:a.css(Le||(Le=o(["\n flex: 0 0 125px;\n\n ","\n "])),$(Ve||(Ve=o(["\n flex: 0 0 92px;\n "])))),large:a.css(Ie||(Ie=o(["\n flex: 1;\n\n &::before {\n padding-bottom: 0;\n }\n "])))},Be=a.styled("div")(Ue||(Ue=o(["\n background: transparent no-repeat center center / cover;\n display: block;\n overflow: hidden;\n height: auto;\n position: relative;\n\n &::before {\n content: '';\n padding-bottom: 100%;\n display: block;\n }\n\n ",";\n\n ",";\n"])),e=>{let{$cardSize:t}=e;return We[t]},Fe),He=e=>{const{props:{size:t}}=r.useContext(ee);return r.createElement(Be,n({$cardSize:t},e))};var qe;const Xe=a.styled(He).attrs({className:"".concat(N.media," ").concat(N.image)})(qe||(qe=o(["\n background-image: ",";\n"])),e=>{let{url:t}=e;return t?"url('".concat(E(t),"')"):""}),Ae=e=>{const{state:{imageUrl:t}}=r.useContext(ee);return r.createElement(Xe,n({url:t},e))};var Ke,Je,Ge,Qe,Ye;const Ze=a.styled(Ae)(Ke||(Ke=o(["\n ",";\n"])),je),et=a.styled("span")(Je||(Je=o(["\n opacity: 0.8;\n height: 16px;\n width: ",";\n display: block;\n background: #e1e8ed;\n margin: ",";\n ",";\n\n ",";\n"])),e=>{let{$cardSize:t}=e;return O(t)?"75%":"60%"},e=>{let{$cardSize:t}=e;return O(t)?"0 20px 0 0":"2px 0 8px"},Me,e=>{let{$cardSize:t}=e;return!z(t)&&"\n height: 15px;\n "}),tt=a.styled("span")(Ge||(Ge=o(["\n opacity: 0.8;\n height: 14px;\n width: 95%;\n display: block;\n position: relative;\n ",";\n animation-delay: 0.125s;\n"])),Me),nt=a.styled("span")(Qe||(Qe=o(["\n opacity: 0.8;\n height: 12px;\n width: 30%;\n display: block;\n "," animation-delay: .25s;\n\n ",";\n"])),Me,e=>{let{$cardSize:t}=e;return!z(t)&&"\n height: 10px;\n "}),rt=()=>{const{props:{size:e}}=r.useContext(ee),t=O(e);return r.createElement(r.Fragment,null,r.createElement(Ze,{$cardSize:e}),r.createElement(he,{$cardSize:e},r.createElement(et,{$cardSize:e}),t?null:r.createElement(r.Fragment,null,r.createElement(tt,{$cardSize:e}),r.createElement(tt,{$cardSize:e,style:{marginBottom:"12px"}})),Ye||(Ye=r.createElement(nt,null))))};var ot;const at=a.styled("div")(ot||(ot=o(["\n backface-visibility: hidden;\n filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));\n transition: ",";\n will-change: transform;\n\n > svg {\n display: block;\n }\n\n &:active:not(:focus) {\n transform: scale(0.9);\n }\n"])),q("transform"));var it,lt,ct,st,ut,dt,pt,mt,ft;const gt=e=>r.createElement("svg",n({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 14 14"},e),it||(it=r.createElement("path",{fill:"#FFF",fillRule:"evenodd",stroke:"none",strokeWidth:"1",d:"M15.5 6.205l-.705-.705L13 7.295 11.205 5.5l-.705.705L12.295 8 10.5 9.795l.705.705L13 8.705l1.795 1.795.705-.705L13.705 8 15.5 6.205zM9 15a.5.5 0 01-.355-.15L4.835 11H1.5a.5.5 0 01-.5-.5v-5a.5.5 0 01.5-.5h3.335l3.81-3.85a.5.5 0 01.705 0 .5.5 0 01.15.35v13a.5.5 0 01-.5.5z",transform:"translate(-1 -1)"}))),bt=e=>r.createElement("svg",n({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 14 14"},e),lt||(lt=r.createElement("path",{fill:"#FFF",fillRule:"evenodd",stroke:"none",strokeWidth:"1",d:"M13.58 4.04l-.765.645a5 5 0 01-.145 6.615l.735.7a6 6 0 00.175-7.94v-.02zM10.79 6a3 3 0 01-.09 3.97l.735.68a4 4 0 00.115-5.295L10.79 6zM9 15a.5.5 0 01-.355-.15L4.835 11H1.5a.5.5 0 01-.5-.5v-5a.5.5 0 01.5-.5h3.335l3.81-3.85a.5.5 0 01.705 0 .5.5 0 01.15.35v13a.5.5 0 01-.5.5z",transform:"translate(-1 -1)"}))),ht=a.styled("div")(ct||(ct=o(["\n z-index: 2;\n position: absolute;\n bottom: ","px;\n left: 0;\n right: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: ",";\n will-change: opacity;\n"])),e=>{let{$cardSize:t}=e;return z(t)?18:14},X("opacity")),yt=a.styled("svg")(st||(st=o(["\n stroke: #fff;\n"]))),vt=a.styled(at).attrs({className:N.volumeControl})(ut||(ut=o(["\n "," {\n width: ","px;\n height: ","px;\n\n ","\n }\n"])),yt,e=>{let{$cardSize:t}=e;return z(t)?16:14},e=>{let{$cardSize:t}=e;return z(t)?16:14},e=>{let{$cardSize:t}=e;return!z(t)&&$(dt||(dt=o(["\n width: 12px;\n height: 12px;\n "])))}),wt=a.styled(at).attrs({className:N.rateControl})(pt||(pt=o(["\n font-size: ","px;\n min-width: ","px;\n line-height: 1;\n font-weight: bold;\n border: 1.5px solid #fff;\n border-radius: 9999px;\n padding: 1px 5px;\n text-align: center;\n color: #fff;\n margin-left: 10px;\n\n ","\n"])),e=>{let{$cardSize:t}=e;return z(t)?12:10},e=>{let{$cardSize:t}=e;return z(t)?33:28},e=>{let{$cardSize:t}=e;return!z(t)&&$(mt||(mt=o(["\n font-size: 8px;\n margin-left: 8px;\n min-width: 23px;\n "])))}),xt=a.styled("span").attrs({className:N.progressTime})(ft||(ft=o(["\n margin: ",";\n font-family: ",";\n font-size: 12px;\n padding: 0 16px;\n color: #fff;\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n"])),e=>{let{$right:t}=e;return t?"0 0 0 auto":"0 auto 0 0"},J),kt=e=>{let{$cardSize:t,currentTime:n,endTime:o,isMuted:a,onMuteClick:i,onPlaybackRateClick:l,playbackRate:c}=e;const s=r.useMemo(()=>a?gt:bt,[a]),u=r.useMemo(()=>z(t),[t]);return r.createElement(ht,{$cardSize:t},u&&r.createElement(xt,null,n),r.createElement(vt,{title:a?"Unmute":"Mute",$cardSize:t,onClick:i},r.createElement(yt,{as:s})),r.createElement(wt,{title:"Playback Rate",$cardSize:t,onClick:l},r.createElement("span",null,c,"x")),u&&r.createElement(xt,{$right:!0},o))},$t=["$isPlaying"];var zt,Ot,Et,St,Ct,Pt;const Mt=e=>r.createElement("svg",n({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 20"},e),zt||(zt=r.createElement("path",{fill:"#FFF",fillRule:"evenodd",stroke:"none",strokeWidth:"1",d:"M12 6h-2a2 2 0 00-2 2v16a2 2 0 002 2h2a2 2 0 002-2V8a2 2 0 00-2-2zm10 0h-2a2 2 0 00-2 2v16a2 2 0 002 2h2a2 2 0 002-2V8a2 2 0 00-2-2z",transform:"translate(-8 -6)"}))),jt=e=>r.createElement("svg",n({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 21 24"},e),Ot||(Ot=r.createElement("path",{fill:"#FFF",fillRule:"evenodd",stroke:"none",strokeWidth:"1",d:"M7 28a1 1 0 01-1-1V5a1 1 0 011.501-.865l19 11a1 1 0 010 1.73l-19 11A.998.998 0 017 28z",transform:"translate(-6 -4)"}))),Dt={large:"50px",normal:"35px",small:"20px"},_t=a.styled("svg")(Et||(Et=o(["\n stroke: #fff;\n"]))),Nt=a.styled(at).attrs({className:N.playbackControl})(St||(St=o(["\n "," {\n ","\n }\n"])),_t,e=>{let{$cardSize:t}=e;return a.css(Ct||(Ct=o(["\n width: ",";\n height: ",";\n padding: ",";\n\n ","\n "])),Dt[t],Dt[t],z(t)?0:"8px",!z(t)&&!O(t)&&$(Pt||(Pt=o(["\n width: calc("," * 1.2);\n height: calc("," * 1.2);\n "])),Dt.small,Dt.small))}),Rt=e=>{let{$isPlaying:o}=e,a=t(e,$t);const i=r.useMemo(()=>o?Mt:jt,[o]);return r.createElement(Nt,n({title:o?"Pause":"Play"},a),r.createElement(_t,{as:i}))};var Ft,Tt;const Lt={normal:.8,small:.9},Vt=a.styled("div").attrs(e=>{let{$isVisible:t,$positionX:n}=e;return{style:{left:n,transform:"scale(".concat(t?1:.5,") translate(-50%, -50%)"),opacity:t?1:0,visibility:t?"$visible":"hidden"}}})(Ft||(Ft=o(["\n position: absolute;\n top: 50%;\n background: #ffffff;\n border-radius: 50%;\n transform-origin: center center;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);\n transition: ",";\n will-change: left, transform, opacity, visibility;\n backface-visibility: hidden;\n z-index: 3;\n\n ","\n"])),q("transform","opacity","visibility"),e=>{let{$cardSize:t}=e;const n=(r=t,Math.floor(12*(Lt[r]||1)));var r;return a.css(Tt||(Tt=o(["\n height: ","px;\n width: ","px;\n "])),n,n)}),It=["$isDragging","$isVisible","label","$positionX","size"];var Ut;const Wt={normal:.8},Bt=a.styled("span").attrs(e=>{let{$position:t,$isDragging:n,$visible:r}=e;return{style:{left:"".concat(t,"px"),top:r?"-4px":"0px",visibility:r?"$visible":"hidden",opacity:r?1:0,transform:"translate(-50%, ".concat(n?-110:-100,"%)")}}})(Ut||(Ut=o(["\n position: absolute;\n background: rgba(24, 25, 25, 0.75);\n color: #fff;\n text-shadow: 0 1px 2px rgba(24, 25, 25, 0.15);\n padding: 2px 3px;\n border-radius: 4px;\n font-family: ",";\n font-size: ","px;\n line-height: 1;\n transition: ",",\n ",";\n will-change: top, left, visibility, opacity, transform;\n backface-visibility: hidden;\n"])),J,e=>{let{$cardSize:t}=e;return 11*(Wt[t]||1)},X("opacity","visibility","transform"),A("top")),Ht=r.forwardRef((e,o)=>{let{$isDragging:a,$isVisible:i,label:l,$positionX:c,size:s}=e,u=t(e,It);return r.createElement(r.Fragment,null,r.createElement(Bt,n({$visible:i,$position:c,$cardSize:s,ref:o,$isDragging:a},u),l))});Ht.displayName="Tooltip";const qt=["key"];var Xt,At,Kt,Jt,Gt,Qt,Yt;const Zt={normal:.7,small:.6},en={small:.9,large:1.4},tn=e=>Math.floor(6*(en[e]||1)),nn=a.styled("div").attrs(()=>({className:N.progressBar}))(Xt||(Xt=o(["\n position: relative;\n padding: ","px ","px ","px;\n z-index: 2;\n backface-visibility: hidden;\n"])),6,3,3),rn=a.styled("div").attrs(e=>{let{$cardSize:t,$isDragging:n}=e;if(n){const e=tn(t);return{style:{height:"".concat(e,"px")}}}return{}})(At||(At=o(["\n background: transparent;\n border-radius: 9999px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n background: rgba(255, 255, 255, 0.15);\n transition: ",";\n will-change: height;\n pointer-events: none;\n position: relative;\n\n ","\n"])),q("height"),e=>{let{$cardSize:t}=e;const n=(r=t,Math.floor(6*(Zt[r]||1)));var r;const i=tn(t);return a.css(Kt||(Kt=o(["\n height: ","px;\n\n ",":hover & {\n height: ","px;\n }\n "])),n,nn,i)}),on=a.styled("div")(Jt||(Jt=o(["\n border-radius: inherit;\n height: 100%;\n position: relative;\n overflow: hidden;\n"]))),an=a.styled("div").attrs(e=>{let{$maskScale:t}=e;return{style:{transform:"scaleX(".concat(t,")")}}})(Gt||(Gt=o(["\n position: absolute;\n left: 0;\n top: -50%;\n height: 200%;\n width: 100%;\n background: #ffffff;\n transform-origin: left center;\n will-change: transform;\n"]))),ln=a.styled("div").attrs(e=>{let{$cursorRatio:t,$isHovering:n,$progressPercent:r}=e;return{style:{left:r,transform:"scaleX(".concat(t,")"),opacity:n?1:0,visibility:n?"$visible":"hidden"}}})(Qt||(Qt=o(["\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.4);\n transform-origin: left center;\n transition: ",";\n will-change: left, transform, opacity, $visible;\n"])),q("opacity","visibility")),cn=a.styled("div").attrs(e=>{let{start:t,end:n}=e;return{style:{left:"".concat(t,"px"),right:"".concat(n,"px")}}})(Yt||(Yt=o(["\n background: rgba(255, 255, 255, 0.35);\n position: absolute;\n top: 0;\n bottom: 0;\n"]))),sn=e=>{let{bufferedMedia:o,cursorX:a,duration:i,hoveredTime:l,$isDragging:c,$isHovering:s,onClick:u,onMouseDown:d,onMouseOver:p,progress:m,showTooltip:f}=e;const{props:{size:g}}=r.useContext(ee),b=r.useRef(),h=r.useRef(),y=r.useMemo(()=>O(g),[g]),v=r.useCallback(()=>b.current?b.current.getBoundingClientRect().width-6:0,[]),w=r.useMemo(()=>P(m/i,0,1),[i,m]),x=r.useMemo(()=>"".concat(P(100*w,1,99),"%"),[w]),k=r.useMemo(()=>{if(b.current){const e=v(),t=w*e,n=a-t;if(n>0)return P((n/(e-t)).toFixed(3),0,.99)}return 0},[a,v,w]),$=r.useMemo(()=>{const e=v();return o.map((t,n)=>({key:n,start:t.start*e,end:e-t.end*e}))},[o,v]),z=r.useMemo(()=>C(l),[l]),E=r.useMemo(()=>{if(b.current&&h.current){const e=v(),t=h.current.getBoundingClientRect().width/2;return P(a,t,e-t)}return 0},[a,v]),S=r.useMemo(()=>({onClick:u,onMouseDown:d,onMouseOver:p}),[u,d,p]),M=r.useMemo(()=>c||s,[c,s]);return r.createElement(nn,n({$cardSize:g,ref:b},S),r.createElement(rn,{$cardSize:g,$isDragging:c},r.createElement(on,null,r.createElement(ln,{$cursorRatio:k,$isHovering:s,$progressPercent:x}),$.map(e=>{let{key:o}=e,a=t(e,qt);return r.createElement(cn,n({key:o},a))}),r.createElement(an,{$maskScale:w})),r.createElement(Vt,{$cardSize:g,$isVisible:M,$positionX:x}),!y&&r.createElement(Ht,{$isDragging:c,$isVisible:M,label:z,$positionX:E,ref:h,size:g})))};var un,dn,pn,mn,fn;const gn=["$cardSize"],bn=["$cardSize"],hn=["type","$cardSize"],yn=e=>{let o=t(e,gn);return r.createElement("svg",n({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 29"},o),un||(un=r.createElement("path",{fill:"#FFF",fillRule:"evenodd",stroke:"none",strokeWidth:"1",d:"M4 18c0 6.627 5.373 12 12 12s12-5.373 12-12S22.627 6 16 6h-4V1L6 7l6 6V8h4c5.523 0 10 4.477 10 10s-4.477 10-10 10S6 23.523 6 18H4zm15.63 4.13a2.84 2.84 0 01-1.28-.27 2.44 2.44 0 01-.89-.77 3.57 3.57 0 01-.52-1.25 7.69 7.69 0 01-.17-1.68 7.83 7.83 0 01.17-1.68c.094-.445.27-.87.52-1.25.23-.325.535-.59.89-.77.4-.188.838-.28 1.28-.27a2.44 2.44 0 012.16 1 5.23 5.23 0 01.7 2.93 5.23 5.23 0 01-.7 2.93 2.44 2.44 0 01-2.16 1.08zm0-1.22c.411.025.8-.19 1-.55a3.38 3.38 0 00.37-1.51v-1.38a3.31 3.31 0 00-.29-1.5 1.23 1.23 0 00-2.06 0 3.31 3.31 0 00-.29 1.5v1.38a3.38 3.38 0 00.29 1.51c.195.356.575.57.98.55zm-9 1.09v-1.18h2v-5.19l-1.86 1-.55-1.06 2.32-1.3H14v6.5h1.78V22h-5.15z",transform:"translate(-4 -1)"})))},vn=e=>{let o=t(e,bn);return r.createElement("svg",n({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 29"},o),dn||(dn=r.createElement("path",{fill:"#FFF",fillRule:"evenodd",stroke:"none",strokeWidth:"1",d:"M26 18c0 5.523-4.477 10-10 10S6 23.523 6 18 10.477 8 16 8h4v5l6-6-6-6v5h-4C9.373 6 4 11.373 4 18s5.373 12 12 12 12-5.373 12-12h-2zm-6.36 4.13a2.81 2.81 0 01-1.28-.27 2.36 2.36 0 01-.89-.77 3.39 3.39 0 01-.47-1.25 7.12 7.12 0 01-.17-1.68 7.24 7.24 0 01.17-1.68 3.46 3.46 0 01.52-1.25 2.36 2.36 0 01.89-.77c.4-.19.838-.282 1.28-.27a2.44 2.44 0 012.16 1 5.31 5.31 0 01.7 2.93 5.31 5.31 0 01-.7 2.93 2.44 2.44 0 01-2.21 1.08zm0-1.22a1 1 0 001-.55c.22-.472.323-.99.3-1.51v-1.38a3.17 3.17 0 00-.3-1.5 1.22 1.22 0 00-2.05 0 3.18 3.18 0 00-.29 1.5v1.38a3.25 3.25 0 00.29 1.51 1 1 0 001.05.55zm-7.02-3.49c.355.035.71-.06 1-.27a.84.84 0 00.31-.68v-.08a.94.94 0 00-.3-.74 1.2 1.2 0 00-.83-.27 1.65 1.65 0 00-.89.24 2.1 2.1 0 00-.68.68l-.93-.83a5.37 5.37 0 01.44-.51 2.7 2.7 0 01.54-.4 2.55 2.55 0 01.7-.27 3.25 3.25 0 01.87-.1 3.94 3.94 0 011.06.14c.297.078.576.214.82.4.224.168.408.383.54.63.123.26.184.543.18.83a2 2 0 01-.11.67 1.82 1.82 0 01-.32.52 1.79 1.79 0 01-.47.36 2.27 2.27 0 01-.57.2V18c.219.04.431.11.63.21a1.7 1.7 0 01.85.93c.084.234.124.481.12.73a2 2 0 01-.2.92 2 2 0 01-.58.72 2.66 2.66 0 01-.89.45 3.76 3.76 0 01-1.15.16 4.1 4.1 0 01-1-.11 3.1 3.1 0 01-.76-.31 2.76 2.76 0 01-.56-.45 4.22 4.22 0 01-.44-.55l1.07-.81c.082.147.175.288.28.42.105.128.226.243.36.34.137.097.29.171.45.22a2 2 0 00.57.07 1.45 1.45 0 001-.3 1.12 1.12 0 00.34-.85v-.08a1 1 0 00-.37-.8 1.78 1.78 0 00-1.06-.28h-.76v-1.21h.74z",transform:"translate(-4 -1)"})))},wn=a.styled("svg")(pn||(pn=o(["\n stroke: #fff;\n width: ","px;\n height: ","px;\n\n ","\n"])),e=>{let{$cardSize:t}=e;return z(t)?30:24},e=>{let{$cardSize:t}=e;return z(t)?30:24},e=>{let{$cardSize:t}=e;return!z(t)&&$(mn||(mn=o(["\n width: 0;\n height: 0;\n "])))}),xn=a.styled(at)(fn||(fn=o(["\n margin: 0 ",";\n"])),e=>{let{$cardSize:t}=e;return z(t)?"28px":"3px"}),kn=e=>{let{type:o="rewind",$cardSize:a}=e,i=t(e,hn);const l=r.useMemo(()=>"rewind"===o?yn:vn,[o]);return r.createElement(xn,n({title:"rewind"===o?"Rewind":"Forward",$cardSize:a},i),r.createElement(wn,{as:l,$cardSize:a}))};var $n,zn,On,En,Sn,Cn;const Pn={normal:.8,small:.6},Mn={normal:.9,small:.8},jn=a.keyframes($n||($n=o(["\n 100% {\n transform: rotate(360deg);\n }\n"]))),Dn=a.keyframes(zn||(zn=o(["\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n"]))),_n=a.styled(at).attrs(e=>{let{$isVisible:t}=e;return{style:{opacity:t?1:0,visibility:t?"$visible":"hidden"}}})(e=>{let{$cardSize:t}=e;const n="".concat((e=>Math.floor(12*(Mn[e]||1)))(t),"px"),r="".concat((e=>Math.floor(6*(Pn[e]||1)))(t),"px");return a.css(On||(On=o(["\n position: absolute;\n width: ",";\n right: ",";\n top: ",";\n transition: ",";\n will-change: opacity, visibility;\n pointer-events: none;\n "])),n,r,r,X("opacity","visibility"))}),Nn=a.styled("svg")(En||(En=o(["\n width: 100%;\n animation: "," 2s linear infinite;\n will-change: transform;\n"])),jn),Rn=a.styled("circle")(Sn||(Sn=o(["\n stroke: #fff;\n stroke-linecap: round;\n stroke-width: 7;\n fill: none;\n animation: "," 1.5s ease-in-out infinite;\n will-change: stroke-dasharray, stroke-dashoffset;\n"])),Dn),Fn=e=>{let{size:t,$isVisible:n}=e;return r.createElement(_n,{$cardSize:t,className:N.spinner,$isVisible:n},Cn||(Cn=r.createElement(Nn,{viewBox:"0 0 50 50"},r.createElement(Rn,{cx:"25",cy:"25",r:"20"}))))};var Tn,Ln,Vn,In,Un;const Wn=32,Bn=37,Hn=39,qn=77,Xn=a.styled("div").attrs({className:N.mediaControls})(Tn||(Tn=o(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n transition: ",", ",";\n will-change: background;\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n\n ","\n"])),A("background"),X("opacity"),e=>{let{$hasInteracted:t,$isDragging:n,$isPlaying:r}=e;const i="rgba(0, 0, 0, 0.35)",l=t&&!r;return a.css(Ln||(Ln=o(["\n .",":hover & {\n background: ",";\n }\n\n .",":not(:hover) & {\n opacity: ",";\n ",";\n }\n "])),N.main,n?"rgba(0, 0, 0, 0.2)":i,N.main,!t||l?1:0,l&&"background: ".concat(i))}),An=a.styled("div")(Vn||(Vn=o(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n"]))),Kn=a.styled("div")(In||(In=o(["\n flex: 1;\n\n ","\n"])),e=>{let{$isVisible:t}=e;return!t&&a.css(Un||(Un=o(["\n *[class*='","']:not(.",") {\n transition: ",";\n opacity: 0;\n visibility: hidden;\n }\n "])),N.mediaControls,N.progressTime,X("opacity","visibility"))}),Jn=e=>{let{MediaComponent:t,mediaProps:o}=e;const{props:{autoPlay:a,controls:i,mediaRef:l,muted:c,loop:s,size:u}}=r.useContext(ee),[d,p]=r.useState(0),[m,f]=r.useState(0),[g,b]=r.useState([]),[h,y]=r.useState(0),[w,x]=r.useState(0),[k,$]=r.useState(a),[z,E]=r.useState(c),[S,M]=r.useState(!1),[j,D]=r.useState(!1),[_,R]=r.useState(!1),[F,T]=r.useState(1),[L,V]=r.useState(a),[I,U]=r.useState(!1),W=r.useRef(),B=r.useCallback(e=>{W.current=e,l&&(v(l)?l(e):l.current=e)},[l]),H=r.useMemo(()=>!O(u),[u]),q=r.useMemo(()=>({onCanPlay:()=>M(!1),onLoadedMetadata:e=>p(e.currentTarget.duration),onPause:()=>$(!1),onPlay:()=>$(!0),onPlaying:()=>M(!1),onProgress:e=>b(e.currentTarget.buffered),onRateChange:e=>T(e.currentTarget.playbackRate),onTimeUpdate:e=>f(e.currentTarget.currentTime),onVolumeChange:e=>E(e.currentTarget.muted),onWaiting:e=>M(!0)}),[]),X=r.useCallback(e=>{if(W.current){const t=e.currentTarget.getBoundingClientRect(),n=P(Math.floor(e.clientX-t.left),0,t.width);return{cursor:n,time:n/t.width*W.current.duration}}return{cursor:0,time:0}},[]),A=r.useCallback(()=>{W.current&&(W.current.paused?(L||V(!0),W.current.play()):W.current.pause())},[L]),K=r.useCallback(e=>{if(W.current){const t=P(e,0,W.current.duration);W.current.currentTime=t,f(t)}},[]),J=r.useCallback((e,t)=>{if(e.preventDefault(),e.stopPropagation(),W.current){const{currentTime:e}=W.current;K("rewind"===t?e-10:e+30)}},[K]),G=r.useCallback(e=>{e.preventDefault(),e.stopPropagation(),W.current&&(W.current.muted=!W.current.muted)},[]),Q=r.useCallback(e=>{e.preventDefault(),e.stopPropagation(),W.current&&(W.current.playbackRate=(e=>{switch(e){case 1:return 1.25;case 1.25:return 1.5;case 1.5:return 2;default:return 1}})(W.current.playbackRate))},[]),Y=r.useCallback(e=>{e.preventDefault(),e.stopPropagation(),R(!1)},[]),Z=r.useCallback(e=>{e.preventDefault(),e.stopPropagation(),R(!0);const{time:t}=X(e);K(t)},[X,K]),te=r.useCallback(()=>D(!0),[]),ne=r.useCallback(e=>{e.preventDefault(),e.stopPropagation(),_?R(!1):A()},[_,A]),re=r.useCallback(e=>{if((_||j)&&W.current){e.preventDefault();const{cursor:t,time:n}=X(e);x(n),y(t),_&&(W.current.paused||(W.current.pause(),U(!0)),K(n))}},[X,_,j,K]),oe=r.useCallback(e=>{_&&0===e.buttons&&R(!1)},[_]),ae=r.useCallback(e=>{if(_)return;const{keyCode:t}=e;if([Wn,Bn,Hn,qn].includes(t)&&W.current)switch(e.preventDefault(),t){case Wn:A();break;case Bn:K(W.current.currentTime-5);break;case Hn:K(W.current.currentTime+5);break;case qn:W.current.muted=!W.current.muted}},[_,K,A]),ie=r.useMemo(()=>({onClick:ne,onKeyDown:ae,onMouseMove:re,onMouseOut:()=>D(!1),onMouseOver:oe}),[ne,ae,re,oe]),le=r.useMemo(()=>L?{title:""}:{},[L]),ce=r.useMemo(()=>g&&g.length&&W.current?[...Array(g.length).keys()].map(e=>({start:g.start(e)/W.current.duration,end:g.end(e)/W.current.duration})):[],[g]),se=r.useMemo(()=>C(m||0),[m]),ue=r.useMemo(()=>C(d||0),[d]),de=r.useMemo(()=>({$cardSize:u,currentTime:se,endTime:ue,isMuted:z,onMuteClick:G,onPlaybackRateClick:Q,playbackRate:F}),[se,ue,z,G,Q,F,u]),pe=r.useMemo(()=>({bufferedMedia:ce,cursorX:h,duration:d,hoveredTime:w,$isDragging:_,$isHovering:j,onClick:Y,onMouseDown:Z,onMouseOver:te,progress:m,showTooltip:_||j}),[ce,h,d,w,_,j,Y,Z,te,m]);return r.useEffect(()=>{!_&&I&&W.current&&W.current.paused&&(W.current.play(),U(!1))},[I,_]),r.createElement(r.Fragment,null,r.createElement(t,n({},o,q,{ref:B,autoPlay:a,loop:s,muted:c})),i&&r.createElement(Xn,n({},le,{tabIndex:0,$hasInteracted:L,$isDragging:_,$isPlaying:k},ie),r.createElement(Fn,{size:u,$isVisible:S}),L?r.createElement(r.Fragment,null,r.createElement(Kn,{$isVisible:!_},r.createElement(An,null,H&&r.createElement(kn,{className:N.rwControl,type:"rewind",$cardSize:u,onClick:e=>J(e,"rewind")}),r.createElement(Rt,{$cardSize:u,$isPlaying:k}),H&&r.createElement(kn,{className:N.ffwControl,type:"fastforward",$cardSize:u,onClick:e=>J(e,"fastforward")})),H&&r.createElement(kt,de)),r.createElement(sn,pe)):r.createElement(An,null,r.createElement(Rt,{$cardSize:u}))))};var Gn;const Qn=a.styled("video")(Gn||(Gn=o(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n &::media-controls-start-playback-button {\n display: none;\n appearance: none;\n }\n"]))),Yn={video:e=>{const{state:{imageUrl:t,playsInline:o,videoUrl:a}}=r.useContext(ee),i=r.useMemo(()=>{const e={className:"".concat(N.media," ").concat(N.video),src:a,playsInline:o};return t&&(e.poster=E(t)),e},[t,o,a]);return r.createElement(He,n({className:"".concat(N.mediaWrapper," ").concat(N.videoWrapper)},e),r.createElement(Jn,{MediaComponent:Qn,mediaProps:i}))},image:Ae,audio:e=>{const{state:{audioUrl:t}}=r.useContext(ee),o=r.useMemo(()=>({className:"".concat(N.media," ").concat(N.audio),src:t}),[t]);return r.createElement(Ae,n({className:"".concat(N.mediaWrapper," ").concat(N.audioWrapper)},e),r.createElement(Jn,{MediaComponent:"audio",mediaProps:o}))}},Zn=()=>{const{state:{imageUrl:e,isAudio:t,isVideo:n}}=r.useContext(ee),[o,a]=r.useState(null!==k(e));const i=((e,t)=>e?"audio":t?"video":"image")(t,n),l=Yn[i];return r.createElement(r.Fragment,null,r.createElement(l,{$isLoading:o}),o&&r.createElement(Re,{src:e,onLoad:()=>a(!1)}))},er=["href","rel","target","as"];var tr,nr,rr,or,ar;function ir(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function lr(t){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?ir(Object(r),!0).forEach(function(n){e(t,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):ir(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}const cr="382px",sr=e=>{let{$backgroundColor:t,color:n}=e;return a.css(tr||(tr=o(["\n background-color: ",";\n border-color: ",";\n transition-property: filter;\n will-change: filter;\n\n &&& {\n color: ",";\n }\n\n &:hover {\n filter: brightness(90%);\n }\n"])),t,n,n)},ur=a.css(nr||(nr=o(["\n flex-direction: column;\n height: ",";\n ",";\n"])),cr,$(rr||(rr=o(["\n height: calc("," * 7/9);\n "])),cr)),dr=a.css(or||(or=o(["\n transition-property: background, border-color;\n will-change: background, border-color;\n &:hover {\n background-color: var(--microlink-hover-background-color, #f5f8fa);\n border-color: var(--microlink-hover-border-color, #8899a680);\n }\n"]))),pr=e=>{let{$cardSize:t}=e;return a.css(ar||(ar=o(["\n flex-direction: ",";\n"])),z(t)?"column-reverse":"row-reverse")},mr=a.css(()=>"\n max-width: var(--microlink-max-width, 500px);\n background-color: var(--microlink-background-color, #fff);\n border-width: var(--microlink-border-width, 1px);\n border-style: var(--microlink-border-style, solid);\n border-color: var(--microlink-border-color, #e1e8ed);\n color: var(--microlink-color, #181919);\n overflow: hidden;\n font-family: ".concat(K,";\n display: flex;\n text-decoration: none;\n opacity: 1;\n position: relative;\n transition-duration: ").concat(W.medium,";\n transition-timing-function: ").concat(B.medium,";\n\n &:active,\n &:hover {\n outline: 0;\n }\n")),fr=a.styled("a")(mr,e=>{let{$isLoading:t,contrast:n}=e;return!t&&!n&&dr},e=>{let{$cardSize:t}=e;return z(t)&&ur},e=>{let{direction:t}=e;return"rtl"===t&&pr},e=>{let{$backgroundColor:t,color:n,contrast:r}=e;return r&&n&&t&&sr},e=>{let{$backgroundColor:t,color:n,contrast:r}=e;return r&&(!n||!t)&&dr}),gr=r.forwardRef((e,n)=>{let{href:o,rel:a="noopener noreferrer",target:i="_blank",as:l="a"}=e,c=t(e,er);const{state:{$backgroundColor:s,color:u,title:d},props:{size:p}}=r.useContext(ee);return r.createElement(fr,lr(lr(lr({},"a"===l?{href:o,rel:a,target:i}:void 0),c),{},{$backgroundColor:s,$cardSize:p,color:u,ref:n,title:d}))});gr.displayName="CardWrap";var br,hr,yr;const vr=["className","fetchData","lazy","loading","media","setData","url","apiKey"],wr=["className","apiKey","autoPlay","controls","direction","lazy","loop","media","fetchData","muted","playsInline","size"];function xr(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function kr(t){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?xr(Object(r),!0).forEach(function(n){e(t,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):xr(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}const $r=e=>{const{className:o,fetchData:a,lazy:l,loading:c,media:s,setData:u,url:d,apiKey:p}=e,m=t(e,vr),f=r.useMemo(()=>[].concat(s),[s]),{updateState:g}=r.useContext(ee),[b,h]=r.useState(!0),[$,z]=r.useState(null),[O,E]=r.useState(!1),C=r.useMemo(()=>void 0===c,[c]),[P,M]=r.useMemo(()=>(e=>{let{apiKey:t,contrast:n=!1,data:r,endpoint:o,force:a,headers:l,media:c,prerender:s,proxy:u,ttl:d,url:p}=e;return i.getApiUrl(p,{apiKey:t,audio:c.includes("audio"),data:r,endpoint:o,force:a,headers:l,iframe:c.includes("iframe"),palette:n,prerender:s,proxy:u,screenshot:c.includes("screenshot"),ttl:d,video:c.includes("video")})})(kr(kr({},e),{},{media:f})),[f,e]),j=r.useMemo(()=>S&&(!0===l||w(l)),[l]),D=r.useMemo(()=>w(l)?l:void 0,[l]),[_,R]=((e,t)=>{const[n,o]=r.useState(!1);return[n,r.useCallback(n=>{if(e){const e=new IntersectionObserver((e,t)=>{let[n]=e;n.isIntersecting&&(o(!0),t.unobserve(n.target))},t);null!==n&&e.observe(n)}else o(!0)},[e,t])]})(j,D),F=r.useMemo(()=>!j||j&&_,[j,_]),T=r.useCallback(e=>{const t=v(u)?u(e):kr(kr({},e),u),{title:n,description:r,url:o,video:a,audio:i,image:l,logo:c,iframe:s}=t,d=l||c||{};let p,m,b=d,y=!1,w=!1;const $=((e,t)=>{let n;for(let r=0;r<t.length;r++){const o=t[r],a=e[o];if(!x(a)){n=o;break}}return n})(t,f);switch($){case"audio":w=!0,m=k(i);break;case"video":y=!0,p=k(a);break;case"iframe":z(s);break;default:b=((e,t)=>e[t.find(t=>!x(e[t]))])(t,f)||d}const O=k(b),{color:E,background_color:S}=b;g({url:o,color:E,title:n,description:r,imageUrl:O,videoUrl:p,audioUrl:m,isVideo:y,isAudio:w,$backgroundColor:S}),h(!1)},[g,f,u]),L=r.useCallback(()=>{if(F){h(!0);(a?i.fetchFromApi(P,M):Promise.resolve({})).then(e=>{let{data:t}=e;return T(t)}).catch(e=>{h(!1),E(!0),console.error("\n┌───────────────┐\n│ Microlink SDK │\n└───────────────┘\n\n".concat(e.description,"\n\n").concat(JSON.stringify(e.data),"\n\nid ").concat(e.headers["x-request-id"],"\nuri ").concat(e.url,"\ncode ").concat(e.code," (").concat(e.statusCode,")\n\nmicrolink.io/").concat(e.code.toLowerCase(),"\n"))})}},[M,a,P,T,F]);r.useEffect(L,[d,u,_]);const V=C?b:c;return O?r.createElement("a",n({href:d},m),d):$?(y||$.scripts.forEach(e=>{if(!document.querySelector('script[src="'.concat(e.src,'"]'))){const t=document.createElement("script");Object.keys(e).forEach(n=>t[n]=e[n]),document.body.appendChild(t)}}),r.createElement("div",n({className:N.iframe,dangerouslySetInnerHTML:{__html:$.html}},m))):r.createElement(gr,n({className:"".concat(N.main," ").concat(o).trim(),href:d,$isLoading:V,ref:R},m),V?br||(br=r.createElement(rt,null)):r.createElement(r.Fragment,null,hr||(hr=r.createElement(Zn,null)),yr||(yr=r.createElement($e,null))))},zr=e=>{let{className:o="",apiKey:a,autoPlay:i=!0,controls:l=!0,direction:c="ltr",lazy:s=!0,loop:u=!0,media:d=["iframe","video","audio","image","logo"],fetchData:p=!0,muted:m=!0,playsInline:f=!0,size:g="normal"}=e,b=t(e,wr);return r.createElement(te,n({className:o,apiKey:a,autoPlay:i,controls:l,direction:c,lazy:s,loop:u,media:d,fetchData:p,muted:m,playsInline:f,size:g},b),e=>r.createElement($r,e))},Or=["LinkComponent"];function Er(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function Sr(t){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?Er(Object(r),!0).forEach(function(n){e(t,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):Er(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}const Cr=a.div`
--microlink-hover-background-color: var(--microlink-background-color, white);
position: absolute;
overflow: hidden;
visibility: hidden;
transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
opacity: 0;
right: 50%;
transform: translate(50%, 0);
bottom: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
width: 500px;
padding: 0.5rem;
border-radius: 4px;
.microlink_card {
border: 0;
}
border: 1px solid var(--microlink-border-color, #e1e8ed);
background-color: var(--microlink-hover-background-color);
&:hover {
box-shadow: rgba(0, 0, 0, 0.12) 0px 30px 60px;
border-color: var(--microlink-hover-border-color, #f5f8fa);
}
`,Pr=a.span`
text-decoration: inherit;
position: relative;
display: inline-block;
&:hover ${Cr} {
margin-bottom: var(--microlink-gap, 15px);
visibility: visible;
opacity: 1;
}
`,Mr=e=>{let{LinkComponent:n}=e,o=t(e,Or);return r.createElement(Pr,null,r.createElement(n,o),r.createElement(Cr,{className:"microlink_hover"},r.createElement(zr,o)))},jr=(e,t)=>n=>Mr(Sr(Sr({LinkComponent:e},t),n));jr.withHover=Mr,exports.default=jr;
//# sourceMappingURL=microlink.min.cjs.map