sanity-plugin-mux-input 2.1.1 → 2.2.0

package/lib/index.js

@@ -1,3 +1,4027 @@
-import 'sanity';
-export { defaultConfig, muxInput } from './_chunks/index-71899191.js';
+import { useClient as useClient$1, createHookFromObservableFactory, useDocumentStore, collate, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, useDocumentValues, isReference, useProjectId, useDataset, PatchEvent, unset, setIfMissing, set, LinearProgress, definePlugin } from 'sanity';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, CheckmarkIcon, ErrorOutlineIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, LockIcon, PlayIcon, UploadIcon, PlugIcon, ResetIcon, EllipsisVerticalIcon, DocumentVideoIcon } from '@sanity/icons';
+import { MenuButton, Button, Menu, MenuItem, Box, Spinner, Stack, Flex, Text, Card, Tooltip, Inline, useToast, Dialog, Heading, Checkbox, TabList, Tab, TabPanel, TextInput, Label as Label$1, Grid, Code, useClickOutside, Popover, MenuDivider, rem } from '@sanity/ui';
+import React, { useState, useMemo, useId, memo, isValidElement, useEffect, useRef, useCallback, createElement, forwardRef, Component, useReducer, Suspense } from 'react';
+import { words, trim, toLower, uniq, compact, isString, isNumber } from 'lodash';
+import MuxPlayer from '@mux/mux-player-react';
+import { suspend, clear, preload } from 'suspend-react';
+import styled, { css } from 'styled-components';
+import { usePaneRouter } from 'sanity/desk';
+import { IntentLink } from 'sanity/router';
+import { useMemoObservable } from 'react-rx';
+import useSWR from 'swr';
+import { Observable, defer, concat, of, throwError, from, Subject } from 'rxjs';
+import { switchMap, mergeMap, catchError, mergeMapTo, takeUntil, tap } from 'rxjs/operators';
+import { uuid } from '@sanity/uuid';
+import { UpChunk } from '@mux/upchunk';
+import { isValidElementType } from 'react-is';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import { useErrorBoundary } from 'use-error-boundary';
+const ToolIcon = () => /* @__PURE__ */jsx("svg", {
+  stroke: "currentColor",
+  fill: "currentColor",
+  strokeWidth: "0",
+  viewBox: "0 0 24 24",
+  height: "1em",
+  width: "1em",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /* @__PURE__ */jsx("path", {
+    d: "M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z"
+  })
+});
+const SANITY_API_VERSION = "2022-09-14";
+function useClient() {
+  return useClient$1({
+    apiVersion: SANITY_API_VERSION
+  });
+}
+const SPECIAL_CHARS = /([^!@#$%^&*(),\\/?";:{}|[\]+<>\s-])+/g;
+const STRIP_EDGE_CHARS = /(^[.]+)|([.]+$)/;
+function tokenize(string) {
+  return (string.match(SPECIAL_CHARS) || []).map(token => token.replace(STRIP_EDGE_CHARS, ""));
+}
+function toGroqParams(terms) {
+  const params = {};
+  return terms.reduce((acc, term, i) => {
+    acc["t".concat(i)] = "*".concat(term, "*");
+    return acc;
+  }, params);
+}
+function extractTermsFromQuery(query) {
+  const quotedQueries = [];
+  const unquotedQuery = query.replace(/("[^"]*")/g, match => {
+    if (words(match).length > 1) {
+      quotedQueries.push(match);
+      return "";
+    }
+    return match;
+  });
+  const quotedTerms = quotedQueries.map(str => trim(toLower(str)));
+  const remainingTerms = uniq(compact(tokenize(toLower(unquotedQuery))));
+  return [...quotedTerms, ...remainingTerms];
+}
+const SEARCH_PATHS = ["filename", "assetId", "_id"];
+function createConstraints(terms) {
+  const constraints = terms.map((_term, i) => SEARCH_PATHS.map(joinedPath => "".concat(joinedPath, " match $t").concat(i))).filter(constraint => constraint.length > 0);
+  return constraints.map(constraint => "(".concat(constraint.join(" || "), ")"));
+}
+function createSearchFilter(query) {
+  const terms = extractTermsFromQuery(query);
+  return {
+    filter: createConstraints(terms),
+    params: {
+      ...toGroqParams(terms)
+    }
+  };
+}
+const ASSET_SORT_OPTIONS = {
+  createdDesc: {
+    groq: "_createdAt desc",
+    label: "Newest first"
+  },
+  createdAsc: {
+    groq: "_createdAt asc",
+    label: "First created (oldest)"
+  },
+  filenameAsc: {
+    groq: "filename asc",
+    label: "By filename (A-Z)"
+  },
+  filenameDesc: {
+    groq: "filename desc",
+    label: "By filename (Z-A)"
+  }
+};
+const useAssetDocuments = createHookFromObservableFactory(_ref => {
+  let {
+    documentStore,
+    sort,
+    searchQuery
+  } = _ref;
+  const search = createSearchFilter(searchQuery);
+  const filter = ['_type == "mux.videoAsset"', ...search.filter].filter(Boolean).join(" && ");
+  const query = ASSET_SORT_OPTIONS[sort].groq;
+  return documentStore.listenQuery( /* groq */
+  "*[".concat(filter, "] | order(").concat(query, ")"), search.params, {
+    apiVersion: SANITY_API_VERSION
+  });
+});
+function useAssets() {
+  const documentStore = useDocumentStore();
+  const [sort, setSort] = useState("createdDesc");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [assetDocuments = [], isLoading] = useAssetDocuments({
+    documentStore,
+    sort,
+    searchQuery
+  });
+  const assets = useMemo(() =>
+  // Avoid displaying both drafts & published assets by collating them together and giving preference to drafts
+  collate(assetDocuments).map(collated => ({
+    ...(collated.draft || collated.published || {}),
+    _id: collated.id
+  })), [assetDocuments]);
+  return {
+    assets,
+    isLoading,
+    sort,
+    searchQuery,
+    setSort,
+    setSearchQuery
+  };
+}
+const CONTEXT_MENU_POPOVER_PROPS = {
+  constrainSize: true,
+  placement: "bottom",
+  portal: true,
+  width: 0
+};
+function SelectSortOptions(props) {
+  const id = useId();
+  return /* @__PURE__ */jsx(MenuButton, {
+    button: /* @__PURE__ */jsx(Button, {
+      text: "Sort",
+      icon: SortIcon,
+      mode: "bleed",
+      padding: 3,
+      style: {
+        cursor: "pointer"
+      }
+    }),
+    id,
+    menu: /* @__PURE__ */jsx(Menu, {
+      children: Object.entries(ASSET_SORT_OPTIONS).map(_ref2 => {
+        let [type, {
+          label
+        }] = _ref2;
+        return /* @__PURE__ */jsx(MenuItem, {
+          "data-as": "button",
+          onClick: () => props.setSort(type),
+          padding: 3,
+          tone: "default",
+          text: label,
+          pressed: type === props.sort
+        }, type);
+      })
+    }),
+    popover: CONTEXT_MENU_POPOVER_PROPS
+  });
+}
+const SpinnerBox = () => /* @__PURE__ */jsx(Box, {
+  style: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "150px"
+  },
+  children: /* @__PURE__ */jsx(Spinner, {})
+});
+const name$1 = "mux-input";
+const cacheNs = "sanity-plugin-mux-input";
+const muxSecretsDocumentId = "secrets.mux";
+const DIALOGS_Z_INDEX = 6e4;
+const THUMBNAIL_ASPECT_RATIO = 16 / 9;
+const MIN_ASPECT_RATIO = 1;
+function FormField(props) {
+  const {
+    children,
+    title,
+    description,
+    inputId
+  } = props;
+  return /* @__PURE__ */jsxs(Stack, {
+    space: 1,
+    children: [/* @__PURE__ */jsx(Flex, {
+      align: "flex-end",
+      children: /* @__PURE__ */jsx(Box, {
+        flex: 1,
+        paddingY: 2,
+        children: /* @__PURE__ */jsxs(Stack, {
+          space: 2,
+          children: [/* @__PURE__ */jsx(Text, {
+            as: "label",
+            htmlFor: inputId,
+            weight: "semibold",
+            size: 1,
+            children: title || /* @__PURE__ */jsx("em", {
+              children: "Untitled"
+            })
+          }), description && /* @__PURE__ */jsx(Text, {
+            muted: true,
+            size: 1,
+            children: description
+          })]
+        })
+      })
+    }), /* @__PURE__ */jsx("div", {
+      children
+    })]
+  });
+}
+var FormField$1 = memo(FormField);
+const IconInfo = props => {
+  const Icon = props.icon;
+  return /* @__PURE__ */jsxs(Flex, {
+    gap: 2,
+    align: "center",
+    padding: 1,
+    children: [/* @__PURE__ */jsx(Text, {
+      size: (props.size || 1) + 1,
+      muted: true,
+      children: /* @__PURE__ */jsx(Icon, {})
+    }), /* @__PURE__ */jsx(Text, {
+      size: props.size || 1,
+      muted: props.muted,
+      children: props.text
+    })]
+  });
+};
+function ResolutionIcon(props) {
+  return /* @__PURE__ */jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */jsx("path", {
+      fill: "currentColor",
+      d: "M20 9V6h-3V4h5v5h-2ZM2 9V4h5v2H4v3H2Zm15 11v-2h3v-3h2v5h-5ZM2 20v-5h2v3h3v2H2Zm4-4V8h12v8H6Zm2-2h8v-4H8v4Zm0 0v-4v4Z"
+    })
+  });
+}
+function StopWatchIcon(props) {
+  return /* @__PURE__ */jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 512 512",
+    ...props,
+    children: [/* @__PURE__ */jsx("path", {
+      d: "M232 306.667h48V176h-48v130.667z",
+      fill: "currentColor"
+    }), /* @__PURE__ */jsx("path", {
+      d: "M407.67 170.271l30.786-30.786-33.942-33.941-30.785 30.786C341.217 111.057 300.369 96 256 96 149.961 96 64 181.961 64 288s85.961 192 192 192 192-85.961 192-192c0-44.369-15.057-85.217-40.33-117.729zm-45.604 223.795C333.734 422.398 296.066 438 256 438s-77.735-15.602-106.066-43.934C121.602 365.735 106 328.066 106 288s15.602-77.735 43.934-106.066C178.265 153.602 215.934 138 256 138s77.734 15.602 106.066 43.934C390.398 210.265 406 247.934 406 288s-15.602 77.735-43.934 106.066z",
+      fill: "currentColor"
+    }), /* @__PURE__ */jsx("path", {
+      d: "M192 32h128v48H192z",
+      fill: "currentColor"
+    })]
+  });
+}
+const _id = "secrets.mux";
+function readSecrets(client) {
+  const {
+    projectId,
+    dataset
+  } = client.config();
+  return suspend(async () => {
+    const data = await client.fetch( /* groq */
+    "*[_id == $_id][0]{\n        token,\n        secretKey,\n        enableSignedUrls,\n        signingKeyId,\n        signingKeyPrivate\n      }", {
+      _id
+    });
+    return {
+      token: (data == null ? void 0 : data.token) || null,
+      secretKey: (data == null ? void 0 : data.secretKey) || null,
+      enableSignedUrls: Boolean(data == null ? void 0 : data.enableSignedUrls) || false,
+      signingKeyId: (data == null ? void 0 : data.signingKeyId) || null,
+      signingKeyPrivate: (data == null ? void 0 : data.signingKeyPrivate) || null
+    };
+  }, [cacheNs, _id, projectId, dataset]);
+}
+function generateJwt(client, playbackId, aud, payload) {
+  const {
+    signingKeyId,
+    signingKeyPrivate
+  } = readSecrets(client);
+  if (!signingKeyId) {
+    throw new TypeError("Missing signingKeyId");
+  }
+  if (!signingKeyPrivate) {
+    throw new TypeError("Missing signingKeyPrivate");
+  }
+  const {
+    default: sign
+  } = suspend(() => import('jsonwebtoken-esm/sign'), ["jsonwebtoken-esm/sign"]);
+  return sign(payload ? JSON.parse(JSON.stringify(payload, (_, v) => v != null ? v : void 0)) : {}, atob(signingKeyPrivate), {
+    algorithm: "RS256",
+    keyid: signingKeyId,
+    audience: aud,
+    subject: playbackId,
+    noTimestamp: true,
+    expiresIn: "12h"
+  });
+}
+function getPlaybackId(asset) {
+  if (!(asset == null ? void 0 : asset.playbackId)) {
+    console.error("Asset is missing a playbackId", {
+      asset
+    });
+    throw new TypeError("Missing playbackId");
+  }
+  return asset.playbackId;
+}
+function getPlaybackPolicy(asset) {
+  var _a, _b, _c, _d;
+  return (_d = (_c = (_b = (_a = asset.data) == null ? void 0 : _a.playback_ids) == null ? void 0 : _b[0]) == null ? void 0 : _c.policy) != null ? _d : "public";
+}
+function getVideoSrc(_ref3) {
+  let {
+    asset,
+    client
+  } = _ref3;
+  const playbackId = getPlaybackId(asset);
+  const searchParams = new URLSearchParams();
+  if (getPlaybackPolicy(asset) === "signed") {
+    const token = generateJwt(client, playbackId, "v");
+    searchParams.set("token", token);
+  }
+  return "https://stream.mux.com/".concat(playbackId, ".m3u8?").concat(searchParams);
+}
+var name = "sanity-plugin-mux-input";
+var version = "2.2.0";
+var description = "An input component that integrates Sanity Studio with Mux video encoding/hosting service.";
+var keywords = ["sanity", "video", "mux", "input", "plugin", "sanity-plugin", "media"];
+var homepage = "https://github.com/sanity-io/sanity-plugin-mux-input#readme";
+var bugs = {
+  url: "https://github.com/sanity-io/sanity-plugin-mux-input/issues"
+};
+var repository = {
+  type: "git",
+  url: "git@github.com:sanity-io/sanity-plugin-mux-input.git"
+};
+var license = "MIT";
+var author = "Sanity.io <hello@sanity.io>";
+var sideEffects = false;
+var type = "module";
+var exports = {
+  ".": {
+    types: "./lib/index.d.ts",
+    source: "./src/index.ts",
+    require: "./lib/index.cjs",
+    node: {
+      "import": "./lib/index.cjs.js",
+      require: "./lib/index.cjs"
+    },
+    "import": "./lib/index.js",
+    "default": "./lib/index.js"
+  },
+  "./package.json": "./package.json"
+};
+var main = "./lib/index.cjs";
+var module = "./lib/index.js";
+var source = "./src/index.ts";
+var types = "./lib/index.d.ts";
+var files = ["src", "lib", "sanity.json", "v2-incompatible.js"];
+var scripts = {
+  build: "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
+  clean: "rimraf lib",
+  dev: "next dev",
+  format: "prettier --write --cache --ignore-unknown .",
+  "link-watch": "plugin-kit link-watch",
+  lint: "eslint .",
+  prepare: "husky install || true",
+  prepublishOnly: "run-s build",
+  test: "npm run lint && npm run type-check && npm run build",
+  "type-check": "tsc --noEmit",
+  watch: "pkg-utils watch --strict"
+};
+var dependencies = {
+  "@mux/mux-player-react": "^1.11.4",
+  "@mux/upchunk": "^3",
+  "@sanity/icons": "^2",
+  "@sanity/incompatible-plugin": "^1",
+  "@sanity/ui": "^1",
+  "@sanity/uuid": "^3",
+  "jsonwebtoken-esm": "^1.0.5",
+  lodash: "^4",
+  "react-rx": "^2.1.3",
+  rxjs: "^7",
+  "scroll-into-view-if-needed": "^3",
+  "suspend-react": "^0.1.0",
+  swr: "^2.1.0",
+  "type-fest": "^3.6.1",
+  "use-error-boundary": "^2.0.6"
+};
+var devDependencies = {
+  "@commitlint/cli": "^17.6.7",
+  "@commitlint/config-conventional": "^17.6.7",
+  "@sanity/pkg-utils": "^2.3.10",
+  "@sanity/plugin-kit": "^3.1.7",
+  "@sanity/semantic-release-preset": "^4.1.2",
+  "@sanity/vision": "^3.14.5",
+  "@types/react": "^18.2.18",
+  "@types/styled-components": "^5.1.26",
+  "@typescript-eslint/eslint-plugin": "^5.62.0",
+  "@typescript-eslint/parser": "^5.62.0",
+  "cz-conventional-changelog": "^3.3.0",
+  eslint: "^8.46.0",
+  "eslint-config-prettier": "^8.10.0",
+  "eslint-config-react-app": "^7.0.1",
+  "eslint-config-sanity": "^6.0.0",
+  "eslint-plugin-import": "^2.28.0",
+  "eslint-plugin-prettier": "^4.2.1",
+  "eslint-plugin-react": "^7.33.1",
+  "eslint-plugin-react-hooks": "^4.6.0",
+  "eslint-plugin-simple-import-sort": "^10.0.0",
+  husky: "^8.0.3",
+  "lint-staged": "^13.2.3",
+  next: "^13.4.12",
+  "next-sanity": "^4.3.3",
+  "npm-run-all": "^4.1.5",
+  prettier: "^2.8.8",
+  "prettier-plugin-packagejson": "^2.4.5",
+  react: "^18.2.0",
+  "react-dom": "^18.2.0",
+  "react-is": "^18.2.0",
+  rimraf: "^5.0.0",
+  sanity: "^3.14.5",
+  "styled-components": "^5.3.11",
+  typescript: "^5.1.6"
+};
+var peerDependencies = {
+  react: "^18",
+  "react-is": "^18",
+  sanity: "^3",
+  "styled-components": "^5.2"
+};
+var engines = {
+  node: ">=14"
+};
+var publishConfig = {
+  access: "public"
+};
+var sanityExchangeUrl = "https://www.sanity.io/plugins/sanity-plugin-mux-input";
+var pluginPkg = {
+  name: name,
+  version: version,
+  description: description,
+  keywords: keywords,
+  homepage: homepage,
+  bugs: bugs,
+  repository: repository,
+  license: license,
+  author: author,
+  sideEffects: sideEffects,
+  type: type,
+  exports: exports,
+  main: main,
+  module: module,
+  source: source,
+  types: types,
+  files: files,
+  scripts: scripts,
+  dependencies: dependencies,
+  devDependencies: devDependencies,
+  peerDependencies: peerDependencies,
+  engines: engines,
+  publishConfig: publishConfig,
+  sanityExchangeUrl: sanityExchangeUrl
+};
+function VideoPlayer(_ref4) {
+  let {
+    asset,
+    children,
+    ...props
+  } = _ref4;
+  var _a, _b;
+  const client = useClient();
+  const videoSrc = useMemo(() => (asset == null ? void 0 : asset.playbackId) && getVideoSrc({
+    client,
+    asset
+  }), [asset, client]);
+  const signedToken = useMemo(() => {
+    try {
+      const url = new URL(videoSrc);
+      return url.searchParams.get("token");
+    } catch {
+      return false;
+    }
+  }, [videoSrc]);
+  const [width, height] = ((_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.aspect_ratio) != null ? _b : "16:9").split(":").map(Number);
+  const targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height);
+  const aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio);
+  return /* @__PURE__ */jsx(Card, {
+    tone: "transparent",
+    style: {
+      aspectRatio,
+      position: "relative"
+    },
+    children: videoSrc && /* @__PURE__ */jsxs(Fragment, {
+      children: [/* @__PURE__ */jsx(MuxPlayer, {
+        ...props,
+        playsInline: true,
+        playbackId: asset.playbackId,
+        tokens: signedToken ? {
+          playback: signedToken,
+          thumbnail: signedToken,
+          storyboard: signedToken
+        } : void 0,
+        streamType: "on-demand",
+        preload: "metadata",
+        crossOrigin: "anonymous",
+        metadata: {
+          player_name: "Sanity Admin Dashboard",
+          player_version: pluginPkg.version,
+          page_type: "Preview Player"
+        },
+        style: {
+          height: "100%",
+          width: "100%",
+          display: "block",
+          objectFit: "contain"
+        }
+      }), children]
+    })
+  });
+}
+function deleteAssetOnMux(client, assetId) {
+  const {
+    dataset
+  } = client.config();
+  return client.request({
+    url: "/addons/mux/assets/".concat(dataset, "/").concat(assetId),
+    withCredentials: true,
+    method: "DELETE"
+  });
+}
+async function deleteAsset(_ref5) {
+  let {
+    client,
+    asset,
+    deleteOnMux
+  } = _ref5;
+  if (!(asset == null ? void 0 : asset._id)) return true;
+  try {
+    await client.delete(asset._id);
+  } catch (error) {
+    return "failed-sanity";
+  }
+  if (deleteOnMux && (asset == null ? void 0 : asset.assetId)) {
+    try {
+      await deleteAssetOnMux(client, asset.assetId);
+    } catch (error) {
+      return "failed-mux";
+    }
+  }
+  return true;
+}
+function getAsset(client, assetId) {
+  const {
+    dataset
+  } = client.config();
+  return client.request({
+    url: "/addons/mux/assets/".concat(dataset, "/data/").concat(assetId),
+    withCredentials: true,
+    method: "GET"
+  });
+}
+const getUnknownTypeFallback = (id, typeName) => ({
+  title: /* @__PURE__ */jsxs("em", {
+    children: ["No schema found for type ", /* @__PURE__ */jsx("code", {
+      children: typeName
+    })]
+  }),
+  subtitle: /* @__PURE__ */jsxs("em", {
+    children: ["Document: ", /* @__PURE__ */jsx("code", {
+      children: id
+    })]
+  }),
+  media: () => /* @__PURE__ */jsx(WarningOutlineIcon, {})
+});
+function MissingSchemaType(props) {
+  const {
+    layout,
+    value
+  } = props;
+  return /* @__PURE__ */jsx(SanityDefaultPreview, {
+    ...getUnknownTypeFallback(value._id, value._type),
+    layout
+  });
+}
+function TimeAgo(_ref6) {
+  let {
+    time
+  } = _ref6;
+  const timeAgo = useTimeAgo(time);
+  return /* @__PURE__ */jsxs("span", {
+    title: timeAgo,
+    children: [timeAgo, " ago"]
+  });
+}
+function DraftStatus(props) {
+  const {
+    document
+  } = props;
+  const updatedAt = document && "_updatedAt" in document && document._updatedAt;
+  return /* @__PURE__ */jsx(Tooltip, {
+    portal: true,
+    content: /* @__PURE__ */jsx(Box, {
+      padding: 2,
+      children: /* @__PURE__ */jsx(Text, {
+        size: 1,
+        children: document ? /* @__PURE__ */jsxs(Fragment, {
+          children: ["Edited ", updatedAt && /* @__PURE__ */jsx(TimeAgo, {
+            time: updatedAt
+          })]
+        }) : /* @__PURE__ */jsx(Fragment, {
+          children: "No unpublished edits"
+        })
+      })
+    }),
+    children: /* @__PURE__ */jsx(TextWithTone, {
+      tone: "caution",
+      dimmed: !document,
+      muted: !document,
+      size: 1,
+      children: /* @__PURE__ */jsx(EditIcon, {})
+    })
+  });
+}
+function PublishedStatus(props) {
+  const {
+    document
+  } = props;
+  const updatedAt = document && "_updatedAt" in document && document._updatedAt;
+  return /* @__PURE__ */jsx(Tooltip, {
+    portal: true,
+    content: /* @__PURE__ */jsx(Box, {
+      padding: 2,
+      children: /* @__PURE__ */jsx(Text, {
+        size: 1,
+        children: document ? /* @__PURE__ */jsxs(Fragment, {
+          children: ["Published ", updatedAt && /* @__PURE__ */jsx(TimeAgo, {
+            time: updatedAt
+          })]
+        }) : /* @__PURE__ */jsx(Fragment, {
+          children: "Not published"
+        })
+      })
+    }),
+    children: /* @__PURE__ */jsx(TextWithTone, {
+      tone: "positive",
+      dimmed: !document,
+      muted: !document,
+      size: 1,
+      children: /* @__PURE__ */jsx(PublishIcon, {})
+    })
+  });
+}
+function PaneItemPreview(props) {
+  const {
+    icon,
+    layout,
+    presence,
+    schemaType,
+    value
+  } = props;
+  const title = isRecord(value.title) && isValidElement(value.title) || isString(value.title) || isNumber(value.title) ? value.title : null;
+  const {
+    draft,
+    published,
+    isLoading
+  } = useMemoObservable(() => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id, title), [props.documentPreviewStore, schemaType, value._id, title]);
+  const status = isLoading ? null : /* @__PURE__ */jsxs(Inline, {
+    space: 4,
+    children: [presence && presence.length > 0 && /* @__PURE__ */jsx(DocumentPreviewPresence, {
+      presence
+    }), /* @__PURE__ */jsx(PublishedStatus, {
+      document: published
+    }), /* @__PURE__ */jsx(DraftStatus, {
+      document: draft
+    })]
+  });
+  return /* @__PURE__ */jsx(SanityDefaultPreview, {
+    ...getPreviewValueWithFallback({
+      value,
+      draft,
+      published
+    }),
+    isPlaceholder: isLoading,
+    icon,
+    layout,
+    status
+  });
+}
+function getIconWithFallback(icon, schemaType, defaultIcon) {
+  if (icon === false) {
+    return false;
+  }
+  return icon || schemaType && schemaType.icon || defaultIcon || false;
+}
+function DocumentPreviewInInput(props) {
+  const {
+    ChildLink
+  } = usePaneRouter();
+  return linkProps => /* @__PURE__ */jsx(ChildLink, {
+    childId: props.documentPair.id,
+    childParameters: {
+      type: props.documentPair.type
+    },
+    children: linkProps.children
+  });
+}
+function DocumentPreviewInRool(props) {
+  return linkProps => /* @__PURE__ */jsx(IntentLink, {
+    intent: "edit",
+    params: {
+      id: props.documentPair.id
+    },
+    children: linkProps.children
+  });
+}
+function DocumentPreview(props) {
+  const {
+    schemaType,
+    documentPair
+  } = props;
+  const doc = (documentPair == null ? void 0 : documentPair.draft) || (documentPair == null ? void 0 : documentPair.published);
+  const id = documentPair.id || "";
+  const documentPreviewStore = useDocumentPreviewStore();
+  const schema = useSchema();
+  const documentPresence = useDocumentPresence(id);
+  const hasSchemaType = Boolean(schemaType && schemaType.name && schema.get(schemaType.name));
+  const PreviewComponent = useMemo(() => {
+    if (!doc) return null;
+    if (!schemaType || !hasSchemaType) {
+      return /* @__PURE__ */jsx(MissingSchemaType, {
+        value: doc
+      });
+    }
+    return /* @__PURE__ */jsx(PaneItemPreview, {
+      documentPreviewStore,
+      icon: getIconWithFallback(void 0, schemaType, DocumentIcon),
+      schemaType,
+      layout: "default",
+      value: doc,
+      presence: documentPresence
+    });
+  }, [hasSchemaType, schemaType, documentPresence, doc, documentPreviewStore]);
+  return /* @__PURE__ */jsx(PreviewCard, {
+    __unstable_focusRing: true,
+    as: props.placement === "input" ? DocumentPreviewInInput(props) : DocumentPreviewInRool(props),
+    "data-as": "a",
+    "data-ui": "PaneItem",
+    padding: 2,
+    radius: 2,
+    tone: "inherit",
+    children: PreviewComponent
+  });
+}
+var __freeze$b = Object.freeze;
+var __defProp$c = Object.defineProperty;
+var __template$b = (cooked, raw) => __freeze$b(__defProp$c(cooked, "raw", {
+  value: __freeze$b(raw || cooked.slice())
+}));
+var _a$b;
+const Container = styled(Box)(_a$b || (_a$b = __template$b(["\n  * {\n    color: ", ";\n  }\n  a {\n    text-decoration: none;\n  }\n  h2 {\n    font-size: ", ";\n  }\n"])), props => props.theme.sanity.color.base.fg, props => props.theme.sanity.fonts.text.sizes[1]);
+const FileReferences = props => {
+  var _a2;
+  const schema = useSchema();
+  if (!props.isLoaded) {
+    return /* @__PURE__ */jsx(SpinnerBox, {});
+  }
+  if (!((_a2 = props.references) == null ? void 0 : _a2.length)) {
+    return /* @__PURE__ */jsx(Text, {
+      size: 2,
+      weight: "bold",
+      muted: true,
+      style: {
+        marginTop: "1.5rem",
+        textAlign: "center"
+      },
+      children: "No documents are using this file"
+    });
+  }
+  const documentPairs = collate(props.references || []);
+  return /* @__PURE__ */jsx(Container, {
+    children: documentPairs == null ? void 0 : documentPairs.map(documentPair => {
+      const schemaType = schema.get(documentPair.type);
+      return /* @__PURE__ */jsx(Card, {
+        marginBottom: 2,
+        padding: 2,
+        radius: 2,
+        shadow: 1,
+        style: {
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */jsx(Box, {
+          children: /* @__PURE__ */jsx(DocumentPreview, {
+            documentPair,
+            schemaType,
+            placement: props.placement
+          })
+        })
+      }, documentPair.id);
+    })
+  });
+};
+function DeleteDialog(_ref7) {
+  let {
+    asset,
+    references,
+    referencesLoading,
+    cancelDelete,
+    placement,
+    succeededDeleting
+  } = _ref7;
+  const client = useClient();
+  const [state, setState] = useState("checkingReferences");
+  const [deleteOnMux, setDeleteOnMux] = useState(true);
+  const toast = useToast();
+  useEffect(() => {
+    if (state !== "checkingReferences" || referencesLoading) return;
+    setState((references == null ? void 0 : references.length) ? "cantDelete" : "confirm");
+  }, [state, references, referencesLoading]);
+  async function confirmDelete() {
+    if (state !== "confirm") return;
+    setState("processing_deletion");
+    const worked = await deleteAsset({
+      client,
+      asset,
+      deleteOnMux
+    });
+    if (worked === true) {
+      toast.push({
+        title: "Successfully deleted video",
+        status: "success"
+      });
+      succeededDeleting();
+    } else if (worked === "failed-mux") {
+      toast.push({
+        title: "Deleted video in Sanity",
+        description: "But it wasn't deleted in Mux",
+        status: "warning"
+      });
+      succeededDeleting();
+    } else {
+      toast.push({
+        title: "Failed deleting video",
+        status: "error"
+      });
+      setState("error_deleting");
+    }
+  }
+  return /* @__PURE__ */jsx(Dialog, {
+    header: "Delete file",
+    zOffset: DIALOGS_Z_INDEX,
+    id: "deleting-file-details-dialog",
+    onClose: cancelDelete,
+    onClickOutside: cancelDelete,
+    width: 1,
+    position: "fixed",
+    footer: /* @__PURE__ */jsx(Card, {
+      padding: 3,
+      children: /* @__PURE__ */jsx(Flex, {
+        justify: "space-between",
+        align: "center",
+        children: /* @__PURE__ */jsx(Button, {
+          icon: TrashIcon,
+          fontSize: 2,
+          padding: 3,
+          text: "Delete file",
+          tone: "critical",
+          onClick: confirmDelete,
+          disabled: ["processing_deletion", "checkingReferences", "cantDelete"].some(s => s === state)
+        })
+      })
+    }),
+    children: /* @__PURE__ */jsx(Card, {
+      padding: 5,
+      style: {
+        minHeight: "150px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */jsxs(Stack, {
+        space: 3,
+        children: [state === "checkingReferences" && /* @__PURE__ */jsxs(Fragment, {
+          children: [/* @__PURE__ */jsx(Heading, {
+            size: 2,
+            children: "Checking if file can be deleted"
+          }), /* @__PURE__ */jsx(SpinnerBox, {})]
+        }), state === "cantDelete" && /* @__PURE__ */jsxs(Fragment, {
+          children: [/* @__PURE__ */jsx(Heading, {
+            size: 2,
+            children: "Video can't be deleted"
+          }), /* @__PURE__ */jsxs(Text, {
+            size: 2,
+            style: {
+              marginBottom: "2rem"
+            },
+            children: ["There are ", references == null ? void 0 : references.length, " document", references && references.length > 0 && "s", " ", "pointing to this file. Remove their references to this file or delete them before proceeding."]
+          }), /* @__PURE__ */jsx(FileReferences, {
+            references,
+            isLoaded: !referencesLoading,
+            placement
+          })]
+        }), state === "confirm" && /* @__PURE__ */jsxs(Fragment, {
+          children: [/* @__PURE__ */jsx(Heading, {
+            size: 2,
+            children: "Are you sure you want to delete this file?"
+          }), /* @__PURE__ */jsx(Text, {
+            size: 2,
+            children: "This action is irreversible"
+          }), /* @__PURE__ */jsxs(Stack, {
+            space: 4,
+            marginTop: 4,
+            children: [/* @__PURE__ */jsxs(Flex, {
+              align: "center",
+              as: "label",
+              children: [/* @__PURE__ */jsx(Checkbox, {
+                checked: deleteOnMux,
+                onChange: () => setDeleteOnMux(prev => !prev)
+              }), /* @__PURE__ */jsx(Text, {
+                style: {
+                  margin: "0 10px"
+                },
+                children: "Delete asset on Mux"
+              })]
+            }), /* @__PURE__ */jsxs(Flex, {
+              align: "center",
+              as: "label",
+              children: [/* @__PURE__ */jsx(Checkbox, {
+                disabled: true,
+                checked: true
+              }), /* @__PURE__ */jsx(Text, {
+                style: {
+                  margin: "0 10px"
+                },
+                children: "Delete video from dataset"
+              })]
+            })]
+          })]
+        }), state === "processing_deletion" && /* @__PURE__ */jsxs(Fragment, {
+          children: [/* @__PURE__ */jsx(Heading, {
+            size: 2,
+            children: "Deleting file..."
+          }), /* @__PURE__ */jsx(SpinnerBox, {})]
+        }), state === "error_deleting" && /* @__PURE__ */jsxs(Fragment, {
+          children: [/* @__PURE__ */jsx(Heading, {
+            size: 2,
+            children: "Something went wrong!"
+          }), /* @__PURE__ */jsx(Text, {
+            size: 2,
+            children: "Try deleting the file again by clicking the button below"
+          })]
+        })]
+      })
+    })
+  });
+}
+const useDocReferences = createHookFromObservableFactory(_ref8 => {
+  let {
+    documentStore,
+    id
+  } = _ref8;
+  return documentStore.listenQuery( /* groq */
+  "*[references($id)]{_id, _type, _rev, _updatedAt, _createdAt}", {
+    id
+  }, {
+    apiVersion: SANITY_API_VERSION
+  });
+});
+function formatSeconds(seconds) {
+  if (typeof seconds !== "number" || Number.isNaN(seconds)) {
+    return "";
+  }
+  const hrs = ~~(seconds / 3600);
+  const mins = ~~(seconds % 3600 / 60);
+  const secs = ~~seconds % 60;
+  let ret = "";
+  if (hrs > 0) {
+    ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
+  }
+  ret += "" + mins + ":" + (secs < 10 ? "0" : "");
+  ret += "" + secs;
+  return ret;
+}
+function getVideoMetadata(doc) {
+  var _a, _b, _c, _d, _e, _f;
+  const id = doc.assetId || doc._id || "";
+  const date = ((_a = doc.data) == null ? void 0 : _a.created_at) ? new Date(Number(doc.data.created_at) * 1e3) : new Date(doc._createdAt || doc._updatedAt || Date.now());
+  return {
+    title: doc.filename || id.slice(0, 10),
+    createdAt: date,
+    duration: ((_b = doc.data) == null ? void 0 : _b.duration) ? formatSeconds((_c = doc.data) == null ? void 0 : _c.duration) : void 0,
+    aspect_ratio: (_d = doc.data) == null ? void 0 : _d.aspect_ratio,
+    max_stored_resolution: (_e = doc.data) == null ? void 0 : _e.max_stored_resolution,
+    max_stored_frame_rate: (_f = doc.data) == null ? void 0 : _f.max_stored_frame_rate
+  };
+}
+function useFileDetails(props) {
+  const documentStore = useDocumentStore();
+  const toast = useToast();
+  const client = useClient();
+  const [references, referencesLoading] = useDocReferences({
+    documentStore,
+    id: props.asset._id
+  });
+  const [originalAsset, setOriginalAsset] = useState(() => props.asset);
+  const [filename, setFilename] = useState(props.asset.filename);
+  const modified = filename !== originalAsset.filename;
+  const displayInfo = getVideoMetadata({
+    ...props.asset,
+    filename
+  });
+  const [state, setState] = useState("idle");
+  function handleClose() {
+    if (state !== "idle") return;
+    if (modified) {
+      setState("closing");
+      return;
+    }
+    props.closeDialog();
+  }
+  function confirmClose(shouldClose) {
+    if (state !== "closing") return;
+    if (shouldClose) props.closeDialog();
+    setState("idle");
+  }
+  async function saveChanges() {
+    if (state !== "idle") return;
+    setState("saving");
+    try {
+      await client.patch(props.asset._id).set({
+        filename
+      }).commit();
+      setOriginalAsset(prev => ({
+        ...prev,
+        filename
+      }));
+      toast.push({
+        title: "File name updated",
+        status: "success"
+      });
+    } catch (error) {
+      toast.push({
+        title: "Failed updating file name",
+        status: "error",
+        description: typeof error === "string" ? error : "Please try again"
+      });
+      setFilename(originalAsset.filename);
+    }
+    setState("idle");
+  }
+  return {
+    references,
+    referencesLoading,
+    modified,
+    filename,
+    setFilename,
+    displayInfo,
+    state,
+    setState,
+    handleClose,
+    confirmClose,
+    saveChanges
+  };
+}
+const AssetInput = props => /* @__PURE__ */jsx(FormField$1, {
+  title: props.label,
+  description: props.description,
+  inputId: props.label,
+  children: /* @__PURE__ */jsx(TextInput, {
+    id: props.label,
+    value: props.value,
+    placeholder: props.placeholder,
+    onInput: props.onInput,
+    disabled: props.disabled
+  })
+});
+const VideoDetails = props => {
+  const [tab, setTab] = useState("details");
+  const {
+    displayInfo,
+    filename,
+    modified,
+    references,
+    referencesLoading,
+    setFilename,
+    state,
+    setState,
+    handleClose,
+    confirmClose,
+    saveChanges
+  } = useFileDetails(props);
+  const isSaving = state === "saving";
+  const [containerHeight, setContainerHeight] = useState(null);
+  const contentsRef = React.useRef(null);
+  useEffect(() => {
+    if (!contentsRef.current || !("getBoundingClientRect" in contentsRef.current)) return;
+    setContainerHeight(contentsRef.current.getBoundingClientRect().height);
+  }, []);
+  return /* @__PURE__ */jsxs(Dialog, {
+    header: displayInfo.title,
+    zOffset: DIALOGS_Z_INDEX,
+    id: "file-details-dialog",
+    onClose: handleClose,
+    onClickOutside: handleClose,
+    width: 2,
+    style: {
+      minHeight: "50vh"
+    },
+    position: "fixed",
+    footer: /* @__PURE__ */jsx(Card, {
+      padding: 3,
+      children: /* @__PURE__ */jsxs(Flex, {
+        justify: "space-between",
+        align: "center",
+        children: [/* @__PURE__ */jsx(Button, {
+          icon: TrashIcon,
+          fontSize: 2,
+          padding: 3,
+          mode: "bleed",
+          text: "Delete",
+          tone: "critical",
+          onClick: () => setState("deleting"),
+          disabled: isSaving
+        }), modified && /* @__PURE__ */jsx(Button, {
+          icon: CheckmarkIcon,
+          fontSize: 2,
+          padding: 3,
+          mode: "ghost",
+          text: "Save and close",
+          tone: "positive",
+          onClick: saveChanges,
+          iconRight: isSaving && Spinner,
+          disabled: isSaving
+        })]
+      })
+    }),
+    children: [state === "deleting" && /* @__PURE__ */jsx(DeleteDialog, {
+      asset: props.asset,
+      cancelDelete: () => setState("idle"),
+      placement: props.placement,
+      referencesLoading,
+      references,
+      succeededDeleting: () => {
+        props.closeDialog();
+      }
+    }), state === "closing" && /* @__PURE__ */jsx(Dialog, {
+      header: "You have unsaved changes",
+      zOffset: DIALOGS_Z_INDEX,
+      id: "closing-file-details-dialog",
+      onClose: () => confirmClose(false),
+      onClickOutside: () => confirmClose(false),
+      width: 1,
+      position: "fixed",
+      footer: /* @__PURE__ */jsx(Card, {
+        padding: 3,
+        children: /* @__PURE__ */jsxs(Flex, {
+          justify: "space-between",
+          align: "center",
+          children: [/* @__PURE__ */jsx(Button, {
+            icon: ErrorOutlineIcon,
+            fontSize: 2,
+            padding: 3,
+            text: "Discard changes",
+            tone: "critical",
+            onClick: () => confirmClose(true)
+          }), modified && /* @__PURE__ */jsx(Button, {
+            icon: RevertIcon,
+            fontSize: 2,
+            padding: 3,
+            mode: "ghost",
+            text: "Keep editing",
+            tone: "primary",
+            onClick: () => confirmClose(false)
+          })]
+        })
+      }),
+      children: /* @__PURE__ */jsx(Card, {
+        padding: 5,
+        children: /* @__PURE__ */jsxs(Stack, {
+          style: {
+            textAlign: "center"
+          },
+          space: 3,
+          children: [/* @__PURE__ */jsx(Heading, {
+            size: 2,
+            children: "Unsaved changes will be lost"
+          }), /* @__PURE__ */jsx(Text, {
+            size: 2,
+            children: "Are you sure you want to discard them?"
+          })]
+        })
+      })
+    }), /* @__PURE__ */jsx(Card, {
+      padding: 4,
+      sizing: "border",
+      style: {
+        containerType: "inline-size"
+      },
+      children: /* @__PURE__ */jsxs(Flex, {
+        sizing: "border",
+        gap: 4,
+        direction: ["column", "column", "row"],
+        align: "flex-start",
+        ref: contentsRef,
+        style: typeof containerHeight === "number" ? {
+          minHeight: containerHeight
+        } : void 0,
+        children: [/* @__PURE__ */jsx(Stack, {
+          space: 4,
+          flex: 1,
+          sizing: "border",
+          children: /* @__PURE__ */jsx(VideoPlayer, {
+            asset: props.asset,
+            autoPlay: props.asset.autoPlay || false
+          })
+        }), /* @__PURE__ */jsxs(Stack, {
+          space: 4,
+          flex: 1,
+          sizing: "border",
+          children: [/* @__PURE__ */jsxs(TabList, {
+            space: 2,
+            children: [/* @__PURE__ */jsx(Tab, {
+              "aria-controls": "details-panel",
+              icon: EditIcon,
+              id: "details-tab",
+              label: "Details",
+              onClick: () => setTab("details"),
+              selected: tab === "details"
+            }), references && references.length > 0 && /* @__PURE__ */jsx(Tab, {
+              "aria-controls": "references-panel",
+              icon: SearchIcon,
+              id: "references-tab",
+              label: "Used by (".concat(references.length, ")"),
+              onClick: () => setTab("references"),
+              selected: tab === "references"
+            })]
+          }), /* @__PURE__ */jsx(TabPanel, {
+            "aria-labelledby": "details-tab",
+            id: "details-panel",
+            hidden: tab !== "details",
+            children: /* @__PURE__ */jsxs(Stack, {
+              space: 4,
+              children: [/* @__PURE__ */jsx(AssetInput, {
+                label: "File name",
+                description: "Not visible to users. Useful for finding files later.",
+                value: filename || "",
+                onInput: e => setFilename(e.currentTarget.value),
+                disabled: state !== "idle"
+              }), /* @__PURE__ */jsxs(Stack, {
+                space: 3,
+                children: [(displayInfo == null ? void 0 : displayInfo.duration) && /* @__PURE__ */jsx(IconInfo, {
+                  text: "Duration: ".concat(displayInfo.duration),
+                  icon: ClockIcon,
+                  size: 2
+                }), (displayInfo == null ? void 0 : displayInfo.max_stored_resolution) && /* @__PURE__ */jsx(IconInfo, {
+                  text: "Max Resolution: ".concat(displayInfo.max_stored_resolution),
+                  icon: ResolutionIcon,
+                  size: 2
+                }), (displayInfo == null ? void 0 : displayInfo.max_stored_frame_rate) && /* @__PURE__ */jsx(IconInfo, {
+                  text: "Frame rate: ".concat(displayInfo.max_stored_frame_rate),
+                  icon: StopWatchIcon,
+                  size: 2
+                }), (displayInfo == null ? void 0 : displayInfo.aspect_ratio) && /* @__PURE__ */jsx(IconInfo, {
+                  text: "Aspect Ratio: ".concat(displayInfo.aspect_ratio),
+                  icon: CropIcon,
+                  size: 2
+                }), /* @__PURE__ */jsx(IconInfo, {
+                  text: "Uploaded on: ".concat(displayInfo.createdAt.toLocaleDateString("en", {
+                    year: "numeric",
+                    month: "2-digit",
+                    day: "2-digit",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    hour12: true
+                  })),
+                  icon: CalendarIcon,
+                  size: 2
+                })]
+              })]
+            })
+          }), /* @__PURE__ */jsx(TabPanel, {
+            "aria-labelledby": "references-tab",
+            id: "references-panel",
+            hidden: tab !== "references",
+            children: /* @__PURE__ */jsx(FileReferences, {
+              references,
+              isLoaded: !referencesLoading,
+              placement: props.placement
+            })
+          })]
+        })]
+      })
+    })]
+  });
+};
+const VideoMetadata = props => {
+  if (!props.asset) {
+    return null;
+  }
+  const displayInfo = getVideoMetadata(props.asset);
+  return /* @__PURE__ */jsxs(Stack, {
+    space: 2,
+    children: [displayInfo.title && /* @__PURE__ */jsx(Text, {
+      size: 1,
+      weight: "semibold",
+      style: {
+        wordWrap: "break-word"
+      },
+      children: displayInfo.title
+    }), /* @__PURE__ */jsxs(Inline, {
+      space: 3,
+      children: [(displayInfo == null ? void 0 : displayInfo.duration) && /* @__PURE__ */jsx(IconInfo, {
+        text: displayInfo.duration,
+        icon: ClockIcon,
+        size: 1,
+        muted: true
+      }), /* @__PURE__ */jsx(IconInfo, {
+        text: displayInfo.createdAt.toISOString().split("T")[0],
+        icon: CalendarIcon,
+        size: 1,
+        muted: true
+      })]
+    })]
+  });
+};
+function useInView() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const [inView, setInView] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) return;
+    const observer = new IntersectionObserver((_ref9, obs) => {
+      let [entry] = _ref9;
+      var _a;
+      const nowInView = entry.isIntersecting && obs.thresholds.some(threshold => entry.intersectionRatio >= threshold);
+      setInView(nowInView);
+      (_a = options == null ? void 0 : options.onChange) == null ? void 0 : _a.call(options, nowInView);
+    }, options);
+    const toObserve = ref.current;
+    observer.observe(toObserve);
+    return () => {
+      if (toObserve) observer.unobserve(toObserve);
+    };
+  }, [options]);
+  return {
+    inView,
+    ref
+  };
+}
+function getAnimatedPosterSrc(_ref10) {
+  let {
+    asset,
+    client,
+    height,
+    width,
+    start = asset.thumbTime ? Math.max(0, asset.thumbTime - 2.5) : 0,
+    end = start + 5,
+    fps = 15
+  } = _ref10;
+  const params = {
+    height,
+    width,
+    start,
+    end,
+    fps
+  };
+  const playbackId = getPlaybackId(asset);
+  let searchParams = new URLSearchParams(JSON.parse(JSON.stringify(params, (_, v) => v != null ? v : void 0)));
+  if (getPlaybackPolicy(asset) === "signed") {
+    const token = generateJwt(client, playbackId, "g", params);
+    searchParams = new URLSearchParams({
+      token
+    });
+  }
+  return "https://image.mux.com/".concat(playbackId, "/animated.gif?").concat(searchParams);
+}
+var __freeze$a = Object.freeze;
+var __defProp$b = Object.defineProperty;
+var __template$a = (cooked, raw) => __freeze$a(__defProp$b(cooked, "raw", {
+  value: __freeze$a(raw || cooked.slice())
+}));
+var _a$a;
+const Image = styled.img(_a$a || (_a$a = __template$a(["\n  transition: opacity 0.175s ease-out 0s;\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  object-position: center center;\n"])));
+const STATUS_TO_TONE = {
+  loading: "transparent",
+  error: "critical",
+  loaded: "default"
+};
+function VideoThumbnail(_ref11) {
+  let {
+    asset,
+    width = 250
+  } = _ref11;
+  const {
+    inView,
+    ref
+  } = useInView();
+  const [status, setStatus] = useState("loading");
+  const client = useClient();
+  const animatedSrc = useMemo(() => {
+    try {
+      return getAnimatedPosterSrc({
+        asset,
+        client,
+        width
+      });
+    } catch {
+      if (status !== "error") setStatus("error");
+      return void 0;
+    }
+  }, [asset, client, width, status, setStatus]);
+  function handleLoad() {
+    setStatus("loaded");
+  }
+  function handleError() {
+    setStatus("error");
+  }
+  return /* @__PURE__ */jsx(Card, {
+    style: {
+      aspectRatio: THUMBNAIL_ASPECT_RATIO,
+      position: "relative"
+    },
+    border: true,
+    radius: 2,
+    ref,
+    tone: STATUS_TO_TONE[status],
+    children: inView ? /* @__PURE__ */jsxs(Fragment, {
+      children: [status === "loading" && /* @__PURE__ */jsx(SpinnerBox, {}), status === "error" && /* @__PURE__ */jsxs(Stack, {
+        space: 4,
+        style: {
+          position: "absolute",
+          width: "100%",
+          left: 0,
+          top: "50%",
+          transform: "translateY(-50%)",
+          justifyItems: "center"
+        },
+        children: [/* @__PURE__ */jsx(Text, {
+          size: 4,
+          muted: true,
+          children: /* @__PURE__ */jsx(ErrorOutlineIcon, {
+            style: {
+              fontSize: "1.75em"
+            }
+          })
+        }), /* @__PURE__ */jsx(Text, {
+          muted: true,
+          align: "center",
+          children: "Failed loading thumbnail"
+        })]
+      }), /* @__PURE__ */jsx(Image, {
+        src: animatedSrc,
+        alt: "Preview for video ".concat(asset.filename || asset.assetId),
+        onLoad: handleLoad,
+        onError: handleError,
+        style: {
+          opacity: status === "loaded" ? 1 : 0
+        }
+      })]
+    }) : null
+  });
+}
+var __freeze$9 = Object.freeze;
+var __defProp$a = Object.defineProperty;
+var __template$9 = (cooked, raw) => __freeze$9(__defProp$a(cooked, "raw", {
+  value: __freeze$9(raw || cooked.slice())
+}));
+var _a$9;
+const PlayButton = styled.button(_a$9 || (_a$9 = __template$9(["\n  display: block;\n  padding: 0;\n  margin: 0;\n  border: none;\n  border-radius: 0.1875rem;\n  position: relative;\n  cursor: pointer;\n\n  &::after {\n    content: '';\n    background: var(--card-fg-color);\n    opacity: 0;\n    display: block;\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n    transition: 0.15s ease-out;\n    border-radius: inherit;\n  }\n\n  > div[data-play] {\n    z-index: 11;\n    opacity: 0;\n    transition: 0.15s 0.05s ease-out;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    width: auto;\n    height: 30%;\n    aspect-ratio: 1;\n    border-radius: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n    > svg {\n      display: block;\n      width: 70%;\n      height: auto;\n      // Visual balance to center-align the icon\n      transform: translateX(5%);\n    }\n  }\n\n  &:hover,\n  &:focus {\n    &::after {\n      opacity: 0.3;\n    }\n    > div[data-play] {\n      opacity: 1;\n    }\n  }\n"])));
+function VideoInBrowser(_ref12) {
+  let {
+    onSelect,
+    onEdit,
+    asset
+  } = _ref12;
+  const [renderVideo, setRenderVideo] = useState(false);
+  const select = React.useCallback(() => onSelect == null ? void 0 : onSelect(asset), [onSelect, asset]);
+  const edit = React.useCallback(() => onEdit == null ? void 0 : onEdit(asset), [onEdit, asset]);
+  if (!asset) {
+    return null;
+  }
+  const playbackPolicy = getPlaybackPolicy(asset);
+  return /* @__PURE__ */jsxs(Card, {
+    border: true,
+    padding: 2,
+    sizing: "border",
+    radius: 2,
+    style: {
+      position: "relative"
+    },
+    children: [playbackPolicy === "signed" && /* @__PURE__ */jsx(Tooltip, {
+      content: /* @__PURE__ */jsx(Card, {
+        padding: 2,
+        radius: 2,
+        children: /* @__PURE__ */jsx(IconInfo, {
+          icon: LockIcon,
+          text: "Signed playback policy",
+          size: 2
+        })
+      }),
+      placement: "right",
+      fallbackPlacements: ["top", "bottom"],
+      portal: true,
+      children: /* @__PURE__ */jsx(Card, {
+        tone: "caution",
+        style: {
+          borderRadius: "100%",
+          position: "absolute",
+          left: "1em",
+          top: "1em",
+          zIndex: 10
+        },
+        padding: 2,
+        border: true,
+        children: /* @__PURE__ */jsx(Text, {
+          muted: true,
+          size: 1,
+          children: /* @__PURE__ */jsx(LockIcon, {})
+        })
+      })
+    }), /* @__PURE__ */jsxs(Stack, {
+      space: 3,
+      height: "fill",
+      style: {
+        gridTemplateRows: "min-content min-content 1fr"
+      },
+      children: [renderVideo ? /* @__PURE__ */jsx(VideoPlayer, {
+        asset,
+        autoPlay: true,
+        forceAspectRatio: THUMBNAIL_ASPECT_RATIO
+      }) : /* @__PURE__ */jsxs(PlayButton, {
+        onClick: () => setRenderVideo(true),
+        children: [/* @__PURE__ */jsx("div", {
+          "data-play": true,
+          children: /* @__PURE__ */jsx(PlayIcon, {})
+        }), /* @__PURE__ */jsx(VideoThumbnail, {
+          asset
+        })]
+      }), /* @__PURE__ */jsx(VideoMetadata, {
+        asset
+      }), /* @__PURE__ */jsxs("div", {
+        style: {
+          display: "flex",
+          width: "100%",
+          alignItems: "flex-end",
+          justifyContent: "flex-start",
+          gap: ".35rem"
+        },
+        children: [onSelect && /* @__PURE__ */jsx(Button, {
+          icon: CheckmarkIcon,
+          fontSize: 2,
+          padding: 2,
+          mode: "ghost",
+          text: "Select",
+          style: {
+            flex: 1
+          },
+          tone: "positive",
+          onClick: select
+        }), /* @__PURE__ */jsx(Button, {
+          icon: EditIcon,
+          fontSize: 2,
+          padding: 2,
+          mode: "ghost",
+          text: "Details",
+          style: {
+            flex: 1
+          },
+          onClick: edit
+        })]
+      })]
+    })]
+  });
+}
+function VideosBrowser(_ref13) {
+  let {
+    onSelect
+  } = _ref13;
+  const {
+    assets,
+    isLoading,
+    searchQuery,
+    setSearchQuery,
+    setSort,
+    sort
+  } = useAssets();
+  const [editedAsset, setEditedAsset] = React.useState(null);
+  const freshEditedAsset = React.useMemo(() => assets.find(a => a._id === (editedAsset == null ? void 0 : editedAsset._id)) || editedAsset, [editedAsset, assets]);
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsxs(Stack, {
+      padding: 4,
+      space: 4,
+      children: [/* @__PURE__ */jsx(Flex, {
+        justify: "space-between",
+        align: "center",
+        children: /* @__PURE__ */jsxs(Flex, {
+          align: "center",
+          gap: 3,
+          children: [/* @__PURE__ */jsx(TextInput, {
+            value: searchQuery,
+            icon: SearchIcon,
+            onInput: e => setSearchQuery(e.currentTarget.value),
+            placeholder: "Search files"
+          }), /* @__PURE__ */jsx(SelectSortOptions, {
+            setSort,
+            sort
+          })]
+        })
+      }), /* @__PURE__ */jsxs(Stack, {
+        space: 3,
+        children: [(assets == null ? void 0 : assets.length) > 0 && /* @__PURE__ */jsxs(Label$1, {
+          muted: true,
+          children: [assets.length, " video", assets.length > 1 ? "s" : null, " ", searchQuery ? 'matching "'.concat(searchQuery, '"') : "found"]
+        }), /* @__PURE__ */jsx(Grid, {
+          gap: 2,
+          style: {
+            gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))"
+          },
+          children: assets.map(asset => /* @__PURE__ */jsx(VideoInBrowser, {
+            asset,
+            onEdit: setEditedAsset,
+            onSelect
+          }, asset._id))
+        })]
+      }), isLoading && /* @__PURE__ */jsx(SpinnerBox, {}), !isLoading && assets.length === 0 && /* @__PURE__ */jsx(Card, {
+        padding: 2,
+        marginY: 4,
+        border: true,
+        radius: 2,
+        children: /* @__PURE__ */jsx(Text, {
+          align: "center",
+          muted: true,
+          children: searchQuery ? 'No videos found for "'.concat(searchQuery, '"') : "No videos in this dataset"
+        })
+      })]
+    }), freshEditedAsset && /* @__PURE__ */jsx(VideoDetails, {
+      closeDialog: () => setEditedAsset(null),
+      asset: freshEditedAsset,
+      placement: onSelect ? "input" : "tool"
+    })]
+  });
+}
+const StudioTool = () => {
+  return /* @__PURE__ */jsx(VideosBrowser, {});
+};
+function createStudioTool(config) {
+  const toolConfig = typeof config.tool === "object" ? config.tool : {};
+  return {
+    name: "mux",
+    title: toolConfig.title || "Videos",
+    component: props => /* @__PURE__ */jsx(StudioTool, {
+      ...config,
+      ...props
+    }),
+    icon: toolConfig.icon || ToolIcon
+  };
+}
+const path$1 = ["assetId", "data", "playbackId", "status", "thumbTime", "filename"];
+const useAssetDocumentValues = asset => useDocumentValues(isReference(asset) ? asset._ref : "", path$1);
+function useDialogState() {
+  return useState(false);
+}
+const useMuxPolling = asset => {
+  var _a, _b;
+  const client = useClient();
+  const projectId = useProjectId();
+  const dataset = useDataset();
+  const shouldFetch = useMemo(() => {
+    var _a2, _b2;
+    return !!(asset == null ? void 0 : asset.assetId) && ((asset == null ? void 0 : asset.status) === "preparing" || ((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.static_renditions) == null ? void 0 : _b2.status) === "preparing");
+  }, [asset == null ? void 0 : asset.assetId, (_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.static_renditions) == null ? void 0 : _b.status, asset == null ? void 0 : asset.status]);
+  return useSWR(shouldFetch ? "/".concat(projectId, "/addons/mux/assets/").concat(dataset, "/data/").concat(asset == null ? void 0 : asset.assetId) : null, async () => {
+    const {
+      data
+    } = await client.request({
+      url: "/addons/mux/assets/".concat(dataset, "/data/").concat(asset.assetId),
+      withCredentials: true,
+      method: "GET"
+    });
+    client.patch(asset._id).set({
+      status: data.status,
+      data
+    }).commit({
+      returnDocuments: false
+    });
+  }, {
+    refreshInterval: 2e3,
+    refreshWhenHidden: true,
+    dedupingInterval: 1e3
+  });
+};
+const path = ["token", "secretKey", "enableSignedUrls", "signingKeyId", "signingKeyPrivate"];
+const useSecretsDocumentValues = () => {
+  const {
+    error,
+    isLoading,
+    value
+  } = useDocumentValues(muxSecretsDocumentId, path);
+  const cache = useMemo(() => {
+    const exists = Boolean(value);
+    const secrets = {
+      token: (value == null ? void 0 : value.token) || null,
+      secretKey: (value == null ? void 0 : value.secretKey) || null,
+      enableSignedUrls: (value == null ? void 0 : value.enableSignedUrls) || false,
+      signingKeyId: (value == null ? void 0 : value.signingKeyId) || null,
+      signingKeyPrivate: (value == null ? void 0 : value.signingKeyPrivate) || null
+    };
+    return {
+      isInitialSetup: !exists,
+      needsSetup: !(secrets == null ? void 0 : secrets.token) || !(secrets == null ? void 0 : secrets.secretKey),
+      secrets
+    };
+  }, [value]);
+  return {
+    error,
+    isLoading,
+    value: cache
+  };
+};
+function createUpChunkObservable(uuid, uploadUrl, source) {
+  return new Observable(subscriber => {
+    const upchunk = UpChunk.createUpload({
+      endpoint: uploadUrl,
+      file: source,
+      dynamicChunkSize: true
+      // changes the chunk size based on network speeds
+    });
+
+    const successHandler = () => {
+      subscriber.next({
+        type: "success",
+        id: uuid
+      });
+      subscriber.complete();
+    };
+    const errorHandler = data => subscriber.error(new Error(data.detail.message));
+    const progressHandler = data => {
+      return subscriber.next({
+        type: "progress",
+        percent: data.detail
+      });
+    };
+    const offlineHandler = () => {
+      upchunk.pause();
+      subscriber.next({
+        type: "pause",
+        id: uuid
+      });
+    };
+    const onlineHandler = () => {
+      upchunk.resume();
+      subscriber.next({
+        type: "resume",
+        id: uuid
+      });
+    };
+    upchunk.on("success", successHandler);
+    upchunk.on("error", errorHandler);
+    upchunk.on("progress", progressHandler);
+    upchunk.on("offline", offlineHandler);
+    upchunk.on("online", onlineHandler);
+    return () => upchunk.abort();
+  });
+}
+function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate) {
+  const doc = {
+    _id: "secrets.mux",
+    _type: "mux.apiKey",
+    token,
+    secretKey,
+    enableSignedUrls,
+    signingKeyId,
+    signingKeyPrivate
+  };
+  return client.createOrReplace(doc);
+}
+function createSigningKeys(client) {
+  const {
+    dataset
+  } = client.config();
+  return client.request({
+    url: "/addons/mux/signing-keys/".concat(dataset),
+    withCredentials: true,
+    method: "POST"
+  });
+}
+function testSecrets(client) {
+  const {
+    dataset
+  } = client.config();
+  return client.request({
+    url: "/addons/mux/secrets/".concat(dataset, "/test"),
+    withCredentials: true,
+    method: "GET"
+  });
+}
+async function haveValidSigningKeys(client, signingKeyId, signingKeyPrivate) {
+  if (!(signingKeyId && signingKeyPrivate)) {
+    return false;
+  }
+  const {
+    dataset
+  } = client.config();
+  try {
+    const res = await client.request({
+      url: "/addons/mux/signing-keys/".concat(dataset, "/").concat(signingKeyId),
+      withCredentials: true,
+      method: "GET"
+    });
+    return !!(res.data && res.data.id);
+  } catch (e) {
+    console.error("Error fetching signingKeyId", signingKeyId, "assuming it is not valid");
+    return false;
+  }
+}
+function testSecretsObservable(client) {
+  const {
+    dataset
+  } = client.config();
+  return defer(() => client.observable.request({
+    url: "/addons/mux/secrets/".concat(dataset, "/test"),
+    withCredentials: true,
+    method: "GET"
+  }));
+}
+function cancelUpload(client, uuid) {
+  return client.observable.request({
+    url: "/addons/mux/uploads/".concat(client.config().dataset, "/").concat(uuid),
+    withCredentials: true,
+    method: "DELETE"
+  });
+}
+function uploadUrl(config, client, url) {
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  return testUrl(url).pipe(switchMap(validUrl => {
+    return concat(of({
+      type: "url",
+      url: validUrl
+    }), testSecretsObservable(client).pipe(switchMap(json => {
+      if (!json || !json.status) {
+        return throwError(new Error("Invalid credentials"));
+      }
+      const uuid$1 = uuid();
+      const {
+        enableSignedUrls
+      } = options;
+      const muxBody = {
+        input: validUrl,
+        playback_policy: [enableSignedUrls ? "signed" : "public"],
+        mp4_support: config.mp4_support
+      };
+      const query = {
+        muxBody: JSON.stringify(muxBody),
+        filename: validUrl.split("/").slice(-1)[0]
+      };
+      const dataset = client.config().dataset;
+      return defer(() => client.observable.request({
+        url: "/addons/mux/assets/".concat(dataset),
+        withCredentials: true,
+        method: "POST",
+        headers: {
+          "MUX-Proxy-UUID": uuid$1,
+          "Content-Type": "application/json"
+        },
+        query
+      })).pipe(mergeMap(result => {
+        const asset = result && result.results && result.results[0] && result.results[0].document || null;
+        if (!asset) {
+          return throwError(new Error("No asset document returned"));
+        }
+        return of({
+          type: "success",
+          id: uuid$1,
+          asset
+        });
+      }));
+    })));
+  }));
+}
+function uploadFile(config, client, file) {
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  return testFile(file).pipe(switchMap(fileOptions => {
+    return concat(of({
+      type: "file",
+      file: fileOptions
+    }), testSecretsObservable(client).pipe(switchMap(json => {
+      if (!json || !json.status) {
+        return throwError(new Error("Invalid credentials"));
+      }
+      const uuid$1 = uuid();
+      const {
+        enableSignedUrls
+      } = options;
+      const body = {
+        mp4_support: config.mp4_support,
+        playback_policy: [enableSignedUrls ? "signed" : "public"]
+      };
+      return concat(of({
+        type: "uuid",
+        uuid: uuid$1
+      }), defer(() => client.observable.request({
+        url: "/addons/mux/uploads/".concat(client.config().dataset),
+        withCredentials: true,
+        method: "POST",
+        headers: {
+          "MUX-Proxy-UUID": uuid$1,
+          "Content-Type": "application/json"
+        },
+        body
+      })).pipe(mergeMap(result => {
+        return createUpChunkObservable(uuid$1, result.upload.url, file).pipe(
+        // eslint-disable-next-line no-warning-comments
+        // @TODO type the observable events
+        // eslint-disable-next-line max-nested-callbacks
+        mergeMap(event => {
+          if (event.type !== "success") {
+            return of(event);
+          }
+          return from(updateAssetDocumentFromUpload(client, uuid$1)).pipe(
+          // eslint-disable-next-line max-nested-callbacks
+          mergeMap(doc => of({
+            ...event,
+            asset: doc
+          })));
+        }),
+        // eslint-disable-next-line max-nested-callbacks
+        catchError(err => {
+          return cancelUpload(client, uuid$1).pipe(mergeMapTo(throwError(err)));
+        }));
+      })));
+    })));
+  }));
+}
+function getUpload(client, assetId) {
+  const {
+    dataset
+  } = client.config();
+  return client.request({
+    url: "/addons/mux/uploads/".concat(dataset, "/").concat(assetId),
+    withCredentials: true,
+    method: "GET"
+  });
+}
+function pollUpload(client, uuid) {
+  const maxTries = 10;
+  let pollInterval;
+  let tries = 0;
+  let assetId;
+  let upload;
+  return new Promise((resolve, reject) => {
+    pollInterval = setInterval(async () => {
+      try {
+        upload = await getUpload(client, uuid);
+      } catch (err) {
+        reject(err);
+        return;
+      }
+      assetId = upload && upload.data && upload.data.asset_id;
+      if (assetId) {
+        clearInterval(pollInterval);
+        resolve(upload);
+      }
+      if (tries > maxTries) {
+        clearInterval(pollInterval);
+        reject(new Error("Upload did not finish"));
+      }
+      tries++;
+    }, 2e3);
+  });
+}
+async function updateAssetDocumentFromUpload(client, uuid) {
+  let upload;
+  let asset;
+  try {
+    upload = await pollUpload(client, uuid);
+  } catch (err) {
+    return Promise.reject(err);
+  }
+  try {
+    asset = await getAsset(client, upload.data.asset_id);
+  } catch (err) {
+    return Promise.reject(err);
+  }
+  const doc = {
+    _id: uuid,
+    _type: "mux.videoAsset",
+    status: asset.data.status,
+    data: asset.data,
+    assetId: asset.data.id,
+    playbackId: asset.data.playback_ids[0].id,
+    uploadId: upload.data.id
+  };
+  return client.createOrReplace(doc).then(() => {
+    return doc;
+  });
+}
+function testFile(file) {
+  if (typeof window !== "undefined" && file instanceof window.File) {
+    const fileOptions = optionsFromFile({}, file);
+    return of(fileOptions);
+  }
+  return throwError(new Error("Invalid file"));
+}
+function testUrl(url) {
+  const error = new Error("Invalid URL");
+  if (typeof url !== "string") {
+    return throwError(error);
+  }
+  let parsed;
+  try {
+    parsed = new URL(url);
+  } catch (err) {
+    return throwError(error);
+  }
+  if (parsed && !parsed.protocol.match(/http:|https:/)) {
+    return throwError(error);
+  }
+  return of(url);
+}
+function optionsFromFile(opts, file) {
+  if (typeof window === "undefined" || !(file instanceof window.File)) {
+    return opts;
+  }
+  return {
+    name: opts.preserveFilename === false ? void 0 : file.name,
+    type: file.type
+  };
+}
+function extractDroppedFiles(dataTransfer) {
+  const files = Array.from(dataTransfer.files || []);
+  const items = Array.from(dataTransfer.items || []);
+  if (files && files.length > 0) {
+    return Promise.resolve(files);
+  }
+  return normalizeItems(items).then(arr => arr.flat());
+}
+function normalizeItems(items) {
+  return Promise.all(items.map(item => {
+    if (item.kind === "file" && item.webkitGetAsEntry) {
+      let entry;
+      try {
+        entry = item.webkitGetAsEntry();
+      } catch (err) {
+        return [item.getAsFile()];
+      }
+      if (!entry) {
+        return [];
+      }
+      return entry.isDirectory ? walk(entry) : [item.getAsFile()];
+    }
+    if (item.kind === "file") {
+      const file = item.getAsFile();
+      return Promise.resolve(file ? [file] : []);
+    }
+    return new Promise(resolve => item.getAsString(resolve)).then(str => str ? [new File([str], "unknown.txt", {
+      type: item.type
+    })] : []);
+  }));
+}
+function isFile(entry) {
+  return entry.isFile;
+}
+function isDirectory(entry) {
+  return entry.isDirectory;
+}
+function walk(entry) {
+  if (isFile(entry)) {
+    return new Promise(resolve => entry.file(resolve)).then(file => [file]);
+  }
+  if (isDirectory(entry)) {
+    const dir = entry.createReader();
+    return new Promise(resolve => dir.readEntries(resolve)).then(entries => entries.filter(entr => !entr.name.startsWith("."))).then(entries => Promise.all(entries.map(walk)).then(arr => arr.flat()));
+  }
+  return Promise.resolve([]);
+}
+function SelectAssets(_ref14) {
+  let {
+    asset: selectedAsset,
+    onChange,
+    setDialogState
+  } = _ref14;
+  const handleSelect = useCallback(chosenAsset => {
+    if (!(chosenAsset == null ? void 0 : chosenAsset._id)) {
+      onChange(PatchEvent.from([unset(["asset"])]));
+    }
+    if (chosenAsset._id !== (selectedAsset == null ? void 0 : selectedAsset._id)) {
+      onChange(PatchEvent.from([setIfMissing({
+        asset: {}
+      }), set({
+        _type: "reference",
+        _weak: true,
+        _ref: chosenAsset._id
+      }, ["asset"])]));
+    }
+    setDialogState(false);
+  }, [onChange, setDialogState, selectedAsset]);
+  return /* @__PURE__ */jsx(VideosBrowser, {
+    onSelect: handleSelect
+  });
+}
+function InputBrowser(_ref15) {
+  let {
+    setDialogState,
+    asset,
+    onChange
+  } = _ref15;
+  const id = "InputBrowser".concat(useId());
+  const handleClose = useCallback(() => setDialogState(false), [setDialogState]);
+  return /* @__PURE__ */jsx(Dialog, {
+    __unstable_autoFocus: true,
+    header: "Select video",
+    id,
+    onClose: handleClose,
+    width: 2,
+    children: /* @__PURE__ */jsx(SelectAssets, {
+      asset,
+      onChange,
+      setDialogState
+    })
+  });
+}
+const useCancelUpload = (asset, onChange) => {
+  const client = useClient();
+  return useCallback(() => {
+    if (!asset) {
+      return;
+    }
+    onChange(PatchEvent.from(unset()));
+    if (asset.assetId) {
+      deleteAssetOnMux(client, asset.assetId);
+    }
+    if (asset._id) {
+      client.delete(asset._id);
+    }
+  }, [asset, client, onChange]);
+};
+var __freeze$8 = Object.freeze;
+var __defProp$9 = Object.defineProperty;
+var __template$8 = (cooked, raw) => __freeze$8(__defProp$9(cooked, "raw", {
+  value: __freeze$8(raw || cooked.slice())
+}));
+var _a$8, _b$4;
+styled.div(_a$8 || (_a$8 = __template$8(["\n  && {\n    --media-background-color: transparent;\n    --media-button-icon-width: 100%;\n    --media-button-icon-height: auto;\n    pointer-events: none;\n    width: 100%;\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    justify-content: center;\n    media-play-button {\n      --media-control-background: transparent;\n      --media-control-hover-background: transparent;\n      padding: 0;\n      width: max(27px, min(9%, 90px));\n    }\n  }\n"])));
+const TopControls = styled.div(_b$4 || (_b$4 = __template$8(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  justify-content: flex-end;\n  button {\n    height: auto;\n  }\n"])));
+var __freeze$7 = Object.freeze;
+var __defProp$8 = Object.defineProperty;
+var __template$7 = (cooked, raw) => __freeze$7(__defProp$8(cooked, "raw", {
+  value: __freeze$7(raw || cooked.slice())
+}));
+var _a$7, _b$3, _c, _d;
+const CardWrapper = styled(Card)(_a$7 || (_a$7 = __template$7(["\n  min-height: 82px;\n  box-sizing: border-box;\n"])));
+const FlexWrapper = styled(Flex)(_b$3 || (_b$3 = __template$7(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+const LeftSection = styled(Stack)(_c || (_c = __template$7(["\n  position: relative;\n  width: 60%;\n"])));
+const CodeWrapper = styled(Code)(_d || (_d = __template$7(["\n  position: relative;\n  width: 100%;\n\n  code {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    position: relative;\n    max-width: 200px;\n  }\n"])));
+const UploadProgress = _ref16 => {
+  let {
+    progress = 100,
+    onCancel,
+    filename,
+    text = "Uploading"
+  } = _ref16;
+  return /* @__PURE__ */jsx(CardWrapper, {
+    tone: "primary",
+    padding: 4,
+    border: true,
+    height: "fill",
+    children: /* @__PURE__ */jsxs(FlexWrapper, {
+      align: "center",
+      justify: "space-between",
+      height: "fill",
+      direction: "row",
+      gap: 2,
+      children: [/* @__PURE__ */jsxs(LeftSection, {
+        children: [/* @__PURE__ */jsx(Flex, {
+          justify: "center",
+          gap: [3, 3, 2, 2],
+          direction: ["column", "column", "row"],
+          children: /* @__PURE__ */jsx(Text, {
+            size: 1,
+            children: /* @__PURE__ */jsxs(Inline, {
+              space: 2,
+              children: [text, /* @__PURE__ */jsx(CodeWrapper, {
+                size: 1,
+                children: filename ? filename : "..."
+              })]
+            })
+          })
+        }), /* @__PURE__ */jsx(Card, {
+          marginTop: 3,
+          radius: 5,
+          shadow: 1,
+          children: /* @__PURE__ */jsx(LinearProgress, {
+            value: progress
+          })
+        })]
+      }), onCancel ? /* @__PURE__ */jsx(Button, {
+        fontSize: 2,
+        text: "Cancel upload",
+        mode: "ghost",
+        tone: "critical",
+        onClick: onCancel
+      }) : null]
+    })
+  });
+};
+const Player = _ref17 => {
+  let {
+    asset,
+    buttons,
+    readOnly,
+    onChange
+  } = _ref17;
+  var _a, _b, _c, _d;
+  const isLoading = useMemo(() => {
+    if ((asset == null ? void 0 : asset.status) === "preparing") {
+      return "Preparing the video";
+    }
+    if ((asset == null ? void 0 : asset.status) === "waiting_for_upload") {
+      return "Waiting for upload to start";
+    }
+    if ((asset == null ? void 0 : asset.status) === "waiting") {
+      return "Processing upload";
+    }
+    if ((asset == null ? void 0 : asset.status) === "ready") {
+      return false;
+    }
+    if (typeof (asset == null ? void 0 : asset.status) === "undefined") {
+      return false;
+    }
+    return true;
+  }, [asset]);
+  const isPreparingStaticRenditions = useMemo(() => {
+    var _a2, _b2, _c2, _d2;
+    if (((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.static_renditions) == null ? void 0 : _b2.status) === "preparing") {
+      return true;
+    }
+    if (((_d2 = (_c2 = asset == null ? void 0 : asset.data) == null ? void 0 : _c2.static_renditions) == null ? void 0 : _d2.status) === "ready") {
+      return false;
+    }
+    return false;
+  }, [(_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.static_renditions) == null ? void 0 : _b.status]);
+  const playRef = useRef(null);
+  const muteRef = useRef(null);
+  const handleCancelUpload = useCancelUpload(asset, onChange);
+  useEffect(() => {
+    var _a2, _b2;
+    const style = document.createElement("style");
+    style.innerHTML = "button svg { vertical-align: middle; }";
+    if ((_a2 = playRef.current) == null ? void 0 : _a2.shadowRoot) {
+      playRef.current.shadowRoot.appendChild(style);
+    }
+    if ((_b2 = muteRef == null ? void 0 : muteRef.current) == null ? void 0 : _b2.shadowRoot) {
+      muteRef.current.shadowRoot.appendChild(style.cloneNode(true));
+    }
+  }, []);
+  useEffect(() => {
+    var _a2, _b2, _c2;
+    if ((asset == null ? void 0 : asset.status) === "errored") {
+      handleCancelUpload();
+      throw new Error((_c2 = (_b2 = (_a2 = asset.data) == null ? void 0 : _a2.errors) == null ? void 0 : _b2.messages) == null ? void 0 : _c2.join(" "));
+    }
+  }, [(_d = (_c = asset.data) == null ? void 0 : _c.errors) == null ? void 0 : _d.messages, asset == null ? void 0 : asset.status, handleCancelUpload]);
+  if (!asset || !asset.status) {
+    return null;
+  }
+  if (isLoading) {
+    return /* @__PURE__ */jsx(UploadProgress, {
+      progress: 100,
+      filename: asset == null ? void 0 : asset.filename,
+      text: isLoading !== true && isLoading || "Waiting for Mux to complete the file",
+      onCancel: readOnly ? void 0 : () => handleCancelUpload()
+    });
+  }
+  return /* @__PURE__ */jsxs(VideoPlayer, {
+    asset,
+    children: [buttons && /* @__PURE__ */jsx(TopControls, {
+      slot: "top-chrome",
+      children: buttons
+    }), isPreparingStaticRenditions && /* @__PURE__ */jsx(Card, {
+      padding: 2,
+      radius: 1,
+      style: {
+        background: "var(--card-fg-color)",
+        position: "absolute",
+        top: "0.5em",
+        left: "0.5em"
+      },
+      children: /* @__PURE__ */jsx(Text, {
+        size: 1,
+        style: {
+          color: "var(--card-bg-color)"
+        },
+        children: "MUX is preparing static renditions, please stand by"
+      })
+    })]
+  });
+};
+function focusRingBorderStyle(border) {
+  return "inset 0 0 0 ".concat(border.width, "px ").concat(border.color);
+}
+function focusRingStyle(opts) {
+  const {
+    base,
+    border,
+    focusRing
+  } = opts;
+  const focusRingOutsetWidth = focusRing.offset + focusRing.width;
+  const focusRingInsetWidth = 0 - focusRing.offset;
+  const bgColor = base ? base.bg : "var(--card-bg-color)";
+  return [focusRingInsetWidth > 0 && "inset 0 0 0 ".concat(focusRingInsetWidth, "px var(--card-focus-ring-color)"), border && focusRingBorderStyle(border), focusRingInsetWidth < 0 && "0 0 0 ".concat(0 - focusRingInsetWidth, "px ").concat(bgColor), focusRingOutsetWidth > 0 && "0 0 0 ".concat(focusRingOutsetWidth, "px var(--card-focus-ring-color)")].filter(Boolean).join(",");
+}
+var __freeze$6 = Object.freeze;
+var __defProp$7 = Object.defineProperty;
+var __template$6 = (cooked, raw) => __freeze$6(__defProp$7(cooked, "raw", {
+  value: __freeze$6(raw || cooked.slice())
+}));
+var _a$6;
+const FileButton = styled(MenuItem)(_ref18 => {
+  let {
+    theme
+  } = _ref18;
+  const {
+    focusRing
+  } = theme.sanity;
+  const base = theme.sanity.color.base;
+  const border = {
+    width: 1,
+    color: "var(--card-border-color)"
+  };
+  return css(_a$6 || (_a$6 = __template$6(["\n    position: relative;\n\n    &:not([data-disabled='true']) {\n      &:focus-within {\n        box-shadow: ", ";\n      }\n    }\n\n    & input {\n      overflow: hidden;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      min-width: 0;\n      display: block;\n      appearance: none;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      opacity: 0;\n    }\n  "])), focusRingStyle({
+    base,
+    border,
+    focusRing
+  }));
+});
+const FileInputMenuItem = React.forwardRef(function FileInputMenuItem2(props, forwardedRef) {
+  const {
+    icon,
+    id: idProp,
+    accept,
+    capture,
+    fontSize,
+    multiple,
+    onSelect,
+    padding = 3,
+    space = 3,
+    textAlign,
+    text,
+    disabled,
+    ...rest
+  } = props;
+  const idHook = useId();
+  const id = idProp || idHook;
+  const handleChange = React.useCallback(event => {
+    if (onSelect && event.target.files) {
+      onSelect(Array.from(event.target.files));
+    }
+  }, [onSelect]);
+  const content = /* @__PURE__ */jsxs(Flex, {
+    align: "center",
+    justify: "flex-start",
+    padding,
+    children: [icon && /* @__PURE__ */jsx(Box, {
+      marginRight: text ? space : void 0,
+      children: /* @__PURE__ */jsxs(Text, {
+        size: fontSize,
+        children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
+      })
+    }), text && /* @__PURE__ */jsx(Text, {
+      align: textAlign,
+      size: fontSize,
+      textOverflow: "ellipsis",
+      children: text
+    })]
+  });
+  return /* @__PURE__ */jsxs(FileButton, {
+    ...rest,
+    htmlFor: id,
+    padding: 0,
+    fontSize: 2,
+    disabled,
+    ref: forwardedRef,
+    children: [content, /* @__PURE__ */jsx("input", {
+      "data-testid": "file-button-input",
+      accept,
+      capture,
+      id,
+      multiple,
+      onChange: handleChange,
+      type: "file",
+      value: "",
+      disabled
+    })]
+  });
+});
+var __freeze$5 = Object.freeze;
+var __defProp$6 = Object.defineProperty;
+var __template$5 = (cooked, raw) => __freeze$5(__defProp$6(cooked, "raw", {
+  value: __freeze$5(raw || cooked.slice())
+}));
+var _a$5, _b$2;
+const LockCard = styled(Card)(_a$5 || (_a$5 = __template$5(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0.6;\n  mix-blend-mode: screen;\n  background: transparent;\n"])));
+const LockButton = styled(Button)(_b$2 || (_b$2 = __template$5(["\n  background: transparent;\n  color: white;\n"])));
+function PlayerActionsMenu(props) {
+  const {
+    asset,
+    readOnly,
+    dialogState,
+    setDialogState,
+    onChange,
+    onUpload
+  } = props;
+  const [open, setOpen] = useState(false);
+  const [menuElement, setMenuRef] = useState(null);
+  const isSigned = useMemo(() => getPlaybackPolicy(asset) === "signed", [asset]);
+  const onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange]);
+  useEffect(() => {
+    if (open && dialogState) {
+      setOpen(false);
+    }
+  }, [dialogState, open]);
+  useClickOutside(useCallback(() => setOpen(false), []), [menuElement]);
+  return /* @__PURE__ */jsxs(Inline, {
+    space: 1,
+    padding: 2,
+    children: [isSigned && /* @__PURE__ */jsx(Tooltip, {
+      content: /* @__PURE__ */jsx(Box, {
+        padding: 2,
+        children: /* @__PURE__ */jsx(Text, {
+          muted: true,
+          size: 1,
+          children: "Signed playback policy"
+        })
+      }),
+      placement: "right",
+      portal: true,
+      children: /* @__PURE__ */jsx(LockCard, {
+        radius: 2,
+        margin: 2,
+        scheme: "dark",
+        tone: "positive",
+        children: /* @__PURE__ */jsx(LockButton, {
+          icon: LockIcon,
+          mode: "bleed",
+          tone: "positive"
+        })
+      })
+    }), /* @__PURE__ */jsx(Popover, {
+      content: /* @__PURE__ */jsxs(Menu, {
+        ref: setMenuRef,
+        children: [/* @__PURE__ */jsx(Box, {
+          padding: 2,
+          children: /* @__PURE__ */jsx(Label$1, {
+            muted: true,
+            size: 1,
+            children: "Replace"
+          })
+        }), /* @__PURE__ */jsx(FileInputMenuItem, {
+          accept: "video/*",
+          icon: UploadIcon,
+          mode: "bleed",
+          onSelect: onUpload,
+          text: "Upload",
+          disabled: readOnly,
+          fontSize: 2
+        }), /* @__PURE__ */jsx(MenuItem, {
+          icon: SearchIcon,
+          text: "Browse",
+          onClick: () => setDialogState("select-video")
+        }), /* @__PURE__ */jsx(MenuDivider, {}), /* @__PURE__ */jsx(MenuItem, {
+          icon: PlugIcon,
+          text: "Configure API",
+          onClick: () => setDialogState("secrets")
+        }), /* @__PURE__ */jsx(MenuDivider, {}), /* @__PURE__ */jsx(MenuItem, {
+          tone: "critical",
+          icon: ResetIcon,
+          text: "Clear field",
+          onClick: onReset,
+          disabled: readOnly
+        })]
+      }),
+      portal: true,
+      open,
+      children: /* @__PURE__ */jsx(Button, {
+        icon: EllipsisVerticalIcon,
+        mode: "ghost",
+        onClick: () => {
+          setDialogState(false);
+          setOpen(true);
+        }
+      })
+    })]
+  });
+}
+var PlayerActionsMenu$1 = memo(PlayerActionsMenu);
+var __freeze$4 = Object.freeze;
+var __defProp$5 = Object.defineProperty;
+var __template$4 = (cooked, raw) => __freeze$4(__defProp$5(cooked, "raw", {
+  value: __freeze$4(raw || cooked.slice())
+}));
+var _a$4;
+function withFocusRing(component) {
+  return styled(component)(props => {
+    const border = {
+      width: props.$border ? 1 : 0,
+      color: "var(--card-border-color)"
+    };
+    return css(_a$4 || (_a$4 = __template$4(["\n        --card-focus-box-shadow: ", ";\n\n        border-radius: ", ";\n        outline: none;\n        box-shadow: var(--card-focus-box-shadow);\n\n        &:focus {\n          --card-focus-box-shadow: ", ";\n        }\n      "])), focusRingBorderStyle(border), rem(props.theme.sanity.radius[1]), focusRingStyle({
+      base: props.theme.sanity.color.base,
+      border,
+      focusRing: props.theme.sanity.focusRing
+    }));
+  });
+}
+var __freeze$3 = Object.freeze;
+var __defProp$4 = Object.defineProperty;
+var __template$3 = (cooked, raw) => __freeze$3(__defProp$4(cooked, "raw", {
+  value: __freeze$3(raw || cooked.slice())
+}));
+var _a$3;
+const ctrlKey = 17;
+const cmdKey = 91;
+const UploadCardWithFocusRing = withFocusRing(Card);
+const UploadCard$1 = forwardRef((_ref19, forwardedRef) => {
+  let {
+    children,
+    tone,
+    onPaste,
+    onDrop,
+    onDragEnter,
+    onDragLeave,
+    onDragOver
+  } = _ref19;
+  const ctrlDown = useRef(false);
+  const inputRef = useRef(null);
+  const handleKeyDown = useCallback(event => {
+    if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
+      ctrlDown.current = true;
+    }
+    const vKey = 86;
+    if (ctrlDown.current && event.keyCode == vKey) {
+      inputRef.current.focus();
+    }
+  }, []);
+  const handleKeyUp = useCallback(event => {
+    if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
+      ctrlDown.current = false;
+    }
+  }, []);
+  return /* @__PURE__ */jsxs(UploadCardWithFocusRing, {
+    tone,
+    height: "fill",
+    ref: forwardedRef,
+    padding: 0,
+    radius: 2,
+    shadow: 0,
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    onPaste,
+    onDrop,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    children: [/* @__PURE__ */jsx(HiddenInput$1, {
+      ref: inputRef,
+      onPaste
+    }), children]
+  });
+});
+const HiddenInput$1 = styled.input.attrs({
+  type: "text"
+})(_a$3 || (_a$3 = __template$3(["\n  position: absolute;\n  border: 0;\n  color: white;\n  opacity: 0;\n\n  &:focus {\n    outline: none;\n  }\n"])));
+var __freeze$2 = Object.freeze;
+var __defProp$3 = Object.defineProperty;
+var __template$2 = (cooked, raw) => __freeze$2(__defProp$3(cooked, "raw", {
+  value: __freeze$2(raw || cooked.slice())
+}));
+var _a$2, _b$1;
+const HiddenInput = styled.input(_a$2 || (_a$2 = __template$2(["\n  overflow: hidden;\n  width: 0.1px;\n  height: 0.1px;\n  opacity: 0;\n  position: absolute;\n  z-index: -1;\n"])));
+const Label = styled.label(_b$1 || (_b$1 = __template$2(["\n  position: relative;\n"])));
+const FileInputButton = _ref20 => {
+  let {
+    onSelect,
+    ...props
+  } = _ref20;
+  const inputId = "FileSelect".concat(useId());
+  const inputRef = useRef(null);
+  const handleSelect = useCallback(event => {
+    if (onSelect) {
+      onSelect(event.target.files);
+    }
+  }, [onSelect]);
+  const handleButtonClick = useCallback(() => {
+    var _a2;
+    return (_a2 = inputRef.current) == null ? void 0 : _a2.click();
+  }, []);
+  return /* @__PURE__ */jsxs(Label, {
+    htmlFor: inputId,
+    children: [/* @__PURE__ */jsx(HiddenInput, {
+      accept: "video/*",
+      ref: inputRef,
+      tabIndex: 0,
+      type: "file",
+      id: inputId,
+      onChange: handleSelect,
+      value: ""
+    }), /* @__PURE__ */jsx(Button, {
+      onClick: handleButtonClick,
+      mode: "default",
+      tone: "primary",
+      style: {
+        width: "100%"
+      },
+      ...props
+    })]
+  });
+};
+var __freeze$1 = Object.freeze;
+var __defProp$2 = Object.defineProperty;
+var __template$1 = (cooked, raw) => __freeze$1(__defProp$2(cooked, "raw", {
+  value: __freeze$1(raw || cooked.slice())
+}));
+var _a$1, _b;
+const UploadCard = styled(Card)(_a$1 || (_a$1 = __template$1(["\n  && {\n    border-style: dashed;\n  }\n"])));
+const ConfigureApiBox = styled(Box)(_b || (_b = __template$1(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+function UploadPlaceholder(props) {
+  const {
+    setDialogState,
+    readOnly,
+    onSelect,
+    hovering,
+    needsSetup
+  } = props;
+  const handleBrowse = useCallback(() => setDialogState("select-video"), [setDialogState]);
+  const handleConfigureApi = useCallback(() => setDialogState("secrets"), [setDialogState]);
+  return /* @__PURE__ */jsx(Box, {
+    style: {
+      padding: 1,
+      position: "relative"
+    },
+    height: "stretch",
+    children: /* @__PURE__ */jsxs(UploadCard, {
+      sizing: "border",
+      height: "fill",
+      tone: readOnly ? "transparent" : "inherit",
+      border: true,
+      padding: 3,
+      style: hovering ? {
+        borderColor: "transparent"
+      } : void 0,
+      children: [/* @__PURE__ */jsx(ConfigureApiBox, {
+        padding: 3,
+        children: /* @__PURE__ */jsx(Button, {
+          padding: 3,
+          radius: 3,
+          tone: needsSetup ? "critical" : void 0,
+          onClick: handleConfigureApi,
+          icon: PlugIcon,
+          mode: "bleed"
+        })
+      }), /* @__PURE__ */jsxs(Flex, {
+        align: "center",
+        justify: "space-between",
+        gap: 4,
+        direction: ["column", "column", "row"],
+        paddingY: [2, 2, 0],
+        sizing: "border",
+        height: "fill",
+        children: [/* @__PURE__ */jsxs(Flex, {
+          align: "center",
+          justify: "center",
+          gap: 2,
+          flex: 1,
+          children: [/* @__PURE__ */jsx(Flex, {
+            justify: "center",
+            children: /* @__PURE__ */jsx(Text, {
+              muted: true,
+              children: /* @__PURE__ */jsx(DocumentVideoIcon, {})
+            })
+          }), /* @__PURE__ */jsx(Flex, {
+            justify: "center",
+            children: /* @__PURE__ */jsx(Text, {
+              size: 1,
+              muted: true,
+              children: "Drag video or paste URL here"
+            })
+          })]
+        }), /* @__PURE__ */jsxs(Inline, {
+          space: 2,
+          children: [/* @__PURE__ */jsx(FileInputButton, {
+            mode: "ghost",
+            tone: "default",
+            icon: UploadIcon,
+            text: "Upload",
+            onSelect
+          }), /* @__PURE__ */jsx(Button, {
+            mode: "ghost",
+            icon: SearchIcon,
+            text: "Select",
+            onClick: handleBrowse
+          })]
+        })]
+      })]
+    })
+  });
+}
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(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;
+};
+class MuxVideoInputUploader extends Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", {
+      isDraggingOver: false,
+      invalidPaste: false,
+      invalidFile: false,
+      uploadProgress: null,
+      fileInfo: null,
+      uuid: null,
+      error: null,
+      url: null
+    });
+    __publicField(this, "dragEnteredEls", []);
+    __publicField(this, "ctrlDown", false);
+    // eslint-disable-next-line no-warning-comments
+    // @TODO add proper typings for the return values of uploadFile and uploadUrl
+    __publicField(this, "upload", null);
+    __publicField(this, "container", React.createRef());
+    __publicField(this, "onCancelUploadButtonClick$");
+    __publicField(this, "handleCancelUploadButtonClick");
+    __publicField(this, "handleProgress", evt => {
+      this.setState({
+        uploadProgress: evt.percent
+      });
+    });
+    __publicField(this, "onUpload", files => {
+      this.setState({
+        uploadProgress: 0,
+        fileInfo: null,
+        uuid: null
+      });
+      this.upload = uploadFile(this.props.config, this.props.client, files[0], {
+        enableSignedUrls: this.props.secrets.enableSignedUrls
+      }).pipe(takeUntil(this.onCancelUploadButtonClick$.pipe(tap(() => {
+        if (this.state.uuid) {
+          this.props.client.delete(this.state.uuid);
+        }
+      })))).subscribe({
+        complete: () => {
+          this.setState({
+            error: null,
+            uploadProgress: null,
+            uuid: null
+          });
+        },
+        next: event => {
+          this.handleUploadEvent(event);
+        },
+        error: err => {
+          this.setState({
+            error: err,
+            uploadProgress: null,
+            uuid: null
+          });
+        }
+      });
+    });
+    // eslint-disable-next-line no-warning-comments
+    // @TODO add proper typings for the Observable events
+    __publicField(this, "handleUploadEvent", event => {
+      switch (event.type) {
+        case "success":
+          return this.handleUploadSuccess(event.asset);
+        case "progress":
+          return this.handleProgress(event);
+        case "file":
+          return this.setState({
+            fileInfo: event.file
+          });
+        case "uuid":
+          return this.setState({
+            uuid: event.uuid
+          });
+        case "url":
+          return this.setState({
+            url: event.url,
+            uploadProgress: 100
+          });
+        default:
+          return null;
+      }
+    });
+    __publicField(this, "handleUploadSuccess", asset => {
+      this.setState({
+        uploadProgress: 100
+      });
+      this.props.onChange(PatchEvent.from([setIfMissing({
+        asset: {}
+      }), set({
+        _type: "reference",
+        _weak: true,
+        _ref: asset._id
+      }, ["asset"])]));
+    });
+    __publicField(this, "handlePaste", event => {
+      const clipboardData = event.clipboardData || window.clipboardData;
+      const url = clipboardData.getData("text");
+      const options = {
+        enableSignedUrls: this.props.secrets.enableSignedUrls
+      };
+      this.upload = uploadUrl(this.props.config, this.props.client, url, options).subscribe({
+        complete: () => {
+          this.setState({
+            error: null,
+            uploadProgress: null,
+            url: null
+          });
+        },
+        next: sEvent => {
+          this.handleUploadEvent(sEvent);
+        },
+        error: err => {
+          let error;
+          if (!err.message.toLowerCase().match("invalid url")) {
+            error = err;
+          }
+          this.setState({
+            invalidPaste: true,
+            error
+          }, () => {
+            setTimeout(() => {
+              this.setState({
+                invalidPaste: false,
+                uploadProgress: null
+              });
+            }, 2e3);
+          });
+        }
+      });
+    });
+    __publicField(this, "handleDrop", event => {
+      this.setState({
+        isDraggingOver: false
+      });
+      event.preventDefault();
+      event.stopPropagation();
+      extractDroppedFiles(event.nativeEvent.dataTransfer).then(files => {
+        if (files) {
+          this.onUpload(files);
+        }
+      });
+    });
+    __publicField(this, "handleDragOver", event => {
+      event.preventDefault();
+      event.stopPropagation();
+    });
+    __publicField(this, "handleDragEnter", event => {
+      var _a, _b;
+      event.stopPropagation();
+      this.dragEnteredEls.push(event.target);
+      this.setState({
+        isDraggingOver: true
+      });
+      const type = (_b = (_a = event.dataTransfer.items) == null ? void 0 : _a[0]) == null ? void 0 : _b.type;
+      this.setState({
+        invalidFile: !type.startsWith("video/")
+      });
+    });
+    __publicField(this, "handleDragLeave", event => {
+      event.stopPropagation();
+      const idx = this.dragEnteredEls.indexOf(event.target);
+      if (idx > -1) {
+        this.dragEnteredEls.splice(idx, 1);
+      }
+      if (this.dragEnteredEls.length === 0) {
+        this.setState({
+          isDraggingOver: false
+        });
+      }
+    });
+  }
+  componentWillUnmount() {
+    this.unSubscribeToUpload();
+  }
+  componentDidMount() {
+    const events$ = new Subject();
+    this.onCancelUploadButtonClick$ = events$.asObservable();
+    this.handleCancelUploadButtonClick = event => events$.next(event);
+  }
+  unSubscribeToUpload() {
+    if (this.upload && !this.upload.closed) {
+      this.upload.unsubscribe();
+    }
+  }
+  render() {
+    var _a;
+    if (this.state.uploadProgress !== null) {
+      return /* @__PURE__ */jsx(UploadProgress, {
+        onCancel: this.handleCancelUploadButtonClick,
+        progress: this.state.uploadProgress,
+        filename: ((_a = this.state.fileInfo) == null ? void 0 : _a.name) || this.state.url
+      });
+    }
+    if (this.state.error) {
+      throw this.state.error;
+    }
+    return /* @__PURE__ */jsxs(Fragment, {
+      children: [/* @__PURE__ */jsx(UploadCard$1, {
+        tone: this.state.isDraggingOver && (this.state.invalidPaste || this.state.invalidFile) ? "critical" : this.state.isDraggingOver ? "positive" : void 0,
+        onDrop: this.handleDrop,
+        onDragOver: this.handleDragOver,
+        onDragLeave: this.handleDragLeave,
+        onDragEnter: this.handleDragEnter,
+        onPaste: this.handlePaste,
+        ref: this.container,
+        children: this.props.asset ? /* @__PURE__ */jsx(Player, {
+          readOnly: this.props.readOnly,
+          asset: this.props.asset,
+          onChange: this.props.onChange,
+          buttons: /* @__PURE__ */jsx(PlayerActionsMenu$1, {
+            asset: this.props.asset,
+            dialogState: this.props.dialogState,
+            setDialogState: this.props.setDialogState,
+            onChange: this.props.onChange,
+            onUpload: this.onUpload,
+            readOnly: this.props.readOnly
+          })
+        }) : /* @__PURE__ */jsx(UploadPlaceholder, {
+          hovering: this.state.isDraggingOver,
+          onSelect: this.onUpload,
+          readOnly: this.props.readOnly,
+          setDialogState: this.props.setDialogState,
+          needsSetup: this.props.needsSetup
+        })
+      }), this.props.dialogState === "select-video" && /* @__PURE__ */jsx(InputBrowser, {
+        asset: this.props.asset,
+        onChange: this.props.onChange,
+        setDialogState: this.props.setDialogState
+      })]
+    });
+  }
+}
+const useSaveSecrets = (client, secrets) => {
+  return useCallback(async _ref21 => {
+    let {
+      token,
+      secretKey,
+      enableSignedUrls
+    } = _ref21;
+    let {
+      signingKeyId,
+      signingKeyPrivate
+    } = secrets;
+    try {
+      await saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate);
+      const valid = await testSecrets(client);
+      if (!(valid == null ? void 0 : valid.status) && token && secretKey) {
+        throw new Error("Invalid secrets");
+      }
+    } catch (err) {
+      console.error("Error while trying to save secrets:", err);
+      throw err;
+    }
+    if (enableSignedUrls) {
+      const hasValidSigningKeys = await haveValidSigningKeys(client, signingKeyId, signingKeyPrivate);
+      if (!hasValidSigningKeys) {
+        try {
+          const {
+            data
+          } = await createSigningKeys(client);
+          signingKeyId = data.id;
+          signingKeyPrivate = data.private_key;
+          await saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate);
+        } catch (err) {
+          console.log("Error while creating and saving signing key:", err == null ? void 0 : err.message);
+          throw err;
+        }
+      }
+    }
+    return {
+      token,
+      secretKey,
+      enableSignedUrls,
+      signingKeyId,
+      signingKeyPrivate
+    };
+  }, [client, secrets]);
+};
+function init(_ref22) {
+  let {
+    token,
+    secretKey,
+    enableSignedUrls
+  } = _ref22;
+  return {
+    submitting: false,
+    error: null,
+    // Form inputs don't set the state back to null when clearing a field, but uses empty strings
+    // This ensures the `dirty` check works correctly
+    token: token != null ? token : "",
+    secretKey: secretKey != null ? secretKey : "",
+    enableSignedUrls: enableSignedUrls != null ? enableSignedUrls : false
+  };
+}
+function reducer(state, action) {
+  switch (action == null ? void 0 : action.type) {
+    case "submit":
+      return {
+        ...state,
+        submitting: true,
+        error: null
+      };
+    case "error":
+      return {
+        ...state,
+        submitting: false,
+        error: action.payload
+      };
+    case "reset":
+      return init(action.payload);
+    case "change":
+      return {
+        ...state,
+        [action.payload.name]: action.payload.value
+      };
+    default:
+      throw new Error("Unknown action type: ".concat(action == null ? void 0 : action.type));
+  }
+}
+const useSecretsFormState = secrets => useReducer(reducer, secrets, init);
+const ids = ["title", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r"];
+function MuxLogo(_ref23) {
+  let {
+    height = 26
+  } = _ref23;
+  const id = useId();
+  const [titleId, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = useMemo(() => ids.map(field => "".concat(id, "-").concat(field)), [id]);
+  return /* @__PURE__ */jsxs("svg", {
+    "aria-labelledby": titleId,
+    role: "img",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlSpace: "preserve",
+    viewBox: "92.08878326416016 102.66712188720703 692.76123046875 219.99948120117188",
+    style: {
+      height: "".concat(height, "px")
+    },
+    children: [/* @__PURE__ */jsx("title", {
+      id: titleId,
+      children: "Mux Logo"
+    }), /* @__PURE__ */jsxs("defs", {
+      children: [/* @__PURE__ */jsxs("linearGradient", {
+        id: c,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(528.38055 0 0 -528.38055 63.801 159.5)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxs("linearGradient", {
+        id: d,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(523.66766 0 0 -523.66766 67.897 159.5)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxs("linearGradient", {
+        id: g,
+        spreadMethod: "pad",
+        gradientTransform: "rotate(180 296.075 79.75) scale(524.84045)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxs("linearGradient", {
+        id: i,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxs("linearGradient", {
+        id: j,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(523.08514 0 0 -523.08514 67.897 224.446)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxs("linearGradient", {
+        id: k,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 94.553)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxs("linearGradient", {
+        id: l,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxs("linearGradient", {
+        id: m,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 94.554)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxs("linearGradient", {
+        id: p,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(521.97632 0 0 -521.97632 69.067 191.973)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxs("linearGradient", {
+        id: q,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(523.09039 0 0 -523.09039 67.312 191.973)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsxs("linearGradient", {
+        id: r,
+        spreadMethod: "pad",
+        gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
+        gradientUnits: "userSpaceOnUse",
+        y2: 0,
+        x2: 1,
+        y1: 0,
+        x1: 0,
+        children: [/* @__PURE__ */jsx("stop", {
+          offset: 0,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff4e00"
+          }
+        }), /* @__PURE__ */jsx("stop", {
+          offset: 1,
+          style: {
+            stopOpacity: 1,
+            stopColor: "#ff1791"
+          }
+        })]
+      }), /* @__PURE__ */jsx("clipPath", {
+        id: a,
+        clipPathUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */jsx("path", {
+          d: "M0 319h657.706V0H0Z"
+        })
+      }), /* @__PURE__ */jsx("clipPath", {
+        id: b,
+        clipPathUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */jsx("path", {
+          d: "M423.64 242h164.999V77H423.64Z"
+        })
+      }), /* @__PURE__ */jsx("clipPath", {
+        id: e,
+        clipPathUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */jsx("path", {
+          d: "M0 319h657.706V0H0Z"
+        })
+      }), /* @__PURE__ */jsx("clipPath", {
+        id: f,
+        clipPathUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */jsx("path", {
+          d: "M311.3 242h93.031V77H311.3Z"
+        })
+      }), /* @__PURE__ */jsx("clipPath", {
+        id: h,
+        clipPathUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */jsx("path", {
+          d: "M198.96 242h35.106V77H198.96Z"
+        })
+      }), /* @__PURE__ */jsx("clipPath", {
+        id: n,
+        clipPathUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */jsx("path", {
+          d: "M0 319h657.706V0H0Z"
+        })
+      }), /* @__PURE__ */jsx("clipPath", {
+        id: o,
+        clipPathUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */jsx("path", {
+          d: "M69.067 242H169.12V141.947H69.067Z"
+        })
+      })]
+    }), /* @__PURE__ */jsx("g", {
+      clipPath: "url(#".concat(a, ")"),
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+      children: /* @__PURE__ */jsx("g", {
+        style: {
+          opacity: 0.69999701
+        },
+        clipPath: "url(#".concat(b, ")"),
+        children: /* @__PURE__ */jsx("path", {
+          style: {
+            fill: "url(#".concat(c, ")"),
+            stroke: "none"
+          },
+          d: "M558.674 82.142c6.855-6.855 17.969-6.855 24.824 0 6.854 6.855 6.854 17.969 0 24.823L453.605 236.858c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
+        })
+      })
+    }), /* @__PURE__ */jsx("path", {
+      style: {
+        fill: "url(#".concat(d, ")"),
+        stroke: "none"
+      },
+      d: "M558.674 236.858 428.781 106.966c-6.855-6.855-6.855-17.969 0-24.825 6.855-6.854 17.969-6.854 24.823 0l129.894 129.894c6.854 6.855 6.854 17.968 0 24.823A17.498 17.498 0 0 1 571.086 242a17.495 17.495 0 0 1-12.412-5.142",
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+    }), /* @__PURE__ */jsxs("g", {
+      clipPath: "url(#".concat(e, ")"),
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+      children: [/* @__PURE__ */jsx("g", {
+        style: {
+          opacity: 0.69999701
+        },
+        clipPath: "url(#".concat(f, ")"),
+        children: /* @__PURE__ */jsx("path", {
+          style: {
+            fill: "url(#".concat(g, ")"),
+            stroke: "none"
+          },
+          d: "M328.853 112.107c22.297 0 40.372 18.075 40.372 40.372v71.315c0 10.054 7.505 18.206 17.554 18.206 10.048 0 17.552-8.152 17.552-18.206v-71.315c0-41.686-33.793-75.479-75.478-75.479-9.694 0-17.553 7.859-17.553 17.554 0 9.694 7.859 17.553 17.553 17.553"
+        })
+      }), /* @__PURE__ */jsx("g", {
+        style: {
+          opacity: 0.69999701
+        },
+        clipPath: "url(#".concat(h, ")"),
+        children: /* @__PURE__ */jsx("path", {
+          style: {
+            fill: "url(#".concat(i, ")"),
+            stroke: "none"
+          },
+          d: "M216.513 242c-10.049 0-17.553-8.152-17.553-18.206V95.206c0-10.054 7.504-18.206 17.553-18.206 10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.054-7.505 18.206-17.553 18.206"
+        })
+      })]
+    }), /* @__PURE__ */jsx("path", {
+      style: {
+        fill: "url(#".concat(j, ")"),
+        stroke: "none"
+      },
+      d: "M369.225 224.447c0-9.694 7.859-17.553 17.553-17.553 9.695 0 17.553 7.859 17.553 17.553s-7.858 17.552-17.553 17.552c-9.694 0-17.553-7.858-17.553-17.552",
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+    }), /* @__PURE__ */jsx("path", {
+      style: {
+        fill: "url(#".concat(k, ")"),
+        stroke: "none"
+      },
+      d: "M553.532 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.552-17.554 17.552-9.694 0-17.553-7.858-17.553-17.552",
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+    }), /* @__PURE__ */jsx("path", {
+      style: {
+        fill: "url(#".concat(l, ")"),
+        stroke: "none"
+      },
+      d: "M69.067 223.794V95.206C69.067 85.152 76.571 77 86.62 77c10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.055-7.505 18.205-17.553 18.205-10.049 0-17.553-8.15-17.553-18.205",
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+    }), /* @__PURE__ */jsx("path", {
+      style: {
+        fill: "url(#".concat(m, ")"),
+        stroke: "none"
+      },
+      d: "M198.96 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.553-17.554 17.553-9.694 0-17.553-7.859-17.553-17.553",
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+    }), /* @__PURE__ */jsx("g", {
+      clipPath: "url(#".concat(n, ")"),
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+      children: /* @__PURE__ */jsx("g", {
+        style: {
+          opacity: 0.69999701
+        },
+        clipPath: "url(#".concat(o, ")"),
+        children: /* @__PURE__ */jsx("path", {
+          style: {
+            fill: "url(#".concat(p, ")"),
+            stroke: "none"
+          },
+          d: "M139.155 147.088c6.855-6.855 17.969-6.855 24.824 0s6.855 17.969 0 24.824l-64.947 64.946c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
+        })
+      })
+    }), /* @__PURE__ */jsx("path", {
+      style: {
+        fill: "url(#".concat(q, ")"),
+        stroke: "none"
+      },
+      d: "m204.101 236.858-64.947-64.946c-6.854-6.855-6.854-17.969 0-24.824 6.856-6.855 17.97-6.855 24.824 0l64.947 64.947c6.855 6.855 6.855 17.968 0 24.823A17.495 17.495 0 0 1 216.513 242a17.498 17.498 0 0 1-12.412-5.142",
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+    }), /* @__PURE__ */jsx("path", {
+      style: {
+        fill: "url(#".concat(r, ")"),
+        stroke: "none"
+      },
+      d: "M253.374 223.794v-71.315c0-41.685 33.793-75.479 75.479-75.479 9.695 0 17.553 7.859 17.553 17.554 0 9.694-7.858 17.553-17.553 17.553-22.297 0-40.372 18.075-40.372 40.372v71.315c0 10.055-7.505 18.205-17.554 18.205s-17.553-8.15-17.553-18.205",
+      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+    })]
+  });
+}
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", {
+  value: __freeze(raw || cooked.slice())
+}));
+var _a;
+const Logo = styled.span(_a || (_a = __template(["\n  display: inline-block;\n  height: 0.8em;\n  margin-right: 1em;\n  transform: translate(0.3em, -0.2em);\n"])));
+const Header = () => /* @__PURE__ */jsxs(Fragment, {
+  children: [/* @__PURE__ */jsx(Logo, {
+    children: /* @__PURE__ */jsx(MuxLogo, {
+      height: 13
+    })
+  }), "API Credentials"]
+});
+const fieldNames = ["token", "secretKey", "enableSignedUrls"];
+function ConfigureApi(_ref24) {
+  let {
+    secrets,
+    setDialogState
+  } = _ref24;
+  var _a, _b;
+  const client = useClient();
+  const [state, dispatch] = useSecretsFormState(secrets);
+  const hasSecretsInitially = useMemo(() => secrets.token && secrets.secretKey, [secrets]);
+  const handleClose = useCallback(() => setDialogState(false), [setDialogState]);
+  const dirty = useMemo(() => secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls, [secrets, state]);
+  const id = "ConfigureApi".concat(useId());
+  const [tokenId, secretKeyId, enableSignedUrlsId] = useMemo(() => fieldNames.map(field => "".concat(id, "-").concat(field)), [id]);
+  const firstField = useRef(null);
+  const handleSaveSecrets = useSaveSecrets(client, secrets);
+  const saving = useRef(false);
+  const handleSubmit = useCallback(event => {
+    event.preventDefault();
+    if (!saving.current && event.currentTarget.reportValidity()) {
+      saving.current = true;
+      dispatch({
+        type: "submit"
+      });
+      const {
+        token,
+        secretKey,
+        enableSignedUrls
+      } = state;
+      handleSaveSecrets({
+        token,
+        secretKey,
+        enableSignedUrls
+      }).then(savedSecrets => {
+        const {
+          projectId,
+          dataset
+        } = client.config();
+        clear([cacheNs, _id, projectId, dataset]);
+        preload(() => Promise.resolve(savedSecrets), [cacheNs, _id, projectId, dataset]);
+        setDialogState(false);
+      }).catch(err => dispatch({
+        type: "error",
+        payload: err.message
+      })).finally(() => {
+        saving.current = false;
+      });
+    }
+  }, [client, dispatch, handleSaveSecrets, setDialogState, state]);
+  const handleChangeToken = useCallback(event => {
+    dispatch({
+      type: "change",
+      payload: {
+        name: "token",
+        value: event.currentTarget.value
+      }
+    });
+  }, [dispatch]);
+  const handleChangeSecretKey = useCallback(event => {
+    dispatch({
+      type: "change",
+      payload: {
+        name: "secretKey",
+        value: event.currentTarget.value
+      }
+    });
+  }, [dispatch]);
+  const handleChangeEnableSignedUrls = useCallback(event => {
+    dispatch({
+      type: "change",
+      payload: {
+        name: "enableSignedUrls",
+        value: event.currentTarget.checked
+      }
+    });
+  }, [dispatch]);
+  useEffect(() => {
+    if (firstField.current) {
+      firstField.current.focus();
+    }
+  }, [firstField]);
+  return /* @__PURE__ */jsx(Dialog, {
+    id,
+    onClose: handleClose,
+    header: /* @__PURE__ */jsx(Header, {}),
+    width: 1,
+    style: {
+      maxWidth: "550px"
+    },
+    children: /* @__PURE__ */jsx(Box, {
+      padding: 4,
+      style: {
+        position: "relative"
+      },
+      children: /* @__PURE__ */jsx("form", {
+        onSubmit: handleSubmit,
+        noValidate: true,
+        children: /* @__PURE__ */jsxs(Stack, {
+          space: 4,
+          children: [!hasSecretsInitially && /* @__PURE__ */jsx(Card, {
+            padding: [3, 3, 3],
+            radius: 2,
+            shadow: 1,
+            tone: "primary",
+            children: /* @__PURE__ */jsxs(Stack, {
+              space: 3,
+              children: [/* @__PURE__ */jsxs(Text, {
+                size: 1,
+                children: ["To set up a new access token, go to your", " ", /* @__PURE__ */jsx("a", {
+                  href: "https://dashboard.mux.com/settings/access-tokens",
+                  target: "_blank",
+                  rel: "noreferrer noopener",
+                  children: "account on mux.com"
+                }), "."]
+              }), /* @__PURE__ */jsxs(Text, {
+                size: 1,
+                children: ["The access token needs permissions: ", /* @__PURE__ */jsx("strong", {
+                  children: "Mux Video "
+                }), "(Full Access) and ", /* @__PURE__ */jsx("strong", {
+                  children: "Mux Data"
+                }), " (Read)", /* @__PURE__ */jsx("br", {}), "The credentials will be stored safely in a hidden document only available to editors."]
+              })]
+            })
+          }), /* @__PURE__ */jsx(FormField$1, {
+            title: "Access Token",
+            inputId: tokenId,
+            children: /* @__PURE__ */jsx(TextInput, {
+              id: tokenId,
+              ref: firstField,
+              onChange: handleChangeToken,
+              type: "text",
+              value: (_a = state.token) != null ? _a : "",
+              required: !!state.secretKey || state.enableSignedUrls
+            })
+          }), /* @__PURE__ */jsx(FormField$1, {
+            title: "Secret Key",
+            inputId: secretKeyId,
+            children: /* @__PURE__ */jsx(TextInput, {
+              id: secretKeyId,
+              onChange: handleChangeSecretKey,
+              type: "text",
+              value: (_b = state.secretKey) != null ? _b : "",
+              required: !!state.token || state.enableSignedUrls
+            })
+          }), /* @__PURE__ */jsxs(Stack, {
+            space: 4,
+            children: [/* @__PURE__ */jsxs(Flex, {
+              align: "center",
+              children: [/* @__PURE__ */jsx(Checkbox, {
+                id: enableSignedUrlsId,
+                onChange: handleChangeEnableSignedUrls,
+                checked: state.enableSignedUrls,
+                style: {
+                  display: "block"
+                }
+              }), /* @__PURE__ */jsx(Box, {
+                flex: 1,
+                paddingLeft: 3,
+                children: /* @__PURE__ */jsx(Text, {
+                  children: /* @__PURE__ */jsx("label", {
+                    htmlFor: enableSignedUrlsId,
+                    children: "Enable Signed Urls"
+                  })
+                })
+              })]
+            }), secrets.signingKeyId && state.enableSignedUrls ? /* @__PURE__ */jsx(Card, {
+              padding: [3, 3, 3],
+              radius: 2,
+              shadow: 1,
+              tone: "caution",
+              children: /* @__PURE__ */jsxs(Stack, {
+                space: 3,
+                children: [/* @__PURE__ */jsx(Text, {
+                  size: 1,
+                  children: "The signing key ID that Sanity will use is:"
+                }), /* @__PURE__ */jsx(Code, {
+                  size: 1,
+                  children: secrets.signingKeyId
+                }), /* @__PURE__ */jsxs(Text, {
+                  size: 1,
+                  children: ["This key is only used for previewing content in the Sanity UI.", /* @__PURE__ */jsx("br", {}), "You should generate a different key to use in your application server."]
+                })]
+              })
+            }) : null]
+          }), /* @__PURE__ */jsxs(Inline, {
+            space: 2,
+            children: [/* @__PURE__ */jsx(Button, {
+              text: "Save",
+              disabled: !dirty,
+              loading: state.submitting,
+              tone: "primary",
+              mode: "default",
+              type: "submit"
+            }), /* @__PURE__ */jsx(Button, {
+              disabled: state.submitting,
+              text: "Cancel",
+              mode: "bleed",
+              onClick: handleClose
+            })]
+          }), state.error && /* @__PURE__ */jsx(Card, {
+            padding: [3, 3, 3],
+            radius: 2,
+            shadow: 1,
+            tone: "critical",
+            children: /* @__PURE__ */jsx(Text, {
+              children: state.error
+            })
+          })]
+        })
+      })
+    })
+  });
+}
+var ConfigureApi$1 = memo(ConfigureApi);
+function ErrorBoundaryCard(props) {
+  const {
+    children,
+    schemaType
+  } = props;
+  const {
+    push: pushToast
+  } = useToast();
+  const errorRef = useRef(null);
+  const {
+    ErrorBoundary,
+    didCatch,
+    error,
+    reset
+  } = useErrorBoundary({
+    onDidCatch: (err, errorInfo) => {
+      console.group(err.toString());
+      console.groupCollapsed("console.error");
+      console.error(err);
+      console.groupEnd();
+      if (err.stack) {
+        console.groupCollapsed("error.stack");
+        console.log(err.stack);
+        console.groupEnd();
+      }
+      if (errorInfo == null ? void 0 : errorInfo.componentStack) {
+        console.groupCollapsed("errorInfo.componentStack");
+        console.log(errorInfo.componentStack);
+        console.groupEnd();
+      }
+      console.groupEnd();
+      pushToast({
+        status: "error",
+        title: "Plugin crashed",
+        description: /* @__PURE__ */jsx(Flex, {
+          align: "center",
+          children: /* @__PURE__ */jsxs(Inline, {
+            space: 1,
+            children: ["An error happened while rendering", /* @__PURE__ */jsx(Button, {
+              padding: 1,
+              fontSize: 1,
+              style: {
+                transform: "translateY(1px)"
+              },
+              mode: "ghost",
+              text: schemaType.title,
+              onClick: () => {
+                if (errorRef.current) {
+                  scrollIntoView(errorRef.current, {
+                    behavior: "smooth",
+                    scrollMode: "if-needed",
+                    block: "center"
+                  });
+                }
+              }
+            })]
+          })
+        })
+      });
+    }
+  });
+  const handleRetry = useCallback(() => {
+    clear([name$1]);
+    reset();
+  }, [reset]);
+  if (didCatch) {
+    return /* @__PURE__ */jsx(Card, {
+      ref: errorRef,
+      paddingX: [2, 3, 4, 4],
+      height: "fill",
+      shadow: 1,
+      overflow: "auto",
+      children: /* @__PURE__ */jsx(Flex, {
+        justify: "flex-start",
+        align: "center",
+        height: "fill",
+        children: /* @__PURE__ */jsxs(Grid, {
+          columns: 1,
+          gap: [2, 3, 4, 4],
+          children: [/* @__PURE__ */jsxs(Heading, {
+            as: "h1",
+            children: ["The ", /* @__PURE__ */jsx("code", {
+              children: name$1
+            }), " plugin crashed"]
+          }), (error == null ? void 0 : error.message) && /* @__PURE__ */jsx(Card, {
+            padding: 3,
+            tone: "critical",
+            shadow: 1,
+            radius: 2,
+            children: /* @__PURE__ */jsx(Text, {
+              children: error.message
+            })
+          }), /* @__PURE__ */jsx(Inline, {
+            children: /* @__PURE__ */jsx(Button, {
+              onClick: handleRetry,
+              text: "Retry"
+            })
+          })]
+        })
+      })
+    });
+  }
+  return /* @__PURE__ */jsx(ErrorBoundary, {
+    children
+  });
+}
+var ErrorBoundaryCard$1 = memo(ErrorBoundaryCard);
+const InputFallback = () => {
+  return /* @__PURE__ */jsx("div", {
+    style: {
+      padding: 1
+    },
+    children: /* @__PURE__ */jsx(Card, {
+      shadow: 1,
+      sizing: "border",
+      style: {
+        aspectRatio: "16/9",
+        width: "100%",
+        borderRadius: "1px"
+      },
+      children: /* @__PURE__ */jsxs(Flex, {
+        align: "center",
+        direction: "column",
+        height: "fill",
+        justify: "center",
+        children: [/* @__PURE__ */jsx(Spinner, {
+          muted: true
+        }), /* @__PURE__ */jsx(Box, {
+          marginTop: 3,
+          children: /* @__PURE__ */jsx(Text, {
+            align: "center",
+            muted: true,
+            size: 1,
+            children: "Loading\u2026"
+          })
+        })]
+      })
+    })
+  });
+};
+function Onboard(props) {
+  const {
+    setDialogState
+  } = props;
+  const handleOpen = useCallback(() => setDialogState("secrets"), [setDialogState]);
+  return /* @__PURE__ */jsx(Fragment, {
+    children: /* @__PURE__ */jsx("div", {
+      style: {
+        padding: 2
+      },
+      children: /* @__PURE__ */jsx(Card, {
+        display: "flex",
+        sizing: "border",
+        style: {
+          aspectRatio: "16/9",
+          width: "100%",
+          boxShadow: "var(--card-bg-color) 0 0 0 2px"
+        },
+        paddingX: [2, 3, 4, 4],
+        radius: 1,
+        tone: "transparent",
+        children: /* @__PURE__ */jsx(Flex, {
+          justify: "flex-start",
+          align: "center",
+          children: /* @__PURE__ */jsxs(Grid, {
+            columns: 1,
+            gap: [2, 3, 4, 4],
+            children: [/* @__PURE__ */jsx(Inline, {
+              paddingY: 1,
+              children: /* @__PURE__ */jsx("div", {
+                style: {
+                  height: "32px"
+                },
+                children: /* @__PURE__ */jsx(MuxLogo, {})
+              })
+            }), /* @__PURE__ */jsx(Inline, {
+              paddingY: 1,
+              children: /* @__PURE__ */jsx(Heading, {
+                size: [0, 1, 2, 2],
+                children: "Upload and preview videos directly from your studio."
+              })
+            }), /* @__PURE__ */jsx(Inline, {
+              paddingY: 1,
+              children: /* @__PURE__ */jsx(Button, {
+                mode: "ghost",
+                icon: PlugIcon,
+                text: "Configure API",
+                onClick: handleOpen
+              })
+            })]
+          })
+        })
+      })
+    })
+  });
+}
+const Input = props => {
+  var _a;
+  const client = useClient();
+  const secretDocumentValues = useSecretsDocumentValues();
+  const assetDocumentValues = useAssetDocumentValues((_a = props.value) == null ? void 0 : _a.asset);
+  const poll = useMuxPolling(props.readOnly ? void 0 : (assetDocumentValues == null ? void 0 : assetDocumentValues.value) || void 0);
+  const [dialogState, setDialogState] = useDialogState();
+  const error = secretDocumentValues.error || assetDocumentValues.error || poll.error;
+  if (error) {
+    throw error;
+  }
+  const isLoading = secretDocumentValues.isLoading || assetDocumentValues.isLoading;
+  return /* @__PURE__ */jsx(Card, {
+    children: /* @__PURE__ */jsx(ErrorBoundaryCard$1, {
+      schemaType: props.schemaType,
+      children: /* @__PURE__ */jsx(Suspense, {
+        fallback: /* @__PURE__ */jsx(InputFallback, {}),
+        children: isLoading ? /* @__PURE__ */jsx(InputFallback, {}) : /* @__PURE__ */jsxs(Fragment, {
+          children: [secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /* @__PURE__ */jsx(Onboard, {
+            setDialogState
+          }) : /* @__PURE__ */jsx(MuxVideoInputUploader, {
+            ...props,
+            config: props.config,
+            onChange: props.onChange,
+            client,
+            secrets: secretDocumentValues.value.secrets,
+            asset: assetDocumentValues.value,
+            dialogState,
+            setDialogState,
+            needsSetup: secretDocumentValues.value.needsSetup
+          }), dialogState === "secrets" && /* @__PURE__ */jsx(ConfigureApi$1, {
+            setDialogState,
+            secrets: secretDocumentValues.value.secrets
+          })]
+        })
+      })
+    })
+  });
+};
+var Input$1 = memo(Input);
+function muxVideoCustomRendering(config) {
+  return {
+    components: {
+      input: props => /* @__PURE__ */jsx(Input$1, {
+        config,
+        ...props
+      })
+    },
+    preview: {
+      select: {
+        filename: "asset.filename",
+        playbackId: "asset.playbackId",
+        status: "asset.status",
+        assetId: "asset.assetId",
+        thumbTime: "asset.thumbTime",
+        data: "asset.data"
+      },
+      prepare: asset => {
+        const {
+          filename,
+          playbackId,
+          status
+        } = asset;
+        return {
+          title: filename || playbackId || "",
+          subtitle: status ? "status: ".concat(status) : null,
+          media: asset.playbackId ? /* @__PURE__ */jsx(VideoThumbnail, {
+            asset,
+            width: 64
+          }) : null
+        };
+      }
+    }
+  };
+}
+const muxVideo = {
+  name: "mux.video",
+  type: "object",
+  title: "Video asset reference",
+  fields: [{
+    title: "Video",
+    name: "asset",
+    type: "reference",
+    weak: true,
+    to: [{
+      type: "mux.videoAsset"
+    }]
+  }]
+};
+const muxVideoAsset = {
+  name: "mux.videoAsset",
+  type: "object",
+  title: "Video asset",
+  fields: [{
+    type: "string",
+    name: "status"
+  }, {
+    type: "string",
+    name: "assetId"
+  }, {
+    type: "string",
+    name: "playbackId"
+  }, {
+    type: "string",
+    name: "filename"
+  }, {
+    type: "number",
+    name: "thumbTime"
+  }]
+};
+const defaultConfig = {
+  mp4_support: "none"
+};
+const muxInput = definePlugin(userConfig => {
+  const config = {
+    ...defaultConfig,
+    ...userConfig
+  };
+  return {
+    name: "mux-input",
+    schema: {
+      types: [muxVideoAsset, {
+        ...muxVideo,
+        ...muxVideoCustomRendering(config)
+      }]
+    },
+    tools: config.tool === false ? void 0 : [createStudioTool(config)]
+  };
+});
+export { defaultConfig, muxInput };
 //# sourceMappingURL=index.js.map