@microlink/hover-react/dist/microlink.min.cjs.map

Turn links into beautiful previews.

{"version":3,"file":"microlink.min.cjs","sources":["../../../node_modules/.pnpm/@microlink+react@5.5.22_react-dom@18.2.0_react@18.2.0__react@18.2.0_styled-components@6.1.10__m2jeuq44j7wy3tsdycialxshgi/node_modules/@microlink/react/dist/microlink.mjs","../src/index.js"],"sourcesContent":["import _extends from '@babel/runtime/helpers/extends';\nimport _defineProperty from '@babel/runtime/helpers/defineProperty';\nimport _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';\nimport React, { useRef, useMemo, useCallback, useEffect, createElement, useState, useContext, forwardRef } from 'react';\nimport _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';\nimport { css, styled, keyframes } from 'styled-components';\nimport { getApiUrl as getApiUrl$1, fetchFromApi } from '@microlink/mql';\nexport { fetchFromApi } from '@microlink/mql';\n\nconst _excluded$8 = [\"accessibility\", \"debounce\", \"ellipsis\", \"is\", \"lines\", \"text\"];\nfunction ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nconst l = _ref => {\n  let {\n      accessibility: l = !0,\n      debounce: o = 300,\n      ellipsis: u = \"…\",\n      is: c = \"div\",\n      lines: s = 3,\n      text: d\n    } = _ref,\n    v = _objectWithoutProperties(_ref, _excluded$8);\n  const a = useRef(null),\n    f = useRef(\".\"),\n    h = _objectSpread$4(_objectSpread$4({\n      ref: a\n    }, l ? {\n      title: d\n    } : {}), v),\n    g = useMemo(() => \"string\" == typeof d && d.length > 0, [d]),\n    m = useCallback(() => {\n      var e, t, n, r;\n      if (!g) return;\n      const i = e => {\n        f.current = e, null != a.current && (a.current.innerText = e);\n      };\n      i(\".\");\n      const l = ((null !== (t = null === (e = a.current) || void 0 === e ? void 0 : e.clientHeight) && void 0 !== t ? t : 0) + 1) * s + 1,\n        o = \"…\" === u ? 5 : 1.2 * u.length;\n      let c = 0,\n        v = 0,\n        h = d.length;\n      for (; c <= h;) {\n        v = Math.floor((c + h) / 2);\n        if (i(d.slice(0, v)), v === d.length) return;\n        (null !== (r = null === (n = a.current) || void 0 === n ? void 0 : n.clientHeight) && void 0 !== r ? r : 0) <= l ? c = v + 1 : h = v - 1;\n      }\n      i(d.slice(0, Math.max(v - o, 0)).trim() + u);\n    }, [u, g, s, d]);\n  return useEffect(() => {\n    m();\n    const e = ((e, t) => {\n      let n;\n      const r = () => {\n        n = void 0, e();\n      };\n      return () => {\n        const i = null == n;\n        clearTimeout(n), n = setTimeout(r, t), i && e();\n      };\n    })(m, o);\n    return window.addEventListener(\"resize\", e), () => window.removeEventListener(\"resize\", e);\n  }, [m, o]), g ? /*#__PURE__*/createElement(c, h, f.current) : null;\n};\n\nfunction getDefaultExportFromCjs (x) {\n\treturn x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;\n}\n\nvar src = () => /^https?:\\/\\/(localhost|0|10|127|192(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}|\\[::1?\\])/gi;\n\nvar localhostUrl = /*@__PURE__*/getDefaultExportFromCjs(src);\n\nvar _templateObject$i, _templateObject2$e;\nconst isSSR = typeof window === 'undefined';\nconst castArray = value => [].concat(value);\nconst getPreferredMedia = (data, mediaProps) => {\n  let prefer;\n  for (let index = 0; index < mediaProps.length; index++) {\n    const key = mediaProps[index];\n    const value = data[key];\n    if (!isNil(value)) {\n      prefer = key;\n      break;\n    }\n  }\n  return prefer;\n};\nconst isFunction = fn => typeof fn === 'function';\nconst isObject = obj => typeof obj === 'object';\nconst isNil = value => value == null;\nconst getUrlPath = data => isObject(data) ? data.url : data;\nconst someProp = (data, props) => data[props.find(prop => !isNil(data[prop]))];\nconst media = {\n  mobile: function () {\n    return css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral([\"\\n    @media (max-width: 48em) {\\n      \", \";\\n    }\\n  \"])), css(...arguments));\n  },\n  desktop: function () {\n    return css(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral([\"\\n    @media (min-width: 48em) {\\n      \", \";\\n    }\\n  \"])), css(...arguments));\n  }\n};\nconst getApiUrl = _ref => {\n  let {\n    apiKey,\n    contrast = false,\n    data,\n    endpoint,\n    force,\n    headers,\n    media,\n    prerender,\n    proxy,\n    ttl,\n    url\n  } = _ref;\n  return getApiUrl$1(url, {\n    apiKey,\n    audio: media.includes('audio'),\n    data,\n    endpoint,\n    force,\n    headers,\n    iframe: media.includes('iframe'),\n    palette: contrast,\n    prerender,\n    proxy,\n    screenshot: media.includes('screenshot'),\n    ttl,\n    video: media.includes('video')\n  });\n};\nconst isLarge = cardSize => cardSize === 'large';\nconst isSmall = cardSize => cardSize === 'small';\nconst imageProxy = url => localhostUrl().test(url) ? url : \"https://images.weserv.nl/?\".concat(new URLSearchParams({\n  url,\n  default: url,\n  l: 9,\n  af: '',\n  il: '',\n  n: -1\n}).toString());\nconst isLazySupported = !isSSR && 'IntersectionObserver' in window;\nconst formatSeconds = secs => {\n  const secsToNum = parseInt(secs, 10);\n  const hours = Math.floor(secsToNum / 3600);\n  const minutes = Math.floor(secsToNum / 60) % 60;\n  const seconds = secsToNum % 60;\n  return [hours, minutes, seconds].filter((v, i) => v > 0 || i > 0).map(v => v >= 10 ? v : \"0\".concat(v)).join(':');\n};\nconst clampNumber = (num, min, max) => {\n  switch (true) {\n    case num <= min:\n      return min;\n    case num >= max:\n      return max;\n    default:\n      return num;\n  }\n};\nconst BASE_CLASSNAME = 'microlink_card';\nconst CONTENT_BASE_CLASSNAME = \"\".concat(BASE_CLASSNAME, \"__content\");\nconst MEDIA_BASE_CLASSNAME = \"\".concat(BASE_CLASSNAME, \"__media\");\nconst CONTROLS_BASE_CLASSNAME = \"\".concat(MEDIA_BASE_CLASSNAME, \"__controls\");\nconst classNames = {\n  main: BASE_CLASSNAME,\n  content: CONTENT_BASE_CLASSNAME,\n  title: \"\".concat(CONTENT_BASE_CLASSNAME, \"_title\"),\n  description: \"\".concat(CONTENT_BASE_CLASSNAME, \"_description\"),\n  url: \"\".concat(CONTENT_BASE_CLASSNAME, \"_url\"),\n  mediaWrapper: \"\".concat(MEDIA_BASE_CLASSNAME, \"_wrapper\"),\n  media: MEDIA_BASE_CLASSNAME,\n  image: \"\".concat(MEDIA_BASE_CLASSNAME, \"_image\"),\n  videoWrapper: \"\".concat(MEDIA_BASE_CLASSNAME, \"_video_wrapper\"),\n  video: \"\".concat(MEDIA_BASE_CLASSNAME, \"_video\"),\n  audioWrapper: \"\".concat(MEDIA_BASE_CLASSNAME, \"_audio_wrapper\"),\n  audio: \"\".concat(MEDIA_BASE_CLASSNAME, \"_audio\"),\n  mediaControls: CONTROLS_BASE_CLASSNAME,\n  playbackControl: \"\".concat(CONTROLS_BASE_CLASSNAME, \"_playback\"),\n  volumeControl: \"\".concat(CONTROLS_BASE_CLASSNAME, \"_volume\"),\n  rwControl: \"\".concat(CONTROLS_BASE_CLASSNAME, \"_rewind\"),\n  ffwControl: \"\".concat(CONTROLS_BASE_CLASSNAME, \"_fast_forward\"),\n  rateControl: \"\".concat(CONTROLS_BASE_CLASSNAME, \"_rate\"),\n  progressBar: \"\".concat(CONTROLS_BASE_CLASSNAME, \"_progress_bar\"),\n  progressTime: \"\".concat(CONTROLS_BASE_CLASSNAME, \"_progress_time\"),\n  spinner: \"\".concat(CONTROLS_BASE_CLASSNAME, \"_spinner\"),\n  iframe: \"\".concat(BASE_CLASSNAME, \"__iframe\")\n};\n\nconst _excluded$7 = [\"useNanoClamp\", \"children\"];\nvar _templateObject$h, _templateObject2$d;\nfunction ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nconst Clamp = _ref => {\n  let {\n    children,\n    className,\n    lines\n  } = _ref;\n  return isNil(children) ? null : /*#__PURE__*/React.createElement(l, {\n    className: className,\n    lines: lines,\n    text: children,\n    is: \"p\"\n  });\n};\nconst StyledClamp = styled(Clamp)(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral([\"\\n  &&& {\\n    text-align: inherit;\\n    font-weight: inherit;\\n    font-family: inherit;\\n    color: inherit;\\n    margin: 0;\\n\\n    \", \"\\n  }\\n\"])), _ref2 => {\n  let {\n    $useNanoClamp\n  } = _ref2;\n  return !$useNanoClamp && css(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral([\"\\n        overflow: hidden;\\n        white-space: nowrap;\\n        text-overflow: ellipsis;\\n      \"])));\n});\nconst CardText = _ref3 => {\n  let {\n      useNanoClamp = true,\n      children\n    } = _ref3,\n    props = _objectWithoutProperties(_ref3, _excluded$7);\n  const textProps = useNanoClamp ? props : _objectSpread$3(_objectSpread$3({}, props), {}, {\n    as: 'p',\n    title: children\n  });\n  return /*#__PURE__*/React.createElement(StyledClamp, _extends({\n    $useNanoClamp: useNanoClamp\n  }, textProps), children);\n};\n\nconst speed = {\n  short: '100ms',\n  medium: '150ms',\n  long: '300ms'\n};\nconst animation = {\n  short: 'cubic-bezier(.25,.8,.25,1)',\n  medium: 'cubic-bezier(.25,.8,.25,1)',\n  long: 'cubic-bezier(.4, 0, .2, 1)'\n};\nconst createTransition = (properties, s) => {\n  const suffix = \"\".concat(speed[s], \" \").concat(animation[s]);\n  return properties.map(property => \"\".concat(property, \" \").concat(suffix)).join(', ');\n};\nconst transition = {\n  short: function () {\n    for (var _len = arguments.length, properties = new Array(_len), _key = 0; _key < _len; _key++) {\n      properties[_key] = arguments[_key];\n    }\n    return createTransition(properties, 'short');\n  },\n  medium: function () {\n    for (var _len2 = arguments.length, properties = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n      properties[_key2] = arguments[_key2];\n    }\n    return createTransition(properties, 'medium');\n  },\n  long: function () {\n    for (var _len3 = arguments.length, properties = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {\n      properties[_key3] = arguments[_key3];\n    }\n    return createTransition(properties, 'long');\n  }\n};\n\n// https://primer.style/design/foundations/typography\nconst font = {\n  sans: \"InterUI, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif\",\n  mono: \"'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace\"\n};\n\nconst _excluded$6 = [\"autoPlay\", \"children\", \"controls\", \"loop\", \"mediaRef\", \"muted\", \"playsInline\", \"size\"];\nfunction ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nconst initialState = {};\nconst GlobalContext = /*#__PURE__*/React.createContext(initialState);\nconst GlobalState = _ref => {\n  let {\n      autoPlay,\n      children,\n      controls,\n      loop,\n      mediaRef,\n      muted,\n      playsInline,\n      size\n    } = _ref,\n    rest = _objectWithoutProperties(_ref, _excluded$6);\n  const [state, setState] = useState(initialState);\n  const updateState = useCallback(newState => setState(currentState => _objectSpread$2(_objectSpread$2({}, currentState), newState)), []);\n  const props = useMemo(() => ({\n    autoPlay,\n    controls,\n    loop,\n    mediaRef,\n    muted,\n    playsInline,\n    size\n  }), [autoPlay, controls, loop, mediaRef, muted, playsInline, size]);\n  const values = useMemo(() => ({\n    props,\n    state,\n    updateState\n  }), [props, state, updateState]);\n  return /*#__PURE__*/React.createElement(GlobalContext.Provider, {\n    value: values\n  }, children(rest));\n};\n\nvar _templateObject$g, _templateObject2$c, _templateObject3$b, _templateObject4$9, _templateObject5$6, _templateObject6$2, _templateObject7$2, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;\nconst REGEX_STRIP_WWW = /^www\\./;\nconst BADGE_WIDTH = '16px';\nconst BADGE_HEIGHT = '12px';\nconst getHostname = href => {\n  if (isNil(href)) return '';\n  const {\n    hostname\n  } = new URL(href);\n  return hostname.replace(REGEX_STRIP_WWW, '');\n};\nconst mobileDescriptionStyle = css(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral([\"\\n  \", \";\\n\"])), media.mobile(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral([\"\\n    > p {\\n      overflow: hidden;\\n      text-overflow: ellipsis;\\n      white-space: nowrap;\\n    }\\n  \"]))));\nconst Content = styled('div').attrs({\n  className: classNames.content\n})(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral([\"\\n  display: flex;\\n  padding: 10px 15px;\\n  min-width: 0;\\n  box-sizing: border-box;\\n  \", \";\\n\"])), _ref => {\n  let {\n    $cardSize\n  } = _ref;\n  return css(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteral([\"\\n    flex: \", \";\\n    justify-content: \", \";\\n    flex-direction: \", \";\\n    align-items: \", \";\\n  \"])), !isLarge($cardSize) ? 1 : '0 0 125px', !isSmall($cardSize) ? 'space-around' : 'space-between', !isSmall($cardSize) ? 'column' : 'row', !isSmall($cardSize) ? 'stretch' : 'center');\n});\nconst Header = styled('header').attrs({\n  className: classNames.title\n})(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteral([\"\\n  text-align: left;\\n  font-weight: bold;\\n  margin: 0;\\n  width: 100%;\\n  \", \"\\n\"])), _ref2 => {\n  let {\n    $cardSize\n  } = _ref2;\n  return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral([\"\\n    flex-grow: \", \";\\n    font-size: \", \";\\n\\n    \", \"\\n  \"])), !isSmall($cardSize) ? 1.2 : 0.8, !isSmall($cardSize) ? '16px' : '15px', isSmall($cardSize) && css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral([\"\\n      min-width: 0;\\n      padding-right: 14px;\\n    \"]))));\n});\nconst Description = styled('div').attrs({\n  className: classNames.description\n})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([\"\\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\"])), _ref3 => {\n  let {\n    $cardSize\n  } = _ref3;\n  return !isLarge($cardSize) && mobileDescriptionStyle;\n});\nconst Footer = styled('footer').attrs({\n  className: classNames.url\n})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([\"\\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\"])), _ref4 => {\n  let {\n    $cardSize\n  } = _ref4;\n  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([\"\\n    font-size: \", \";\\n    \", \"\\n  \"])), !isSmall($cardSize) ? '12px' : '10px', !isSmall($cardSize) && 'width: 100%;');\n});\nconst Author = styled(CardText)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([\"\\n  opacity: 0.75;\\n  transition: \", \";\\n  will-change: opacity;\\n\\n  .\", \":hover & {\\n    opacity: 1;\\n  }\\n\"])), transition.medium('opacity'), classNames.main);\nconst PoweredBy = styled('span').attrs({\n  title: 'microlink.io'\n})(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([\"\\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\"])), transition.medium('filter', 'opacity'), BADGE_WIDTH, BADGE_WIDTH, BADGE_WIDTH, BADGE_HEIGHT);\nconst CardContent = () => {\n  const {\n    state: {\n      description,\n      title,\n      url\n    },\n    props: {\n      size\n    }\n  } = useContext(GlobalContext);\n  const isSmallCard = isSmall(size);\n  const formattedUrl = useMemo(() => getHostname(url), [url]);\n  const handleOnClick = useCallback(e => {\n    e.preventDefault();\n    window.open('https://www.microlink.io', '_blank');\n  }, []);\n  return /*#__PURE__*/React.createElement(Content, {\n    $cardSize: size\n  }, /*#__PURE__*/React.createElement(Header, {\n    $cardSize: size\n  }, /*#__PURE__*/React.createElement(CardText, {\n    $useNanoClamp: false\n  }, title)), !isSmallCard && /*#__PURE__*/React.createElement(Description, {\n    $cardSize: size\n  }, /*#__PURE__*/React.createElement(CardText, {\n    lines: 2\n  }, description)), /*#__PURE__*/React.createElement(Footer, {\n    $cardSize: size\n  }, /*#__PURE__*/React.createElement(Author, {\n    $useNanoClamp: false\n  }, formattedUrl), /*#__PURE__*/React.createElement(PoweredBy, {\n    onClick: handleOnClick\n  })));\n};\n\nvar _templateObject$f, _templateObject2$b, _templateObject3$a, _templateObject4$8;\nconst emptyStatePulse = keyframes(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral([\"\\n  0% {\\n    background: #e1e8ed;\\n  }\\n  70% {\\n    background: #cdd4d8;\\n  }\\n  100% {\\n    background: #e1e8ed;\\n  }\\n\"])));\nconst emptyStateImagePulse = keyframes(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral([\"\\n  0% {\\n    background: #e1e8ed;\\n  }\\n  70% {\\n    background: #dce3e8;\\n  }\\n  100% {\\n    background: #e1e8ed;\\n  }\\n\"])));\nconst emptyStateAnimation = css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral([\"\\n  animation: \", \" .75s linear infinite;\\n\"])), emptyStatePulse);\nconst emptyStateImageAnimation = css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral([\"\\n  animation: \", \" 1.25s linear infinite;\\n\"])), emptyStateImagePulse);\n\nvar _templateObject$e, _templateObject2$a, _templateObject3$9;\nconst ImageLoadCatcher = styled('img')(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral([\"\\n  height: 1px;\\n  width: 1px;\\n  position: absolute;\\n  z-index: -1;\\n\"])));\nconst loadingOverlay = css(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral([\"\\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\"])), transition.medium('opacity', 'visibility'), _ref => {\n  let {\n    $isLoading\n  } = _ref;\n  return css(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral([\"\\n      opacity: \", \";\\n      visibility: \", \";\\n    \"])), $isLoading ? 1 : 0, $isLoading ? '$visible' : 'hidden');\n});\n\nvar _templateObject$d, _templateObject2$9, _templateObject3$8, _templateObject4$7, _templateObject5$5;\nconst mediaSizeStyles = {\n  small: css(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral([\"\\n    flex: 0 0 48px;\\n  \"]))),\n  normal: css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral([\"\\n    flex: 0 0 125px;\\n\\n    \", \"\\n  \"])), media.mobile(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral([\"\\n      flex: 0 0 92px;\\n    \"])))),\n  large: css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral([\"\\n    flex: 1;\\n\\n    &::before {\\n      padding-bottom: 0;\\n    }\\n  \"])))\n};\nconst StyledWrap = styled('div')(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral([\"\\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\"])), _ref => {\n  let {\n    $cardSize\n  } = _ref;\n  return mediaSizeStyles[$cardSize];\n}, loadingOverlay);\nconst Wrap$1 = props => {\n  const {\n    props: {\n      size\n    }\n  } = useContext(GlobalContext);\n  return /*#__PURE__*/React.createElement(StyledWrap, _extends({\n    $cardSize: size\n  }, props));\n};\n\nvar _templateObject$c;\nconst ImageWrap = styled(Wrap$1).attrs({\n  className: \"\".concat(classNames.media, \" \").concat(classNames.image)\n})(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral([\"\\n  background-image: \", \";\\n\"])), _ref => {\n  let {\n    url\n  } = _ref;\n  return url ? \"url('\".concat(imageProxy(url), \"')\") : '';\n});\nconst ImageComponent = props => {\n  const {\n    state: {\n      imageUrl\n    }\n  } = useContext(GlobalContext);\n  return /*#__PURE__*/React.createElement(ImageWrap, _extends({\n    url: imageUrl\n  }, props));\n};\n\nvar _templateObject$b, _templateObject2$8, _templateObject3$7, _templateObject4$6, _FooterEmpty;\nconst MediaEmpty = styled(ImageComponent)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral([\"\\n  \", \";\\n\"])), emptyStateImageAnimation);\nconst HeaderEmpty = styled('span')(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral([\"\\n  opacity: 0.8;\\n  height: 16px;\\n  width: \", \";\\n  display: block;\\n  background: #e1e8ed;\\n  margin: \", \";\\n  \", \";\\n\\n  \", \";\\n\"])), _ref => {\n  let {\n    $cardSize\n  } = _ref;\n  return !isSmall($cardSize) ? '60%' : '75%';\n}, _ref2 => {\n  let {\n    $cardSize\n  } = _ref2;\n  return !isSmall($cardSize) ? '2px 0 8px' : '0 20px 0 0';\n}, emptyStateAnimation, _ref3 => {\n  let {\n    $cardSize\n  } = _ref3;\n  return !isLarge($cardSize) && \"\\n    height: 15px;\\n  \";\n});\nconst DescriptionEmpty = styled('span')(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral([\"\\n  opacity: 0.8;\\n  height: 14px;\\n  width: 95%;\\n  display: block;\\n  position: relative;\\n  \", \";\\n  animation-delay: 0.125s;\\n\"])), emptyStateAnimation);\nconst FooterEmpty = styled('span')(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral([\"\\n  opacity: 0.8;\\n  height: 12px;\\n  width: 30%;\\n  display: block;\\n  \", \" animation-delay: .25s;\\n\\n  \", \";\\n\"])), emptyStateAnimation, _ref4 => {\n  let {\n    $cardSize\n  } = _ref4;\n  return !isLarge($cardSize) && \"\\n    height: 10px;\\n  \";\n});\nconst CardEmptyState = () => {\n  const {\n    props: {\n      size\n    }\n  } = useContext(GlobalContext);\n  const isSmallCard = isSmall(size);\n  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MediaEmpty, {\n    $cardSize: size\n  }), /*#__PURE__*/React.createElement(Content, {\n    $cardSize: size\n  }, /*#__PURE__*/React.createElement(HeaderEmpty, {\n    $cardSize: size\n  }), !isSmallCard ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DescriptionEmpty, {\n    $cardSize: size\n  }), /*#__PURE__*/React.createElement(DescriptionEmpty, {\n    $cardSize: size,\n    style: {\n      marginBottom: '12px'\n    }\n  })) : null, _FooterEmpty || (_FooterEmpty = /*#__PURE__*/React.createElement(FooterEmpty, null))));\n};\n\nvar _templateObject$a;\nconst MediaButton = styled('div')(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral([\"\\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\"])), transition.short('transform'));\n\nvar _path$2, _path2$2, _templateObject$9, _templateObject2$7, _templateObject3$6, _templateObject4$5, _templateObject5$4, _templateObject6$1, _templateObject7$1;\nconst VolumeMute = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n  xmlns: \"http://www.w3.org/2000/svg\",\n  viewBox: \"0 0 14 14\"\n}, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement(\"path\", {\n  fill: \"#FFF\",\n  fillRule: \"evenodd\",\n  stroke: \"none\",\n  strokeWidth: \"1\",\n  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\",\n  transform: \"translate(-1 -1)\"\n})));\nconst VolumeUp = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n  xmlns: \"http://www.w3.org/2000/svg\",\n  viewBox: \"0 0 14 14\"\n}, props), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement(\"path\", {\n  fill: \"#FFF\",\n  fillRule: \"evenodd\",\n  stroke: \"none\",\n  strokeWidth: \"1\",\n  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\",\n  transform: \"translate(-1 -1)\"\n})));\nconst BottomControls = styled('div')(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral([\"\\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\"])), _ref => {\n  let {\n    $cardSize\n  } = _ref;\n  return isLarge($cardSize) ? 18 : 14;\n}, transition.medium('opacity'));\nconst VolumeIcon = styled('svg')(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral([\"\\n  stroke: #fff;\\n\"])));\nconst VolumeButton = styled(MediaButton).attrs({\n  className: classNames.volumeControl\n})(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral([\"\\n  \", \" {\\n    width: \", \"px;\\n    height: \", \"px;\\n\\n    \", \"\\n  }\\n\"])), VolumeIcon, _ref2 => {\n  let {\n    $cardSize\n  } = _ref2;\n  return isLarge($cardSize) ? 16 : 14;\n}, _ref3 => {\n  let {\n    $cardSize\n  } = _ref3;\n  return isLarge($cardSize) ? 16 : 14;\n}, _ref4 => {\n  let {\n    $cardSize\n  } = _ref4;\n  return !isLarge($cardSize) && media.mobile(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral([\"\\n      width: 12px;\\n      height: 12px;\\n    \"])));\n});\nconst PlaybackRateButton = styled(MediaButton).attrs({\n  className: classNames.rateControl\n})(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral([\"\\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\"])), _ref5 => {\n  let {\n    $cardSize\n  } = _ref5;\n  return isLarge($cardSize) ? 12 : 10;\n}, _ref6 => {\n  let {\n    $cardSize\n  } = _ref6;\n  return isLarge($cardSize) ? 33 : 28;\n}, _ref7 => {\n  let {\n    $cardSize\n  } = _ref7;\n  return !isLarge($cardSize) && media.mobile(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral([\"\\n    font-size: 8px;\\n    margin-left: 8px;\\n    min-width: 23px;\\n  \"])));\n});\nconst TimeLabel = styled('span').attrs({\n  className: classNames.progressTime\n})(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral([\"\\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\"])), _ref8 => {\n  let {\n    $right\n  } = _ref8;\n  return !$right ? '0 auto 0 0' : '0 0 0 auto';\n}, font.mono);\nconst FooterControls = _ref9 => {\n  let {\n    $cardSize,\n    currentTime,\n    endTime,\n    isMuted,\n    onMuteClick,\n    onPlaybackRateClick,\n    playbackRate\n  } = _ref9;\n  const VolumeComponent = useMemo(() => isMuted ? VolumeMute : VolumeUp, [isMuted]);\n  const isLargeCard = useMemo(() => isLarge($cardSize), [$cardSize]);\n  return /*#__PURE__*/React.createElement(BottomControls, {\n    $cardSize: $cardSize\n  }, isLargeCard && /*#__PURE__*/React.createElement(TimeLabel, null, currentTime), /*#__PURE__*/React.createElement(VolumeButton, {\n    title: isMuted ? 'Unmute' : 'Mute',\n    $cardSize: $cardSize,\n    onClick: onMuteClick\n  }, /*#__PURE__*/React.createElement(VolumeIcon, {\n    as: VolumeComponent\n  })), /*#__PURE__*/React.createElement(PlaybackRateButton, {\n    title: \"Playback Rate\",\n    $cardSize: $cardSize,\n    onClick: onPlaybackRateClick\n  }, /*#__PURE__*/React.createElement(\"span\", null, playbackRate, \"x\")), isLargeCard && /*#__PURE__*/React.createElement(TimeLabel, {\n    $right: true\n  }, endTime));\n};\n\nconst _excluded$5 = [\"$isPlaying\"];\nvar _path$1, _path2$1, _templateObject$8, _templateObject2$6, _templateObject3$5, _templateObject4$4;\nconst Pause = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n  xmlns: \"http://www.w3.org/2000/svg\",\n  viewBox: \"0 0 16 20\"\n}, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement(\"path\", {\n  fill: \"#FFF\",\n  fillRule: \"evenodd\",\n  stroke: \"none\",\n  strokeWidth: \"1\",\n  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\",\n  transform: \"translate(-8 -6)\"\n})));\nconst Play = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n  xmlns: \"http://www.w3.org/2000/svg\",\n  viewBox: \"0 0 21 24\"\n}, props), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement(\"path\", {\n  fill: \"#FFF\",\n  fillRule: \"evenodd\",\n  stroke: \"none\",\n  strokeWidth: \"1\",\n  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\",\n  transform: \"translate(-6 -4)\"\n})));\nconst iconSizes = {\n  large: '50px',\n  normal: '35px',\n  small: '20px'\n};\nconst PlaybackIcon = styled('svg')(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral([\"\\n  stroke: #fff;\\n\"])));\nconst PlaybackButtonWrap = styled(MediaButton).attrs({\n  className: classNames.playbackControl\n})(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral([\"\\n  \", \" {\\n    \", \"\\n  }\\n\"])), PlaybackIcon, _ref => {\n  let {\n    $cardSize\n  } = _ref;\n  return css(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral([\"\\n      width: \", \";\\n      height: \", \";\\n      padding: \", \";\\n\\n      \", \"\\n    \"])), iconSizes[$cardSize], iconSizes[$cardSize], isLarge($cardSize) ? 0 : '8px', !isLarge($cardSize) && !isSmall($cardSize) && media.mobile(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral([\"\\n        width: calc(\", \" * 1.2);\\n        height: calc(\", \" * 1.2);\\n      \"])), iconSizes.small, iconSizes.small));\n});\nconst PlaybackButton = _ref2 => {\n  let {\n      $isPlaying\n    } = _ref2,\n    props = _objectWithoutProperties(_ref2, _excluded$5);\n  const PlaybackComponent = useMemo(() => $isPlaying ? Pause : Play, [$isPlaying]);\n  return /*#__PURE__*/React.createElement(PlaybackButtonWrap, _extends({\n    title: $isPlaying ? 'Pause' : 'Play'\n  }, props), /*#__PURE__*/React.createElement(PlaybackIcon, {\n    as: PlaybackComponent\n  }));\n};\n\nvar _templateObject$7, _templateObject2$5;\nconst SCRUBBER_SIZE = 12;\nconst scrubberSizeScales = {\n  normal: 0.8,\n  small: 0.9\n};\nconst getScrubberSize = size => Math.floor(SCRUBBER_SIZE * (scrubberSizeScales[size] || 1));\nconst Scrubber = styled('div').attrs(_ref => {\n  let {\n    $isVisible,\n    $positionX\n  } = _ref;\n  return {\n    style: {\n      left: $positionX,\n      transform: \"scale(\".concat($isVisible ? 1 : 0.5, \") translate(-50%, -50%)\"),\n      opacity: $isVisible ? 1 : 0,\n      visibility: $isVisible ? '$visible' : 'hidden'\n    }\n  };\n})(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral([\"\\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\"])), transition.short('transform', 'opacity', 'visibility'), _ref2 => {\n  let {\n    $cardSize\n  } = _ref2;\n  const scrubberSize = getScrubberSize($cardSize);\n  return css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral([\"\\n      height: \", \"px;\\n      width: \", \"px;\\n    \"])), scrubberSize, scrubberSize);\n});\n\nconst _excluded$4 = [\"$isDragging\", \"$isVisible\", \"label\", \"$positionX\", \"size\"];\nvar _templateObject$6;\nconst BASE_FONT_SIZE = 11;\nconst sizeScales$1 = {\n  normal: 0.8\n};\nconst getMarkerFontSize = size => BASE_FONT_SIZE * (sizeScales$1[size] || 1);\nconst TooltipBase = styled('span').attrs(_ref => {\n  let {\n    $position,\n    $isDragging,\n    $visible\n  } = _ref;\n  return {\n    style: {\n      left: \"\".concat($position, \"px\"),\n      top: $visible ? '-4px' : '0px',\n      visibility: $visible ? '$visible' : 'hidden',\n      opacity: $visible ? 1 : 0,\n      transform: \"translate(-50%, \".concat(!$isDragging ? -100 : -110, \"%)\")\n    }\n  };\n})(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral([\"\\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\"])), font.mono, _ref2 => {\n  let {\n    $cardSize\n  } = _ref2;\n  return getMarkerFontSize($cardSize);\n}, transition.medium('opacity', 'visibility', 'transform'), transition.long('top'));\nconst Tooltip = /*#__PURE__*/forwardRef((_ref3, ref) => {\n  let {\n      $isDragging,\n      $isVisible,\n      label,\n      $positionX,\n      size\n    } = _ref3,\n    props = _objectWithoutProperties(_ref3, _excluded$4);\n  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipBase, _extends({\n    $visible: $isVisible,\n    $position: $positionX,\n    $cardSize: size,\n    ref: ref,\n    $isDragging: $isDragging\n  }, props), label));\n});\nTooltip.displayName = 'Tooltip';\n\nconst _excluded$3 = [\"key\"];\nvar _templateObject$5, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6, _templateObject7;\nconst HEIGHT$1 = 6;\nconst PADDING = 6;\nconst heightScales = {\n  normal: 0.7,\n  small: 0.6\n};\nconst activeHeightScales = {\n  small: 0.9,\n  large: 1.4\n};\nconst getProgressBarHeight = size => Math.floor(HEIGHT$1 * (heightScales[size] || 1));\nconst getProgressBarActiveHeight = size => Math.floor(HEIGHT$1 * (activeHeightScales[size] || 1));\nconst OuterWrap$1 = styled('div').attrs(() => ({\n  className: classNames.progressBar\n}))(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral([\"\\n  position: relative;\\n  padding: \", \"px \", \"px \", \"px;\\n  z-index: 2;\\n  backface-visibility: hidden;\\n\"])), PADDING, PADDING / 2, PADDING / 2);\nconst BarsWrap = styled('div').attrs(_ref => {\n  let {\n    $cardSize,\n    $isDragging\n  } = _ref;\n  if ($isDragging) {\n    const activeHeight = getProgressBarActiveHeight($cardSize);\n    return {\n      style: {\n        height: \"\".concat(activeHeight, \"px\")\n      }\n    };\n  }\n  return {};\n})(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral([\"\\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\"])), transition.short('height'), _ref2 => {\n  let {\n    $cardSize\n  } = _ref2;\n  const height = getProgressBarHeight($cardSize);\n  const activeHeight = getProgressBarActiveHeight($cardSize);\n  return css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral([\"\\n      height: \", \"px;\\n\\n      \", \":hover & {\\n        height: \", \"px;\\n      }\\n    \"])), height, OuterWrap$1, activeHeight);\n});\nconst ProgressLine = styled('div')(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral([\"\\n  border-radius: inherit;\\n  height: 100%;\\n  position: relative;\\n  overflow: hidden;\\n\"])));\nconst ProgressMask = styled('div').attrs(_ref3 => {\n  let {\n    $maskScale\n  } = _ref3;\n  return {\n    style: {\n      transform: \"scaleX(\".concat($maskScale, \")\")\n    }\n  };\n})(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral([\"\\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\"])));\nconst ProgressHover = styled('div').attrs(_ref4 => {\n  let {\n    $cursorRatio,\n    $isHovering,\n    $progressPercent\n  } = _ref4;\n  return {\n    style: {\n      left: $progressPercent,\n      transform: \"scaleX(\".concat($cursorRatio, \")\"),\n      opacity: $isHovering ? 1 : 0,\n      visibility: $isHovering ? '$visible' : 'hidden'\n    }\n  };\n})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([\"\\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\"])), transition.short('opacity', 'visibility'));\nconst BufferedChunk = styled('div').attrs(_ref5 => {\n  let {\n    start,\n    end\n  } = _ref5;\n  return {\n    style: {\n      left: \"\".concat(start, \"px\"),\n      right: \"\".concat(end, \"px\")\n    }\n  };\n})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([\"\\n  background: rgba(255, 255, 255, 0.35);\\n  position: absolute;\\n  top: 0;\\n  bottom: 0;\\n\"])));\nconst ProgressBar = _ref6 => {\n  let {\n    bufferedMedia,\n    cursorX,\n    duration,\n    hoveredTime,\n    $isDragging,\n    $isHovering,\n    onClick,\n    onMouseDown,\n    onMouseOver,\n    progress,\n    showTooltip\n  } = _ref6;\n  const {\n    props: {\n      size\n    }\n  } = useContext(GlobalContext);\n  const wrapRef = useRef();\n  const tooltipRef = useRef();\n  const isSmallCard = useMemo(() => isSmall(size), [size]);\n  const getWrapWidth = useCallback(() => {\n    if (wrapRef.current) {\n      return wrapRef.current.getBoundingClientRect().width - PADDING;\n    }\n    return 0;\n  }, []);\n  const progressRatio = useMemo(() => clampNumber(progress / duration, 0, 1), [duration, progress]);\n  const $progressPercent = useMemo(() => \"\".concat(clampNumber(progressRatio * 100, 1, 99), \"%\"), [progressRatio]);\n  const $cursorRatio = useMemo(() => {\n    if (wrapRef.current) {\n      const wrapWidth = getWrapWidth();\n      const startPoint = progressRatio * wrapWidth;\n      const cursorPosition = cursorX - startPoint;\n      const width = wrapWidth - startPoint;\n      if (cursorPosition > 0) {\n        return clampNumber((cursorPosition / width).toFixed(3), 0, 0.99);\n      }\n    }\n    return 0;\n  }, [cursorX, getWrapWidth, progressRatio]);\n  const bufferedMediaChunks = useMemo(() => {\n    const wrapWidth = getWrapWidth();\n    return bufferedMedia.map((chunk, key) => {\n      const start = chunk.start * wrapWidth;\n      const end = wrapWidth - chunk.end * wrapWidth;\n      return {\n        key,\n        start,\n        end\n      };\n    });\n  }, [bufferedMedia, getWrapWidth]);\n  const tooltipLabel = useMemo(() => formatSeconds(hoveredTime), [hoveredTime]);\n  const tooltipPositionX = useMemo(() => {\n    if (wrapRef.current && tooltipRef.current) {\n      const wrapWidth = getWrapWidth();\n      const tooltipWidth = tooltipRef.current.getBoundingClientRect().width;\n      const tooltipHalf = tooltipWidth / 2;\n      return clampNumber(cursorX, tooltipHalf, wrapWidth - tooltipHalf);\n    }\n    return 0;\n  }, [cursorX, getWrapWidth]);\n  const mouseEvents = useMemo(() => ({\n    onClick,\n    onMouseDown,\n    onMouseOver\n  }), [onClick, onMouseDown, onMouseOver]);\n  const showAccessories = useMemo(() => $isDragging || $isHovering, [$isDragging, $isHovering]);\n  return /*#__PURE__*/React.createElement(OuterWrap$1, _extends({\n    $cardSize: size,\n    ref: wrapRef\n  }, mouseEvents), /*#__PURE__*/React.createElement(BarsWrap, {\n    $cardSize: size,\n    $isDragging: $isDragging\n  }, /*#__PURE__*/React.createElement(ProgressLine, null, /*#__PURE__*/React.createElement(ProgressHover, {\n    $cursorRatio: $cursorRatio,\n    $isHovering: $isHovering,\n    $progressPercent: $progressPercent\n  }), bufferedMediaChunks.map(_ref7 => {\n    let {\n        key\n      } = _ref7,\n      chunk = _objectWithoutProperties(_ref7, _excluded$3);\n    return /*#__PURE__*/React.createElement(BufferedChunk, _extends({\n      key: key\n    }, chunk));\n  }), /*#__PURE__*/React.createElement(ProgressMask, {\n    $maskScale: progressRatio\n  })), /*#__PURE__*/React.createElement(Scrubber, {\n    $cardSize: size,\n    $isVisible: showAccessories,\n    $positionX: $progressPercent\n  }), !isSmallCard && /*#__PURE__*/React.createElement(Tooltip, {\n    $isDragging: $isDragging,\n    $isVisible: showAccessories,\n    label: tooltipLabel,\n    $positionX: tooltipPositionX,\n    ref: tooltipRef,\n    size: size\n  })));\n};\n\nvar _path, _path2, _templateObject$4, _templateObject2$3, _templateObject3$3;\nconst _excluded$2 = [\"$cardSize\"],\n  _excluded2$1 = [\"$cardSize\"],\n  _excluded3 = [\"type\", \"$cardSize\"];\nconst Backward = _ref => {\n  let props = _objectWithoutProperties(_ref, _excluded$2);\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 24 29\"\n  }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n    fill: \"#FFF\",\n    fillRule: \"evenodd\",\n    stroke: \"none\",\n    strokeWidth: \"1\",\n    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\",\n    transform: \"translate(-4 -1)\"\n  })));\n};\nconst Forward = _ref2 => {\n  let props = _objectWithoutProperties(_ref2, _excluded2$1);\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 24 29\"\n  }, props), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n    fill: \"#FFF\",\n    fillRule: \"evenodd\",\n    stroke: \"none\",\n    strokeWidth: \"1\",\n    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\",\n    transform: \"translate(-4 -1)\"\n  })));\n};\nconst SeekIcon = styled('svg')(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral([\"\\n  stroke: #fff;\\n  width: \", \"px;\\n  height: \", \"px;\\n\\n  \", \"\\n\"])), _ref3 => {\n  let {\n    $cardSize\n  } = _ref3;\n  return isLarge($cardSize) ? 30 : 24;\n}, _ref4 => {\n  let {\n    $cardSize\n  } = _ref4;\n  return isLarge($cardSize) ? 30 : 24;\n}, _ref5 => {\n  let {\n    $cardSize\n  } = _ref5;\n  return !isLarge($cardSize) && media.mobile(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral([\"\\n    width: 0;\\n    height: 0;\\n  \"])));\n});\nconst SeekButtonWrap = styled(MediaButton)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral([\"\\n  margin: 0 \", \";\\n\"])), _ref6 => {\n  let {\n    $cardSize\n  } = _ref6;\n  return isLarge($cardSize) ? '28px' : '3px';\n});\nconst SeekButton = _ref7 => {\n  let {\n      type = 'rewind',\n      $cardSize\n    } = _ref7,\n    props = _objectWithoutProperties(_ref7, _excluded3);\n  const IconComponent = useMemo(() => type === 'rewind' ? Backward : Forward, [type]);\n  return /*#__PURE__*/React.createElement(SeekButtonWrap, _extends({\n    title: type === 'rewind' ? 'Rewind' : 'Forward',\n    $cardSize: $cardSize\n  }, props), /*#__PURE__*/React.createElement(SeekIcon, {\n    as: IconComponent,\n    $cardSize: $cardSize\n  }));\n};\n\nvar _templateObject$3, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2, _Svg;\nconst BASE_SIZE = 12;\nconst BASE_OFFSET = 6;\nconst offsetScales = {\n  normal: 0.8,\n  small: 0.6\n};\nconst sizeScales = {\n  normal: 0.9,\n  small: 0.8\n};\nconst getSpinnerOffset = size => Math.floor(BASE_OFFSET * (offsetScales[size] || 1));\nconst getSpinnerSize = size => Math.floor(BASE_SIZE * (sizeScales[size] || 1));\nconst rotate = keyframes(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral([\"\\n  100% {\\n    transform: rotate(360deg);\\n  }\\n\"])));\nconst dash = keyframes(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral([\"\\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\"])));\nconst Wrap = styled(MediaButton).attrs(_ref => {\n  let {\n    $isVisible\n  } = _ref;\n  return {\n    style: {\n      opacity: $isVisible ? 1 : 0,\n      visibility: $isVisible ? '$visible' : 'hidden'\n    }\n  };\n})(_ref2 => {\n  let {\n    $cardSize\n  } = _ref2;\n  const size = \"\".concat(getSpinnerSize($cardSize), \"px\");\n  const offset = \"\".concat(getSpinnerOffset($cardSize), \"px\");\n  return css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral([\"\\n    position: absolute;\\n    width: \", \";\\n    right: \", \";\\n    top: \", \";\\n    transition: \", \";\\n    will-change: opacity, visibility;\\n    pointer-events: none;\\n  \"])), size, offset, offset, transition.medium('opacity', 'visibility'));\n});\nconst Svg = styled('svg')(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral([\"\\n  width: 100%;\\n  animation: \", \" 2s linear infinite;\\n  will-change: transform;\\n\"])), rotate);\nconst Circle = styled('circle')(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral([\"\\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\"])), dash);\nconst Spinner = _ref3 => {\n  let {\n    size,\n    $isVisible\n  } = _ref3;\n  return /*#__PURE__*/React.createElement(Wrap, {\n    $cardSize: size,\n    className: classNames.spinner,\n    $isVisible: $isVisible\n  }, _Svg || (_Svg = /*#__PURE__*/React.createElement(Svg, {\n    viewBox: \"0 0 50 50\"\n  }, /*#__PURE__*/React.createElement(Circ