@microlink/react/dist/microlink.min.cjs

Turn links into beautiful previews.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),n=require("@babel/runtime/helpers/slicedToArray"),r=require("@babel/runtime/helpers/objectWithoutProperties"),a=require("react"),o=require("@babel/runtime/helpers/taggedTemplateLiteral"),i=require("styled-components"),s=require("@microlink/mql");const c=["accessibility","debounce","ellipsis","is","lines","text"];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 d(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?l(Object(r),!0).forEach(function(n){t(e,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}const u=e=>{let t=e.accessibility,n=void 0===t||t,o=e.debounce,i=void 0===o?300:o,s=e.ellipsis,l=void 0===s?"…":s,u=e.is,p=void 0===u?"div":u,m=e.lines,f=void 0===m?3:m,g=e.text,b=r(e,c);const h=a.useRef(null),y=a.useRef("."),v=d(d({ref:h},n?{title:g}:{}),b),w=a.useMemo(()=>"string"==typeof g&&g.length>0,[g]),x=a.useCallback(()=>{if(!w)return;const e=e=>{y.current=e,null!=h.current&&(h.current.textContent=e)},t=()=>{var e,t;return null!==(t=null===(e=h.current)||void 0===e?void 0:e.clientHeight)&&void 0!==t?t:0};e(".");const n=(t()+1)*f+1;if(e(g),t()<=n)return;let r=0,a=0,o=g.length;for(;r<=o;)a=Math.floor((r+o)/2),e(g.slice(0,a).trim()+l),t()<=n?r=a+1:o=a-1;e(g.slice(0,a-1).trim()+l)},[l,w,f,g]);return a.useLayoutEffect(()=>{if(x(),null==h.current)return;const e=new ResizeObserver(((e,t)=>{let n;const r=()=>{n=void 0,e()};return()=>{const a=null==n;clearTimeout(n),n=setTimeout(r,t),a&&e()}})(x,i));return e.observe(h.current),()=>e.disconnect()},[x,i]),w?a.createElement(p,v,y.current):null};function p(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var m,f={exports:{}};var g,b,h,y={exports:{}};var v,w=p(h?b:(h=1,b=e=>function(){if(m)return f.exports;m=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 f.exports=e.test.bind(e),f.exports.regex=e,f.exports}()(e)||function(){if(g)return y.exports;g=1;const e=new RegExp("^(".concat([/^\[(::1|::)\]$/].map(e=>e.source).join("|"),")$"));return y.exports=e.test.bind(e),y.exports.regex=e,y.exports}()(e)));const x="undefined"==typeof window,k=e=>"function"==typeof e,$=e=>"object"==typeof e,z=e=>null==e,E=e=>$(e)?e.url:e,S=function(){return i.css(v||(v=o(["\n    @media (max-width: 48em) {\n      ",";\n    }\n  "])),i.css(...arguments))},O=e=>{let t=e.apiKey,n=e.contrast,r=void 0!==n&&n,a=e.data,o=e.endpoint,i=e.force,c=e.headers,l=e.media,d=e.prerender,u=e.proxy,p=e.ttl,m=e.url;return s.getApiUrl(m,{apiKey:t,audio:l.includes("audio"),data:a,endpoint:o,force:i,headers:c,iframe:l.includes("iframe"),palette:r,prerender:d,proxy:u,screenshot:l.includes("screenshot"),ttl:p,video:l.includes("video")})},C=e=>"large"===e,P=e=>"small"===e,M=e=>w(new URL(e).hostname)?e:"https://images.weserv.nl/?".concat(new URLSearchParams({url:e,default:e,l:9,af:"",il:"",n:-1}).toString()),j=!x&&"IntersectionObserver"in window,D=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(":")},_=(e,t,n)=>{switch(!0){case e<=t:return t;case e>=n:return n;default:return e}},R="microlink_card",N="".concat(R,"__content"),F="".concat(R,"__media"),T="".concat(F,"__controls"),L={main:R,content:N,title:"".concat(N,"_title"),description:"".concat(N,"_description"),url:"".concat(N,"_url"),mediaWrapper:"".concat(F,"_wrapper"),media:F,image:"".concat(F,"_image"),videoWrapper:"".concat(F,"_video_wrapper"),video:"".concat(F,"_video"),audioWrapper:"".concat(F,"_audio_wrapper"),audio:"".concat(F,"_audio"),mediaControls:T,playbackControl:"".concat(T,"_playback"),volumeControl:"".concat(T,"_volume"),rwControl:"".concat(T,"_rewind"),ffwControl:"".concat(T,"_fast_forward"),rateControl:"".concat(T,"_rate"),progressBar:"".concat(T,"_progress_bar"),progressTime:"".concat(T,"_progress_time"),spinner:"".concat(T,"_spinner"),iframe:"".concat(R,"__iframe")},V=["$useNanoClamp","children"];var I,U;function W(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 B(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?W(Object(r),!0).forEach(function(n){t(e,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):W(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}const A=i.styled(e=>{let t=e.children,n=e.className,r=e.lines;return z(t)?null:a.createElement(u,{className:n,lines:r,text:t,is:"p"})})(I||(I=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=>!e.$useNanoClamp&&i.css(U||(U=o(["\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      "])))),q=t=>{let n=t.$useNanoClamp,o=void 0===n||n,i=t.children,s=r(t,V);const c=o?s:B(B({},s),{},{as:"p",title:i});return a.createElement(A,e({$useNanoClamp:o},c),i)},H={short:"100ms",medium:"150ms",long:"300ms"},X={short:"cubic-bezier(.25,.8,.25,1)",medium:"cubic-bezier(.25,.8,.25,1)",long:"cubic-bezier(.4, 0, .2, 1)"},K=(e,t)=>{const n="".concat(H[t]," ").concat(X[t]);return e.map(e=>"".concat(e," ").concat(n)).join(", ")},J=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return K(t,"short")},G=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return K(t,"medium")},Q=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return K(t,"long")},Y="InterUI, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif",Z="'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",ee=["autoPlay","children","controls","loop","mediaRef","muted","playsInline","size"];function te(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 ne(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?te(Object(r),!0).forEach(function(n){t(e,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):te(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}const re={},ae=a.createContext(re),oe=e=>{let t=e.autoPlay,o=e.children,i=e.controls,s=e.loop,c=e.mediaRef,l=e.muted,d=e.playsInline,u=e.size,p=r(e,ee);const m=a.useState(re),f=n(m,2),g=f[0],b=f[1],h=a.useCallback(e=>b(t=>ne(ne({},t),e)),[]),y=a.useMemo(()=>({autoPlay:t,controls:i,loop:s,mediaRef:c,muted:l,playsInline:d,size:u}),[t,i,s,c,l,d,u]),v=a.useMemo(()=>({props:y,state:g,updateState:h}),[y,g,h]);return a.createElement(ae.Provider,{value:v},o(p))};var ie,se,ce,le,de,ue,pe,me,fe,ge,be,he;const ye=/^www\./,ve="16px",we=i.css(ie||(ie=o(["\n  ",";\n"])),S(se||(se=o(["\n    > p {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  "])))),xe=i.styled("div").attrs({className:L.content})(ce||(ce=o(["\n  display: flex;\n  padding: 10px 15px;\n  min-width: 0;\n  box-sizing: border-box;\n  ",";\n"])),e=>{let t=e.$cardSize;return i.css(le||(le=o(["\n    flex: ",";\n    justify-content: ",";\n    flex-direction: ",";\n    align-items: ",";\n  "])),C(t)?"0 0 125px":1,P(t)?"space-between":"space-around",P(t)?"row":"column",P(t)?"center":"stretch")}),ke=i.styled("header").attrs({className:L.title})(de||(de=o(["\n  text-align: left;\n  font-weight: bold;\n  margin: 0;\n  width: 100%;\n  ","\n"])),e=>{let t=e.$cardSize;return i.css(ue||(ue=o(["\n    flex-grow: ",";\n    font-size: ",";\n\n    ","\n  "])),P(t)?.8:1.2,P(t)?"15px":"16px",P(t)&&i.css(pe||(pe=o(["\n      min-width: 0;\n      padding-right: 14px;\n    "]))))}),$e=i.styled("div").attrs({className:L.description})(me||(me=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 t=e.$cardSize;return!C(t)&&we}),ze=i.styled("footer").attrs({className:L.url})(fe||(fe=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 t=e.$cardSize;return i.css(ge||(ge=o(["\n    font-size: ",";\n    ","\n  "])),P(t)?"10px":"12px",!P(t)&&"width: 100%;")}),Ee=i.styled(q)(be||(be=o(["\n  opacity: 0.75;\n  transition: ",";\n  will-change: opacity;\n\n  .",":hover & {\n    opacity: 1;\n  }\n"])),G("opacity"),L.main),Se=i.styled("span").attrs({title:"microlink.io"})(he||(he=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"])),G("filter","opacity"),ve,ve,ve,"12px"),Oe=()=>{const e=a.useContext(ae),t=e.state,n=t.description,r=t.title,o=t.url,i=e.props.size,s=P(i),c=a.useMemo(()=>{return z(e=o)?"":new URL(e).hostname.replace(ye,"");var e},[o]),l=a.useCallback(e=>{e.preventDefault(),window.open("https://www.microlink.io","_blank")},[]);return a.createElement(xe,{$cardSize:i},a.createElement(ke,{$cardSize:i},a.createElement(q,{$useNanoClamp:!1},r)),!s&&a.createElement($e,{$cardSize:i},a.createElement(q,{lines:2},n)),a.createElement(ze,{$cardSize:i},a.createElement(Ee,{$useNanoClamp:!1},c),a.createElement(Se,{onClick:l})))};var Ce,Pe,Me,je;const De=i.keyframes(Ce||(Ce=o(["\n  0% {\n    background: #e1e8ed;\n  }\n  70% {\n    background: #cdd4d8;\n  }\n  100% {\n    background: #e1e8ed;\n  }\n"]))),_e=i.keyframes(Pe||(Pe=o(["\n  0% {\n    background: #e1e8ed;\n  }\n  70% {\n    background: #dce3e8;\n  }\n  100% {\n    background: #e1e8ed;\n  }\n"]))),Re=i.css(Me||(Me=o(["\n  animation: "," .75s linear infinite;\n"])),De),Ne=i.css(je||(je=o(["\n  animation: "," 1.25s linear infinite;\n"])),_e);var Fe,Te,Le;const Ve=i.styled("img")(Fe||(Fe=o(["\n  height: 1px;\n  width: 1px;\n  position: absolute;\n  z-index: -1;\n"]))),Ie=i.css(Te||(Te=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"])),G("opacity","visibility"),e=>{let t=e.$isLoading;return i.css(Le||(Le=o(["\n      opacity: ",";\n      visibility: ",";\n    "])),t?1:0,t?"$visible":"hidden")});var Ue,We,Be,Ae,qe;const He={small:i.css(Ue||(Ue=o(["\n    flex: 0 0 48px;\n  "]))),normal:i.css(We||(We=o(["\n    flex: 0 0 125px;\n\n    ","\n  "])),S(Be||(Be=o(["\n      flex: 0 0 92px;\n    "])))),large:i.css(Ae||(Ae=o(["\n    flex: 1;\n\n    &::before {\n      padding-bottom: 0;\n    }\n  "])))},Xe=i.styled("div")(qe||(qe=o(["\n  background-color: transparent;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 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 t=e.$cardSize;return He[t]},Ie),Ke=t=>{const n=a.useContext(ae).props.size;return a.createElement(Xe,e({$cardSize:n},t))};var Je;const Ge=i.styled(Ke).attrs({className:"".concat(L.media," ").concat(L.image)})(Je||(Je=o(["\n  background-image: ",";\n"])),e=>{let t=e.$url;return t?"url('".concat(M(t),"')"):""}),Qe=t=>{const n=a.useContext(ae).state.imageUrl;return a.createElement(Ge,e({$url:n},t))};var Ye,Ze,et,tt,nt;const rt=i.styled(Qe)(Ye||(Ye=o(["\n  ",";\n"])),Ne),at=i.styled("span")(Ze||(Ze=o(["\n  opacity: 0.8;\n  height: 16px;\n  width: ",";\n  display: block;\n  background: #e1e8ed;\n  margin: ",";\n  ",";\n\n  ",";\n"])),e=>{let t=e.$cardSize;return P(t)?"75%":"60%"},e=>{let t=e.$cardSize;return P(t)?"0 20px 0 0":"2px 0 8px"},Re,e=>{let t=e.$cardSize;return!C(t)&&"\n    height: 15px;\n  "}),ot=i.styled("span")(et||(et=o(["\n  opacity: 0.8;\n  height: 14px;\n  width: 95%;\n  display: block;\n  position: relative;\n  ",";\n  animation-delay: 0.125s;\n"])),Re),it=i.styled("span")(tt||(tt=o(["\n  opacity: 0.8;\n  height: 12px;\n  width: 30%;\n  display: block;\n  "," animation-delay: .25s;\n\n  ",";\n"])),Re,e=>{let t=e.$cardSize;return!C(t)&&"\n    height: 10px;\n  "}),st=()=>{const e=a.useContext(ae).props.size,t=P(e);return a.createElement(a.Fragment,null,a.createElement(rt,{$cardSize:e}),a.createElement(xe,{$cardSize:e},a.createElement(at,{$cardSize:e}),t?null:a.createElement(a.Fragment,null,a.createElement(ot,{$cardSize:e}),a.createElement(ot,{$cardSize:e,style:{marginBottom:"12px"}})),nt||(nt=a.createElement(it,null))))};var ct;const lt=i.styled("div")(ct||(ct=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"])),J("transform"));var dt,ut,pt,mt,ft,gt,bt,ht,yt;const vt=t=>a.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 14 14"},t),dt||(dt=a.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)"}))),wt=t=>a.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 14 14"},t),ut||(ut=a.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)"}))),xt=i.styled("div")(pt||(pt=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 t=e.$cardSize;return C(t)?18:14},G("opacity")),kt=i.styled("svg")(mt||(mt=o(["\n  stroke: #fff;\n"]))),$t=i.styled(lt).attrs({className:L.volumeControl})(ft||(ft=o(["\n  "," {\n    width: ","px;\n    height: ","px;\n\n    ","\n  }\n"])),kt,e=>{let t=e.$cardSize;return C(t)?16:14},e=>{let t=e.$cardSize;return C(t)?16:14},e=>{let t=e.$cardSize;return!C(t)&&S(gt||(gt=o(["\n      width: 12px;\n      height: 12px;\n    "])))}),zt=i.styled(lt).attrs({className:L.rateControl})(bt||(bt=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 t=e.$cardSize;return C(t)?12:10},e=>{let t=e.$cardSize;return C(t)?33:28},e=>{let t=e.$cardSize;return!C(t)&&S(ht||(ht=o(["\n    font-size: 8px;\n    margin-left: 8px;\n    min-width: 23px;\n  "])))}),Et=i.styled("span").attrs({className:L.progressTime})(yt||(yt=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=>e.$right?"0 0 0 auto":"0 auto 0 0",Z),St=e=>{let t=e.$cardSize,n=e.currentTime,r=e.endTime,o=e.isMuted,i=e.onMuteClick,s=e.onPlaybackRateClick,c=e.playbackRate;const l=a.useMemo(()=>o?vt:wt,[o]),d=a.useMemo(()=>C(t),[t]);return a.createElement(xt,{$cardSize:t},d&&a.createElement(Et,null,n),a.createElement($t,{title:o?"Unmute":"Mute",$cardSize:t,onClick:i},a.createElement(kt,{as:l})),a.createElement(zt,{title:"Playback Rate",$cardSize:t,onClick:s},a.createElement("span",null,c,"x")),d&&a.createElement(Et,{$right:!0},r))},Ot=["$isPlaying"];var Ct,Pt,Mt,jt,Dt,_t;const Rt=t=>a.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 20"},t),Ct||(Ct=a.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)"}))),Nt=t=>a.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 21 24"},t),Pt||(Pt=a.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)"}))),Ft={large:"50px",normal:"35px",small:"20px"},Tt=i.styled("svg")(Mt||(Mt=o(["\n  stroke: #fff;\n"]))),Lt=i.styled(lt).attrs({className:L.playbackControl})(jt||(jt=o(["\n  "," {\n    ","\n  }\n"])),Tt,e=>{let t=e.$cardSize;return i.css(Dt||(Dt=o(["\n      width: ",";\n      height: ",";\n      padding: ",";\n\n      ","\n    "])),Ft[t],Ft[t],C(t)?0:"8px",!C(t)&&!P(t)&&S(_t||(_t=o(["\n        width: calc("," * 1.2);\n        height: calc("," * 1.2);\n      "])),Ft.small,Ft.small))}),Vt=t=>{let n=t.$isPlaying,o=r(t,Ot);const i=a.useMemo(()=>n?Rt:Nt,[n]);return a.createElement(Lt,e({title:n?"Pause":"Play"},o),a.createElement(Tt,{as:i}))};var It,Ut;const Wt={normal:.8,small:.9},Bt=i.styled("div").attrs(e=>{let t=e.$isVisible;return{style:{left:e.$positionX,transform:"scale(".concat(t?1:.5,") translate(-50%, -50%)"),opacity:t?1:0,visibility:t?"$visible":"hidden"}}})(It||(It=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"])),J("transform","opacity","visibility"),e=>{let t=e.$cardSize;const n=(r=t,Math.floor(12*(Wt[r]||1)));var r;return i.css(Ut||(Ut=o(["\n      height: ","px;\n      width: ","px;\n    "])),n,n)}),At=["$isDragging","$isVisible","label","$positionX","size"];var qt;const Ht={normal:.8},Xt=i.styled("span").attrs(e=>{let t=e.$position,n=e.$isDragging,r=e.$visible;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,"%)")}}})(qt||(qt=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"])),Z,e=>{let t=e.$cardSize;return 11*(Ht[t]||1)},G("opacity","visibility","transform"),Q("top")),Kt=a.forwardRef((t,n)=>{let o=t.$isDragging,i=t.$isVisible,s=t.label,c=t.$positionX,l=t.size,d=r(t,At);return a.createElement(a.Fragment,null,a.createElement(Xt,e({$visible:i,$position:c,$cardSize:l,ref:n,$isDragging:o},d),s))});Kt.displayName="Tooltip";const Jt=["key"];var Gt,Qt,Yt,Zt,en,tn,nn;const rn={normal:.7,small:.6},an={small:.9,large:1.4},on=e=>Math.floor(6*(an[e]||1)),sn=i.styled("div").attrs(()=>({className:L.progressBar}))(Gt||(Gt=o(["\n  position: relative;\n  padding: ","px ","px ","px;\n  z-index: 2;\n  backface-visibility: hidden;\n"])),6,3,3),cn=i.styled("div").attrs(e=>{let t=e.$cardSize;if(e.$isDragging){const e=on(t);return{style:{height:"".concat(e,"px")}}}return{}})(Qt||(Qt=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"])),J("height"),e=>{let t=e.$cardSize;const n=(r=t,Math.floor(6*(rn[r]||1)));var r;const a=on(t);return i.css(Yt||(Yt=o(["\n      height: ","px;\n\n      ",":hover & {\n        height: ","px;\n      }\n    "])),n,sn,a)}),ln=i.styled("div")(Zt||(Zt=o(["\n  border-radius: inherit;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n"]))),dn=i.styled("div").attrs(e=>{let t=e.$maskScale;return{style:{transform:"scaleX(".concat(t,")")}}})(en||(en=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"]))),un=i.styled("div").attrs(e=>{let t=e.$cursorRatio,n=e.$isHovering;return{style:{left:e.$progressPercent,transform:"scaleX(".concat(t,")"),opacity:n?1:0,visibility:n?"$visible":"hidden"}}})(tn||(tn=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"])),J("opacity","visibility")),pn=i.styled("div").attrs(e=>{let t=e.start,n=e.end;return{style:{left:"".concat(t,"px"),right:"".concat(n,"px")}}})(nn||(nn=o(["\n  background: rgba(255, 255, 255, 0.35);\n  position: absolute;\n  top: 0;\n  bottom: 0;\n"]))),mn=t=>{let n=t.bufferedMedia,o=t.cursorX,i=t.duration,s=t.hoveredTime,c=t.$isDragging,l=t.$isHovering,d=t.onClick,u=t.onMouseDown,p=t.onMouseOver,m=t.progress;t.showTooltip;const f=a.useContext(ae).props.size,g=a.useRef(),b=a.useRef(),h=a.useMemo(()=>P(f),[f]),y=a.useCallback(()=>g.current?g.current.getBoundingClientRect().width-6:0,[]),v=a.useMemo(()=>_(m/i,0,1),[i,m]),w=a.useMemo(()=>"".concat(_(100*v,1,99),"%"),[v]),x=a.useMemo(()=>{if(g.current){const e=y(),t=v*e,n=o-t;if(n>0)return _((n/(e-t)).toFixed(3),0,.99)}return 0},[o,y,v]),k=a.useMemo(()=>{const e=y();return n.map((t,n)=>({key:n,start:t.start*e,end:e-t.end*e}))},[n,y]),$=a.useMemo(()=>D(s),[s]),z=a.useMemo(()=>{if(g.current&&b.current){const e=y(),t=b.current.getBoundingClientRect().width/2;return _(o,t,e-t)}return 0},[o,y]),E=a.useMemo(()=>({onClick:d,onMouseDown:u,onMouseOver:p}),[d,u,p]),S=a.useMemo(()=>c||l,[c,l]);return a.createElement(sn,e({$cardSize:f,ref:g},E),a.createElement(cn,{$cardSize:f,$isDragging:c},a.createElement(ln,null,a.createElement(un,{$cursorRatio:x,$isHovering:l,$progressPercent:w}),k.map(t=>{let n=t.key,o=r(t,Jt);return a.createElement(pn,e({key:n},o))}),a.createElement(dn,{$maskScale:v})),a.createElement(Bt,{$cardSize:f,$isVisible:S,$positionX:w}),!h&&a.createElement(Kt,{$isDragging:c,$isVisible:S,label:$,$positionX:z,ref:b,size:f})))};var fn,gn,bn,hn,yn;const vn=["$cardSize"],wn=["$cardSize"],xn=["type","$cardSize"],kn=t=>{t.$cardSize;let n=r(t,vn);return a.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 29"},n),fn||(fn=a.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)"})))},$n=t=>{t.$cardSize;let n=r(t,wn);return a.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 29"},n),gn||(gn=a.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)"})))},zn=i.styled("svg")(bn||(bn=o(["\n  stroke: #fff;\n  width: ","px;\n  height: ","px;\n\n  ","\n"])),e=>{let t=e.$cardSize;return C(t)?30:24},e=>{let t=e.$cardSize;return C(t)?30:24},e=>{let t=e.$cardSize;return!C(t)&&S(hn||(hn=o(["\n    width: 0;\n    height: 0;\n  "])))}),En=i.styled(lt)(yn||(yn=o(["\n  margin: 0 ",";\n"])),e=>{let t=e.$cardSize;return C(t)?"28px":"3px"}),Sn=t=>{let n=t.type,o=void 0===n?"rewind":n,i=t.$cardSize,s=r(t,xn);const c=a.useMemo(()=>"rewind"===o?kn:$n,[o]);return a.createElement(En,e({title:"rewind"===o?"Rewind":"Forward",$cardSize:i},s),a.createElement(zn,{as:c,$cardSize:i}))};var On,Cn,Pn,Mn,jn,Dn;const _n={normal:.8,small:.6},Rn={normal:.9,small:.8},Nn=i.keyframes(On||(On=o(["\n  100% {\n    transform: rotate(360deg);\n  }\n"]))),Fn=i.keyframes(Cn||(Cn=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"]))),Tn=i.styled(lt).attrs(e=>{let t=e.$isVisible;return{style:{opacity:t?1:0,visibility:t?"$visible":"hidden"}}})(e=>{let t=e.$cardSize;const n="".concat((e=>Math.floor(12*(Rn[e]||1)))(t),"px"),r="".concat((e=>Math.floor(6*(_n[e]||1)))(t),"px");return i.css(Pn||(Pn=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,G("opacity","visibility"))}),Ln=i.styled("svg")(Mn||(Mn=o(["\n  width: 100%;\n  animation: "," 2s linear infinite;\n  will-change: transform;\n"])),Nn),Vn=i.styled("circle")(jn||(jn=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"])),Fn),In=e=>{let t=e.size,n=e.$isVisible;return a.createElement(Tn,{$cardSize:t,className:L.spinner,$isVisible:n},Dn||(Dn=a.createElement(Ln,{viewBox:"0 0 50 50"},a.createElement(Vn,{cx:"25",cy:"25",r:"20"}))))};var Un,Wn,Bn,An,qn;const Hn=32,Xn=37,Kn=39,Jn=77,Gn=i.styled("div").attrs({className:L.mediaControls})(Un||(Un=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"])),Q("background"),G("opacity"),e=>{let t=e.$hasInteracted,n=e.$isDragging,r=e.$isPlaying;const a="rgba(0, 0, 0, 0.35)",s=t&&!r;return i.css(Wn||(Wn=o(["\n      .",":hover & {\n        background: ",";\n      }\n\n      .",":not(:hover) & {\n        opacity: ",";\n        ",";\n      }\n    "])),L.main,n?"rgba(0, 0, 0, 0.2)":a,L.main,!t||s?1:0,s&&"background: ".concat(a))}),Qn=i.styled("div")(Bn||(Bn=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"]))),Yn=i.styled("div")(An||(An=o(["\n  flex: 1;\n\n  ","\n"])),e=>!e.$isVisible&&i.css(qn||(qn=o(["\n      *[class*='","']:not(.",") {\n        transition: ",";\n        opacity: 0;\n        visibility: hidden;\n      }\n    "])),L.mediaControls,L.progressTime,G("opacity","visibility"))),Zn=t=>{let r=t.MediaComponent,o=t.mediaProps;const i=a.useContext(ae).props,s=i.autoPlay,c=i.controls,l=i.mediaRef,d=i.muted,u=i.loop,p=i.size,m=a.useState(0),f=n(m,2),g=f[0],b=f[1],h=a.useState(0),y=n(h,2),v=y[0],w=y[1],x=a.useState([]),$=n(x,2),z=$[0],E=$[1],S=a.useState(0),O=n(S,2),C=O[0],M=O[1],j=a.useState(0),R=n(j,2),N=R[0],F=R[1],T=a.useState(s),V=n(T,2),I=V[0],U=V[1],W=a.useState(d),B=n(W,2),A=B[0],q=B[1],H=a.useState(!1),X=n(H,2),K=X[0],J=X[1],G=a.useState(!1),Q=n(G,2),Y=Q[0],Z=Q[1],ee=a.useState(!1),te=n(ee,2),ne=te[0],re=te[1],oe=a.useState(1),ie=n(oe,2),se=ie[0],ce=ie[1],le=a.useState(s),de=n(le,2),ue=de[0],pe=de[1],me=a.useState(!1),fe=n(me,2),ge=fe[0],be=fe[1],he=a.useRef(),ye=a.useCallback(e=>{he.current=e,l&&(k(l)?l(e):l.current=e)},[l]),ve=a.useMemo(()=>!P(p),[p]),we=a.useMemo(()=>({onCanPlay:()=>J(!1),onLoadedMetadata:e=>b(e.currentTarget.duration),onPause:()=>U(!1),onPlay:()=>U(!0),onPlaying:()=>J(!1),onProgress:e=>E(e.currentTarget.buffered),onRateChange:e=>ce(e.currentTarget.playbackRate),onTimeUpdate:e=>w(e.currentTarget.currentTime),onVolumeChange:e=>q(e.currentTarget.muted),onWaiting:e=>J(!0)}),[]),xe=a.useCallback(e=>{if(he.current){const t=e.currentTarget.getBoundingClientRect(),n=_(Math.floor(e.clientX-t.left),0,t.width);return{cursor:n,time:n/t.width*he.current.duration}}return{cursor:0,time:0}},[]),ke=a.useCallback(()=>{he.current&&(he.current.paused?(ue||pe(!0),he.current.play()):he.current.pause())},[ue]),$e=a.useCallback(e=>{if(he.current){const t=_(e,0,he.current.duration);he.current.currentTime=t,w(t)}},[]),ze=a.useCallback((e,t)=>{if(e.preventDefault(),e.stopPropagation(),he.current){const e=he.current.currentTime;$e("rewind"===t?e-10:e+30)}},[$e]),Ee=a.useCallback(e=>{e.preventDefault(),e.stopPropagation(),he.current&&(he.current.muted=!he.current.muted)},[]),Se=a.useCallback(e=>{e.preventDefault(),e.stopPropagation(),he.current&&(he.current.playbackRate=(e=>{switch(e){case 1:return 1.25;case 1.25:return 1.5;case 1.5:return 2;default:return 1}})(he.current.playbackRate))},[]),Oe=a.useCallback(e=>{e.preventDefault(),e.stopPropagation(),re(!1)},[]),Ce=a.useCallback(e=>{e.preventDefault(),e.stopPropagation(),re(!0);const t=xe(e).time;$e(t)},[xe,$e]),Pe=a.useCallback(()=>Z(!0),[]),Me=a.useCallback(e=>{e.preventDefault(),e.stopPropagation(),ne?re(!1):ke()},[ne,ke]),je=a.useCallback(e=>{if((ne||Y)&&he.current){e.preventDefault();const t=xe(e),n=t.cursor,r=t.time;F(r),M(n),ne&&(he.current.paused||(he.current.pause(),be(!0)),$e(r))}},[xe,ne,Y,$e]),De=a.useCallback(e=>{ne&&0===e.buttons&&re(!1)},[ne]),_e=a.useCallback(e=>{if(ne)return;const t=e.keyCode;if([Hn,Xn,Kn,Jn].includes(t)&&he.current)switch(e.preventDefault(),t){case Hn:ke();break;case Xn:$e(he.current.currentTime-5);break;case Kn:$e(he.current.currentTime+5);break;case Jn:he.current.muted=!he.current.muted}},[ne,$e,ke]),Re=a.useMemo(()=>({onClick:Me,onKeyDown:_e,onMouseMove:je,onMouseOut:()=>Z(!1),onMouseOver:De}),[Me,_e,je,De]),Ne=a.useMemo(()=>ue?{title:""}:{},[ue]),Fe=a.useMemo(()=>z&&z.length&&he.current?[...Array(z.length).keys()].map(e=>({start:z.start(e)/he.current.duration,end:z.end(e)/he.current.duration})):[],[z]),Te=a.useMemo(()=>D(v||0),[v]),Le=a.useMemo(()=>D(g||0),[g]),Ve=a.useMemo(()=>({$cardSize:p,currentTime:Te,endTime:Le,isMuted:A,onMuteClick:Ee,onPlaybackRateClick:Se,playbackRate:se}),[Te,Le,A,Ee,Se,se,p]),Ie=a.useMemo(()=>({bufferedMedia:Fe,cursorX:C,duration:g,hoveredTime:N,$isDragging:ne,$isHovering:Y,onClick:Oe,onMouseDown:Ce,onMouseOver:Pe,progress:v,showTooltip:ne||Y}),[Fe,C,g,N,ne,Y,Oe,Ce,Pe,v]);return a.useEffect(()=>{!ne&&ge&&he.current&&he.current.paused&&(he.current.play(),be(!1))},[ge,ne]),a.createElement(a.Fragment,null,a.createElement(r,e({},o,we,{ref:ye,autoPlay:s,loop:u,muted:d})),c&&a.createElement(Gn,e({},Ne,{tabIndex:0,$hasInteracted:ue,$isDragging:ne,$isPlaying:I},Re),a.createElement(In,{size:p,$isVisible:K}),ue?a.createElement(a.Fragment,null,a.createElement(Yn,{$isVisible:!ne},a.createElement(Qn,null,ve&&a.createElement(Sn,{className:L.rwControl,type:"rewind",$cardSize:p,onClick:e=>ze(e,"rewind")}),a.createElement(Vt,{$cardSize:p,$isPlaying:I}),ve&&a.createElement(Sn,{className:L.ffwControl,type:"fastforward",$cardSize:p,onClick:e=>ze(e,"fastforward")})),ve&&a.createElement(St,Ve)),a.createElement(mn,Ie)):a.createElement(Qn,null,a.createElement(Vt,{$cardSize:p}))))};var er;const tr=i.styled("video")(er||(er=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"]))),nr={video:t=>{const n=a.useContext(ae).state,r=n.imageUrl,o=n.playsInline,i=n.videoUrl,s=a.useMemo(()=>{const e={className:"".concat(L.media," ").concat(L.video),src:i,playsInline:o};return r&&(e.poster=M(r)),e},[r,o,i]);return a.createElement(Ke,e({className:"".concat(L.mediaWrapper," ").concat(L.videoWrapper)},t),a.createElement(Zn,{MediaComponent:tr,mediaProps:s}))},image:Qe,audio:t=>{const n=a.useContext(ae).state.audioUrl,r=a.useMemo(()=>({className:"".concat(L.media," ").concat(L.audio),src:n}),[n]);return a.createElement(Qe,e({className:"".concat(L.mediaWrapper," ").concat(L.audioWrapper)},t),a.createElement(Zn,{MediaComponent:"audio",mediaProps:r}))}},rr=()=>{const e=a.useContext(ae).state,t=e.imageUrl,r=e.isAudio,o=e.isVideo,i=a.useState(null!==E(t)),s=n(i,2),c=s[0],l=s[1];const d=((e,t)=>e?"audio":t?"video":"image")(r,o),u=nr[d];return a.createElement(a.Fragment,null,a.createElement(u,{$isLoading:c}),c&&a.createElement(Ve,{src:t,onLoad:()=>l(!1)}))},ar=["href","rel","target","as"],or=["contrast","direction"];var ir,sr,cr,lr,dr;function ur(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 pr(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?ur(Object(r),!0).forEach(function(n){t(e,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ur(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}const mr="382px",fr=e=>{let t=e.$backgroundColor,n=e.$color;return i.css(ir||(ir=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)},gr=i.css(sr||(sr=o(["\n  flex-direction: column;\n  height: ",";\n  ",";\n"])),mr,S(cr||(cr=o(["\n    height: calc("," * 7/9);\n  "])),mr)),br=i.css(lr||(lr=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"]))),hr=e=>{let t=e.$cardSize;return i.css(dr||(dr=o(["\n  flex-direction: ",";\n"])),C(t)?"column-reverse":"row-reverse")},yr=i.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(Y,";\n  display: flex;\n  text-decoration: none;\n  opacity: 1;\n  position: relative;\n  transition-duration: ").concat(H.medium,";\n  transition-timing-function: ").concat(X.medium,";\n\n  &:active,\n  &:hover {\n    outline: 0;\n  }\n")),vr=i.styled("a")(yr,e=>{let t=e.$isLoading,n=e.$contrast;return!t&&!n&&br},e=>{let t=e.$cardSize;return C(t)&&gr},e=>"rtl"===e.$direction&&hr,e=>{let t=e.$backgroundColor,n=e.$color;return e.$contrast&&n&&t&&fr},e=>{let t=e.$backgroundColor,n=e.$color;return e.$contrast&&(!n||!t)&&br}),wr=a.forwardRef((e,t)=>{let n=e.href,o=e.rel,i=void 0===o?"noopener noreferrer":o,s=e.target,c=void 0===s?"_blank":s,l=e.as,d=void 0===l?"a":l,u=r(e,ar);const p=a.useContext(ae),m=p.state,f=m.$backgroundColor,g=m.color,b=m.title,h=p.props.size,y=u.contrast,v=u.direction,w=r(u,or);return a.createElement(vr,pr(pr(pr({},"a"===d?{href:n,rel:i,target:c}:void 0),w),{},{$backgroundColor:f,$cardSize:h,$color:g,$contrast:y,$direction:v,ref:t,title:b}))});wr.displayName="CardWrap";var xr,kr;const $r=["className","fetchData","lazy","loading","media","setData","url","apiKey"],zr=["className","apiKey","autoPlay","controls","direction","lazy","loop","media","fetchData","muted","playsInline","size"];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(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?Er(Object(r),!0).forEach(function(n){t(e,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):Er(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}const Or=t=>{const o=t.className,i=t.fetchData,c=t.lazy,l=t.loading,d=t.media,u=t.setData,p=t.url;t.apiKey;const m=r(t,$r),f=a.useMemo(()=>[].concat(d),[d]),g=a.useContext(ae).updateState,b=a.useState(!0),h=n(b,2),y=h[0],v=h[1],w=a.useState(null),S=n(w,2),C=S[0],P=S[1],M=a.useState(!1),D=n(M,2),_=D[0],R=D[1],N=a.useMemo(()=>void 0===l,[l]),F=a.useMemo(()=>O(Sr(Sr({},t),{},{media:f})),[f,t]),T=n(F,2),V=T[0],I=T[1],U=a.useMemo(()=>j&&(!0===c||$(c)),[c]),W=a.useMemo(()=>$(c)?c:void 0,[c]),B=((e,t)=>{const r=a.useState(!1),o=n(r,2),i=o[0],s=o[1];return[i,a.useCallback(r=>{if(e){const e=new IntersectionObserver((e,t)=>{let r=n(e,1)[0];r.isIntersecting&&(s(!0),t.unobserve(r.target))},t);null!==r&&e.observe(r)}else s(!0)},[e,t])]})(U,W),A=n(B,2),q=A[0],H=A[1],X=a.useMemo(()=>!U||U&&q,[U,q]),K=a.useCallback(e=>{const t=k(u)?u(e):Sr(Sr({},e),u),n=t.title,r=t.description,a=t.url,o=t.video,i=t.audio,s=t.image,c=t.logo,l=t.iframe,d=s||c||{};let p,m,b=d,h=!1,y=!1;const w=((e,t)=>{let n;for(let r=0;r<t.length;r++){const a=t[r],o=e[a];if(!z(o)){n=a;break}}return n})(t,f);switch(w){case"audio":y=!0,m=E(i);break;case"video":h=!0,p=E(o);break;case"iframe":P(l);break;default:b=((e,t)=>e[t.find(t=>!z(e[t]))])(t,f)||d}const x=E(b),$=b,S=$.color,O=$.background_color;g({url:a,color:S,title:n,description:r,imageUrl:x,videoUrl:p,audioUrl:m,isVideo:h,isAudio:y,$backgroundColor:O}),v(!1)},[g,f,u]),J=a.useCallback(()=>{if(X){v(!0);(i?s.fetchFromApi(V,I):Promise.resolve({})).then(e=>{let t=e.data;return K(t)}).catch(e=>{v(!1),R(!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"))})}},[I,i,V,K,X]);a.useEffect(J,[p,u,q]);const G=N?y:l;return _?a.createElement("a",e({href:p},m),p):C?(x||C.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)}}),a.createElement("div",e({className:L.iframe,dangerouslySetInnerHTML:{__html:C.html}},m))):a.createElement(wr,e({className:"".concat(L.main," ").concat(o).trim(),href:p,$isLoading:G,ref:H},m),G?xr||(xr=a.createElement(st,null)):kr||(kr=a.createElement(a.Fragment,null,a.createElement(rr,null),a.createElement(Oe,null))))};Object.defineProperty(exports,"fetchFromApi",{enumerable:!0,get:function(){return s.fetchFromApi}}),exports.default=t=>{let n=t.className,o=void 0===n?"":n,i=t.apiKey,s=void 0===i?void 0:i,c=t.autoPlay,l=void 0===c||c,d=t.controls,u=void 0===d||d,p=t.direction,m=void 0===p?"ltr":p,f=t.lazy,g=void 0===f||f,b=t.loop,h=void 0===b||b,y=t.media,v=void 0===y?["iframe","video","audio","image","logo"]:y,w=t.fetchData,x=void 0===w||w,k=t.muted,$=void 0===k||k,z=t.playsInline,E=void 0===z||z,S=t.size,O=void 0===S?"normal":S,C=r(t,zr);return a.createElement(oe,e({className:o,apiKey:s,autoPlay:l,controls:u,direction:m,lazy:g,loop:h,media:v,fetchData:x,muted:$,playsInline:E,size:O},C),e=>a.createElement(Or,e))},exports.getApiUrl=O,exports.imageProxy=M;
//# sourceMappingURL=microlink.min.cjs.map