@mux/mux-player 1.11.4 → 1.12.0

package/dist/themes/2023/index.mjs

@@ -0,0 +1,1797 @@
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+
+// src/themes/2023/2023.html
+var __default = `<template id="media-theme-2023">
+  <style>
+    @keyframes pre-play-hide {
+      0% {
+        transform: scale(1);
+        opacity: 1;
+      }
+      30% {
+        transform: scale(0.7);
+      }
+      100% {
+        transform: scale(1.5);
+        opacity: 0;
+      }
+    }
+
+    :host {
+      --_primary-color: var(--media-primary-color, #fff);
+      --_secondary-color: var(--media-secondary-color, transparent);
+      --_accent-color: var(--media-accent-color, #fa50b5);
+
+      --media-icon-color: var(--_primary-color);
+      --media-control-background: var(--_secondary-color);
+      --media-control-hover-background: var(--_accent-color);
+      --media-time-buffered-color: rgba(255, 255, 255, 0.4);
+      --media-range-track-background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
+        linear-gradient(rgba(20, 20, 30, 0.7), rgba(20, 20, 30, 0.7));
+      --media-preview-thumbnail-border: 0;
+      --media-preview-thumbnail-border-radius: 2px 2px 0 0;
+      --media-preview-time-border-radius: 0 0 2px 2px;
+      --media-preview-time-margin: 0 0 8px;
+      --media-preview-time-text-shadow: none;
+      --media-control-height: 14px;
+      --media-control-padding: 6px;
+
+      color: var(--_primary-color);
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+    }
+
+    :host([audio]) {
+      --media-preview-time-border-radius: 3px;
+      --media-preview-time-margin: 0 0 5px;
+      --media-preview-time-text-shadow: none;
+    }
+
+    :host([audio]) ::slotted([slot='media']) {
+      height: 0px;
+    }
+
+    :host([audio]) media-loading-indicator,
+    :host([audio]) ::slotted([slot='poster']) {
+      display: none;
+    }
+
+    :host([audio]) media-controller {
+      background: transparent;
+    }
+
+    :host([audio]) media-controller::part(vertical-layer) {
+      background: transparent;
+    }
+
+    :host([audio]) media-control-bar {
+      width: 100%;
+    }
+
+    :host(:not([audio])) media-captions-selectmenu::part(listbox) {
+      z-index: 10;
+    }
+
+    :host(:not([audio])) media-captions-selectmenu::part(indicator) {
+      fill: red;
+    }
+
+    /*
+     * 0.433s is the transition duration for VTT Regions.
+     * Borrowed here, so the captions don't move too fast.
+     */
+    media-controller ::slotted([slot='media']) {
+      --media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
+    }
+    media-controller:is([mediapaused], :not([userinactive])) ::slotted([slot='media']) {
+      --media-webkit-text-track-transform: translateY(-50px);
+      --media-webkit-text-track-transition: transform 0.15s ease;
+    }
+
+    media-time-range {
+      --media-range-bar-color: var(--_accent-color);
+      --media-time-range-buffered-color: #fff;
+      --media-range-track-color: rgba(255, 255, 255, 0.4);
+      --media-range-track-background: transparent;
+      --media-range-thumb-background: radial-gradient(
+        circle,
+        #000 0%,
+        #000 25%,
+        var(--_accent-color) 25%,
+        var(--_accent-color)
+      );
+      --media-range-thumb-width: 0;
+      --media-range-thumb-height: 0;
+      --media-range-thumb-transition: all 0.3s;
+      --media-range-thumb-opacity: 1;
+      --media-preview-thumbnail-background: var(--_primary-color);
+      --media-preview-thumbnail-border: 5px solid var(--_primary-color);
+      --media-preview-thumbnail-border-radius: 5px 5px 0 0;
+      --media-preview-time-background: var(--_primary-color);
+      --media-preview-time-border-radius: 0 0 5px 5px;
+      --media-preview-time-margin: 0 0 10px;
+      --media-preview-time-padding: 2px 0 6px;
+      --media-text-color: #000;
+      --media-preview-thumbnail-max-width: 150px;
+      --media-range-track-pointer-border-right: 2px solid #000;
+      --media-control-hover-background: transparent;
+      color: var(--_accent-color);
+      padding: 0 6px;
+    }
+
+    :host([audio]) media-time-range {
+      --media-preview-time-border-radius: 5px;
+      --media-preview-time-padding: 5px;
+    }
+
+    media-time-range:hover {
+      --media-range-thumb-width: 12px;
+      --media-range-thumb-height: 12px;
+    }
+
+    media-time-range::part(preview-box)::after {
+      position: absolute;
+      content: '';
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 10px 8.5px 0 8.5px;
+      border-color: var(--_primary-color) transparent transparent transparent;
+      top: 100%;
+      left: 50%;
+      transform: translate(-50%, -10px);
+    }
+
+    media-captions-selectmenu {
+      --media-listbox-background: var(--_primary-color);
+      --media-listbox-selected-background: rgba(0, 0, 0, 0.15);
+      --media-listbox-hover-background: rgba(0, 0, 0, 0.15);
+      --media-listbox-hover-outline: white solid 1px;
+      --media-text-color: #000;
+    }
+
+    :host(:not([audio])) media-time-range {
+      --media-range-padding: 0;
+      background: transparent;
+      z-index: 10;
+      height: 10px;
+      bottom: -3px;
+      width: 100%;
+    }
+
+    media-control-bar :is([role='button'], [role='switch'], button) {
+      line-height: 0;
+    }
+
+    media-control-bar :is([part*='button'], [part*='range'], [part*='display']) {
+      border-radius: 3px;
+    }
+
+    .spacer {
+      flex-grow: 1;
+      background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
+    }
+
+    media-control-bar[slot='top-chrome'] {
+      min-height: 42px;
+      pointer-events: none;
+    }
+
+    :host([title]:not([audio])) media-control-bar[slot='top-chrome']::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      padding-bottom: min(100px, 25%);
+      background: linear-gradient(#000, transparent);
+      opacity: 0.8;
+    }
+
+    :host(:not([audio])) media-control-bar[part='bottom']::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+      padding-bottom: min(100px, 25%);
+      background: linear-gradient(transparent, #000);
+      opacity: 0.8;
+      z-index: 1;
+    }
+
+    media-control-bar[part='bottom'] > * {
+      z-index: 2;
+    }
+
+    media-control-bar[part='bottom'] {
+      padding: 6px 6px;
+    }
+
+    media-control-bar[slot='top-chrome'] > * {
+      --media-control-background: transparent;
+      --media-control-hover-background: transparent;
+      position: relative;
+    }
+
+    media-controller::part(vertical-layer) {
+      transition: background-color 1s;
+    }
+
+    media-controller:is([mediapaused], :not([userinactive]))::part(vertical-layer) {
+      background-color: var(--controls-backdrop-color, var(--controls, transparent));
+      transition: background-color 0.25s;
+    }
+
+    .center-controls {
+      --media-button-icon-width: 100%;
+      --media-button-icon-height: auto;
+      pointer-events: none;
+      width: 100%;
+      display: flex;
+      flex-flow: row;
+      align-items: center;
+      justify-content: center;
+      filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
+      paint-order: stroke;
+      stroke: rgba(102, 102, 102, 1);
+      stroke-width: 0.3px;
+      text-shadow: 0 0 2px rgb(0 0 0 / 0.25), 0 0 6px rgb(0 0 0 / 0.25);
+    }
+
+    .center-controls media-play-button {
+      --media-control-background: transparent;
+      --media-control-hover-background: transparent;
+      --media-control-padding: 0;
+      width: 40px;
+      transform-origin: center center;
+    }
+
+    [breakpointsm] .center-controls media-play-button {
+      width: 90px;
+      height: 90px;
+      border-radius: 50%;
+      transition: background 0.4s;
+      padding: 24px;
+      --media-control-background: #000;
+      --media-control-hover-background: var(--_accent-color);
+    }
+
+    .center-controls media-seek-backward-button,
+    .center-controls media-seek-forward-button {
+      --media-control-background: transparent;
+      --media-control-hover-background: transparent;
+      padding: 0;
+      margin: 0 20px;
+      width: max(33px, min(8%, 40px));
+    }
+
+    [breakpointsm]:not([audio]) .center-controls.pre-playback {
+      display: grid;
+      align-items: initial;
+      justify-content: initial;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    [breakpointsm]:not([audio]) .center-controls.pre-playback media-play-button {
+      place-self: var(--_pre-playback-place, center);
+      grid-area: 1 / 1;
+      margin: 16px;
+    }
+
+    /* Show and hide controls or pre-playback state */
+
+    [breakpointsm]:is([mediahasplayed], :not([mediapaused])):not([audio])
+      .center-controls.pre-playback
+      media-play-button {
+      animation: 0.3s linear forwards pre-play-hide;
+    }
+
+    .autoplay-unmute {
+      --media-control-hover-background: transparent;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
+    }
+
+    .autoplay-unmute-btn {
+      --media-control-height: 16px;
+      border-radius: 8px;
+      background: #000;
+      color: var(--_primary-color);
+      display: flex;
+      align-items: center;
+      padding: 8px 16px;
+      font-size: 18px;
+      font-weight: 500;
+      cursor: pointer;
+    }
+
+    .autoplay-unmute-btn:hover {
+      background: var(--_accent-color);
+    }
+
+    [breakpointsm] .autoplay-unmute-btn {
+      --media-control-height: 30px;
+      padding: 14px 24px;
+      font-size: 26px;
+    }
+
+    .autoplay-unmute-btn svg {
+      margin: 0 6px 0 0;
+    }
+
+    [breakpointsm] .autoplay-unmute-btn svg {
+      margin: 0 10px 0 0;
+    }
+
+    media-controller:not([audio]):not([mediahasplayed]) *:is(media-control-bar, media-time-range) {
+      display: none;
+    }
+
+    media-loading-indicator {
+      --media-loading-icon-width: 100%;
+      --media-button-icon-height: auto;
+      display: var(--media-control-display, var(--media-loading-indicator-display, flex));
+      pointer-events: none;
+      position: absolute;
+      width: min(15%, 150px);
+      flex-flow: row;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Intentionally don't target the div for transition but the children
+		 of the div. Prevents messing with media-chrome's autohide feature. */
+    media-loading-indicator + div * {
+      transition: opacity 0.15s;
+      opacity: 1;
+    }
+
+    media-loading-indicator[media-loading]:not([media-paused]) ~ div > * {
+      opacity: 0;
+      transition-delay: 400ms;
+    }
+
+    media-volume-range {
+      width: min(100%, 100px);
+      --media-range-thumb-width: 12px;
+      --media-range-thumb-height: 12px;
+      --media-range-thumb-background: radial-gradient(
+        circle,
+        #000 0%,
+        #000 25%,
+        var(--_primary-color) 25%,
+        var(--_primary-color)
+      );
+      --media-control-hover-background: none;
+    }
+
+    media-time-display {
+      white-space: nowrap;
+    }
+
+    /* Hide unavailable controls */
+    media-volume-range[media-volume-unavailable] {
+      --volume-range: none;
+    }
+    media-airplay-button[media-airplay-unavailable] {
+      --airplay-button: none;
+    }
+    media-fullscreen-button[media-fullscreen-unavailable] {
+      --fullscreen-button: none;
+    }
+    media-cast-button[media-cast-unavailable] {
+      --cast-button: none;
+    }
+    media-pip-button[media-pip-unavailable] {
+      --pip-button: none;
+    }
+
+    /* Generic style for explicitly disabled controls */
+    media-control-bar[part='bottom'] [disabled],
+    media-control-bar[part='bottom'] [aria-disabled='true'] {
+      opacity: 60%;
+      cursor: not-allowed;
+    }
+
+    media-text-display {
+      --media-font-size: 16px;
+      --media-control-padding: 14px;
+      font-weight: 500;
+    }
+
+    media-play-button.animated *:is(g, path) {
+      transition: all 0.3s;
+    }
+
+    media-play-button.animated[mediapaused] .pause-icon-pt1 {
+      opacity: 0;
+    }
+
+    media-play-button.animated[mediapaused] .pause-icon-pt2 {
+      transform-origin: center center;
+      transform: scaleY(0);
+    }
+
+    media-play-button.animated[mediapaused] .play-icon {
+      clip-path: inset(0 0 0 0);
+    }
+
+    media-play-button.animated:not([mediapaused]) .play-icon {
+      clip-path: inset(0 0 0 100%);
+    }
+
+    media-seek-forward-button,
+    media-seek-backward-button {
+      --media-font-weight: 400;
+    }
+
+    .mute-icon {
+      display: inline-block;
+    }
+
+    .mute-icon :is(path, g) {
+      transition: opacity 0.5s;
+    }
+
+    .muted {
+      opacity: 0;
+    }
+
+    media-mute-button[mediavolumelevel='low'] :is(.volume-medium, .volume-high),
+    media-mute-button[mediavolumelevel='medium'] :is(.volume-high) {
+      opacity: 0;
+    }
+
+    media-mute-button[mediavolumelevel='off'] .unmuted {
+      opacity: 0;
+    }
+
+    media-mute-button[mediavolumelevel='off'] .muted {
+      opacity: 1;
+    }
+  </style>
+
+  <template partial="TitleDisplay">
+    <template if="title">
+      <media-text-display part="top title display" class="title-display">{{title}}</media-text-display>
+    </template>
+  </template>
+
+  <template partial="PlayButton">
+    <media-play-button
+      part="{{section ?? 'bottom'}} play button"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+      class="animated"
+    >
+      <svg aria-hidden="true" viewBox="0 0 18 14" slot="icon">
+        <g class="play-icon">
+          <path
+            d="M15.5987 6.2911L3.45577 0.110898C2.83667 -0.204202 2.06287 0.189698 2.06287 0.819798V13.1802C2.06287 13.8103 2.83667 14.2042 3.45577 13.8891L15.5987 7.7089C16.2178 7.3938 16.2178 6.6061 15.5987 6.2911Z"
+          />
+        </g>
+        <g class="pause-icon">
+          <path
+            class="pause-icon-pt1"
+            d="M5.90709 0H2.96889C2.46857 0 2.06299 0.405585 2.06299 0.9059V13.0941C2.06299 13.5944 2.46857 14 2.96889 14H5.90709C6.4074 14 6.81299 13.5944 6.81299 13.0941V0.9059C6.81299 0.405585 6.4074 0 5.90709 0Z"
+          />
+          <path
+            class="pause-icon-pt2"
+            d="M15.1571 0H12.2189C11.7186 0 11.313 0.405585 11.313 0.9059V13.0941C11.313 13.5944 11.7186 14 12.2189 14H15.1571C15.6574 14 16.063 13.5944 16.063 13.0941V0.9059C16.063 0.405585 15.6574 0 15.1571 0Z"
+          />
+        </g>
+      </svg>
+    </media-play-button>
+  </template>
+
+  <template partial="PrePlayButton">
+    <media-play-button part="{{section}} play button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg aria-hidden="true" viewBox="0 0 18 14" slot="icon">
+        <g>
+          <path
+            d="M15.5987 6.2911L3.45577 0.110898C2.83667 -0.204202 2.06287 0.189698 2.06287 0.819798V13.1802C2.06287 13.8103 2.83667 14.2042 3.45577 13.8891L15.5987 7.7089C16.2178 7.3938 16.2178 6.6061 15.5987 6.2911Z"
+          />
+        </g>
+      </svg>
+    </media-play-button>
+  </template>
+
+  <template partial="SeekBackwardButton">
+    <media-seek-backward-button
+      seekoffset="{{backwardseekoffset}}"
+      part="{{section ?? 'bottom'}} seek-backward button"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    >
+      <svg viewBox="0 0 22 14" aria-hidden="true" slot="icon">
+        <path
+          d="M3.65 2.07888L0.0864 6.7279C-0.0288 6.87812 -0.0288 7.12188 0.0864 7.2721L3.65 11.9211C3.7792 12.0896 4 11.9703 4 11.7321V2.26787C4 2.02968 3.7792 1.9104 3.65 2.07888Z"
+        />
+        <text transform="translate(6 12)" style="font-size: 14px; font-family: 'ArialMT', 'Arial'">
+          {{backwardseekoffset}}
+        </text>
+      </svg>
+    </media-seek-backward-button>
+  </template>
+
+  <template partial="SeekForwardButton">
+    <media-seek-forward-button
+      seekoffset="{{forwardseekoffset}}"
+      part="{{section ?? 'bottom'}} seek-forward button"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    >
+      <svg viewBox="0 0 22 14" aria-hidden="true" slot="icon">
+        <g>
+          <text transform="translate(0 12)" style="font-size: 14px; font-family: 'ArialMT', 'Arial'">
+            {{forwardseekoffset}}
+          </text>
+          <path
+            d="M18.35 11.9211L21.9136 7.2721C22.0288 7.12188 22.0288 6.87812 21.9136 6.7279L18.35 2.07888C18.2208 1.91041 18 2.02968 18 2.26787V11.7321C18 11.9703 18.2208 12.0896 18.35 11.9211Z"
+          />
+        </g>
+      </svg>
+    </media-seek-forward-button>
+  </template>
+
+  <template partial="MuteButton">
+    <media-mute-button part="bottom mute button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg viewBox="0 0 18 14" slot="icon" class="mute-icon" aria-hidden="true">
+        <g class="unmuted">
+          <path
+            d="M6.76786 1.21233L3.98606 3.98924H1.19937C0.593146 3.98924 0.101743 4.51375 0.101743 5.1607V6.96412L0 6.99998L0.101743 7.03583V8.83926C0.101743 9.48633 0.593146 10.0108 1.19937 10.0108H3.98606L6.76773 12.7877C7.23561 13.2547 8 12.9007 8 12.2171V1.78301C8 1.09925 7.23574 0.745258 6.76786 1.21233Z"
+          />
+          <path
+            class="volume-low"
+            d="M10 3.54781C10.7452 4.55141 11.1393 5.74511 11.1393 6.99991C11.1393 8.25471 10.7453 9.44791 10 10.4515L10.7988 11.0496C11.6734 9.87201 12.1356 8.47161 12.1356 6.99991C12.1356 5.52821 11.6735 4.12731 10.7988 2.94971L10 3.54781Z"
+          />
+          <path
+            class="volume-medium"
+            d="M12.3778 2.40086C13.2709 3.76756 13.7428 5.35806 13.7428 7.00026C13.7428 8.64246 13.2709 10.233 12.3778 11.5992L13.2106 12.1484C14.2107 10.6185 14.739 8.83796 14.739 7.00016C14.739 5.16236 14.2107 3.38236 13.2106 1.85156L12.3778 2.40086Z"
+          />
+          <path
+            class="volume-high"
+            d="M15.5981 0.75L14.7478 1.2719C15.7937 2.9919 16.3468 4.9723 16.3468 7C16.3468 9.0277 15.7937 11.0082 14.7478 12.7281L15.5981 13.25C16.7398 11.3722 17.343 9.211 17.343 7C17.343 4.789 16.7398 2.6268 15.5981 0.75Z"
+          />
+        </g>
+        <g class="muted">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M4.39976 4.98924H1.19937C1.19429 4.98924 1.17777 4.98961 1.15296 5.01609C1.1271 5.04369 1.10174 5.09245 1.10174 5.1607V8.83926C1.10174 8.90761 1.12714 8.95641 1.15299 8.984C1.17779 9.01047 1.1943 9.01084 1.19937 9.01084H4.39977L7 11.6066V2.39357L4.39976 4.98924ZM7.47434 1.92006C7.4743 1.9201 7.47439 1.92002 7.47434 1.92006V1.92006ZM6.76773 12.7877L3.98606 10.0108H1.19937C0.593146 10.0108 0.101743 9.48633 0.101743 8.83926V7.03583L0 6.99998L0.101743 6.96412V5.1607C0.101743 4.51375 0.593146 3.98924 1.19937 3.98924H3.98606L6.76786 1.21233C7.23574 0.745258 8 1.09925 8 1.78301V12.2171C8 12.9007 7.23561 13.2547 6.76773 12.7877Z"
+          />
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M15.2677 9.30323C15.463 9.49849 15.7796 9.49849 15.9749 9.30323C16.1701 9.10796 16.1701 8.79138 15.9749 8.59612L14.2071 6.82841L15.9749 5.06066C16.1702 4.8654 16.1702 4.54882 15.9749 4.35355C15.7796 4.15829 15.4631 4.15829 15.2678 4.35355L13.5 6.1213L11.7322 4.35348C11.537 4.15822 11.2204 4.15822 11.0251 4.35348C10.8298 4.54874 10.8298 4.86532 11.0251 5.06058L12.7929 6.82841L11.0251 8.59619C10.8299 8.79146 10.8299 9.10804 11.0251 9.3033C11.2204 9.49856 11.537 9.49856 11.7323 9.3033L13.5 7.53552L15.2677 9.30323Z"
+          />
+        </g>
+      </svg>
+    </media-mute-button>
+  </template>
+
+  <template partial="PipButton">
+    <media-pip-button part="bottom pip button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg viewBox="0 0 18 14" aria-hidden="true" slot="icon">
+        <path
+          d="M15.9891 0H2.011C0.9004 0 0 0.9003 0 2.0109V11.989C0 13.0996 0.9004 14 2.011 14H15.9891C17.0997 14 18 13.0997 18 11.9891V2.0109C18 0.9003 17.0997 0 15.9891 0ZM17 11.9891C17 12.5465 16.5465 13 15.9891 13H2.011C1.4536 13 1.0001 12.5465 1.0001 11.9891V2.0109C1.0001 1.4535 1.4536 0.9999 2.011 0.9999H15.9891C16.5465 0.9999 17 1.4535 17 2.0109V11.9891Z"
+          fill="white"
+        />
+        <path
+          d="M15.356 5.67822H8.19523C8.03253 5.67822 7.90063 5.81012 7.90063 5.97282V11.3836C7.90063 11.5463 8.03253 11.6782 8.19523 11.6782H15.356C15.5187 11.6782 15.6506 11.5463 15.6506 11.3836V5.97282C15.6506 5.81012 15.5187 5.67822 15.356 5.67822Z"
+        />
+      </svg>
+    </media-pip-button>
+  </template>
+
+  <template partial="CaptionsMenuButton">
+    <media-captions-selectmenu part="bottom captions selectmenu" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <media-captions-button
+        slot="button"
+        part="bottom captions button"
+        disabled="{{disabled}}"
+        aria-disabled="{{disabled}}"
+      >
+        <svg aria-hidden="true" viewBox="0 0 18 14" slot="on">
+          <path
+            d="M15.989 0H2.011C0.9004 0 0 0.9003 0 2.0109V11.9891C0 13.0997 0.9004 14 2.011 14H15.989C17.0997 14 18 13.0997 18 11.9891V2.0109C18 0.9003 17.0997 0 15.989 0ZM4.2292 8.7639C4.5954 9.1902 5.0935 9.4031 5.7233 9.4031C6.1852 9.4031 6.5544 9.301 6.8302 9.0969C7.1061 8.8933 7.2863 8.614 7.3702 8.26H8.4322C8.3062 8.884 8.0093 9.3733 7.5411 9.7273C7.0733 10.0813 6.4703 10.2581 5.732 10.2581C5.108 10.2581 4.5699 10.1219 4.1168 9.8489C3.6637 9.5759 3.3141 9.1946 3.0685 8.7058C2.8224 8.2165 2.6994 7.6511 2.6994 7.009C2.6994 6.3611 2.8224 5.7927 3.0685 5.3034C3.3141 4.8146 3.6637 4.4323 4.1168 4.1559C4.5699 3.88 5.108 3.7418 5.732 3.7418C6.4703 3.7418 7.0733 3.922 7.5411 4.2818C8.0094 4.6422 8.3062 5.1461 8.4322 5.794H7.3702C7.2862 5.4283 7.106 5.1368 6.8302 4.921C6.5544 4.7052 6.1852 4.5968 5.7233 4.5968C5.0934 4.5968 4.5954 4.8116 4.2292 5.2404C3.8635 5.6696 3.6804 6.259 3.6804 7.009C3.6804 7.7531 3.8635 8.3381 4.2292 8.7639ZM11.0974 8.7639C11.4636 9.1902 11.9617 9.4031 12.5915 9.4031C13.0534 9.4031 13.4226 9.301 13.6984 9.0969C13.9743 8.8933 14.1545 8.614 14.2384 8.26H15.3004C15.1744 8.884 14.8775 9.3733 14.4093 9.7273C13.9415 10.0813 13.3385 10.2581 12.6002 10.2581C11.9762 10.2581 11.4381 10.1219 10.985 9.8489C10.5319 9.5759 10.1823 9.1946 9.9367 8.7058C9.6906 8.2165 9.5676 7.6511 9.5676 7.009C9.5676 6.3611 9.6906 5.7927 9.9367 5.3034C10.1823 4.8146 10.5319 4.4323 10.985 4.1559C11.4381 3.88 11.9762 3.7418 12.6002 3.7418C13.3385 3.7418 13.9415 3.922 14.4093 4.2818C14.8776 4.6422 15.1744 5.1461 15.3004 5.794H14.2384C14.1544 5.4283 13.9742 5.1368 13.6984 4.921C13.4226 4.7052 13.0534 4.5968 12.5915 4.5968C11.9616 4.5968 11.4636 4.8116 11.0974 5.2404C10.7317 5.6696 10.5486 6.259 10.5486 7.009C10.5486 7.7531 10.7317 8.3381 11.0974 8.7639Z"
+          />
+        </svg>
+        <svg aria-hidden="true" viewBox="0 0 18 14" slot="off">
+          <path
+            d="M5.73219 10.258C5.10819 10.258 4.57009 10.1218 4.11699 9.8488C3.66389 9.5758 3.31429 9.1945 3.06869 8.7057C2.82259 8.2164 2.69958 7.651 2.69958 7.0089C2.69958 6.361 2.82259 5.7926 3.06869 5.3033C3.31429 4.8145 3.66389 4.4322 4.11699 4.1558C4.57009 3.8799 5.10819 3.7417 5.73219 3.7417C6.47049 3.7417 7.07348 3.9219 7.54128 4.2817C8.00958 4.6421 8.30638 5.146 8.43238 5.7939H7.37039C7.28639 5.4282 7.10618 5.1367 6.83039 4.9209C6.55459 4.7051 6.18538 4.5967 5.72348 4.5967C5.09358 4.5967 4.59559 4.8115 4.22939 5.2403C3.86369 5.6695 3.68058 6.2589 3.68058 7.0089C3.68058 7.753 3.86369 8.338 4.22939 8.7638C4.59559 9.1901 5.09368 9.403 5.72348 9.403C6.18538 9.403 6.55459 9.3009 6.83039 9.0968C7.10629 8.8932 7.28649 8.6139 7.37039 8.2599H8.43238C8.30638 8.8839 8.00948 9.3732 7.54128 9.7272C7.07348 10.0812 6.47049 10.258 5.73219 10.258Z"
+          />
+          <path
+            d="M12.6003 10.258C11.9763 10.258 11.4382 10.1218 10.9851 9.8488C10.532 9.5758 10.1824 9.1945 9.93685 8.7057C9.69075 8.2164 9.56775 7.651 9.56775 7.0089C9.56775 6.361 9.69075 5.7926 9.93685 5.3033C10.1824 4.8145 10.532 4.4322 10.9851 4.1558C11.4382 3.8799 11.9763 3.7417 12.6003 3.7417C13.3386 3.7417 13.9416 3.9219 14.4094 4.2817C14.8777 4.6421 15.1745 5.146 15.3005 5.7939H14.2385C14.1545 5.4282 13.9743 5.1367 13.6985 4.9209C13.4227 4.7051 13.0535 4.5967 12.5916 4.5967C11.9617 4.5967 11.4637 4.8115 11.0975 5.2403C10.7318 5.6695 10.5487 6.2589 10.5487 7.0089C10.5487 7.753 10.7318 8.338 11.0975 8.7638C11.4637 9.1901 11.9618 9.403 12.5916 9.403C13.0535 9.403 13.4227 9.3009 13.6985 9.0968C13.9744 8.8932 14.1546 8.6139 14.2385 8.2599H15.3005C15.1745 8.8839 14.8776 9.3732 14.4094 9.7272C13.9416 10.0812 13.3386 10.258 12.6003 10.258Z"
+          />
+          <path
+            d="M15.9891 1C16.5465 1 17 1.4535 17 2.011V11.9891C17 12.5465 16.5465 13 15.9891 13H2.0109C1.4535 13 1 12.5465 1 11.9891V2.0109C1 1.4535 1.4535 0.9999 2.0109 0.9999L15.9891 1ZM15.9891 0H2.0109C0.9003 0 0 0.9003 0 2.0109V11.9891C0 13.0997 0.9003 14 2.0109 14H15.9891C17.0997 14 18 13.0997 18 11.9891V2.0109C18 0.9003 17.0997 0 15.9891 0Z"
+          />
+        </svg>
+      </media-captions-button>
+    </media-captions-selectmenu>
+  </template>
+
+  <template partial="AirplayButton">
+    <media-airplay-button part="bottom airplay button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg viewBox="0 0 18 14" aria-hidden="true" slot="airplay">
+        <path
+          d="M16.1383 0H1.8618C0.8335 0 0 0.8335 0 1.8617V10.1382C0 11.1664 0.8335 12 1.8618 12H3.076C3.1204 11.9433 3.1503 11.8785 3.2012 11.826L4.004 11H1.8618C1.3866 11 1 10.6134 1 10.1382V1.8617C1 1.3865 1.3866 0.9999 1.8618 0.9999H16.1383C16.6135 0.9999 17.0001 1.3865 17.0001 1.8617V10.1382C17.0001 10.6134 16.6135 11 16.1383 11H13.9961L14.7989 11.826C14.8499 11.8785 14.8798 11.9432 14.9241 12H16.1383C17.1665 12 18.0001 11.1664 18.0001 10.1382V1.8617C18 0.8335 17.1665 0 16.1383 0Z"
+        />
+        <path
+          d="M9.55061 8.21903C9.39981 8.06383 9.20001 7.98633 9.00011 7.98633C8.80021 7.98633 8.60031 8.06383 8.44951 8.21903L4.09771 12.697C3.62471 13.1838 3.96961 13.9998 4.64831 13.9998H13.3518C14.0304 13.9998 14.3754 13.1838 13.9023 12.697L9.55061 8.21903Z"
+        />
+      </svg>
+    </media-airplay-button>
+  </template>
+
+  <template partial="FullscreenButton">
+    <media-fullscreen-button part="bottom fullscreen button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg viewBox="0 0 18 14" aria-hidden="true" slot="enter">
+        <path
+          d="M1.00745 4.39539L1.01445 1.98789C1.01605 1.43049 1.47085 0.978289 2.02835 0.979989L6.39375 0.992589L6.39665 -0.007411L2.03125 -0.020011C0.920646 -0.023211 0.0176463 0.874489 0.0144463 1.98509L0.00744629 4.39539H1.00745Z"
+        />
+        <path
+          d="M17.0144 2.03431L17.0076 4.39541H18.0076L18.0144 2.03721C18.0176 0.926712 17.1199 0.0237125 16.0093 0.0205125L11.6439 0.0078125L11.641 1.00781L16.0064 1.02041C16.5638 1.02201 17.016 1.47681 17.0144 2.03431Z"
+        />
+        <path
+          d="M16.9925 9.60498L16.9855 12.0124C16.9839 12.5698 16.5291 13.022 15.9717 13.0204L11.6063 13.0078L11.6034 14.0078L15.9688 14.0204C17.0794 14.0236 17.9823 13.1259 17.9855 12.0153L17.9925 9.60498H16.9925Z"
+        />
+        <path
+          d="M0.985626 11.9661L0.992426 9.60498H-0.0074737L-0.0142737 11.9632C-0.0174737 13.0738 0.880226 13.9767 1.99083 13.98L6.35623 13.9926L6.35913 12.9926L1.99373 12.98C1.43633 12.9784 0.983926 12.5236 0.985626 11.9661Z"
+        />
+      </svg>
+      <svg viewBox="0 0 18 14" aria-hidden="true" slot="exit">
+        <path
+          d="M5.39655 -0.0200195L5.38955 2.38748C5.38795 2.94488 4.93315 3.39708 4.37565 3.39538L0.0103463 3.38278L0.00744629 4.38278L4.37285 4.39538C5.48345 4.39858 6.38635 3.50088 6.38965 2.39028L6.39665 -0.0200195H5.39655Z"
+        />
+        <path
+          d="M12.6411 2.36891L12.6479 0.0078125H11.6479L11.6411 2.36601C11.6379 3.47651 12.5356 4.37951 13.6462 4.38271L18.0116 4.39531L18.0145 3.39531L13.6491 3.38271C13.0917 3.38111 12.6395 2.92641 12.6411 2.36891Z"
+        />
+        <path
+          d="M12.6034 14.0204L12.6104 11.613C12.612 11.0556 13.0668 10.6034 13.6242 10.605L17.9896 10.6176L17.9925 9.61759L13.6271 9.60499C12.5165 9.60179 11.6136 10.4995 11.6104 11.6101L11.6034 14.0204H12.6034Z"
+        />
+        <path
+          d="M5.359 11.6315L5.3522 13.9926H6.3522L6.359 11.6344C6.3622 10.5238 5.4645 9.62088 4.3539 9.61758L-0.0115043 9.60498L-0.0144043 10.605L4.351 10.6176C4.9084 10.6192 5.3607 11.074 5.359 11.6315Z"
+        />
+      </svg>
+    </media-fullscreen-button>
+  </template>
+
+  <template partial="CastButton">
+    <media-cast-button part="bottom cast button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg viewBox="0 0 18 14" aria-hidden="true" slot="enter">
+        <path
+          d="M16.0072 0H2.0291C0.9185 0 0.0181 0.9003 0.0181 2.011V5.5009C0.357 5.5016 0.6895 5.5275 1.0181 5.5669V2.011C1.0181 1.4536 1.4716 1 2.029 1H16.0072C16.5646 1 17.0181 1.4536 17.0181 2.011V11.9891C17.0181 12.5465 16.5646 13 16.0072 13H8.4358C8.4746 13.3286 8.4999 13.6611 8.4999 13.9999H16.0071C17.1177 13.9999 18.018 13.0996 18.018 11.989V2.011C18.0181 0.9003 17.1178 0 16.0072 0ZM0 6.4999V7.4999C3.584 7.4999 6.5 10.4159 6.5 13.9999H7.5C7.5 9.8642 4.1357 6.4999 0 6.4999ZM0 8.7499V9.7499C2.3433 9.7499 4.25 11.6566 4.25 13.9999H5.25C5.25 11.1049 2.895 8.7499 0 8.7499ZM0.0181 11V14H3.0181C3.0181 12.3431 1.675 11 0.0181 11Z"
+        />
+      </svg>
+      <svg viewBox="0 0 18 14" aria-hidden="true" slot="exist">
+        <path
+          d="M15.9891 0H2.01103C0.900434 0 3.35947e-05 0.9003 3.35947e-05 2.011V5.5009C0.338934 5.5016 0.671434 5.5275 1.00003 5.5669V2.011C1.00003 1.4536 1.45353 1 2.01093 1H15.9891C16.5465 1 17 1.4536 17 2.011V11.9891C17 12.5465 16.5465 13 15.9891 13H8.41773C8.45653 13.3286 8.48183 13.6611 8.48183 13.9999H15.989C17.0996 13.9999 17.9999 13.0996 17.9999 11.989V2.011C18 0.9003 17.0997 0 15.9891 0ZM-0.0180664 6.4999V7.4999C3.56593 7.4999 6.48193 10.4159 6.48193 13.9999H7.48193C7.48193 9.8642 4.11763 6.4999 -0.0180664 6.4999ZM-0.0180664 8.7499V9.7499C2.32523 9.7499 4.23193 11.6566 4.23193 13.9999H5.23193C5.23193 11.1049 2.87693 8.7499 -0.0180664 8.7499ZM3.35947e-05 11V14H3.00003C3.00003 12.3431 1.65693 11 3.35947e-05 11Z"
+        />
+        <path d="M2.15002 5.634C5.18352 6.4207 7.57252 8.8151 8.35282 11.8499H15.8501V2.1499H2.15002V5.634Z" />
+      </svg>
+    </media-cast-button>
+  </template>
+
+  <template partial="LiveButton">
+    <media-live-button part="{{section ?? 'top'}} live button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <span slot="text">Live</span>
+    </media-live-button>
+  </template>
+
+  <template partial="PlaybackRateButton">
+    <media-playback-rate-button
+      rates="{{playbackrates}}"
+      part="bottom playback-rate button"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    >
+    </media-playback-rate-button>
+  </template>
+
+  <template partial="VolumeRange">
+    <media-volume-range
+      part="bottom volume range"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    ></media-volume-range>
+  </template>
+
+  <template partial="TimeDisplay">
+    <media-time-display
+      remaining="{{defaultshowremainingtime}}"
+      showduration="{{!hideduration}}"
+      part="bottom time display"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    ></media-time-display>
+  </template>
+
+  <template partial="TimeRange">
+    <media-time-range part="bottom time range" disabled="{{disabled}}" aria-disabled="{{disabled}}"></media-time-range>
+  </template>
+
+  <media-controller
+    defaultstreamtype="{{defaultstreamtype ?? 'on-demand'}}"
+    breakpoints="sm:470"
+    gesturesdisabled="{{disabled}}"
+    hotkeys="{{hotkeys}}"
+    nohotkeys="{{nohotkeys}}"
+    novolumepref="{{novolumepref}}"
+    audio="{{audio}}"
+    noautoseektolive="{{noautoseektolive}}"
+    defaultsubtitles="{{defaultsubtitles}}"
+    exportparts="layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer"
+    style="--_pre-playback-place:{{preplaybackplace ?? 'center'}}"
+    id="test"
+  >
+    <slot name="media" slot="media"></slot>
+    <slot name="poster" slot="poster"></slot>
+
+    <media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
+
+    <template if="!audio">
+      <!-- Pre-playback UI -->
+      <div slot="centered-chrome" class="center-controls pre-playback">
+        <template if="streamtype == 'on-demand'">
+          <template if="!breakpointsm"> {{>SeekBackwardButton section="center"}} </template>
+          <template if="!breakpointsm"> {{>PlayButton section="center"}} </template>
+          <template if="breakpointsm"> {{>PrePlayButton section="center"}} </template>
+          <template if="!breakpointsm"> {{>SeekForwardButton section="center"}} </template>
+        </template>
+
+        <template if="streamtype == 'live'">
+          <template if="!breakpointsm">
+            <template if="targetlivewindow > 0"> {{>SeekBackwardButton section="center"}} </template>
+          </template>
+          <template if="!breakpointsm"> {{>PlayButton section="center"}} </template>
+          <template if="breakpointsm"> {{>PrePlayButton section="center"}} </template>
+          <template if="!breakpointsm">
+            <template if="targetlivewindow > 0"> {{>SeekForwardButton section="center"}} </template>
+          </template>
+        </template>
+      </div>
+
+      <!-- Auotplay centered unmute button -->
+      <!--
+        todo: figure out how show this with available state variables
+        needs to show when:
+        - autoplay is enabled
+        - playback has been successful
+        - audio is muted
+        - in place / instead of the pre-plaback play button
+        - not to show again after user has interacted with this button
+          - OR user has interacted with the mute button in the control bar
+      -->
+      <!-- 
+        There should be a >MuteButton to the left of the "Unmute" text, but a templating bug
+        makes it appear even if commented out in the markup, add it back when code is un-commented
+      -->
+      <!-- <div slot="centered-chrome" class="autoplay-unmute">
+        <div role="button" class="autoplay-unmute-btn">Unmute</div>
+      </div> -->
+
+      <template if="streamtype == 'on-demand'">
+        <template if="breakpointsm">
+          <media-control-bar slot="top-chrome">{{>TitleDisplay}} </media-control-bar>
+        </template>
+        {{>TimeRange}}
+        <media-control-bar part="bottom">
+          <template if="breakpointsm">
+            {{>PlayButton}} {{>SeekBackwardButton}} {{>SeekForwardButton}} {{>TimeDisplay}}
+          </template>
+          {{>MuteButton}} {{>VolumeRange}}
+          <div class="spacer"></div>
+          <template if="breakpointsm"> {{>PlaybackRateButton}} </template>
+          {{>CaptionsMenuButton}} {{>AirplayButton}} {{>CastButton}}
+          <template if="breakpointsm"> {{>PipButton}} </template>
+          {{>FullscreenButton}}
+        </media-control-bar>
+      </template>
+
+      <template if="streamtype == 'live'">
+        <media-control-bar slot="top-chrome">
+          {{>LiveButton}}
+          <template if="breakpointsm"> {{>TitleDisplay}} </template>
+        </media-control-bar>
+        <template if="targetlivewindow > 0">{{>TimeRange}}</template>
+        <media-control-bar part="bottom">
+          <template if="breakpointsm">
+            {{>PlayButton}}
+            <template if="targetlivewindow > 0"> {{>SeekBackwardButton}} {{>SeekForwardButton}} </template>
+          </template>
+          {{>MuteButton}}
+          <div class="spacer"></div>
+          {{>CaptionsMenuButton}} {{>AirplayButton}} {{>CastButton}}
+          <template if="breakpointsm">{{>PipButton}}</template>
+          {{>FullscreenButton}}
+        </media-control-bar>
+      </template>
+    </template>
+
+    <template if="audio">
+      <template if="streamtype == 'on-demand'">
+        <template if="title">
+          <media-control-bar>{{>TitleDisplay}}</media-control-bar>
+        </template>
+        <media-control-bar part="bottom">
+          {{>PlayButton}}
+          <template if="breakpointsm"> {{>SeekBackwardButton}} {{>SeekForwardButton}} </template>
+          {{>MuteButton}}
+          <template if="breakpointsm">{{>VolumeRange}}</template>
+          {{>TimeDisplay}} {{>TimeRange}}
+          <div class="spacer"></div>
+          <template if="breakpointsm">{{>PlaybackRateButton}}</template>
+          {{>AirplayButton}} {{>CastButton}}
+        </media-control-bar>
+      </template>
+
+      <template if="streamtype == 'live'">
+        <template if="title">
+          <media-control-bar>{{>TitleDisplay}}</media-control-bar>
+        </template>
+        <media-control-bar part="bottom">
+          <template if="breakpointsm">
+            {{>PlayButton}} {{>LiveButton section="bottom"}} {{>MuteButton}} {{>VolumeRange}}
+            <template if="targetlivewindow > 0"> {{>SeekBackwardButton}} {{>SeekForwardButton}} </template>
+          </template>
+          <template if="targetlivewindow > 0"> {{>TimeDisplay}} {{>TimeRange}} </template>
+          <div class="spacer"></div>
+          {{>AirplayButton}} {{>CastButton}}
+        </media-control-bar>
+      </template>
+    </template>
+
+    <slot></slot>
+  </media-controller>
+</template>
+`;
+
+// src/polyfills/index.ts
+var EventTarget = class {
+  addEventListener() {
+  }
+  removeEventListener() {
+  }
+  dispatchEvent(_event) {
+    return true;
+  }
+};
+if (typeof DocumentFragment === "undefined") {
+  class DocumentFragment3 extends EventTarget {
+  }
+  globalThis.DocumentFragment = DocumentFragment3;
+}
+var HTMLElement = class extends EventTarget {
+};
+var HTMLVideoElement = class extends EventTarget {
+};
+var customElements = {
+  get(_name) {
+    return void 0;
+  },
+  define(_name, _constructor, _options) {
+  },
+  upgrade(_root) {
+  },
+  whenDefined(_name) {
+    return Promise.resolve(HTMLElement);
+  }
+};
+var _detail;
+var CustomEvent = class {
+  constructor(typeArg, eventInitDict = {}) {
+    __privateAdd(this, _detail, void 0);
+    __privateSet(this, _detail, eventInitDict == null ? void 0 : eventInitDict.detail);
+  }
+  get detail() {
+    return __privateGet(this, _detail);
+  }
+  initCustomEvent() {
+  }
+};
+_detail = new WeakMap();
+function createElement(_tagName, _options) {
+  return new HTMLElement();
+}
+var globalThisShim = {
+  document: {
+    createElement
+  },
+  DocumentFragment,
+  customElements,
+  CustomEvent,
+  EventTarget,
+  HTMLElement,
+  HTMLVideoElement
+};
+var isServer = typeof window === "undefined" || typeof globalThis.customElements === "undefined";
+var internalGlobalThis = isServer ? globalThisShim : globalThis;
+var internalDocument = isServer ? globalThisShim.document : globalThis.document;
+
+// ../../node_modules/media-chrome/dist/utils/server-safe-globals.js
+var EventTarget2 = class {
+  addEventListener() {
+  }
+  removeEventListener() {
+  }
+  dispatchEvent() {
+    return true;
+  }
+};
+var ResizeObserver = class {
+  observe() {
+  }
+};
+var documentShim = {
+  createElement: function() {
+    return new globalThisShim2.HTMLElement();
+  },
+  addEventListener() {
+  },
+  removeEventListener() {
+  }
+};
+var globalThisShim2 = {
+  ResizeObserver,
+  document: documentShim,
+  HTMLElement: class HTMLElement2 extends EventTarget2 {
+  },
+  DocumentFragment: class DocumentFragment2 extends EventTarget2 {
+  },
+  customElements: {
+    get: function() {
+    },
+    define: function() {
+    },
+    whenDefined: function() {
+    }
+  },
+  CustomEvent: function CustomEvent2() {
+  },
+  getComputedStyle: function() {
+  }
+};
+var isServer2 = typeof window === "undefined" || typeof window.customElements === "undefined";
+var isShimmed = Object.keys(globalThisShim2).every((key) => key in globalThis);
+var GlobalThis = isServer2 && !isShimmed ? globalThisShim2 : globalThis;
+var Document = isServer2 && !isShimmed ? documentShim : globalThis.document;
+
+// ../../node_modules/media-chrome/dist/utils/template-parts.js
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck2 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet2 = (obj, member, getter) => {
+  __accessCheck2(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd2 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet2 = (obj, member, value, setter) => {
+  __accessCheck2(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _parts;
+var _processor;
+var _items;
+var _value;
+var _element;
+var _attributeName;
+var _namespaceURI;
+var _list;
+var list_get;
+var _parentNode;
+var _nodes;
+var ELEMENT = 1;
+var STRING = 0;
+var PART = 1;
+var defaultProcessor = {
+  processCallback(instance, parts, state) {
+    if (!state)
+      return;
+    for (const [expression, part] of parts) {
+      if (expression in state) {
+        const value = state[expression];
+        if (typeof value === "boolean" && part instanceof AttrPart && typeof part.element[part.attributeName] === "boolean") {
+          part.booleanValue = value;
+        } else if (typeof value === "function" && part instanceof AttrPart) {
+          part.element[part.attributeName] = value;
+        } else {
+          part.value = value;
+        }
+      }
+    }
+  }
+};
+var TemplateInstance = class extends GlobalThis.DocumentFragment {
+  constructor(template2, state, processor2 = defaultProcessor) {
+    var _a2;
+    super();
+    __privateAdd2(this, _parts, void 0);
+    __privateAdd2(this, _processor, void 0);
+    this.append(template2.content.cloneNode(true));
+    __privateSet2(this, _parts, parse(this));
+    __privateSet2(this, _processor, processor2);
+    (_a2 = processor2.createCallback) == null ? void 0 : _a2.call(processor2, this, __privateGet2(this, _parts), state);
+    processor2.processCallback(this, __privateGet2(this, _parts), state);
+  }
+  update(state) {
+    __privateGet2(this, _processor).processCallback(this, __privateGet2(this, _parts), state);
+  }
+};
+_parts = /* @__PURE__ */ new WeakMap();
+_processor = /* @__PURE__ */ new WeakMap();
+var parse = (element, parts = []) => {
+  let type, value;
+  for (let attr of element.attributes || []) {
+    if (attr.value.includes("{{")) {
+      const list = new AttrPartList();
+      for ([type, value] of tokenize(attr.value)) {
+        if (!type)
+          list.append(value);
+        else {
+          const part = new AttrPart(element, attr.name, attr.namespaceURI);
+          list.append(part);
+          parts.push([value, part]);
+        }
+      }
+      attr.value = list.toString();
+    }
+  }
+  for (let node of element.childNodes) {
+    if (node.nodeType === ELEMENT && !(node instanceof HTMLTemplateElement)) {
+      parse(node, parts);
+    } else {
+      if (node.nodeType === ELEMENT || node.data.includes("{{")) {
+        const items = [];
+        if (node.data) {
+          for ([type, value] of tokenize(node.data))
+            if (!type)
+              items.push(new Text(value));
+            else {
+              const part = new ChildNodePart(element);
+              items.push(part);
+              parts.push([value, part]);
+            }
+        } else if (node instanceof HTMLTemplateElement) {
+          const part = new InnerTemplatePart(element, node);
+          items.push(part);
+          parts.push([part.expression, part]);
+        }
+        node.replaceWith(
+          ...items.flatMap((part) => part.replacementNodes || [part])
+        );
+      }
+    }
+  }
+  return parts;
+};
+var mem = {};
+var tokenize = (text) => {
+  let value = "", open = 0, tokens = mem[text], i = 0, c;
+  if (tokens)
+    return tokens;
+  else
+    tokens = [];
+  for (; c = text[i]; i++) {
+    if (c === "{" && text[i + 1] === "{" && text[i - 1] !== "\\" && text[i + 2] && ++open == 1) {
+      if (value)
+        tokens.push([STRING, value]);
+      value = "";
+      i++;
+    } else if (c === "}" && text[i + 1] === "}" && text[i - 1] !== "\\" && !--open) {
+      tokens.push([PART, value.trim()]);
+      value = "";
+      i++;
+    } else
+      value += c || "";
+  }
+  if (value)
+    tokens.push([STRING, (open > 0 ? "{{" : "") + value]);
+  return mem[text] = tokens;
+};
+var FRAGMENT = 11;
+var Part = class {
+  get value() {
+    return "";
+  }
+  set value(val) {
+  }
+  toString() {
+    return this.value;
+  }
+};
+var attrPartToList = /* @__PURE__ */ new WeakMap();
+var AttrPartList = class {
+  constructor() {
+    __privateAdd2(this, _items, []);
+  }
+  [Symbol.iterator]() {
+    return __privateGet2(this, _items).values();
+  }
+  get length() {
+    return __privateGet2(this, _items).length;
+  }
+  item(index) {
+    return __privateGet2(this, _items)[index];
+  }
+  append(...items) {
+    for (const item of items) {
+      if (item instanceof AttrPart) {
+        attrPartToList.set(item, this);
+      }
+      __privateGet2(this, _items).push(item);
+    }
+  }
+  toString() {
+    return __privateGet2(this, _items).join("");
+  }
+};
+_items = /* @__PURE__ */ new WeakMap();
+var AttrPart = class extends Part {
+  constructor(element, attributeName, namespaceURI) {
+    super();
+    __privateAdd2(this, _list);
+    __privateAdd2(this, _value, "");
+    __privateAdd2(this, _element, void 0);
+    __privateAdd2(this, _attributeName, void 0);
+    __privateAdd2(this, _namespaceURI, void 0);
+    __privateSet2(this, _element, element);
+    __privateSet2(this, _attributeName, attributeName);
+    __privateSet2(this, _namespaceURI, namespaceURI);
+  }
+  get attributeName() {
+    return __privateGet2(this, _attributeName);
+  }
+  get attributeNamespace() {
+    return __privateGet2(this, _namespaceURI);
+  }
+  get element() {
+    return __privateGet2(this, _element);
+  }
+  get value() {
+    return __privateGet2(this, _value);
+  }
+  set value(newValue) {
+    if (__privateGet2(this, _value) === newValue)
+      return;
+    __privateSet2(this, _value, newValue);
+    if (!__privateGet2(this, _list, list_get) || __privateGet2(this, _list, list_get).length === 1) {
+      if (newValue == null) {
+        __privateGet2(this, _element).removeAttributeNS(
+          __privateGet2(this, _namespaceURI),
+          __privateGet2(this, _attributeName)
+        );
+      } else {
+        __privateGet2(this, _element).setAttributeNS(
+          __privateGet2(this, _namespaceURI),
+          __privateGet2(this, _attributeName),
+          newValue
+        );
+      }
+    } else {
+      __privateGet2(this, _element).setAttributeNS(
+        __privateGet2(this, _namespaceURI),
+        __privateGet2(this, _attributeName),
+        __privateGet2(this, _list, list_get)
+      );
+    }
+  }
+  get booleanValue() {
+    return __privateGet2(this, _element).hasAttributeNS(
+      __privateGet2(this, _namespaceURI),
+      __privateGet2(this, _attributeName)
+    );
+  }
+  set booleanValue(value) {
+    if (!__privateGet2(this, _list, list_get) || __privateGet2(this, _list, list_get).length === 1)
+      this.value = value ? "" : null;
+    else
+      throw new DOMException("Value is not fully templatized");
+  }
+};
+_value = /* @__PURE__ */ new WeakMap();
+_element = /* @__PURE__ */ new WeakMap();
+_attributeName = /* @__PURE__ */ new WeakMap();
+_namespaceURI = /* @__PURE__ */ new WeakMap();
+_list = /* @__PURE__ */ new WeakSet();
+list_get = function() {
+  return attrPartToList.get(this);
+};
+var ChildNodePart = class extends Part {
+  constructor(parentNode, nodes) {
+    super();
+    __privateAdd2(this, _parentNode, void 0);
+    __privateAdd2(this, _nodes, void 0);
+    __privateSet2(this, _parentNode, parentNode);
+    __privateSet2(this, _nodes, nodes ? [...nodes] : [new Text()]);
+  }
+  get replacementNodes() {
+    return __privateGet2(this, _nodes);
+  }
+  get parentNode() {
+    return __privateGet2(this, _parentNode);
+  }
+  get nextSibling() {
+    return __privateGet2(this, _nodes)[__privateGet2(this, _nodes).length - 1].nextSibling;
+  }
+  get previousSibling() {
+    return __privateGet2(this, _nodes)[0].previousSibling;
+  }
+  get value() {
+    return __privateGet2(this, _nodes).map((node) => node.textContent).join("");
+  }
+  set value(newValue) {
+    this.replace(newValue);
+  }
+  replace(...nodes) {
+    const normalisedNodes = nodes.flat().flatMap(
+      (node) => node == null ? [new Text()] : node.forEach ? [...node] : node.nodeType === FRAGMENT ? [...node.childNodes] : node.nodeType ? [node] : [new Text(node)]
+    );
+    if (!normalisedNodes.length)
+      normalisedNodes.push(new Text());
+    __privateSet2(this, _nodes, swapdom(
+      __privateGet2(this, _nodes)[0].parentNode,
+      __privateGet2(this, _nodes),
+      normalisedNodes,
+      this.nextSibling
+    ));
+  }
+};
+_parentNode = /* @__PURE__ */ new WeakMap();
+_nodes = /* @__PURE__ */ new WeakMap();
+var InnerTemplatePart = class extends ChildNodePart {
+  constructor(parentNode, template2) {
+    let directive = template2.getAttribute("directive") || template2.getAttribute("type");
+    let expression = template2.getAttribute("expression") || template2.getAttribute(directive) || "";
+    if (expression.startsWith("{{"))
+      expression = expression.trim().slice(2, -2).trim();
+    super(parentNode);
+    __publicField(this, "directive");
+    this.expression = expression;
+    this.template = template2;
+    this.directive = directive;
+  }
+};
+function swapdom(parent, a, b, end = null) {
+  let i = 0, cur, next, bi, n = b.length, m = a.length;
+  while (i < n && i < m && a[i] == b[i])
+    i++;
+  while (i < n && i < m && b[n - 1] == a[m - 1])
+    end = b[--m, --n];
+  if (i == m)
+    while (i < n)
+      parent.insertBefore(b[i++], end);
+  if (i == n)
+    while (i < m)
+      parent.removeChild(a[i++]);
+  else {
+    cur = a[i];
+    while (i < n) {
+      bi = b[i++], next = cur ? cur.nextSibling : end;
+      if (cur == bi)
+        cur = next;
+      else if (i < n && b[i] == next)
+        parent.replaceChild(bi, cur), cur = next;
+      else
+        parent.insertBefore(bi, cur);
+    }
+    while (cur != end)
+      next = cur.nextSibling, parent.removeChild(cur), cur = next;
+  }
+  return b;
+}
+
+// ../../node_modules/media-chrome/dist/utils/utils.js
+function camelCase(name) {
+  return name.replace(/[-_]([a-z])/g, ($0, $1) => $1.toUpperCase());
+}
+function isNumericString(str) {
+  if (typeof str != "string")
+    return false;
+  return !isNaN(str) && !isNaN(parseFloat(str));
+}
+
+// ../../node_modules/media-chrome/dist/utils/template-processor.js
+var pipeModifiers = {
+  string: (value) => String(value)
+};
+var PartialTemplate = class {
+  constructor(template2) {
+    this.template = template2;
+    this.state = void 0;
+  }
+};
+var templates = /* @__PURE__ */ new WeakMap();
+var templateInstances = /* @__PURE__ */ new WeakMap();
+var Directives = {
+  partial: (part, state) => {
+    state[part.expression] = new PartialTemplate(part.template);
+  },
+  if: (part, state) => {
+    var _a2;
+    if (evaluateExpression(part.expression, state)) {
+      if (templates.get(part) !== part.template) {
+        templates.set(part, part.template);
+        const tpl = new TemplateInstance(part.template, state, processor);
+        part.replace(tpl);
+        templateInstances.set(part, tpl);
+      } else {
+        (_a2 = templateInstances.get(part)) == null ? void 0 : _a2.update(state);
+      }
+    } else {
+      part.replace("");
+      templates.delete(part);
+      templateInstances.delete(part);
+    }
+  }
+};
+var DirectiveNames = Object.keys(Directives);
+var processor = {
+  processCallback(instance, parts, state) {
+    var _a2, _b2;
+    if (!state)
+      return;
+    for (const [expression, part] of parts) {
+      if (part instanceof InnerTemplatePart) {
+        if (!part.directive) {
+          const directive = DirectiveNames.find((n) => part.template.hasAttribute(n));
+          if (directive) {
+            part.directive = directive;
+            part.expression = part.template.getAttribute(directive);
+          }
+        }
+        (_a2 = Directives[part.directive]) == null ? void 0 : _a2.call(Directives, part, state);
+        continue;
+      }
+      let value = evaluateExpression(expression, state);
+      if (value instanceof PartialTemplate) {
+        if (templates.get(part) !== value.template) {
+          templates.set(part, value.template);
+          value = new TemplateInstance(
+            value.template,
+            value.state,
+            processor
+          );
+          part.value = value;
+          templateInstances.set(part, value);
+        } else {
+          (_b2 = templateInstances.get(part)) == null ? void 0 : _b2.update(value.state);
+        }
+        continue;
+      }
+      if (value) {
+        if (part instanceof AttrPart) {
+          if (part.attributeName.startsWith("aria-")) {
+            value = String(value);
+          }
+        }
+        if (part instanceof AttrPart) {
+          if (typeof value === "boolean") {
+            part.booleanValue = value;
+          } else if (typeof value === "function") {
+            part.element[part.attributeName] = value;
+          } else {
+            part.value = value;
+          }
+        } else {
+          part.value = value;
+          templates.delete(part);
+          templateInstances.delete(part);
+        }
+      } else {
+        if (part instanceof AttrPart) {
+          part.value = void 0;
+        } else {
+          part.value = void 0;
+          templates.delete(part);
+          templateInstances.delete(part);
+        }
+      }
+    }
+  }
+};
+var operators = {
+  "!": (a) => !a,
+  "!!": (a) => !!a,
+  "==": (a, b) => a == b,
+  "!=": (a, b) => a != b,
+  ">": (a, b) => a > b,
+  ">=": (a, b) => a >= b,
+  "<": (a, b) => a < b,
+  "<=": (a, b) => a <= b,
+  "??": (a, b) => a != null ? a : b,
+  "|": (a, b) => {
+    var _a2;
+    return (_a2 = pipeModifiers[b]) == null ? void 0 : _a2.call(pipeModifiers, a);
+  }
+};
+function tokenizeExpression(expr) {
+  return tokenize2(expr, {
+    boolean: /true|false/,
+    number: /-?\d+\.?\d*/,
+    string: /(["'])((?:\\.|[^\\])*?)\1/,
+    operator: /[!=><][=!]?|\?\?|\|/,
+    ws: /\s+/,
+    param: /[$a-z_][$\w]*/i
+  }).filter(({ type }) => type !== "ws");
+}
+function evaluateExpression(expr, state = {}) {
+  var _a2, _b2, _c, _d, _e, _f, _g;
+  const tokens = tokenizeExpression(expr);
+  if (tokens.length === 0 || tokens.some(({ type }) => !type)) {
+    return invalidExpression(expr);
+  }
+  if (((_a2 = tokens[0]) == null ? void 0 : _a2.token) === ">") {
+    const partial = state[(_b2 = tokens[1]) == null ? void 0 : _b2.token];
+    if (!partial) {
+      return invalidExpression(expr);
+    }
+    const partialState = { ...state };
+    partial.state = partialState;
+    const args = tokens.slice(2);
+    for (let i = 0; i < args.length; i += 3) {
+      const name = (_c = args[i]) == null ? void 0 : _c.token;
+      const operator = (_d = args[i + 1]) == null ? void 0 : _d.token;
+      const value = (_e = args[i + 2]) == null ? void 0 : _e.token;
+      if (name && operator === "=") {
+        partialState[name] = getParamValue(value, state);
+      }
+    }
+    return partial;
+  }
+  if (tokens.length === 1) {
+    if (!isValidParam(tokens[0])) {
+      return invalidExpression(expr);
+    }
+    return getParamValue(tokens[0].token, state);
+  }
+  if (tokens.length === 2) {
+    const operator = (_f = tokens[0]) == null ? void 0 : _f.token;
+    const run = operators[operator];
+    if (!run || !isValidParam(tokens[1])) {
+      return invalidExpression(expr);
+    }
+    const a = getParamValue(tokens[1].token, state);
+    return run(a);
+  }
+  if (tokens.length === 3) {
+    const operator = (_g = tokens[1]) == null ? void 0 : _g.token;
+    const run = operators[operator];
+    if (!run || !isValidParam(tokens[0]) || !isValidParam(tokens[2])) {
+      return invalidExpression(expr);
+    }
+    const a = getParamValue(tokens[0].token, state);
+    if (operator === "|") {
+      return run(a, tokens[2].token);
+    }
+    const b = getParamValue(tokens[2].token, state);
+    return run(a, b);
+  }
+}
+function invalidExpression(expr) {
+  console.warn(`Warning: invalid expression \`${expr}\``);
+  return false;
+}
+function isValidParam({ type }) {
+  return ["number", "boolean", "string", "param"].includes(type);
+}
+function getParamValue(raw, state) {
+  const firstChar = raw[0];
+  const lastChar = raw.slice(-1);
+  if (raw === "true" || raw === "false") {
+    return raw === "true";
+  }
+  if (firstChar === lastChar && [`'`, `"`].includes(firstChar)) {
+    return raw.slice(1, -1);
+  }
+  if (isNumericString(raw)) {
+    return parseFloat(raw);
+  }
+  return state[raw];
+}
+function tokenize2(str, parsers) {
+  let len, match, token, tokens = [];
+  while (str) {
+    token = null;
+    len = str.length;
+    for (let key in parsers) {
+      match = parsers[key].exec(str);
+      if (match && match.index < len) {
+        token = {
+          token: match[0],
+          type: key,
+          matches: match.slice(1)
+        };
+        len = match.index;
+      }
+    }
+    if (len) {
+      tokens.push({
+        token: str.substr(0, len),
+        type: void 0
+      });
+    }
+    if (token) {
+      tokens.push(token);
+    }
+    str = str.substr(len + (token ? token.token.length : 0));
+  }
+  return tokens;
+}
+
+// ../../node_modules/media-chrome/dist/media-theme-element.js
+var __defProp2 = Object.defineProperty;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField2 = (obj, key, value) => {
+  __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck3 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet3 = (obj, member, getter) => {
+  __accessCheck3(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd3 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet3 = (obj, member, value, setter) => {
+  __accessCheck3(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck3(obj, member, "access private method");
+  return method;
+};
+var _template;
+var _prevTemplate;
+var _prevTemplateId;
+var _upgradeProperty;
+var upgradeProperty_fn;
+var _updateTemplate;
+var updateTemplate_fn;
+var observedMediaAttributes = {
+  mediatargetlivewindow: "targetlivewindow",
+  mediastreamtype: "streamtype"
+};
+var prependTemplate = Document.createElement("template");
+prependTemplate.innerHTML = `
+  <style>
+    :host {
+      display: inline-block;
+      line-height: 0;
+    }
+
+    media-controller {
+      width: 100%;
+      height: 100%;
+    }
+
+    media-controller:not([mediasubtitleslist]) media-captions-selectmenu,
+    media-captions-button:not([mediasubtitleslist]),
+    media-rendition-selectmenu[mediarenditionunavailable],
+    media-volume-range[mediavolumeunavailable],
+    media-airplay-button[mediaairplayunavailable],
+    media-fullscreen-button[mediafullscreenunavailable],
+    media-cast-button[mediacastunavailable],
+    media-pip-button[mediapipunavailable] {
+      display: none;
+    }
+  </style>
+`;
+var MediaThemeElement = class extends GlobalThis.HTMLElement {
+  constructor() {
+    super();
+    __privateAdd3(this, _upgradeProperty);
+    __privateAdd3(this, _updateTemplate);
+    __publicField2(this, "renderRoot");
+    __publicField2(this, "renderer");
+    __privateAdd3(this, _template, void 0);
+    __privateAdd3(this, _prevTemplate, void 0);
+    __privateAdd3(this, _prevTemplateId, void 0);
+    if (this.shadowRoot) {
+      this.renderRoot = this.shadowRoot;
+    } else {
+      this.renderRoot = this.attachShadow({ mode: "open" });
+      this.createRenderer();
+    }
+    const observer = new MutationObserver((mutationList) => {
+      if (mutationList.some((mutation) => {
+        const target = mutation.target;
+        if (target === this)
+          return true;
+        if (target.localName !== "media-controller")
+          return false;
+        if (observedMediaAttributes[mutation.attributeName])
+          return true;
+        if (mutation.attributeName.startsWith("breakpoint"))
+          return true;
+        return false;
+      })) {
+        this.render();
+      }
+    });
+    observer.observe(this, { attributes: true });
+    observer.observe(this.renderRoot, {
+      attributes: true,
+      subtree: true
+    });
+    __privateMethod(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
+  }
+  get mediaController() {
+    return this.renderRoot.querySelector("media-controller");
+  }
+  get template() {
+    var _a2;
+    return (_a2 = __privateGet3(this, _template)) != null ? _a2 : this.constructor.template;
+  }
+  set template(element) {
+    __privateSet3(this, _prevTemplateId, null);
+    __privateSet3(this, _template, element);
+    this.createRenderer();
+  }
+  get props() {
+    var _a2, _b2, _c;
+    const observedAttributes = [
+      ...Array.from((_b2 = (_a2 = this.mediaController) == null ? void 0 : _a2.attributes) != null ? _b2 : []).filter(({ name }) => {
+        return observedMediaAttributes[name] || name.startsWith("breakpoint");
+      }),
+      ...Array.from(this.attributes)
+    ];
+    const props = {};
+    for (let attr of observedAttributes) {
+      const name = (_c = observedMediaAttributes[attr.name]) != null ? _c : camelCase(attr.name);
+      let { value } = attr;
+      if (value != null) {
+        if (isNumericString(value)) {
+          value = parseFloat(value);
+        }
+        props[name] = value === "" ? true : value;
+      } else {
+        props[name] = false;
+      }
+    }
+    return props;
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (attrName === "template" && oldValue != newValue) {
+      __privateMethod(this, _updateTemplate, updateTemplate_fn).call(this);
+    }
+  }
+  connectedCallback() {
+    __privateMethod(this, _updateTemplate, updateTemplate_fn).call(this);
+  }
+  createRenderer() {
+    if (this.template && this.template !== __privateGet3(this, _prevTemplate)) {
+      __privateSet3(this, _prevTemplate, this.template);
+      this.renderer = new TemplateInstance(
+        this.template,
+        this.props,
+        this.constructor.processor
+      );
+      this.renderRoot.textContent = "";
+      this.renderRoot.append(
+        prependTemplate.content.cloneNode(true),
+        this.renderer
+      );
+    }
+  }
+  render() {
+    var _a2;
+    (_a2 = this.renderer) == null ? void 0 : _a2.update(this.props);
+  }
+};
+_template = /* @__PURE__ */ new WeakMap();
+_prevTemplate = /* @__PURE__ */ new WeakMap();
+_prevTemplateId = /* @__PURE__ */ new WeakMap();
+_upgradeProperty = /* @__PURE__ */ new WeakSet();
+upgradeProperty_fn = function(prop) {
+  if (Object.prototype.hasOwnProperty.call(this, prop)) {
+    const value = this[prop];
+    delete this[prop];
+    this[prop] = value;
+  }
+};
+_updateTemplate = /* @__PURE__ */ new WeakSet();
+updateTemplate_fn = function() {
+  var _a2;
+  const templateId = this.getAttribute("template");
+  if (!templateId || templateId === __privateGet3(this, _prevTemplateId))
+    return;
+  const rootNode = this.getRootNode();
+  const template2 = (_a2 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a2.call(rootNode, templateId);
+  if (template2) {
+    __privateSet3(this, _prevTemplateId, templateId);
+    __privateSet3(this, _template, template2);
+    this.createRenderer();
+    return;
+  }
+  if (isValidUrl(templateId)) {
+    __privateSet3(this, _prevTemplateId, templateId);
+    request(templateId).then((data) => {
+      const template22 = Document.createElement("template");
+      template22.innerHTML = data;
+      __privateSet3(this, _template, template22);
+      this.createRenderer();
+    }).catch(console.error);
+  }
+};
+__publicField2(MediaThemeElement, "template");
+__publicField2(MediaThemeElement, "observedAttributes", ["template"]);
+__publicField2(MediaThemeElement, "processor", processor);
+function isValidUrl(url) {
+  if (!/^(\/|\.\/|https?:\/\/)/.test(url))
+    return false;
+  const base = /^https?:\/\//.test(url) ? void 0 : location.origin;
+  try {
+    new URL(url, base);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
+async function request(resource) {
+  const response = await fetch(resource);
+  if (response.status !== 200) {
+    throw new Error(`Failed to load resource: the server responded with a status of ${response.status}`);
+  }
+  return response.text();
+}
+if (!GlobalThis.customElements.get("media-theme")) {
+  GlobalThis.customElements.define("media-theme", MediaThemeElement);
+}
+
+// src/themes/2023/index.ts
+var template = internalDocument.createElement("template");
+if ("innerHTML" in template)
+  template.innerHTML = __default;
+var _a, _b;
+var MediaTheme2023 = class extends MediaThemeElement {
+};
+MediaTheme2023.template = (_b = (_a = template.content) == null ? void 0 : _a.children) == null ? void 0 : _b[0];
+if (!internalGlobalThis.customElements.get("media-theme-2023")) {
+  internalGlobalThis.customElements.define("media-theme-2023", MediaTheme2023);
+}
+var __default2 = MediaTheme2023;
+export {
+  __default2 as default
+};