sanity-plugin-media 4.3.2 → 4.3.3

package/dist/index.js

@@ -1,48 +1,56 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: !0 });
-var jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), sanity = require("sanity"), ui = require("@sanity/ui"), react = require("react"), isHotkeyEsm = require("is-hotkey-esm"), styledComponents = require("styled-components"), reactRedux = require("react-redux"), toolkit = require("@reduxjs/toolkit"), pluralize = require("pluralize"), reduxObservable = require("redux-observable"), rxjs = require("rxjs"), operators$1 = require("rxjs/operators"), groq = require("groq"), nanoid = require("nanoid"), uuid = require("@sanity/uuid"), reactNprogress = require("@tanem/react-nprogress"), color = require("@sanity/color"), Select = require("react-select"), reactVirtuoso = require("react-virtuoso"), reactHookForm = require("react-hook-form"), z = require("zod"), zod = require("@hookform/resolvers/zod"), dateFns = require("date-fns"), filesize = require("filesize"), copy = require("copy-to-clipboard"), router = require("sanity/router"), reactFileIcon = require("react-file-icon"), CreatableSelect = require("react-select/creatable"), reactDropzone = require("react-dropzone");
-function _interopDefaultCompat(e) {
-  return e && typeof e == "object" && "default" in e ? e : { default: e };
-}
-function _interopNamespaceCompat(e) {
-  if (e && typeof e == "object" && "default" in e) return e;
-  var n = /* @__PURE__ */ Object.create(null);
-  return e && Object.keys(e).forEach(function(k) {
-    if (k !== "default") {
-      var d = Object.getOwnPropertyDescriptor(e, k);
-      Object.defineProperty(n, k, d.get ? d : {
-        enumerable: !0,
-        get: function() {
-          return e[k];
-        }
-      });
-    }
-  }), n.default = e, Object.freeze(n);
-}
-var pluralize__default = /* @__PURE__ */ _interopDefaultCompat(pluralize), groq__default = /* @__PURE__ */ _interopDefaultCompat(groq), Select__default = /* @__PURE__ */ _interopDefaultCompat(Select), z__namespace = /* @__PURE__ */ _interopNamespaceCompat(z), filesize__default = /* @__PURE__ */ _interopDefaultCompat(filesize), copy__default = /* @__PURE__ */ _interopDefaultCompat(copy), CreatableSelect__default = /* @__PURE__ */ _interopDefaultCompat(CreatableSelect);
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { ThLargeIcon, ThListIcon, SortIcon, CloseIcon, SelectIcon, AddIcon, SearchIcon, PlugIcon, ClipboardIcon, DownloadIcon, ChevronDownIcon, ErrorOutlineIcon, WarningOutlineIcon, EditIcon, ArrowUpIcon, ArrowDownIcon, TrashIcon, ComposeIcon, Icon, UploadIcon, WarningFilledIcon, CheckmarkCircleIcon, ChevronUpIcon, ImageIcon } from "@sanity/icons";
+import { useClient, useColorSchemeValue, useSchema, Preview, useDocumentStore, WithReferringDocuments, useFormValue, definePlugin } from "sanity";
+import { Inline, Button, usePortal, MenuButton, Menu as Menu$2, MenuItem, MenuDivider, Box, studioTheme, rem, Flex, Label, Text, TextInput, Card, MenuGroup, useMediaIndex, Tooltip, Switch, Popover, Stack, Dialog as Dialog$1, TextArea, TabList, Tab, TabPanel, Container as Container$2, Spinner, Checkbox, Grid, useToast, PortalProvider, useLayer, Portal } from "@sanity/ui";
+import { useRef, useCallback, useEffect, createContext, useContext, useMemo, useState, forwardRef, memo, Component } from "react";
+import { isHotkey } from "is-hotkey-esm";
+import { css, createGlobalStyle, styled } from "styled-components";
+import { useSelector, useDispatch, Provider } from "react-redux";
+import { createAction, createSlice, isAnyOf, createSelector, combineReducers, configureStore } from "@reduxjs/toolkit";
+import pluralize from "pluralize";
+import { ofType, combineEpics, createEpicMiddleware } from "redux-observable";
+import { iif, throwError, of, from, EMPTY, Subject, Observable, merge, empty } from "rxjs";
+import { delay, mergeMap, filter, withLatestFrom, catchError, switchMap, bufferTime, debounceTime, first, map, takeUntil } from "rxjs/operators";
+import groq from "groq";
+import { nanoid } from "nanoid";
+import { uuid } from "@sanity/uuid";
+import { useNProgress } from "@tanem/react-nprogress";
+import { hues, white } from "@sanity/color";
+import Select, { components } from "react-select";
+import { Virtuoso, VirtuosoGrid, GroupedVirtuoso } from "react-virtuoso";
+import { Controller, useForm } from "react-hook-form";
+import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format, formatRelative } from "date-fns";
+import filesize from "filesize";
+import copy from "copy-to-clipboard";
+import { useIntentLink } from "sanity/router";
+import { FileIcon as FileIcon$1, defaultStyles } from "react-file-icon";
+import CreatableSelect from "react-select/creatable";
+import { useDropzone } from "react-dropzone";
 const useKeyPress = (hotkey, onPress) => {
-  const keyPressed = react.useRef(!1), downHandler = react.useCallback(
+  const keyPressed = useRef(!1), downHandler = useCallback(
     (e) => {
-      isHotkeyEsm.isHotkey(hotkey, e) && (keyPressed.current = !0, onPress && onPress());
+      isHotkey(hotkey, e) && (keyPressed.current = !0, onPress && onPress());
     },
     [hotkey, onPress]
-  ), upHandler = react.useCallback(() => {
+  ), upHandler = useCallback(() => {
     keyPressed.current = !1;
   }, []);
-  return react.useEffect(() => (window.addEventListener("keydown", downHandler), window.addEventListener("keyup", upHandler), () => {
+  return useEffect(() => (window.addEventListener("keydown", downHandler), window.addEventListener("keyup", upHandler), () => {
     window.removeEventListener("keydown", downHandler), window.removeEventListener("keyup", upHandler);
   }), [downHandler, upHandler]), keyPressed;
-}, AssetSourceDispatchContext = react.createContext(void 0), AssetBrowserDispatchProvider = (props) => {
+}, AssetSourceDispatchContext = createContext(void 0), AssetBrowserDispatchProvider = (props) => {
   const { children, onSelect } = props, contextValue = {
     onSelect
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(AssetSourceDispatchContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx(AssetSourceDispatchContext.Provider, { value: contextValue, children });
 }, useAssetSourceActions = () => {
-  const context = react.useContext(AssetSourceDispatchContext);
+  const context = useContext(AssetSourceDispatchContext);
   if (context === void 0)
     throw new Error("useAssetSourceActions must be used within an AssetSourceDispatchProvider");
   return context;
-}, useVersionedClient = () => sanity.useClient({ apiVersion: "2025-10-02" }), customScrollbar = styledComponents.css`
+}, useVersionedClient = () => useClient({ apiVersion: "2025-10-02" }), customScrollbar = css`
   ::-webkit-scrollbar {
     width: 14px;
   }
@@ -58,7 +66,7 @@ const useKeyPress = (hotkey, onPress) => {
       background-clip: padding-box;
     }
   }
-`, GlobalStyle = styledComponents.createGlobalStyle`
+`, GlobalStyle = createGlobalStyle`
   .media__custom-scrollbar {
     ${customScrollbar}
   }
@@ -75,7 +83,7 @@ const useKeyPress = (hotkey, onPress) => {
     background-color: rgba(15, 17, 18, 0.9);
   }
 
-`, useTypedSelector = reactRedux.useSelector, ORDER_DICTIONARY = {
+`, useTypedSelector = useSelector, ORDER_DICTIONARY = {
   _createdAt: {
     asc: "Last created: Oldest first",
     desc: "Last created: Newest first"
@@ -162,12 +170,12 @@ const useKeyPress = (hotkey, onPress) => {
       {
         name: "true",
         title: "True",
-        value: groq__default.default`_id in $documentAssetIds`
+        value: groq`_id in $documentAssetIds`
       },
       {
         name: "false",
         title: "False",
-        value: groq__default.default`!(_id in $documentAssetIds)`
+        value: groq`!(_id in $documentAssetIds)`
       }
     ],
     selectOnly: !0,
@@ -183,12 +191,12 @@ const useKeyPress = (hotkey, onPress) => {
       {
         name: "true",
         title: "True",
-        value: groq__default.default`count(*[references(^._id)]) > 0`
+        value: groq`count(*[references(^._id)]) > 0`
       },
       {
         name: "false",
         title: "False",
-        value: groq__default.default`count(*[references(^._id)]) == 0`
+        value: groq`count(*[references(^._id)]) == 0`
       }
     ],
     title: "In use",
@@ -460,14 +468,14 @@ const useKeyPress = (hotkey, onPress) => {
   SMALL: "3rem 100px auto 1.5rem",
   LARGE: "3rem 100px auto 5.5rem 5.5rem 3.5rem 8.5rem 4.75rem 2rem"
 }, PANEL_HEIGHT = 32, TAG_DOCUMENT_NAME = "media.tag", TAGS_PANEL_WIDTH = 250, debugThrottle = (throttled) => function(source) {
-  return rxjs.iif(
+  return iif(
     () => !!throttled,
     source.pipe(
-      operators$1.delay(3e3),
-      operators$1.mergeMap((v) => Math.random() > 0.5 ? rxjs.throwError({
+      delay(3e3),
+      mergeMap((v) => Math.random() > 0.5 ? throwError({
         message: "Test error",
         statusCode: 500
-      }) : rxjs.of(v))
+      }) : of(v))
     ),
     source
   );
@@ -476,7 +484,7 @@ const useKeyPress = (hotkey, onPress) => {
   searchFacets,
   searchQuery
 }) => {
-  const documentAssetTypes = assetTypes.map((type) => `sanity.${type}Asset`), baseFilter = groq__default.default`
+  const documentAssetTypes = assetTypes.map((type) => `sanity.${type}Asset`), baseFilter = groq`
     _type in ${JSON.stringify(documentAssetTypes)} && !(_id in path("drafts.**"))
   `, searchFacetFragments = searchFacets.reduce((acc, facet) => {
     if (facet.type === "number") {
@@ -505,22 +513,22 @@ const useKeyPress = (hotkey, onPress) => {
     // It's possible to add this by adding the following line to the searchQuery, but it's quite slow
     // references(*[_type == "media.tag" && name.current == "${searchQuery.trim()}"]._id)
     ...searchQuery ? [
-      groq__default.default`[_id, altText, assetId, creditLine, description, originalFilename, title, url] match '*${searchQuery.trim()}*'`
+      groq`[_id, altText, assetId, creditLine, description, originalFilename, title, url] match '*${searchQuery.trim()}*'`
     ] : [],
     // Search facets
     ...searchFacetFragments
   ].join(" && ");
 }, checkTagName = (client, name) => function(source) {
   return source.pipe(
-    operators$1.mergeMap(() => rxjs.from(
-      client.fetch(groq__default.default`count(*[_type == "${TAG_DOCUMENT_NAME}" && name.current == $name])`, {
+    mergeMap(() => from(
+      client.fetch(groq`count(*[_type == "${TAG_DOCUMENT_NAME}" && name.current == $name])`, {
         name
       })
     )),
-    operators$1.mergeMap((existingTagCount) => existingTagCount > 0 ? rxjs.throwError({
+    mergeMap((existingTagCount) => existingTagCount > 0 ? throwError({
       message: "Tag already exists",
       statusCode: 409
-    }) : rxjs.of(!0))
+    }) : of(!0))
   );
 }, getTagSelectOptions = (tags) => tags.reduce((acc, val) => {
   const tag = val?.tag;
@@ -529,45 +537,45 @@ const useKeyPress = (hotkey, onPress) => {
     value: tag?._id
   }), acc;
 }, []), ASSETS_ACTIONS = {
-  tagsAddComplete: toolkit.createAction(
+  tagsAddComplete: createAction(
     "actions/tagsAddComplete",
     function({ assets, tag }) {
       return { payload: { assets, tag } };
     }
   ),
-  tagsAddError: toolkit.createAction(
+  tagsAddError: createAction(
     "actions/tagsAddError",
     function({ assets, error, tag }) {
       return { payload: { assets, error, tag } };
     }
   ),
-  tagsAddRequest: toolkit.createAction(
+  tagsAddRequest: createAction(
     "actions/tagsAddRequest",
     function({ assets, tag }) {
       return { payload: { assets, tag } };
     }
   ),
-  tagsRemoveComplete: toolkit.createAction(
+  tagsRemoveComplete: createAction(
     "actions/tagsRemoveComplete",
     function({ assets, tag }) {
       return { payload: { assets, tag } };
     }
   ),
-  tagsRemoveError: toolkit.createAction(
+  tagsRemoveError: createAction(
     "actions/tagsRemoveError",
     function({ assets, error, tag }) {
       return { payload: { assets, error, tag } };
     }
   ),
-  tagsRemoveRequest: toolkit.createAction(
+  tagsRemoveRequest: createAction(
     "actions/tagsRemoveRequest",
     function({ assets, tag }) {
       return { payload: { assets, tag } };
     }
   )
 }, DIALOG_ACTIONS = {
-  showTagCreate: toolkit.createAction("dialog/showTagCreate"),
-  showTagEdit: toolkit.createAction("dialog/showTagEdit", function({ tagId }) {
+  showTagCreate: createAction("dialog/showTagCreate"),
+  showTagEdit: createAction("dialog/showTagEdit", function({ tagId }) {
     return {
       payload: { tagId }
     };
@@ -581,7 +589,7 @@ const useKeyPress = (hotkey, onPress) => {
   fetching: !1,
   fetchingError: void 0,
   panelVisible: !0
-}, tagsSlice = toolkit.createSlice({
+}, tagsSlice = createSlice({
   name: "tags",
   initialState: initialState$7,
   extraReducers: (builder) => {
@@ -591,7 +599,7 @@ const useKeyPress = (hotkey, onPress) => {
       const { tagId } = action.payload;
       delete state.byIds[tagId].error;
     }).addMatcher(
-      toolkit.isAnyOf(
+      isAnyOf(
         ASSETS_ACTIONS.tagsAddComplete,
         ASSETS_ACTIONS.tagsAddError,
         ASSETS_ACTIONS.tagsRemoveComplete,
@@ -602,7 +610,7 @@ const useKeyPress = (hotkey, onPress) => {
         state.byIds[tag._id].updating = !1;
       }
     ).addMatcher(
-      toolkit.isAnyOf(ASSETS_ACTIONS.tagsAddRequest, ASSETS_ACTIONS.tagsRemoveRequest),
+      isAnyOf(ASSETS_ACTIONS.tagsAddRequest, ASSETS_ACTIONS.tagsRemoveRequest),
       (state, action) => {
         const { tag } = action.payload;
         state.byIds[tag._id].updating = !0;
@@ -658,7 +666,7 @@ const useKeyPress = (hotkey, onPress) => {
       reducer: (state, _action) => {
         state.fetching = !0, delete state.fetchingError;
       },
-      prepare: () => ({ payload: { query: groq__default.default`
+      prepare: () => ({ payload: { query: groq`
           {
             "items": *[
               _type == "${TAG_DOCUMENT_NAME}"
@@ -736,14 +744,14 @@ const useKeyPress = (hotkey, onPress) => {
     }
   }
 }), tagsCreateEpic = (action$, state$, { client }) => action$.pipe(
-  operators$1.filter(tagsSlice.actions.createRequest.match),
-  operators$1.withLatestFrom(state$),
-  operators$1.mergeMap(([action, state]) => {
+  filter(tagsSlice.actions.createRequest.match),
+  withLatestFrom(state$),
+  mergeMap(([action, state]) => {
     const { assetId, name } = action.payload;
-    return rxjs.of(action).pipe(
+    return of(action).pipe(
       debugThrottle(state.debug.badConnection),
       checkTagName(client, name),
-      operators$1.mergeMap(
+      mergeMap(
         () => client.observable.create({
           _type: TAG_DOCUMENT_NAME,
           name: {
@@ -752,9 +760,9 @@ const useKeyPress = (hotkey, onPress) => {
           }
         })
       ),
-      operators$1.mergeMap((result) => rxjs.of(tagsSlice.actions.createComplete({ assetId, tag: result }))),
-      operators$1.catchError(
-        (error) => rxjs.of(
+      mergeMap((result) => of(tagsSlice.actions.createComplete({ assetId, tag: result }))),
+      catchError(
+        (error) => of(
           tagsSlice.actions.createError({
             error: {
               message: error?.message || "Internal error",
@@ -767,17 +775,17 @@ const useKeyPress = (hotkey, onPress) => {
     );
   })
 ), tagsDeleteEpic = (action$, state$, { client }) => action$.pipe(
-  operators$1.filter(tagsSlice.actions.deleteRequest.match),
-  operators$1.withLatestFrom(state$),
-  operators$1.mergeMap(([action, state]) => {
+  filter(tagsSlice.actions.deleteRequest.match),
+  withLatestFrom(state$),
+  mergeMap(([action, state]) => {
     const { tag } = action.payload;
-    return rxjs.of(action).pipe(
+    return of(action).pipe(
       // Optionally throttle
       debugThrottle(state.debug.badConnection),
       // Fetch assets which reference this tag
-      operators$1.mergeMap(
+      mergeMap(
         () => client.observable.fetch(
-          groq__default.default`*[
+          groq`*[
               _type in ["sanity.fileAsset", "sanity.imageAsset"]
               && references(*[_type == "media.tag" && name.current == $tagName]._id)
             ] {
@@ -789,7 +797,7 @@ const useKeyPress = (hotkey, onPress) => {
         )
       ),
       // Create transaction which remove tag references from all matched assets and delete tag
-      operators$1.mergeMap((assets) => {
+      mergeMap((assets) => {
         const transaction = assets.map((asset) => ({
           id: asset._id,
           patch: {
@@ -801,12 +809,12 @@ const useKeyPress = (hotkey, onPress) => {
           (tx, patch) => tx.patch(patch.id, patch.patch),
           client.transaction()
         );
-        return transaction.delete(tag._id), rxjs.from(transaction.commit());
+        return transaction.delete(tag._id), from(transaction.commit());
       }),
       // Dispatch complete action
-      operators$1.mergeMap(() => rxjs.of(tagsSlice.actions.deleteComplete({ tagId: tag._id }))),
-      operators$1.catchError(
-        (error) => rxjs.of(
+      mergeMap(() => of(tagsSlice.actions.deleteComplete({ tagId: tag._id }))),
+      catchError(
+        (error) => of(
           tagsSlice.actions.deleteError({
             error: {
               message: error?.message || "Internal error",
@@ -819,24 +827,24 @@ const useKeyPress = (hotkey, onPress) => {
     );
   })
 ), tagsFetchEpic = (action$, state$, { client }) => action$.pipe(
-  operators$1.filter(tagsSlice.actions.fetchRequest.match),
-  operators$1.withLatestFrom(state$),
-  operators$1.switchMap(([action, state]) => {
+  filter(tagsSlice.actions.fetchRequest.match),
+  withLatestFrom(state$),
+  switchMap(([action, state]) => {
     const { query } = action.payload;
-    return rxjs.of(action).pipe(
+    return of(action).pipe(
       // Optionally throttle
       debugThrottle(state.debug.badConnection),
       // Fetch tags
-      operators$1.mergeMap(
+      mergeMap(
         () => client.observable.fetch(query)
       ),
       // Dispatch complete action
-      operators$1.mergeMap((result) => {
+      mergeMap((result) => {
         const { items } = result;
-        return rxjs.of(tagsSlice.actions.fetchComplete({ tags: items }));
+        return of(tagsSlice.actions.fetchComplete({ tags: items }));
       }),
-      operators$1.catchError(
-        (error) => rxjs.of(
+      catchError(
+        (error) => of(
           tagsSlice.actions.fetchError({
             error: {
               message: error?.message || "Internal error",
@@ -848,62 +856,62 @@ const useKeyPress = (hotkey, onPress) => {
     );
   })
 ), tagsListenerCreateQueueEpic = (action$) => action$.pipe(
-  operators$1.filter(tagsSlice.actions.listenerCreateQueue.match),
-  operators$1.bufferTime(2e3),
-  operators$1.filter((actions) => actions.length > 0),
-  operators$1.mergeMap((actions) => {
+  filter(tagsSlice.actions.listenerCreateQueue.match),
+  bufferTime(2e3),
+  filter((actions) => actions.length > 0),
+  mergeMap((actions) => {
     const tags = actions?.map((action) => action.payload.tag);
-    return rxjs.of(tagsSlice.actions.listenerCreateQueueComplete({ tags }));
+    return of(tagsSlice.actions.listenerCreateQueueComplete({ tags }));
   })
 ), tagsListenerDeleteQueueEpic = (action$) => action$.pipe(
-  operators$1.filter(tagsSlice.actions.listenerDeleteQueue.match),
-  operators$1.bufferTime(2e3),
-  operators$1.filter((actions) => actions.length > 0),
-  operators$1.mergeMap((actions) => {
+  filter(tagsSlice.actions.listenerDeleteQueue.match),
+  bufferTime(2e3),
+  filter((actions) => actions.length > 0),
+  mergeMap((actions) => {
     const tagIds = actions?.map((action) => action.payload.tagId);
-    return rxjs.of(tagsSlice.actions.listenerDeleteQueueComplete({ tagIds }));
+    return of(tagsSlice.actions.listenerDeleteQueueComplete({ tagIds }));
   })
 ), tagsListenerUpdateQueueEpic = (action$) => action$.pipe(
-  operators$1.filter(tagsSlice.actions.listenerUpdateQueue.match),
-  operators$1.bufferTime(2e3),
-  operators$1.filter((actions) => actions.length > 0),
-  operators$1.mergeMap((actions) => {
+  filter(tagsSlice.actions.listenerUpdateQueue.match),
+  bufferTime(2e3),
+  filter((actions) => actions.length > 0),
+  mergeMap((actions) => {
     const tags = actions?.map((action) => action.payload.tag);
-    return rxjs.of(tagsSlice.actions.listenerUpdateQueueComplete({ tags }));
+    return of(tagsSlice.actions.listenerUpdateQueueComplete({ tags }));
   })
 ), tagsSortEpic = (action$) => action$.pipe(
-  reduxObservable.ofType(
+  ofType(
     tagsSlice.actions.listenerCreateQueueComplete.type,
     tagsSlice.actions.listenerUpdateQueueComplete.type
   ),
-  operators$1.bufferTime(1e3),
-  operators$1.filter((actions) => actions.length > 0),
-  operators$1.mergeMap(() => rxjs.of(tagsSlice.actions.sort()))
+  bufferTime(1e3),
+  filter((actions) => actions.length > 0),
+  mergeMap(() => of(tagsSlice.actions.sort()))
 ), tagsUpdateEpic = (action$, state$, { client }) => action$.pipe(
-  operators$1.filter(tagsSlice.actions.updateRequest.match),
-  operators$1.withLatestFrom(state$),
-  operators$1.mergeMap(([action, state]) => {
+  filter(tagsSlice.actions.updateRequest.match),
+  withLatestFrom(state$),
+  mergeMap(([action, state]) => {
     const { closeDialogId, formData, tag } = action.payload;
-    return rxjs.of(action).pipe(
+    return of(action).pipe(
       // Optionally throttle
       debugThrottle(state.debug.badConnection),
       // Check if tag name is available, throw early if not
       checkTagName(client, formData?.name?.current),
       // Patch document (Update tag)
-      operators$1.mergeMap(
-        () => rxjs.from(
+      mergeMap(
+        () => from(
           client.patch(tag._id).set({ name: { _type: "slug", current: formData?.name.current } }).commit()
         )
       ),
       // Dispatch complete action
-      operators$1.mergeMap((updatedTag) => rxjs.of(
+      mergeMap((updatedTag) => of(
         tagsSlice.actions.updateComplete({
           closeDialogId,
           tag: updatedTag
         })
       )),
-      operators$1.catchError(
-        (error) => rxjs.of(
+      catchError(
+        (error) => of(
           tagsSlice.actions.updateError({
             error: {
               message: error?.message || "Internal error",
@@ -915,10 +923,10 @@ const useKeyPress = (hotkey, onPress) => {
       )
     );
   })
-), selectTagsByIds = (state) => state.tags.byIds, selectTagsAllIds = (state) => state.tags.allIds, selectTags = toolkit.createSelector(
+), selectTagsByIds = (state) => state.tags.byIds, selectTagsAllIds = (state) => state.tags.allIds, selectTags = createSelector(
   [selectTagsByIds, selectTagsAllIds],
   (byIds, allIds) => allIds.map((id) => byIds[id])
-), selectTagById = toolkit.createSelector(
+), selectTagById = createSelector(
   [selectTagsByIds, (_state, tagId) => tagId],
   (byIds, tagId) => byIds[tagId]
 ), selectTagSelectOptions = (asset) => (state) => {
@@ -932,13 +940,13 @@ var tagsReducer = tagsSlice.reducer;
 const initialState$6 = {
   facets: [],
   query: ""
-}, searchSlice = toolkit.createSlice({
+}, searchSlice = createSlice({
   name: "search",
   initialState: initialState$6,
   reducers: {
     // Add search facet
     facetsAdd(state, action) {
-      state.facets.push({ ...action.payload.facet, id: uuid.uuid() });
+      state.facets.push({ ...action.payload.facet, id: uuid() });
     },
     // Clear all search facets
     facetsClear(state) {
@@ -976,11 +984,11 @@ const initialState$6 = {
     }
   }
 }), searchFacetTagUpdateEpic = (action$, state$) => action$.pipe(
-  operators$1.filter(tagsActions.updateComplete.match),
-  operators$1.withLatestFrom(state$),
-  operators$1.mergeMap(([action, state]) => {
+  filter(tagsActions.updateComplete.match),
+  withLatestFrom(state$),
+  mergeMap(([action, state]) => {
     const { tag } = action.payload, currentSearchFacetTag = state.search.facets?.find((facet) => facet.name === "tag"), tagItem = state.tags.byIds[tag._id];
-    return currentSearchFacetTag?.type === "searchable" && currentSearchFacetTag.value?.value === tag._id ? rxjs.of(
+    return currentSearchFacetTag?.type === "searchable" && currentSearchFacetTag.value?.value === tag._id ? of(
       searchSlice.actions.facetsUpdate({
         name: "tag",
         value: {
@@ -988,9 +996,9 @@ const initialState$6 = {
           value: tagItem?.tag?._id
         }
       })
-    ) : rxjs.EMPTY;
+    ) : EMPTY;
   })
-), selectIsSearchFacetTag = toolkit.createSelector(
+), selectIsSearchFacetTag = createSelector(
   [
     (state) => state.search.facets,
     (_state, tagId) => tagId
@@ -1001,7 +1009,7 @@ const initialState$6 = {
 ), searchActions = { ...searchSlice.actions };
 var searchReducer = searchSlice.reducer;
 const UPLOADS_ACTIONS = {
-  uploadComplete: toolkit.createAction(
+  uploadComplete: createAction(
     "uploads/uploadComplete",
     function({ asset }) {
       return {
@@ -1026,7 +1034,7 @@ const UPLOADS_ACTIONS = {
   pageSize: 100,
   // totalCount: -1,
   view: "grid"
-}, assetsSlice = toolkit.createSlice({
+}, assetsSlice = createSlice({
   name: "assets",
   initialState: initialState$5,
   extraReducers: (builder) => {
@@ -1124,9 +1132,9 @@ const UPLOADS_ACTIONS = {
         params = {},
         queryFilter,
         selector = "",
-        sort = groq__default.default`order(_updatedAt desc)`
+        sort = groq`order(_updatedAt desc)`
       }) => {
-        const query = groq__default.default`
+        const query = groq`
           {
             "items": *[${queryFilter}] {
               _id,
@@ -1243,38 +1251,38 @@ const UPLOADS_ACTIONS = {
     }
   }
 }), assetsDeleteEpic = (action$, _state$, { client }) => action$.pipe(
-  operators$1.filter(assetsActions.deleteRequest.match),
-  operators$1.mergeMap((action) => {
+  filter(assetsActions.deleteRequest.match),
+  mergeMap((action) => {
     const { assets } = action.payload, assetIds = assets.map((asset) => asset._id);
-    return rxjs.of(assets).pipe(
-      operators$1.mergeMap(
+    return of(assets).pipe(
+      mergeMap(
         () => client.observable.delete({
-          query: groq__default.default`*[_id in ${JSON.stringify(assetIds)}]`
+          query: groq`*[_id in ${JSON.stringify(assetIds)}]`
         })
       ),
-      operators$1.mergeMap(() => rxjs.of(assetsActions.deleteComplete({ assetIds }))),
-      operators$1.catchError((error) => rxjs.of(assetsActions.deleteError({ assetIds, error })))
+      mergeMap(() => of(assetsActions.deleteComplete({ assetIds }))),
+      catchError((error) => of(assetsActions.deleteError({ assetIds, error })))
     );
   })
 ), assetsFetchEpic = (action$, state$, { client }) => action$.pipe(
-  operators$1.filter(assetsActions.fetchRequest.match),
-  operators$1.withLatestFrom(state$),
-  operators$1.switchMap(([action, state]) => {
+  filter(assetsActions.fetchRequest.match),
+  withLatestFrom(state$),
+  switchMap(([action, state]) => {
     const params = action.payload?.params, query = action.payload?.query;
-    return rxjs.of(action).pipe(
+    return of(action).pipe(
       debugThrottle(state.debug.badConnection),
-      operators$1.mergeMap(
+      mergeMap(
         () => client.observable.fetch(query, params)
       ),
-      operators$1.mergeMap((result) => {
+      mergeMap((result) => {
         const {
           items
           // totalCount
         } = result;
-        return rxjs.of(assetsActions.fetchComplete({ assets: items }));
+        return of(assetsActions.fetchComplete({ assets: items }));
       }),
-      operators$1.catchError(
-        (error) => rxjs.of(
+      catchError(
+        (error) => of(
           assetsActions.fetchError({
             message: error?.message || "Internal error",
             statusCode: error?.statusCode || 500
@@ -1284,9 +1292,9 @@ const UPLOADS_ACTIONS = {
     );
   })
 ), assetsFetchPageIndexEpic = (action$, state$) => action$.pipe(
-  operators$1.filter(assetsActions.loadPageIndex.match),
-  operators$1.withLatestFrom(state$),
-  operators$1.switchMap(([action, state]) => {
+  filter(assetsActions.loadPageIndex.match),
+  withLatestFrom(state$),
+  switchMap(([action, state]) => {
     const pageSize = state.assets.pageSize, start = action.payload.pageIndex * pageSize, end = start + pageSize, documentId = state?.selected.document?._id, documentAssetIds = state?.selected?.documentAssetIds, constructedFilter = constructFilter({
       assetTypes: state.assets.assetTypes,
       searchFacets: state.search.facets,
@@ -1295,40 +1303,40 @@ const UPLOADS_ACTIONS = {
       ...documentId ? { documentId } : {},
       documentAssetIds
     };
-    return rxjs.of(
+    return of(
       assetsActions.fetchRequest({
         params,
         queryFilter: constructedFilter,
-        selector: groq__default.default`[${start}...${end}]`,
-        sort: groq__default.default`order(${state.assets?.order?.field} ${state.assets?.order?.direction})`
+        selector: groq`[${start}...${end}]`,
+        sort: groq`order(${state.assets?.order?.field} ${state.assets?.order?.direction})`
       })
     );
   })
 ), assetsFetchNextPageEpic = (action$, state$) => action$.pipe(
-  operators$1.filter(assetsActions.loadNextPage.match),
-  operators$1.withLatestFrom(state$),
-  operators$1.switchMap(
-    ([_action, state]) => rxjs.of(assetsActions.loadPageIndex({ pageIndex: state.assets.pageIndex + 1 }))
+  filter(assetsActions.loadNextPage.match),
+  withLatestFrom(state$),
+  switchMap(
+    ([_action, state]) => of(assetsActions.loadPageIndex({ pageIndex: state.assets.pageIndex + 1 }))
   )
 ), assetsFetchAfterDeleteAllEpic = (action$, state$) => action$.pipe(
-  operators$1.filter(assetsActions.deleteComplete.match),
-  operators$1.withLatestFrom(state$),
-  operators$1.switchMap(([_action, state]) => {
+  filter(assetsActions.deleteComplete.match),
+  withLatestFrom(state$),
+  switchMap(([_action, state]) => {
     if (state.assets.allIds.length === 0) {
       const nextPageIndex = Math.floor(state.assets.allIds.length / state.assets.pageSize);
-      return rxjs.of(assetsActions.loadPageIndex({ pageIndex: nextPageIndex }));
+      return of(assetsActions.loadPageIndex({ pageIndex: nextPageIndex }));
     }
-    return rxjs.EMPTY;
+    return EMPTY;
   })
-), filterAssetWithoutTag = (tag) => (asset) => (asset?.asset?.opt?.media?.tags?.findIndex((t) => t._ref === tag?._id) ?? -1) < 0, patchOperationTagAppend = ({ tag }) => (patch) => patch.setIfMissing({ opt: {} }).setIfMissing({ "opt.media": {} }).setIfMissing({ "opt.media.tags": [] }).append("opt.media.tags", [{ _key: nanoid.nanoid(), _ref: tag?._id, _type: "reference", _weak: !0 }]), patchOperationTagUnset = ({ asset, tag }) => (patch) => patch.ifRevisionId(asset?.asset?._rev).unset([`opt.media.tags[_ref == "${tag._id}"]`]), assetsOrderSetEpic = (action$) => action$.pipe(
-  operators$1.filter(assetsActions.orderSet.match),
-  operators$1.mergeMap(() => rxjs.of(
+), filterAssetWithoutTag = (tag) => (asset) => (asset?.asset?.opt?.media?.tags?.findIndex((t) => t._ref === tag?._id) ?? -1) < 0, patchOperationTagAppend = ({ tag }) => (patch) => patch.setIfMissing({ opt: {} }).setIfMissing({ "opt.media": {} }).setIfMissing({ "opt.media.tags": [] }).append("opt.media.tags", [{ _key: nanoid(), _ref: tag?._id, _type: "reference", _weak: !0 }]), patchOperationTagUnset = ({ asset, tag }) => (patch) => patch.ifRevisionId(asset?.asset?._rev).unset([`opt.media.tags[_ref == "${tag._id}"]`]), assetsOrderSetEpic = (action$) => action$.pipe(
+  filter(assetsActions.orderSet.match),
+  mergeMap(() => of(
     assetsActions.clear(),
     //
     assetsActions.loadPageIndex({ pageIndex: 0 })
   ))
 ), assetsSearchEpic = (action$) => action$.pipe(
-  reduxObservable.ofType(
+  ofType(
     searchActions.facetsAdd.type,
     searchActions.facetsClear.type,
     searchActions.facetsRemoveById.type,
@@ -1338,63 +1346,63 @@ const UPLOADS_ACTIONS = {
     searchActions.facetsUpdateById.type,
     searchActions.querySet.type
   ),
-  operators$1.debounceTime(400),
-  operators$1.mergeMap(() => rxjs.of(
+  debounceTime(400),
+  mergeMap(() => of(
     assetsActions.clear(),
     //
     assetsActions.loadPageIndex({ pageIndex: 0 })
   ))
 ), assetsListenerCreateQueueEpic = (action$) => action$.pipe(
-  operators$1.filter(assetsActions.listenerCreateQueue.match),
-  operators$1.bufferTime(2e3),
-  operators$1.filter((actions) => actions.length > 0),
-  operators$1.mergeMap((actions) => {
+  filter(assetsActions.listenerCreateQueue.match),
+  bufferTime(2e3),
+  filter((actions) => actions.length > 0),
+  mergeMap((actions) => {
     const assets = actions?.map((action) => action.payload.asset);
-    return rxjs.of(assetsActions.listenerCreateQueueComplete({ assets }));
+    return of(assetsActions.listenerCreateQueueComplete({ assets }));
   })
 ), assetsListenerDeleteQueueEpic = (action$) => action$.pipe(
-  operators$1.filter(assetsActions.listenerDeleteQueue.match),
-  operators$1.bufferTime(2e3),
-  operators$1.filter((actions) => actions.length > 0),
-  operators$1.mergeMap((actions) => {
+  filter(assetsActions.listenerDeleteQueue.match),
+  bufferTime(2e3),
+  filter((actions) => actions.length > 0),
+  mergeMap((actions) => {
     const assetIds = actions?.map((action) => action.payload.assetId);
-    return rxjs.of(assetsActions.listenerDeleteQueueComplete({ assetIds }));
+    return of(assetsActions.listenerDeleteQueueComplete({ assetIds }));
   })
 ), assetsListenerUpdateQueueEpic = (action$) => action$.pipe(
-  operators$1.filter(assetsActions.listenerUpdateQueue.match),
-  operators$1.bufferTime(2e3),
-  operators$1.filter((actions) => actions.length > 0),
-  operators$1.mergeMap((actions) => {
+  filter(assetsActions.listenerUpdateQueue.match),
+  bufferTime(2e3),
+  filter((actions) => actions.length > 0),
+  mergeMap((actions) => {
     const assets = actions?.map((action) => action.payload.asset);
-    return rxjs.of(assetsActions.listenerUpdateQueueComplete({ assets }));
+    return of(assetsActions.listenerUpdateQueueComplete({ assets }));
   })
 ), assetsSortEpic = (action$) => action$.pipe(
-  reduxObservable.ofType(
+  ofType(
     assetsActions.insertUploads.type,
     assetsActions.listenerUpdateQueueComplete.type,
     assetsActions.updateComplete.type
   ),
-  operators$1.mergeMap(() => rxjs.of(assetsActions.sort()))
+  mergeMap(() => of(assetsActions.sort()))
 ), assetsTagsAddEpic = (action$, state$, { client }) => action$.pipe(
-  operators$1.filter(ASSETS_ACTIONS.tagsAddRequest.match),
-  operators$1.withLatestFrom(state$),
-  operators$1.mergeMap(([action, state]) => {
+  filter(ASSETS_ACTIONS.tagsAddRequest.match),
+  withLatestFrom(state$),
+  mergeMap(([action, state]) => {
     const { assets, tag } = action.payload;
-    return rxjs.of(action).pipe(
+    return of(action).pipe(
       // Optionally throttle
       debugThrottle(state.debug.badConnection),
       // Add tag references to all picked assets
-      operators$1.mergeMap(() => {
+      mergeMap(() => {
         const transaction = (selectAssetsPicked(state)?.filter(filterAssetWithoutTag(tag))).reduce(
           (tx, pickedAsset) => tx.patch(pickedAsset?.asset?._id, patchOperationTagAppend({ tag })),
           client.transaction()
         );
-        return rxjs.from(transaction.commit());
+        return from(transaction.commit());
       }),
       // Dispatch complete action
-      operators$1.mergeMap(() => rxjs.of(ASSETS_ACTIONS.tagsAddComplete({ assets, tag }))),
-      operators$1.catchError(
-        (error) => rxjs.of(
+      mergeMap(() => of(ASSETS_ACTIONS.tagsAddComplete({ assets, tag }))),
+      catchError(
+        (error) => of(
           ASSETS_ACTIONS.tagsAddError({
             assets,
             error: {
@@ -1408,25 +1416,25 @@ const UPLOADS_ACTIONS = {
     );
   })
 ), assetsTagsRemoveEpic = (action$, state$, { client }) => action$.pipe(
-  operators$1.filter(ASSETS_ACTIONS.tagsRemoveRequest.match),
-  operators$1.withLatestFrom(state$),
-  operators$1.mergeMap(([action, state]) => {
+  filter(ASSETS_ACTIONS.tagsRemoveRequest.match),
+  withLatestFrom(state$),
+  mergeMap(([action, state]) => {
     const { assets, tag } = action.payload;
-    return rxjs.of(action).pipe(
+    return of(action).pipe(
       // Optionally throttle
       debugThrottle(state.debug.badConnection),
       // Remove tag references from all picked assets
-      operators$1.mergeMap(() => {
+      mergeMap(() => {
         const transaction = selectAssetsPicked(state).reduce(
           (tx, pickedAsset) => tx.patch(pickedAsset?.asset?._id, patchOperationTagUnset({ asset: pickedAsset, tag })),
           client.transaction()
         );
-        return rxjs.from(transaction.commit());
+        return from(transaction.commit());
       }),
       // Dispatch complete action
-      operators$1.mergeMap(() => rxjs.of(ASSETS_ACTIONS.tagsRemoveComplete({ assets, tag }))),
-      operators$1.catchError(
-        (error) => rxjs.of(
+      mergeMap(() => of(ASSETS_ACTIONS.tagsRemoveComplete({ assets, tag }))),
+      catchError(
+        (error) => of(
           ASSETS_ACTIONS.tagsRemoveError({
             assets,
             error: {
@@ -1440,7 +1448,7 @@ const UPLOADS_ACTIONS = {
     );
   })
 ), assetsUnpickEpic = (action$) => action$.pipe(
-  reduxObservable.ofType(
+  ofType(
     assetsActions.orderSet.type,
     assetsActions.viewSet.type,
     searchActions.facetsAdd.type,
@@ -1452,29 +1460,29 @@ const UPLOADS_ACTIONS = {
     searchActions.facetsUpdateById.type,
     searchActions.querySet.type
   ),
-  operators$1.mergeMap(() => rxjs.of(assetsActions.pickClear()))
+  mergeMap(() => of(assetsActions.pickClear()))
 ), assetsUpdateEpic = (action$, state$, { client }) => action$.pipe(
-  operators$1.filter(assetsActions.updateRequest.match),
-  operators$1.withLatestFrom(state$),
-  operators$1.mergeMap(([action, state]) => {
+  filter(assetsActions.updateRequest.match),
+  withLatestFrom(state$),
+  mergeMap(([action, state]) => {
     const { asset, closeDialogId, formData } = action.payload;
-    return rxjs.of(action).pipe(
+    return of(action).pipe(
       debugThrottle(state.debug.badConnection),
-      operators$1.mergeMap(
-        () => rxjs.from(
+      mergeMap(
+        () => from(
           client.patch(asset._id).setIfMissing({ opt: {} }).setIfMissing({ "opt.media": {} }).set(formData).commit()
         )
       ),
-      operators$1.mergeMap(
-        (updatedAsset) => rxjs.of(
+      mergeMap(
+        (updatedAsset) => of(
           assetsActions.updateComplete({
             asset: updatedAsset,
             closeDialogId
           })
         )
       ),
-      operators$1.catchError(
-        (error) => rxjs.of(
+      catchError(
+        (error) => of(
           assetsActions.updateError({
             asset,
             error: {
@@ -1486,26 +1494,26 @@ const UPLOADS_ACTIONS = {
       )
     );
   })
-), selectAssetsByIds = (state) => state.assets.byIds, selectAssetsAllIds = (state) => state.assets.allIds, selectAssetById = toolkit.createSelector(
+), selectAssetsByIds = (state) => state.assets.byIds, selectAssetsAllIds = (state) => state.assets.allIds, selectAssetById = createSelector(
   [
     (state) => state.assets.byIds,
     (_state, assetId) => assetId
   ],
   (byIds, assetId) => byIds[assetId] || void 0
-), selectAssets = toolkit.createSelector(
+), selectAssets = createSelector(
   [selectAssetsByIds, selectAssetsAllIds],
   (byIds, allIds) => allIds.map((id) => byIds[id])
-), selectAssetsLength = toolkit.createSelector([selectAssets], (assets) => assets.length), selectAssetsPicked = toolkit.createSelector(
+), selectAssetsLength = createSelector([selectAssets], (assets) => assets.length), selectAssetsPicked = createSelector(
   [selectAssets],
   (assets) => assets.filter((item) => item?.picked)
-), selectAssetsPickedLength = toolkit.createSelector(
+), selectAssetsPickedLength = createSelector(
   [selectAssetsPicked],
   (assetsPicked) => assetsPicked.length
 ), assetsActions = { ...assetsSlice.actions };
 var assetsReducer = assetsSlice.reducer;
 const initialState$4 = {
   items: []
-}, dialogSlice = toolkit.createSlice({
+}, dialogSlice = createSlice({
   name: "dialog",
   initialState: initialState$4,
   extraReducers: (builder) => {
@@ -1551,7 +1559,7 @@ const initialState$4 = {
       state.items = state.items.filter((item) => item.id !== id);
     },
     showConfirmAssetsTagAdd(state, action) {
-      const { assetsPicked, closeDialogId, tag } = action.payload, suffix = `${assetsPicked.length} ${pluralize__default.default("asset", assetsPicked.length)}`;
+      const { assetsPicked, closeDialogId, tag } = action.payload, suffix = `${assetsPicked.length} ${pluralize("asset", assetsPicked.length)}`;
       state.items.push({
         closeDialogId,
         confirmCallbackAction: ASSETS_ACTIONS.tagsAddRequest({
@@ -1567,7 +1575,7 @@ const initialState$4 = {
       });
     },
     showConfirmAssetsTagRemove(state, action) {
-      const { assetsPicked, closeDialogId, tag } = action.payload, suffix = `${assetsPicked.length} ${pluralize__default.default("asset", assetsPicked.length)}`;
+      const { assetsPicked, closeDialogId, tag } = action.payload, suffix = `${assetsPicked.length} ${pluralize("asset", assetsPicked.length)}`;
       state.items.push({
         closeDialogId,
         confirmCallbackAction: ASSETS_ACTIONS.tagsRemoveRequest({ assets: assetsPicked, tag }),
@@ -1580,7 +1588,7 @@ const initialState$4 = {
       });
     },
     showConfirmDeleteAssets(state, action) {
-      const { assets, closeDialogId } = action.payload, suffix = `${assets.length} ${pluralize__default.default("asset", assets.length)}`;
+      const { assets, closeDialogId } = action.payload, suffix = `${assets.length} ${pluralize("asset", assets.length)}`;
       state.items.push({
         closeDialogId,
         confirmCallbackAction: assetsActions.deleteRequest({
@@ -1631,41 +1639,41 @@ const initialState$4 = {
     }
   }
 }), dialogClearOnAssetUpdateEpic = (action$) => action$.pipe(
-  reduxObservable.ofType(
+  ofType(
     assetsActions.deleteComplete.type,
     assetsActions.updateComplete.type,
     tagsActions.deleteComplete.type,
     tagsActions.updateComplete.type
   ),
-  operators$1.filter(
+  filter(
     (action) => !!action?.payload?.closeDialogId
   ),
-  operators$1.mergeMap((action) => {
+  mergeMap((action) => {
     const dialogId = action?.payload?.closeDialogId;
-    return dialogId ? rxjs.of(dialogSlice.actions.remove({ id: dialogId })) : rxjs.EMPTY;
+    return dialogId ? of(dialogSlice.actions.remove({ id: dialogId })) : EMPTY;
   })
 ), dialogTagCreateEpic = (action$) => action$.pipe(
-  operators$1.filter(tagsActions.createComplete.match),
-  operators$1.mergeMap((action) => {
+  filter(tagsActions.createComplete.match),
+  mergeMap((action) => {
     const { assetId, tag } = action?.payload;
-    return assetId ? rxjs.of(dialogSlice.actions.inlineTagCreate({ tag, assetId })) : tag._id ? rxjs.of(dialogSlice.actions.remove({ id: "tagCreate" })) : rxjs.EMPTY;
+    return assetId ? of(dialogSlice.actions.inlineTagCreate({ tag, assetId })) : tag._id ? of(dialogSlice.actions.remove({ id: "tagCreate" })) : EMPTY;
   })
 ), dialogTagDeleteEpic = (action$) => action$.pipe(
-  operators$1.filter(tagsActions.listenerDeleteQueueComplete.match),
-  operators$1.mergeMap((action) => {
+  filter(tagsActions.listenerDeleteQueueComplete.match),
+  mergeMap((action) => {
     const { tagIds } = action?.payload;
-    return rxjs.of(dialogSlice.actions.inlineTagRemove({ tagIds }));
+    return of(dialogSlice.actions.inlineTagRemove({ tagIds }));
   })
 ), dialogActions = { ...dialogSlice.actions };
 var dialogReducer = dialogSlice.reducer;
 const ButtonViewGroup = () => {
-  const dispatch = reactRedux.useDispatch(), view = useTypedSelector((state) => state.assets.view);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 0, style: { whiteSpace: "nowrap" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Button,
+  const dispatch = useDispatch(), view = useTypedSelector((state) => state.assets.view);
+  return /* @__PURE__ */ jsxs(Inline, { space: 0, style: { whiteSpace: "nowrap" }, children: [
+    /* @__PURE__ */ jsx(
+      Button,
       {
         fontSize: 1,
-        icon: icons.ThLargeIcon,
+        icon: ThLargeIcon,
         mode: view === "grid" ? "default" : "ghost",
         onClick: () => dispatch(assetsActions.viewSet({ view: "grid" })),
         style: {
@@ -1674,11 +1682,11 @@ const ButtonViewGroup = () => {
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Button,
+    /* @__PURE__ */ jsx(
+      Button,
       {
         fontSize: 1,
-        icon: icons.ThListIcon,
+        icon: ThListIcon,
         mode: view === "table" ? "default" : "ghost",
         onClick: () => dispatch(assetsActions.viewSet({ view: "table" })),
         style: {
@@ -1690,7 +1698,7 @@ const ButtonViewGroup = () => {
   ] });
 };
 function usePortalPopoverProps() {
-  const portal = ui.usePortal();
+  const portal = usePortal();
   return {
     animate: !0,
     constrainSize: !0,
@@ -1700,26 +1708,26 @@ function usePortalPopoverProps() {
   };
 }
 const OrderSelect = () => {
-  const dispatch = reactRedux.useDispatch(), order = useTypedSelector((state) => state.assets.order), popoverProps = usePortalPopoverProps();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.MenuButton,
+  const dispatch = useDispatch(), order = useTypedSelector((state) => state.assets.order), popoverProps = usePortalPopoverProps();
+  return /* @__PURE__ */ jsx(
+    MenuButton,
     {
-      button: /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Button,
+      button: /* @__PURE__ */ jsx(
+        Button,
         {
           fontSize: 1,
-          icon: icons.SortIcon,
+          icon: SortIcon,
           mode: "bleed",
           padding: 3,
           text: getOrderTitle(order.field, order.direction)
         }
       ),
       id: "order",
-      menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, { children: ORDER_OPTIONS?.map((item, index) => {
+      menu: /* @__PURE__ */ jsx(Menu$2, { children: ORDER_OPTIONS?.map((item, index) => {
         if (item) {
           const selected = order.field === item.field && order.direction === item.direction;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            ui.MenuItem,
+          return /* @__PURE__ */ jsx(
+            MenuItem,
             {
               disabled: selected,
               fontSize: 1,
@@ -1738,25 +1746,25 @@ const OrderSelect = () => {
             index
           );
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}, index);
+        return /* @__PURE__ */ jsx(MenuDivider, {}, index);
       }) }),
       popover: popoverProps
     }
   );
 }, Progress = (props) => {
-  const { loading } = props, { animationDuration, isFinished, progress } = reactNprogress.useNProgress({
+  const { loading } = props, { animationDuration, isFinished, progress } = useNProgress({
     animationDuration: 300,
     isAnimating: loading
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Box,
+  return /* @__PURE__ */ jsx(
+    Box,
     {
       style: {
         opacity: isFinished ? 0 : 1,
         transition: `opacity ${animationDuration}ms linear`
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Box,
+      children: /* @__PURE__ */ jsx(
+        Box,
         {
           style: {
             height: "1px",
@@ -1773,51 +1781,51 @@ const OrderSelect = () => {
   );
 }, SCHEME_COLORS = {
   bg: {
-    dark: color.hues.gray[950].hex,
-    light: color.hues.gray[50].hex
+    dark: hues.gray[950].hex,
+    light: hues.gray[50].hex
   },
   bg2: {
-    dark: color.hues.gray[900].hex,
-    light: color.hues.gray[100].hex
+    dark: hues.gray[900].hex,
+    light: hues.gray[100].hex
   },
   inputEnabledBorder: {
-    dark: ui.studioTheme.color.dark.default.input.default.enabled.border,
-    light: ui.studioTheme.color.light.default.input.default.enabled.border
+    dark: studioTheme.color.dark.default.input.default.enabled.border,
+    light: studioTheme.color.light.default.input.default.enabled.border
   },
   inputHoveredBorder: {
-    dark: ui.studioTheme.color.dark.default.input.default.hovered.border,
-    light: ui.studioTheme.color.light.default.input.default.hovered.border
+    dark: studioTheme.color.dark.default.input.default.hovered.border,
+    light: studioTheme.color.light.default.input.default.hovered.border
   },
   mutedHoveredBg: {
-    dark: ui.studioTheme.color.dark.primary.muted.primary.hovered.bg,
-    light: ui.studioTheme.color.light.primary.muted.primary.hovered.bg
+    dark: studioTheme.color.dark.primary.muted.primary.hovered.bg,
+    light: studioTheme.color.light.primary.muted.primary.hovered.bg
   },
   mutedHoveredFg: {
-    dark: ui.studioTheme.color.dark.primary.muted.primary.hovered.fg,
-    light: ui.studioTheme.color.light.primary.muted.primary.hovered.fg
+    dark: studioTheme.color.dark.primary.muted.primary.hovered.fg,
+    light: studioTheme.color.light.primary.muted.primary.hovered.fg
   },
   mutedSelectedBg: {
-    dark: ui.studioTheme.color.dark.primary.muted.primary.selected.bg,
-    light: ui.studioTheme.color.light.primary.muted.primary.selected.bg
+    dark: studioTheme.color.dark.primary.muted.primary.selected.bg,
+    light: studioTheme.color.light.primary.muted.primary.selected.bg
   },
   spotBlue: {
-    dark: ui.studioTheme.color.dark.primary.spot.blue,
-    light: ui.studioTheme.color.light.primary.spot.blue
+    dark: studioTheme.color.dark.primary.spot.blue,
+    light: studioTheme.color.light.primary.spot.blue
   }
 };
 function getSchemeColor(scheme, colorKey) {
   return SCHEME_COLORS[colorKey]?.[scheme];
 }
-const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styledComponents.css`
+const Container$1 = styled(Box)(({ $scheme, theme }) => css`
     background: ${getSchemeColor($scheme, "bg")};
-    border-radius: ${ui.rem(theme.sanity.radius[2])};
+    border-radius: ${rem(theme.sanity.radius[2])};
   `), SearchFacet = (props) => {
-  const { children, facet } = props, scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), handleClose = () => {
+  const { children, facet } = props, scheme = useColorSchemeValue(), dispatch = useDispatch(), handleClose = () => {
     dispatch(searchActions.facetsRemoveById({ facetId: facet.id }));
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Container$1, { padding: [2, 2, 1], $scheme: scheme, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: ["flex-start", "flex-start", "center"], direction: ["column", "column", "row"], children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingBottom: [3, 3, 0], paddingLeft: 1, paddingRight: 2, paddingTop: [1, 1, 0], children: /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Label,
+  return /* @__PURE__ */ jsx(Container$1, { padding: [2, 2, 1], $scheme: scheme, children: /* @__PURE__ */ jsxs(Flex, { align: ["flex-start", "flex-start", "center"], direction: ["column", "column", "row"], children: [
+    /* @__PURE__ */ jsx(Box, { paddingBottom: [3, 3, 0], paddingLeft: 1, paddingRight: 2, paddingTop: [1, 1, 0], children: /* @__PURE__ */ jsx(
+      Label,
       {
         size: 0,
         style: {
@@ -1826,15 +1834,15 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
         children: facet.title
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", children: [
+    /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: 1, paddingX: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { onClick: handleClose }) }) })
+      /* @__PURE__ */ jsx(Box, { marginLeft: 1, paddingX: 2, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 0, children: /* @__PURE__ */ jsx(CloseIcon, { onClick: handleClose }) }) })
     ] })
   ] }) });
 }, TextInputNumber = (props) => {
   const { onValueChange, value, ...remainingProps } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.TextInput,
+  return /* @__PURE__ */ jsx(
+    TextInput,
     {
       ...remainingProps,
       onChange: (e) => {
@@ -1845,29 +1853,29 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
     }
   );
 }, SearchFacetNumber = ({ facet }) => {
-  const dispatch = reactRedux.useDispatch(), popoverProps = usePortalPopoverProps(), modifiers = facet?.modifiers, selectedModifier = facet?.modifier ? modifiers?.find((modifier) => modifier.name === facet?.modifier) : modifiers?.[0], handleOperatorItemClick = (operatorType) => {
+  const dispatch = useDispatch(), popoverProps = usePortalPopoverProps(), modifiers = facet?.modifiers, selectedModifier = facet?.modifier ? modifiers?.find((modifier) => modifier.name === facet?.modifier) : modifiers?.[0], handleOperatorItemClick = (operatorType) => {
     dispatch(searchActions.facetsUpdateById({ id: facet.id, operatorType }));
   }, handleModifierClick = (modifier) => {
     dispatch(searchActions.facetsUpdateById({ id: facet.id, modifier: modifier.name }));
   }, handleValueChange = (value) => {
     dispatch(searchActions.facetsUpdateById({ id: facet.id, value }));
   }, selectedOperatorType = facet.operatorType ?? "greaterThan";
-  return /* @__PURE__ */ jsxRuntime.jsxs(SearchFacet, { facet, children: [
-    facet?.operatorTypes && /* @__PURE__ */ jsxRuntime.jsx(
-      ui.MenuButton,
+  return /* @__PURE__ */ jsxs(SearchFacet, { facet, children: [
+    facet?.operatorTypes && /* @__PURE__ */ jsx(
+      MenuButton,
       {
-        button: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
+        button: /* @__PURE__ */ jsx(
+          Button,
           {
             fontSize: 1,
-            iconRight: icons.SelectIcon,
+            iconRight: SelectIcon,
             padding: 2,
             text: operators[selectedOperatorType].label
           }
         ),
         id: "operators",
-        menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, { children: facet.operatorTypes.map((operatorType, index) => operatorType ? /* @__PURE__ */ jsxRuntime.jsx(
-          ui.MenuItem,
+        menu: /* @__PURE__ */ jsx(Menu$2, { children: facet.operatorTypes.map((operatorType, index) => operatorType ? /* @__PURE__ */ jsx(
+          MenuItem,
           {
             disabled: operatorType === selectedOperatorType,
             fontSize: 1,
@@ -1876,11 +1884,11 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
             text: operators[operatorType].label
           },
           operatorType
-        ) : /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}, index)) }),
+        ) : /* @__PURE__ */ jsx(MenuDivider, {}, index)) }),
         popover: popoverProps
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginX: 1, style: { maxWidth: "50px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsx(Box, { marginX: 1, style: { maxWidth: "50px" }, children: /* @__PURE__ */ jsx(
       TextInputNumber,
       {
         fontSize: 1,
@@ -1891,23 +1899,23 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
         value: facet?.value
       }
     ) }),
-    modifiers && /* @__PURE__ */ jsxRuntime.jsx(
-      ui.MenuButton,
+    modifiers && /* @__PURE__ */ jsx(
+      MenuButton,
       {
-        button: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
+        button: /* @__PURE__ */ jsx(
+          Button,
           {
             fontSize: 1,
-            iconRight: icons.SelectIcon,
+            iconRight: SelectIcon,
             padding: 2,
             text: selectedModifier?.title
           }
         ),
         id: "modifier",
-        menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, { children: modifiers.map((modifier) => {
+        menu: /* @__PURE__ */ jsx(Menu$2, { children: modifiers.map((modifier) => {
           const selected = modifier.name === facet.modifier;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            ui.MenuItem,
+          return /* @__PURE__ */ jsx(
+            MenuItem,
             {
               disabled: selected,
               fontSize: 1,
@@ -1923,27 +1931,27 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
     )
   ] });
 }, SearchFacetSelect = ({ facet }) => {
-  const dispatch = reactRedux.useDispatch(), popoverProps = usePortalPopoverProps(), options = facet?.options, selectedItem = options?.find((v) => v.name === facet?.value), handleListItemClick = (option) => {
+  const dispatch = useDispatch(), popoverProps = usePortalPopoverProps(), options = facet?.options, selectedItem = options?.find((v) => v.name === facet?.value), handleListItemClick = (option) => {
     dispatch(searchActions.facetsUpdate({ name: facet.name, value: option.name }));
   }, handleOperatorItemClick = (operatorType) => {
     dispatch(searchActions.facetsUpdate({ name: facet.name, operatorType }));
   }, selectedOperatorType = facet?.operatorType ?? "is";
-  return /* @__PURE__ */ jsxRuntime.jsxs(SearchFacet, { facet, children: [
-    facet?.operatorTypes && /* @__PURE__ */ jsxRuntime.jsx(
-      ui.MenuButton,
+  return /* @__PURE__ */ jsxs(SearchFacet, { facet, children: [
+    facet?.operatorTypes && /* @__PURE__ */ jsx(
+      MenuButton,
       {
-        button: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
+        button: /* @__PURE__ */ jsx(Box, { marginRight: 1, children: /* @__PURE__ */ jsx(
+          Button,
           {
             fontSize: 1,
-            iconRight: icons.SelectIcon,
+            iconRight: SelectIcon,
             padding: 2,
             text: operators[selectedOperatorType].label
           }
         ) }),
         id: "operators",
-        menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, { children: facet.operatorTypes.map((operatorType, index) => operatorType ? /* @__PURE__ */ jsxRuntime.jsx(
-          ui.MenuItem,
+        menu: /* @__PURE__ */ jsx(Menu$2, { children: facet.operatorTypes.map((operatorType, index) => operatorType ? /* @__PURE__ */ jsx(
+          MenuItem,
           {
             disabled: operatorType === selectedOperatorType,
             fontSize: 1,
@@ -1952,19 +1960,19 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
             text: operators[operatorType].label
           },
           operatorType
-        ) : /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}, index)) }),
+        ) : /* @__PURE__ */ jsx(MenuDivider, {}, index)) }),
         popover: popoverProps
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.MenuButton,
+    /* @__PURE__ */ jsx(
+      MenuButton,
       {
-        button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fontSize: 1, iconRight: icons.SelectIcon, padding: 2, text: selectedItem?.title }),
+        button: /* @__PURE__ */ jsx(Button, { fontSize: 1, iconRight: SelectIcon, padding: 2, text: selectedItem?.title }),
         id: "list",
-        menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, { children: options?.map((item, index) => {
+        menu: /* @__PURE__ */ jsx(Menu$2, { children: options?.map((item, index) => {
           const selected = item.name === selectedItem?.name;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            ui.MenuItem,
+          return /* @__PURE__ */ jsx(
+            MenuItem,
             {
               disabled: selected,
               fontSize: 1,
@@ -1980,27 +1988,27 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
     )
   ] });
 }, SearchFacetString = ({ facet }) => {
-  const dispatch = reactRedux.useDispatch(), popoverProps = usePortalPopoverProps(), handleOperatorItemClick = (operatorType) => {
+  const dispatch = useDispatch(), popoverProps = usePortalPopoverProps(), handleOperatorItemClick = (operatorType) => {
     dispatch(searchActions.facetsUpdateById({ id: facet.id, operatorType }));
   }, handleChange = (e) => {
     dispatch(searchActions.facetsUpdateById({ id: facet.id, value: e.target.value }));
   }, selectedOperatorType = facet.operatorType;
-  return /* @__PURE__ */ jsxRuntime.jsxs(SearchFacet, { facet, children: [
-    facet?.operatorTypes && /* @__PURE__ */ jsxRuntime.jsx(
-      ui.MenuButton,
+  return /* @__PURE__ */ jsxs(SearchFacet, { facet, children: [
+    facet?.operatorTypes && /* @__PURE__ */ jsx(
+      MenuButton,
       {
-        button: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
+        button: /* @__PURE__ */ jsx(
+          Button,
           {
             fontSize: 1,
-            iconRight: icons.SelectIcon,
+            iconRight: SelectIcon,
             padding: 2,
             text: operators[selectedOperatorType].label
           }
         ),
         id: "operators",
-        menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, { children: facet.operatorTypes.map((operatorType, index) => operatorType ? /* @__PURE__ */ jsxRuntime.jsx(
-          ui.MenuItem,
+        menu: /* @__PURE__ */ jsx(Menu$2, { children: facet.operatorTypes.map((operatorType, index) => operatorType ? /* @__PURE__ */ jsx(
+          MenuItem,
           {
             disabled: operatorType === selectedOperatorType,
             fontSize: 1,
@@ -2009,12 +2017,12 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
             text: operators[operatorType].label
           },
           operatorType
-        ) : /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}, index)) }),
+        ) : /* @__PURE__ */ jsx(MenuDivider, {}, index)) }),
         popover: popoverProps
       }
     ),
-    !operators[selectedOperatorType].hideInput && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: 1, style: { maxWidth: "125px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      ui.TextInput,
+    !operators[selectedOperatorType].hideInput && /* @__PURE__ */ jsx(Box, { marginLeft: 1, style: { maxWidth: "125px" }, children: /* @__PURE__ */ jsx(
+      TextInput,
       {
         fontSize: 1,
         onChange: handleChange,
@@ -2031,7 +2039,7 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
   },
   radius: themeRadius$1,
   space: themeSpace$1
-} = ui.studioTheme, reactSelectStyles$1 = (scheme) => ({
+} = studioTheme, reactSelectStyles$1 = (scheme) => ({
   control: (styles, { isDisabled, isFocused }) => {
     let boxShadow = "inset 0 0 0 1px var(--card-border-color)";
     return isFocused && (boxShadow = `inset 0 0 0 1px ${getSchemeColor(scheme, "inputEnabledBorder")},
@@ -2056,9 +2064,9 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
   input: (styles) => ({
     ...styles,
     color: "var(--card-fg-color)",
-    fontFamily: ui.studioTheme.fonts.text.family,
+    fontFamily: studioTheme.fonts.text.family,
     fontSize: themeTextSizes[1].fontSize,
-    marginLeft: ui.rem(themeSpace$1[2])
+    marginLeft: rem(themeSpace$1[2])
   }),
   menuList: (styles) => ({
     ...styles,
@@ -2066,7 +2074,7 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
   }),
   noOptionsMessage: (styles) => ({
     ...styles,
-    fontFamily: ui.studioTheme.fonts.text.family,
+    fontFamily: studioTheme.fonts.text.family,
     fontSize: themeTextSizes[1].fontSize,
     lineHeight: "1em"
   }),
@@ -2078,7 +2086,7 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
     fontSize: themeTextSizes[1].fontSize,
     lineHeight: "1em",
     margin: 0,
-    padding: ui.rem(themeSpace$1[1]),
+    padding: rem(themeSpace$1[1]),
     "&:hover": {
       backgroundColor: getSchemeColor(scheme, "spotBlue"),
       color: getSchemeColor(scheme, "bg")
@@ -2087,7 +2095,7 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
   placeholder: (styles) => ({
     ...styles,
     fontSize: themeTextSizes[1].fontSize,
-    marginLeft: ui.rem(themeSpace$1[2]),
+    marginLeft: rem(themeSpace$1[2]),
     paddingLeft: 0
   }),
   singleValue: (styles) => ({
@@ -2095,41 +2103,41 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
     alignItems: "center",
     display: "inline-flex",
     height: "100%",
-    marginLeft: ui.rem(themeSpace$1[2])
+    marginLeft: rem(themeSpace$1[2])
   }),
   valueContainer: (styles) => ({
     ...styles,
     margin: 0,
     padding: 0
   })
-}), ClearIndicator = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.ClearIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-  ui.Box,
+}), ClearIndicator = (props) => /* @__PURE__ */ jsx(components.ClearIndicator, { ...props, children: /* @__PURE__ */ jsx(
+  Box,
   {
     paddingRight: 1,
     style: {
       transform: "scale(0.85)"
     },
-    children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {}) })
+    children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 0, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
   }
-) }), Menu$1 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.Menu, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { radius: 1, shadow: 2, children: props.children }) }), MenuList$1 = (props) => {
+) }), Menu$1 = (props) => /* @__PURE__ */ jsx(components.Menu, { ...props, children: /* @__PURE__ */ jsx(Card, { radius: 1, shadow: 2, children: props.children }) }), MenuList$1 = (props) => {
   const { children } = props, MAX_ROWS = 5, OPTION_HEIGHT = 33;
   if (Array.isArray(children)) {
     const height = children.length > MAX_ROWS ? OPTION_HEIGHT * MAX_ROWS : children.length * OPTION_HEIGHT;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactVirtuoso.Virtuoso,
+    return /* @__PURE__ */ jsx(
+      Virtuoso,
       {
         className: "media__custom-scrollbar",
         itemContent: (index) => {
           const item = children[index];
-          return /* @__PURE__ */ jsxRuntime.jsx(Option$1, { ...item.props });
+          return /* @__PURE__ */ jsx(Option$1, { ...item.props });
         },
         style: { height },
         totalCount: children.length
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Select.components.MenuList, { ...props, children });
-}, NoOptionsMessage = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.NoOptionsMessage, { ...props, children: props.children }), Option$1 = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingY: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, style: { color: "inherit" }, textOverflow: "ellipsis", children: props.children }) }) }) }), SingleValue = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.SingleValue, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, textOverflow: "ellipsis", children: props.children }) }), reactSelectComponents$1 = {
+  return /* @__PURE__ */ jsx(components.MenuList, { ...props, children });
+}, NoOptionsMessage = (props) => /* @__PURE__ */ jsx(components.NoOptionsMessage, { ...props, children: props.children }), Option$1 = (props) => /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(components.Option, { ...props, children: /* @__PURE__ */ jsx(Box, { paddingY: 1, children: /* @__PURE__ */ jsx(Text, { size: 1, style: { color: "inherit" }, textOverflow: "ellipsis", children: props.children }) }) }) }), SingleValue = (props) => /* @__PURE__ */ jsx(components.SingleValue, { ...props, children: /* @__PURE__ */ jsx(Text, { size: 1, textOverflow: "ellipsis", children: props.children }) }), reactSelectComponents$1 = {
   ClearIndicator,
   DropdownIndicator: null,
   IndicatorSeparator: null,
@@ -2139,7 +2147,7 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
   Option: Option$1,
   SingleValue
 }, SearchFacetTags = ({ facet }) => {
-  const scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), tags = useTypedSelector((state) => selectTags(state)), tagsFetching = useTypedSelector((state) => state.tags.fetching), allTagOptions = getTagSelectOptions(tags), popoverProps = usePortalPopoverProps(), handleChange = (option) => {
+  const scheme = useColorSchemeValue(), dispatch = useDispatch(), tags = useTypedSelector((state) => selectTags(state)), tagsFetching = useTypedSelector((state) => state.tags.fetching), allTagOptions = getTagSelectOptions(tags), popoverProps = usePortalPopoverProps(), handleChange = (option) => {
     dispatch(
       searchActions.facetsUpdateById({
         id: facet.id,
@@ -2154,22 +2162,22 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
       })
     );
   }, selectedOperatorType = facet.operatorType;
-  return /* @__PURE__ */ jsxRuntime.jsxs(SearchFacet, { facet, children: [
-    facet?.operatorTypes && /* @__PURE__ */ jsxRuntime.jsx(
-      ui.MenuButton,
+  return /* @__PURE__ */ jsxs(SearchFacet, { facet, children: [
+    facet?.operatorTypes && /* @__PURE__ */ jsx(
+      MenuButton,
       {
-        button: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
+        button: /* @__PURE__ */ jsx(
+          Button,
           {
             fontSize: 1,
-            iconRight: icons.SelectIcon,
+            iconRight: SelectIcon,
             padding: 2,
             text: operators[selectedOperatorType].label
           }
         ),
         id: "operators",
-        menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, { children: facet.operatorTypes.map((operatorType, index) => operatorType ? /* @__PURE__ */ jsxRuntime.jsx(
-          ui.MenuItem,
+        menu: /* @__PURE__ */ jsx(Menu$2, { children: facet.operatorTypes.map((operatorType, index) => operatorType ? /* @__PURE__ */ jsx(
+          MenuItem,
           {
             disabled: operatorType === selectedOperatorType,
             fontSize: 1,
@@ -2180,12 +2188,12 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
             text: operators[operatorType].label
           },
           operatorType
-        ) : /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}, index)) }),
+        ) : /* @__PURE__ */ jsx(MenuDivider, {}, index)) }),
         popover: popoverProps
       }
     ),
-    !operators[selectedOperatorType].hideInput && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginX: 1, style: { width: "160px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Select__default.default,
+    !operators[selectedOperatorType].hideInput && /* @__PURE__ */ jsx(Box, { marginX: 1, style: { width: "160px" }, children: /* @__PURE__ */ jsx(
+      Select,
       {
         components: reactSelectComponents$1,
         instanceId: "facet-searchable",
@@ -2202,22 +2210,22 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
       }
     ) })
   ] });
-}, StackContainer = styledComponents.styled(ui.Flex)(({ theme }) => styledComponents.css`
+}, StackContainer = styled(Flex)(({ theme }) => css`
     > * {
-      margin-bottom: ${ui.rem(theme.sanity.space[2])};
+      margin-bottom: ${rem(theme.sanity.space[2])};
     }
   `), SearchFacets = (props) => {
   const { layout = "inline" } = props, searchFacets = useTypedSelector((state) => state.search.facets), Items2 = searchFacets.map((facet) => {
     const key = facet.id;
-    return facet.type === "number" ? /* @__PURE__ */ jsxRuntime.jsx(SearchFacetNumber, { facet }, key) : facet.type === "searchable" ? /* @__PURE__ */ jsxRuntime.jsx(SearchFacetTags, { facet }, key) : facet.type === "select" ? /* @__PURE__ */ jsxRuntime.jsx(SearchFacetSelect, { facet }, key) : facet.type === "string" ? /* @__PURE__ */ jsxRuntime.jsx(SearchFacetString, { facet }, key) : null;
+    return facet.type === "number" ? /* @__PURE__ */ jsx(SearchFacetNumber, { facet }, key) : facet.type === "searchable" ? /* @__PURE__ */ jsx(SearchFacetTags, { facet }, key) : facet.type === "select" ? /* @__PURE__ */ jsx(SearchFacetSelect, { facet }, key) : facet.type === "string" ? /* @__PURE__ */ jsx(SearchFacetString, { facet }, key) : null;
   });
   if (layout === "inline")
-    return searchFacets.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Inline, { space: 2, children: Items2 }) });
+    return searchFacets.length === 0 ? null : /* @__PURE__ */ jsx(Box, { marginBottom: 2, children: /* @__PURE__ */ jsx(Inline, { space: 2, children: Items2 }) });
   if (layout === "stack")
-    return /* @__PURE__ */ jsxRuntime.jsx(StackContainer, { align: "flex-start", direction: "column", children: Items2 });
+    return /* @__PURE__ */ jsx(StackContainer, { align: "flex-start", direction: "column", children: Items2 });
   throw Error("Invalid layout");
-}, ToolOptionsContext = react.createContext(null), ToolOptionsProvider = ({ options, children }) => {
-  const value = react.useMemo(() => {
+}, ToolOptionsContext = createContext(null), ToolOptionsProvider = ({ options, children }) => {
+  const value = useMemo(() => {
     let creditLineExcludeSources;
     return options?.creditLine?.excludeSources && (creditLineExcludeSources = Array.isArray(options?.creditLine?.excludeSources) ? options.creditLine.excludeSources : [options?.creditLine?.excludeSources]), {
       dropzone: { maxSize: options?.maximumUploadSize },
@@ -2241,27 +2249,27 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
     options?.directUploads,
     options?.locales
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ToolOptionsContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(ToolOptionsContext.Provider, { value, children });
 }, useToolOptions = () => {
-  const context = react.useContext(ToolOptionsContext);
+  const context = useContext(ToolOptionsContext);
   if (!context)
     throw new Error("useToolOptions must be used within an ToolOptionsProvider");
   return context;
 }, SearchFacetsControl = () => {
-  const dispatch = reactRedux.useDispatch(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), searchFacets = useTypedSelector((state) => state.search.facets), selectedDocument = useTypedSelector((state) => state.selected.document), popoverProps = usePortalPopoverProps(), { creditLine } = useToolOptions(), isTool = !selectedDocument, filteredFacets = FACETS.filter((facet) => !creditLine?.enabled && facet?.type === "string" && facet?.name === "creditLine" ? !1 : facet.type === "group" || facet.type === "divider" ? !0 : isTool ? !facet?.selectOnly : facet.assetTypes.filter(
+  const dispatch = useDispatch(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), searchFacets = useTypedSelector((state) => state.search.facets), selectedDocument = useTypedSelector((state) => state.selected.document), popoverProps = usePortalPopoverProps(), { creditLine } = useToolOptions(), isTool = !selectedDocument, filteredFacets = FACETS.filter((facet) => !creditLine?.enabled && facet?.type === "string" && facet?.name === "creditLine" ? !1 : facet.type === "group" || facet.type === "divider" ? !0 : isTool ? !facet?.selectOnly : facet.assetTypes.filter(
     (assetType) => assetTypes.includes(assetType)
   ).length > 0).filter((facet, index, facets) => {
     const previousFacet = facets[index - 1];
     return !(facet.type === "divider" && (index === 0 || index === facets.length - 1) || facet.type === "divider" && previousFacet?.type === "divider");
-  }), hasSearchFacets = filteredFacets.length > 0, renderMenuFacets = (facets, level = 0) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: facets?.map((facet, index) => {
+  }), hasSearchFacets = filteredFacets.length > 0, renderMenuFacets = (facets, level = 0) => /* @__PURE__ */ jsx(Fragment, { children: facets?.map((facet, index) => {
     if (facet.type === "divider")
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}, index);
+      return /* @__PURE__ */ jsx(MenuDivider, {}, index);
     if (facet.type === "group")
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.MenuGroup, { text: facet.title, title: facet.title, children: renderMenuFacets(facet.facets, level + 1) }, `group-${level}-${index}`);
+      return /* @__PURE__ */ jsx(MenuGroup, { text: facet.title, title: facet.title, children: renderMenuFacets(facet.facets, level + 1) }, `group-${level}-${index}`);
     if (facet) {
       const disabled = !facet.operatorTypes && !!searchFacets.find((v) => v.name === facet.name);
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ui.MenuItem,
+      return /* @__PURE__ */ jsx(
+        MenuItem,
         {
           disabled,
           fontSize: 1,
@@ -2274,16 +2282,16 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
     }
     return null;
   }) });
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.MenuButton,
+  return /* @__PURE__ */ jsxs(Flex, { children: [
+    /* @__PURE__ */ jsx(
+      MenuButton,
       {
-        button: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
+        button: /* @__PURE__ */ jsx(
+          Button,
           {
             disabled: !hasSearchFacets,
             fontSize: 1,
-            icon: icons.AddIcon,
+            icon: AddIcon,
             mode: "bleed",
             space: 2,
             text: "Add filter",
@@ -2291,15 +2299,15 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
           }
         ),
         id: "facets",
-        menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, { children: renderMenuFacets(filteredFacets) }),
+        menu: /* @__PURE__ */ jsx(Menu$2, { children: renderMenuFacets(filteredFacets) }),
         popover: {
           ...popoverProps,
           placement: "right-start"
         }
       }
     ),
-    searchFacets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Button,
+    searchFacets.length > 0 && /* @__PURE__ */ jsx(
+      Button,
       {
         fontSize: 1,
         mode: "bleed",
@@ -2308,7 +2316,7 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
       }
     )
   ] });
-}, TagIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
+}, TagIcon = () => /* @__PURE__ */ jsxs(
   "svg",
   {
     "data-sanity-icon": "media__tag",
@@ -2319,7 +2327,7 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
     viewBox: "0 0 512 512",
     width: "1em",
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsx(
         "path",
         {
           d: "M435.25 48h-122.9a14.46 14.46 0 00-10.2 4.2L56.45 297.9a28.85 28.85 0 000 40.7l117 117a28.85 28.85 0 0040.7 0L459.75 210a14.46 14.46 0 004.2-10.2v-123a28.66 28.66 0 00-28.7-28.8z",
@@ -2329,29 +2337,29 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
           strokeWidth: "32"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M384 160a32 32 0 1132-32 32 32 0 01-32 32z" })
+      /* @__PURE__ */ jsx("path", { d: "M384 160a32 32 0 1132-32 32 32 0 01-32 32z" })
     ]
   }
 ), TextInputSearch = () => {
-  const searchQuery = useTypedSelector((state) => state.search.query), dispatch = reactRedux.useDispatch(), handleChange = (e) => {
+  const searchQuery = useTypedSelector((state) => state.search.query), dispatch = useDispatch(), handleChange = (e) => {
     dispatch(searchActions.querySet({ searchQuery: e.currentTarget.value }));
   }, handleClear = () => {
     dispatch(searchActions.querySet({ searchQuery: "" }));
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.TextInput,
+  return /* @__PURE__ */ jsxs(Box, { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
       {
         fontSize: 1,
-        icon: icons.SearchIcon,
+        icon: SearchIcon,
         onChange: handleChange,
         placeholder: "Search",
         radius: 2,
         value: searchQuery
       }
     ),
-    searchQuery.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Flex,
+    searchQuery.length > 0 && /* @__PURE__ */ jsx(
+      Flex,
       {
         align: "center",
         justify: "center",
@@ -2367,20 +2375,20 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
           zIndex: 1
           // force stacking context
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {})
+        children: /* @__PURE__ */ jsx(CloseIcon, {})
       }
     )
   ] });
 }, Controls = () => {
-  const dispatch = reactRedux.useDispatch(), fetching = useTypedSelector((state) => state.assets.fetching), pageIndex = useTypedSelector((state) => state.assets.pageIndex), searchFacets = useTypedSelector((state) => state.search.facets), tagsPanelVisible = useTypedSelector((state) => state.tags.panelVisible), mediaIndex = ui.useMediaIndex(), handleShowSearchFacetDialog = () => {
+  const dispatch = useDispatch(), fetching = useTypedSelector((state) => state.assets.fetching), pageIndex = useTypedSelector((state) => state.assets.pageIndex), searchFacets = useTypedSelector((state) => state.search.facets), tagsPanelVisible = useTypedSelector((state) => state.tags.panelVisible), mediaIndex = useMediaIndex(), handleShowSearchFacetDialog = () => {
     dispatch(dialogActions.showSearchFacets());
   }, handleShowTagsDialog = () => {
     dispatch(dialogActions.showTags());
   }, toggleTagsPanelToggle = () => {
     dispatch(tagsActions.panelVisibleSet({ panelVisible: !tagsPanelVisible }));
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Box,
+  return /* @__PURE__ */ jsxs(
+    Box,
     {
       paddingY: 2,
       style: {
@@ -2388,14 +2396,14 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
         zIndex: 2
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Flex,
+        /* @__PURE__ */ jsx(Box, { marginBottom: 2, children: /* @__PURE__ */ jsx(
+          Flex,
           {
             align: "flex-start",
             direction: ["column", "column", "column", "column", "row"],
             justify: "space-between",
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              ui.Flex,
+            children: /* @__PURE__ */ jsxs(
+              Flex,
               {
                 flex: 1,
                 style: {
@@ -2407,14 +2415,14 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
                   width: "100%"
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginX: 2, style: { minWidth: "200px" }, children: /* @__PURE__ */ jsxRuntime.jsx(TextInputSearch, {}) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: ["none", "none", "block"], children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(SearchFacets, {}),
-                    /* @__PURE__ */ jsxRuntime.jsx(SearchFacetsControl, {})
+                  /* @__PURE__ */ jsx(Box, { marginX: 2, style: { minWidth: "200px" }, children: /* @__PURE__ */ jsx(TextInputSearch, {}) }),
+                  /* @__PURE__ */ jsxs(Box, { display: ["none", "none", "block"], children: [
+                    /* @__PURE__ */ jsx(SearchFacets, {}),
+                    /* @__PURE__ */ jsx(SearchFacetsControl, {})
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { display: ["block", "block", "none"], marginX: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 2, style: { whiteSpace: "nowrap" }, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      ui.Button,
+                  /* @__PURE__ */ jsx(Box, { display: ["block", "block", "none"], marginX: 2, children: /* @__PURE__ */ jsxs(Inline, { space: 2, style: { whiteSpace: "nowrap" }, children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
                       {
                         fontSize: 1,
                         mode: "ghost",
@@ -2423,8 +2431,8 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
                         tone: "primary"
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      ui.Button,
+                    /* @__PURE__ */ jsx(
+                      Button,
                       {
                         fontSize: 1,
                         mode: "ghost",
@@ -2439,15 +2447,15 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
             )
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", justify: ["space-between"], children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginX: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ButtonViewGroup, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { marginX: 2, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(OrderSelect, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { display: ["none", "none", "block"], marginLeft: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Button,
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: ["space-between"], children: [
+          /* @__PURE__ */ jsx(Box, { marginX: 2, children: /* @__PURE__ */ jsx(ButtonViewGroup, {}) }),
+          /* @__PURE__ */ jsxs(Flex, { marginX: 2, children: [
+            /* @__PURE__ */ jsx(OrderSelect, {}),
+            /* @__PURE__ */ jsx(Box, { display: ["none", "none", "block"], marginLeft: 2, children: /* @__PURE__ */ jsx(
+              Button,
               {
                 fontSize: 1,
-                icon: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { transform: "scale(0.75)" }, children: /* @__PURE__ */ jsxRuntime.jsx(TagIcon, {}) }),
+                icon: /* @__PURE__ */ jsx(Box, { style: { transform: "scale(0.75)" }, children: /* @__PURE__ */ jsx(TagIcon, {}) }),
                 onClick: toggleTagsPanelToggle,
                 mode: tagsPanelVisible ? "default" : "ghost",
                 text: tagsPanelVisible ? "Tags" : ""
@@ -2455,14 +2463,14 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
             ) })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Progress, { loading: fetching }, pageIndex)
+        /* @__PURE__ */ jsx(Progress, { loading: fetching }, pageIndex)
       ]
     }
   );
 }, initialState$3 = {
   badConnection: !1,
   enabled: !1
-}, debugSlice = toolkit.createSlice({
+}, debugSlice = createSlice({
   name: "debug",
   initialState: initialState$3,
   reducers: {
@@ -2476,14 +2484,14 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
 }), debugActions = { ...debugSlice.actions };
 var debugReducer = debugSlice.reducer;
 const DebugControls = () => {
-  const dispatch = reactRedux.useDispatch(), badConnection = useTypedSelector((state) => state.debug.badConnection), debugEnabled = useTypedSelector((state) => state.debug.enabled), handleChange = (e) => {
+  const dispatch = useDispatch(), badConnection = useTypedSelector((state) => state.debug.badConnection), debugEnabled = useTypedSelector((state) => state.debug.enabled), handleChange = (e) => {
     const checked = e.target.checked;
     dispatch(debugActions.setBadConnection(checked));
   };
   return useKeyPress("alt+ctrl+shift+/", () => {
     dispatch(debugActions.toggleEnabled());
-  }), debugEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Box,
+  }), debugEnabled ? /* @__PURE__ */ jsx(
+    Box,
     {
       padding: 4,
       style: {
@@ -2493,18 +2501,18 @@ const DebugControls = () => {
         position: "fixed",
         width: "100%"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginRight: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(icons.PlugIcon, {}) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Tooltip,
+      children: /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+        /* @__PURE__ */ jsx(Box, { marginRight: 3, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsx(PlugIcon, {}) }) }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
           {
             animate: !0,
-            content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: badConnection ? "Bad connection: +3000ms & 50% chance to fail" : "No connection throttling" }) }),
+            content: /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: badConnection ? "Bad connection: +3000ms & 50% chance to fail" : "No connection throttling" }) }),
             fallbackPlacements: ["right", "left"],
             placement: "bottom",
             portal: !0,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Switch,
+            children: /* @__PURE__ */ jsx(
+              Switch,
               {
                 checked: badConnection,
                 onChange: handleChange,
@@ -2521,33 +2529,33 @@ const DebugControls = () => {
 };
 function localizedStringSchema(locales) {
   if (!locales || locales.length === 0)
-    return z__namespace.string().trim().optional();
+    return z.string().trim().optional();
   const shape = {};
   for (const locale of locales)
-    shape[locale.id] = z__namespace.string().trim().optional();
-  return z__namespace.object(shape).passthrough();
+    shape[locale.id] = z.string().trim().optional();
+  return z.object(shape).passthrough();
 }
-const tagOptionSchema = z__namespace.object({
-  label: z__namespace.string().trim().min(1, { message: "Label cannot be empty" }),
-  value: z__namespace.string().trim().min(1, { message: "Value cannot be empty" })
+const tagOptionSchema = z.object({
+  label: z.string().trim().min(1, { message: "Label cannot be empty" }),
+  value: z.string().trim().min(1, { message: "Value cannot be empty" })
 });
 function getAssetFormSchema(locales) {
-  return z__namespace.object({
+  return z.object({
     altText: localizedStringSchema(locales),
     creditLine: localizedStringSchema(locales),
     description: localizedStringSchema(locales),
-    opt: z__namespace.object({
-      media: z__namespace.object({
-        tags: z__namespace.array(tagOptionSchema).nullable()
+    opt: z.object({
+      media: z.object({
+        tags: z.array(tagOptionSchema).nullable()
       })
     }),
-    originalFilename: z__namespace.string().trim().min(1, { message: "Filename cannot be empty" }),
+    originalFilename: z.string().trim().min(1, { message: "Filename cannot be empty" }),
     title: localizedStringSchema(locales)
   });
 }
 getAssetFormSchema();
-const tagFormSchema = z__namespace.object({
-  name: z__namespace.string().min(1, { message: "Name cannot be empty" })
+const tagFormSchema = z.object({
+  name: z.string().min(1, { message: "Name cannot be empty" })
 });
 function getUniqueDocuments(documents) {
   const draftIds = documents.reduce(
@@ -2566,33 +2574,33 @@ const imageDprUrl = (asset, options) => {
   return typeof val == "object" && val !== null && val.constructor !== Array ? acc[key] = sanitizeFormData(val) : val === "" || typeof val > "u" || val?.length === 0 ? acc[key] = null : typeof val == "string" && val ? acc[key] = formData[key].trim() : acc[key] = formData[key], acc;
 }, {}), isFileAsset = (asset) => asset._type === "sanity.fileAsset", isImageAsset = (asset) => asset._type === "sanity.imageAsset";
 function zodFormResolver(schema) {
-  return zod.zodResolver(
+  return zodResolver(
     schema
   );
 }
 const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asset.metadata.dimensions.height}px`, ButtonAssetCopy = ({ disabled, url }) => {
-  const popoverProps = usePortalPopoverProps(), refPopoverTimeout = react.useRef(null), [popoverVisible, setPopoverVisible] = react.useState(!1), handleClick = () => {
-    refPopoverTimeout.current && clearTimeout(refPopoverTimeout.current), setPopoverVisible(!0), copy__default.default(url), refPopoverTimeout.current = setTimeout(() => {
+  const popoverProps = usePortalPopoverProps(), refPopoverTimeout = useRef(null), [popoverVisible, setPopoverVisible] = useState(!1), handleClick = () => {
+    refPopoverTimeout.current && clearTimeout(refPopoverTimeout.current), setPopoverVisible(!0), copy(url), refPopoverTimeout.current = setTimeout(() => {
       setPopoverVisible(!1);
     }, 1250);
   };
-  return react.useEffect(() => () => {
+  return useEffect(() => () => {
     refPopoverTimeout.current && clearTimeout(refPopoverTimeout.current);
-  }, []), /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Popover,
+  }, []), /* @__PURE__ */ jsx(
+    Popover,
     {
-      content: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: "Copied!" }),
+      content: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: "Copied!" }),
       open: popoverVisible,
       padding: 2,
       placement: "top",
       radius: 1,
       ...popoverProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Button,
+      children: /* @__PURE__ */ jsx(
+        Button,
         {
           disabled,
           fontSize: 1,
-          icon: icons.ClipboardIcon,
+          icon: ClipboardIcon,
           mode: "ghost",
           onClick: handleClick,
           text: "Copy URL"
@@ -2600,9 +2608,9 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
       )
     }
   );
-}, Row = ({ label, value }) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "space-between", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Text,
+}, Row = ({ label, value }) => /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
+  /* @__PURE__ */ jsx(
+    Text,
     {
       size: 1,
       style: {
@@ -2613,8 +2621,8 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
       children: label
     }
   ),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Text,
+  /* @__PURE__ */ jsx(
+    Text,
     {
       size: 1,
       style: {
@@ -2630,16 +2638,16 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
   const { asset, item } = props, exif = asset?.metadata?.exif, handleDownload = () => {
     window.location.href = `${asset.url}?dl=${asset.originalFilename}`;
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { marginTop: 3, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Size", value: filesize__default.default(asset?.size, { base: 10, round: 0 }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "MIME type", value: asset?.mimeType }),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Extension", value: (asset?.extension).toUpperCase() }),
-      isImageAsset(asset) && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Dimensions", value: getAssetResolution(asset) })
+  return /* @__PURE__ */ jsxs(Box, { marginTop: 3, children: [
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+      /* @__PURE__ */ jsx(Row, { label: "Size", value: filesize(asset?.size, { base: 10, round: 0 }) }),
+      /* @__PURE__ */ jsx(Row, { label: "MIME type", value: asset?.mimeType }),
+      /* @__PURE__ */ jsx(Row, { label: "Extension", value: (asset?.extension).toUpperCase() }),
+      isImageAsset(asset) && /* @__PURE__ */ jsx(Row, { label: "Dimensions", value: getAssetResolution(asset) })
     ] }) }),
-    exif && (exif.DateTimeOriginal || exif.FNumber || exif.FocalLength || exif.ExposureTime || exif.ISO) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Box,
+    exif && (exif.DateTimeOriginal || exif.FNumber || exif.FocalLength || exif.ExposureTime || exif.ISO) && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Box,
         {
           marginY: 4,
           style: {
@@ -2649,48 +2657,48 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
           }
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
-        exif.ISO && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "ISO", value: exif.ISO }),
-        exif.FNumber && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Aperture", value: `\u0192/${exif.FNumber}` }),
-        exif.FocalLength && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Focal length", value: `${exif.FocalLength}mm` }),
-        exif.ExposureTime && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Exposure time", value: `1/${1 / exif.ExposureTime}` }),
-        exif.DateTimeOriginal && /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+        exif.ISO && /* @__PURE__ */ jsx(Row, { label: "ISO", value: exif.ISO }),
+        exif.FNumber && /* @__PURE__ */ jsx(Row, { label: "Aperture", value: `\u0192/${exif.FNumber}` }),
+        exif.FocalLength && /* @__PURE__ */ jsx(Row, { label: "Focal length", value: `${exif.FocalLength}mm` }),
+        exif.ExposureTime && /* @__PURE__ */ jsx(Row, { label: "Exposure time", value: `1/${1 / exif.ExposureTime}` }),
+        exif.DateTimeOriginal && /* @__PURE__ */ jsx(
           Row,
           {
             label: "Original date",
-            value: dateFns.format(new Date(exif.DateTimeOriginal), "PPp")
+            value: format(new Date(exif.DateTimeOriginal), "PPp")
           }
         )
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 5, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 2, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Button,
+    /* @__PURE__ */ jsx(Box, { marginTop: 5, children: /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
+      /* @__PURE__ */ jsx(
+        Button,
         {
           disabled: !item || item?.updating,
           fontSize: 1,
-          icon: icons.DownloadIcon,
+          icon: DownloadIcon,
           mode: "ghost",
           onClick: handleDownload,
           text: "Download"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(ButtonAssetCopy, { disabled: !item || item?.updating, url: asset.url })
+      /* @__PURE__ */ jsx(ButtonAssetCopy, { disabled: !item || item?.updating, url: asset.url })
     ] }) })
   ] });
-}, Dialog = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, { ...props, style: { position: "fixed" } }), DocumentList = ({ documents, isLoading }) => {
-  const schema = sanity.useSchema();
-  return isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: "Loading..." }) : documents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: "No documents are referencing this asset" }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { flex: 1, marginBottom: 2, padding: 2, radius: 2, shadow: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 2, children: documents?.map((doc) => /* @__PURE__ */ jsxRuntime.jsx(ReferringDocument, { doc, schemaType: schema.get(doc._type) }, doc._id)) }) });
+}, Dialog = (props) => /* @__PURE__ */ jsx(Dialog$1, { ...props, style: { position: "fixed" } }), DocumentList = ({ documents, isLoading }) => {
+  const schema = useSchema();
+  return isLoading ? /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: "Loading..." }) : documents.length === 0 ? /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: "No documents are referencing this asset" }) : /* @__PURE__ */ jsx(Card, { flex: 1, marginBottom: 2, padding: 2, radius: 2, shadow: 1, children: /* @__PURE__ */ jsx(Stack, { space: 2, children: documents?.map((doc) => /* @__PURE__ */ jsx(ReferringDocument, { doc, schemaType: schema.get(doc._type) }, doc._id)) }) });
 }, ReferringDocument = (props) => {
-  const { doc, schemaType } = props, { onClick } = router.useIntentLink({
+  const { doc, schemaType } = props, { onClick } = useIntentLink({
     intent: "edit",
     params: { id: doc._id }
   });
-  return schemaType ? /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { mode: "bleed", onClick, padding: 2, style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(sanity.Preview, { layout: "default", schemaType, value: doc }) }, doc._id) : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, children: [
+  return schemaType ? /* @__PURE__ */ jsx(Button, { mode: "bleed", onClick, padding: 2, style: { width: "100%" }, children: /* @__PURE__ */ jsx(Preview, { layout: "default", schemaType, value: doc }) }, doc._id) : /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsxs(Text, { size: 1, children: [
     "A document of the unknown type ",
-    /* @__PURE__ */ jsxRuntime.jsx("em", { children: doc._type })
+    /* @__PURE__ */ jsx("em", { children: doc._type })
   ] }) });
-}, Container = styledComponents.styled(ui.Box)(({ theme }) => styledComponents.css`
+}, Container = styled(Box)(({ theme }) => css`
     text {
       font-family: ${theme.sanity.fonts.text.family} !important;
       font-size: 8px !important;
@@ -2698,16 +2706,16 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
     }
   `), FileIcon = (props) => {
   const { extension, onClick, width } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { align: "center", justify: "center", onClick, style: { height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(Container, { style: { width }, children: extension ? /* @__PURE__ */ jsxRuntime.jsx(
-    reactFileIcon.FileIcon,
+  return /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", onClick, style: { height: "100%" }, children: /* @__PURE__ */ jsx(Container, { style: { width }, children: extension ? /* @__PURE__ */ jsx(
+    FileIcon$1,
     {
       extension,
-      ...reactFileIcon.defaultStyles[extension]
+      ...defaultStyles[extension]
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(reactFileIcon.FileIcon, {}) }) });
+  ) : /* @__PURE__ */ jsx(FileIcon$1, {}) }) });
 }, FileAssetPreview = (props) => {
   const { asset } = props;
-  return asset.mimeType.search("audio") === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { align: "center", justify: "center", style: { height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx("audio", { controls: !0, src: asset.url, style: { width: "100%" } }) }) : asset.mimeType.search("video") === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+  return asset.mimeType.search("audio") === 0 ? /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", style: { height: "100%" }, children: /* @__PURE__ */ jsx("audio", { controls: !0, src: asset.url, style: { width: "100%" } }) }) : asset.mimeType.search("video") === 0 ? /* @__PURE__ */ jsx(
     "video",
     {
       controls: !0,
@@ -2717,25 +2725,25 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
         width: "100%"
       }
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { extension: asset.extension, width: "50%" });
+  ) : /* @__PURE__ */ jsx(FileIcon, { extension: asset.extension, width: "50%" });
 }, FormSubmitButton = (props) => {
   const { disabled, isValid, lastUpdated, onClick } = props;
   let content;
-  return isValid ? lastUpdated ? content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return isValid ? lastUpdated ? content = /* @__PURE__ */ jsxs(Fragment, { children: [
     "Last updated",
-    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+    /* @__PURE__ */ jsx("br", {}),
     " ",
-    dateFns.format(new Date(lastUpdated), "PPp")
-  ] }) : content = "No unpublished changes" : content = "There are validation errors that need to be fixed before this document can be published", /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Tooltip,
+    format(new Date(lastUpdated), "PPp")
+  ] }) : content = "No unpublished changes" : content = "There are validation errors that need to be fixed before this document can be published", /* @__PURE__ */ jsx(
+    Tooltip,
     {
       animate: !0,
-      content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, style: { maxWidth: "185px" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: content }) }),
+      content: /* @__PURE__ */ jsx(Box, { padding: 3, style: { maxWidth: "185px" }, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: content }) }),
       disabled: "ontouchstart" in window,
       placement: "top",
       portal: !0,
-      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Button,
+      children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        Button,
         {
           disabled,
           fontSize: 1,
@@ -2746,7 +2754,7 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
       ) })
     }
   );
-}, Image$1 = styledComponents.styled.img`
+}, Image$1 = styled.img`
   --checkerboard-color: ${(props) => props.$scheme ? getSchemeColor(props.$scheme, "bg2") : "inherit"};
 
   display: block;
@@ -2754,7 +2762,7 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
   height: 100%;
   object-fit: contain;
 
-  ${(props) => props.$showCheckerboard && styledComponents.css`
+  ${(props) => props.$showCheckerboard && css`
       background-image:
         linear-gradient(45deg, var(--checkerboard-color) 25%, transparent 25%),
         linear-gradient(-45deg, var(--checkerboard-color) 25%, transparent 25%),
@@ -2767,7 +2775,7 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
         10px -10px,
         -10px 0;
     `}
-`, { radius: themeRadius, space: themeSpace } = ui.studioTheme, reactSelectStyles = (scheme) => ({
+`, { radius: themeRadius, space: themeSpace } = studioTheme, reactSelectStyles = (scheme) => ({
   control: (styles, { isFocused }) => {
     let boxShadow = "inset 0 0 0 1px var(--card-border-color)";
     return isFocused && (boxShadow = `inset 0 0 0 1px ${getSchemeColor(scheme, "inputEnabledBorder")},
@@ -2782,7 +2790,7 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
       margin: 0,
       minHeight: "35px",
       outline: "none",
-      padding: ui.rem(themeSpace[1]),
+      padding: rem(themeSpace[1]),
       transition: "none",
       "&:hover": {
         boxShadow: `inset 0 0 0 1px ${getSchemeColor(scheme, "inputHoveredBorder")}`
@@ -2796,8 +2804,8 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
   input: (styles) => ({
     ...styles,
     color: "var(--card-fg-color)",
-    fontFamily: ui.studioTheme.fonts.text.family,
-    marginLeft: ui.rem(themeSpace[2])
+    fontFamily: studioTheme.fonts.text.family,
+    marginLeft: rem(themeSpace[2])
   }),
   menuList: (styles) => ({
     ...styles
@@ -2824,7 +2832,7 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
   }),
   noOptionsMessage: (styles) => ({
     ...styles,
-    fontFamily: ui.studioTheme.fonts.text.family,
+    fontFamily: studioTheme.fonts.text.family,
     lineHeight: "1em"
   }),
   option: (styles, { isFocused }) => ({
@@ -2832,7 +2840,7 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
     backgroundColor: isFocused ? getSchemeColor(scheme, "spotBlue") : "transparent",
     borderRadius: themeRadius[2],
     color: isFocused ? getSchemeColor(scheme, "bg") : "inherit",
-    padding: `${ui.rem(themeSpace[1])} ${ui.rem(themeSpace[2])}`,
+    padding: `${rem(themeSpace[1])} ${rem(themeSpace[2])}`,
     "&:hover": {
       backgroundColor: getSchemeColor(scheme, "spotBlue"),
       color: getSchemeColor(scheme, "bg")
@@ -2840,33 +2848,33 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
   }),
   placeholder: (styles) => ({
     ...styles,
-    marginLeft: ui.rem(themeSpace[2])
+    marginLeft: rem(themeSpace[2])
   }),
   valueContainer: (styles) => ({
     ...styles,
     margin: 0,
     padding: 0
   })
-}), DropdownIndicator = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}) }) }) }), Menu = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.Menu, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { radius: 1, shadow: 2, children: props.children }) }), MenuList = (props) => {
+}), DropdownIndicator = (props) => /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx(Box, { paddingX: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) }) }) }), Menu = (props) => /* @__PURE__ */ jsx(components.Menu, { ...props, children: /* @__PURE__ */ jsx(Card, { radius: 1, shadow: 2, children: props.children }) }), MenuList = (props) => {
   const { children } = props, MAX_ROWS = 5, OPTION_HEIGHT = 37;
   if (Array.isArray(children)) {
     const height = children.length > MAX_ROWS ? OPTION_HEIGHT * MAX_ROWS : children.length * OPTION_HEIGHT;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactVirtuoso.Virtuoso,
+    return /* @__PURE__ */ jsx(
+      Virtuoso,
       {
         className: "media__custom-scrollbar",
         itemContent: (index) => {
           const item = children[index];
-          return /* @__PURE__ */ jsxRuntime.jsx(Option, { ...item.props });
+          return /* @__PURE__ */ jsx(Option, { ...item.props });
         },
         style: { height },
         totalCount: children.length
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Select.components.MenuList, { ...props, children });
-}, MultiValueLabel = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, paddingRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.MultiValueLabel, { ...props }) }) }), MultiValueRemove = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { color: "#1f2123" }) }), Option = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", children: [
-  props.data.__isNew__ && /* @__PURE__ */ jsxRuntime.jsx(icons.AddIcon, { style: { marginRight: "3px" } }),
+  return /* @__PURE__ */ jsx(components.MenuList, { ...props, children });
+}, MultiValueLabel = (props) => /* @__PURE__ */ jsx(Box, { padding: 2, paddingRight: 1, children: /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: /* @__PURE__ */ jsx(components.MultiValueLabel, { ...props }) }) }), MultiValueRemove = (props) => /* @__PURE__ */ jsx(components.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx(CloseIcon, { color: "#1f2123" }) }), Option = (props) => /* @__PURE__ */ jsx(Box, { paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsx(components.Option, { ...props, children: /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+  props.data.__isNew__ && /* @__PURE__ */ jsx(AddIcon, { style: { marginRight: "3px" } }),
   props.children
 ] }) }) }), reactSelectComponents = {
   DropdownIndicator,
@@ -2876,29 +2884,29 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
   MultiValueLabel,
   MultiValueRemove,
   Option
-}, StyledErrorOutlineIcon = styledComponents.styled(icons.ErrorOutlineIcon)(({ theme }) => ({
+}, StyledErrorOutlineIcon = styled(ErrorOutlineIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
 })), FormFieldInputLabel = (props) => {
   const { description, error, label, name } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginY: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 2, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "label", htmlFor: name, size: 1, weight: "semibold", children: label }),
-      error && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Tooltip,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { marginY: 3, children: /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
+      /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: name, size: 1, weight: "semibold", children: label }),
+      error && /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsx(
+        Tooltip,
         {
           animate: !0,
-          content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { muted: !0, size: 1, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(StyledErrorOutlineIcon, { style: { marginRight: "0.1em" } }),
+          content: /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsxs(Text, { muted: !0, size: 1, children: [
+            /* @__PURE__ */ jsx(StyledErrorOutlineIcon, { style: { marginRight: "0.1em" } }),
             error
           ] }) }),
           fallbackPlacements: ["top", "left"],
           placement: "right",
           portal: !0,
-          children: /* @__PURE__ */ jsxRuntime.jsx(StyledErrorOutlineIcon, {})
+          children: /* @__PURE__ */ jsx(StyledErrorOutlineIcon, {})
         }
       ) })
     ] }) }),
-    description && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginY: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { htmlFor: name, muted: !0, size: 1, children: description }) })
+    description && /* @__PURE__ */ jsx(Box, { marginY: 3, children: /* @__PURE__ */ jsx(Text, { htmlFor: name, muted: !0, size: 1, children: description }) })
   ] });
 }, FormFieldInputTags = (props) => {
   const {
@@ -2912,23 +2920,23 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
     options,
     placeholder,
     value
-  } = props, scheme = sanity.useColorSchemeValue(), creating = useTypedSelector((state) => state.tags.creating), tagsFetching = useTypedSelector((state) => state.tags.fetching);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Box,
+  } = props, scheme = useColorSchemeValue(), creating = useTypedSelector((state) => state.tags.creating), tagsFetching = useTypedSelector((state) => state.tags.fetching);
+  return /* @__PURE__ */ jsxs(
+    Box,
     {
       style: { zIndex: 2 },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FormFieldInputLabel, { description, error, label, name }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactHookForm.Controller,
+        /* @__PURE__ */ jsx(FormFieldInputLabel, { description, error, label, name }),
+        /* @__PURE__ */ jsx(
+          Controller,
           {
             control,
             defaultValue: value,
             name,
             render: ({ field }) => {
               const { onBlur, onChange, value: controllerValue } = field;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                CreatableSelect__default.default,
+              return /* @__PURE__ */ jsx(
+                CreatableSelect,
                 {
                   components: reactSelectComponents,
                   instanceId: "tags",
@@ -2953,12 +2961,12 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
       ]
     }
   );
-}, FormFieldInputText = react.forwardRef((props, ref) => {
+}, FormFieldInputText = forwardRef((props, ref) => {
   const { description, disabled, error, label, name, placeholder, value, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(FormFieldInputLabel, { description, error, label, name }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.TextInput,
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(FormFieldInputLabel, { description, error, label, name }),
+    /* @__PURE__ */ jsx(
+      TextInput,
       {
         ...rest,
         autoComplete: "off",
@@ -2972,12 +2980,12 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
       }
     )
   ] });
-}), FormFieldInputTextarea = react.forwardRef((props, ref) => {
+}), FormFieldInputTextarea = forwardRef((props, ref) => {
   const { description, disabled, error, label, name, placeholder, rows, value, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(FormFieldInputLabel, { description, error, label, name }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.TextArea,
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(FormFieldInputLabel, { description, error, label, name }),
+    /* @__PURE__ */ jsx(
+      TextArea,
       {
         ...rest,
         autoComplete: "off",
@@ -3009,9 +3017,9 @@ function Details({
   creditLine,
   locales
 }) {
-  const hasLocales = locales && locales.length > 0, [activeLocaleTab, setActiveLocaleTab] = react.useState(0);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  const hasLocales = locales && locales.length > 0, [activeLocaleTab, setActiveLocaleTab] = useState(0);
+  return /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+    /* @__PURE__ */ jsx(
       FormFieldInputTags,
       {
         control,
@@ -3025,7 +3033,7 @@ function Details({
         value: assetTagOptions
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsx(
       FormFieldInputText,
       {
         ...register("originalFilename"),
@@ -3036,9 +3044,9 @@ function Details({
         value: currentAsset?.originalFilename
       }
     ),
-    hasLocales ? /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { marginTop: 2, shadow: 1, padding: 3, radius: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.TabList, { space: 2, children: locales.map((locale, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Tab,
+    hasLocales ? /* @__PURE__ */ jsx(Card, { marginTop: 2, shadow: 1, padding: 3, radius: 1, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+      /* @__PURE__ */ jsx(TabList, { space: 2, children: locales.map((locale, idx) => /* @__PURE__ */ jsx(
+        Tab,
         {
           id: `locale-tab-${locale.id}`,
           "aria-controls": `locale-panel-${locale.id}`,
@@ -3048,14 +3056,14 @@ function Details({
         },
         locale.id
       )) }),
-      locales.map((locale, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-        ui.TabPanel,
+      locales.map((locale, idx) => /* @__PURE__ */ jsx(
+        TabPanel,
         {
           id: `locale-panel-${locale.id}`,
           "aria-labelledby": `locale-tab-${locale.id}`,
           hidden: activeLocaleTab !== idx,
-          children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+          children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+            /* @__PURE__ */ jsx(
               FormFieldInputText,
               {
                 ...register(`title.${locale.id}`),
@@ -3065,7 +3073,7 @@ function Details({
                 name: `title.${locale.id}`
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsx(
               FormFieldInputText,
               {
                 ...register(`altText.${locale.id}`),
@@ -3075,7 +3083,7 @@ function Details({
                 name: `altText.${locale.id}`
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsx(
               FormFieldInputTextarea,
               {
                 ...register(`description.${locale.id}`),
@@ -3086,7 +3094,7 @@ function Details({
                 rows: 5
               }
             ),
-            creditLine?.enabled && /* @__PURE__ */ jsxRuntime.jsx(
+            creditLine?.enabled && /* @__PURE__ */ jsx(
               FormFieldInputText,
               {
                 ...register(`creditLine.${locale.id}`),
@@ -3100,8 +3108,8 @@ function Details({
         },
         locale.id
       ))
-    ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+    ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
         FormFieldInputText,
         {
           ...register("title"),
@@ -3112,7 +3120,7 @@ function Details({
           value: toStringField(currentAsset?.title)
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsx(
         FormFieldInputText,
         {
           ...register("altText"),
@@ -3123,7 +3131,7 @@ function Details({
           value: toStringField(currentAsset?.altText)
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsx(
         FormFieldInputTextarea,
         {
           ...register("description"),
@@ -3135,7 +3143,7 @@ function Details({
           value: toStringField(currentAsset?.description)
         }
       ),
-      creditLine?.enabled && /* @__PURE__ */ jsxRuntime.jsx(
+      creditLine?.enabled && /* @__PURE__ */ jsx(
         FormFieldInputText,
         {
           ...register("creditLine"),
@@ -3150,13 +3158,13 @@ function Details({
   ] });
 }
 function renderDefaultDetails(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Details, { ...props });
+  return /* @__PURE__ */ jsx(Details, { ...props });
 }
 const DialogAssetEdit = (props) => {
   const {
     children,
     dialog: { assetId, id, lastCreatedTag, lastRemovedTagIds }
-  } = props, client = useVersionedClient(), scheme = sanity.useColorSchemeValue(), documentStore = sanity.useDocumentStore(), dispatch = reactRedux.useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = react.useRef(void 0), [assetSnapshot, setAssetSnapshot] = react.useState(assetItem?.asset), [tabSection, setTabSection] = react.useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine, components: { details: CustomDetails } = {}, locales } = useToolOptions(), generateDefaultValues = react.useCallback(
+  } = props, client = useVersionedClient(), scheme = useColorSchemeValue(), documentStore = useDocumentStore(), dispatch = useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = useRef(void 0), [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset), [tabSection, setTabSection] = useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine, components: { details: CustomDetails } = {}, locales } = useToolOptions(), generateDefaultValues = useCallback(
     (asset) => {
       if (locales && locales.length > 0) {
         const makeLocaleObj = (field) => {
@@ -3196,23 +3204,23 @@ const DialogAssetEdit = (props) => {
     register,
     reset,
     setValue
-  } = reactHookForm.useForm({
+  } = useForm({
     defaultValues: generateDefaultValues(assetItem?.asset),
     mode: "onChange",
     resolver: zodFormResolver(getAssetFormSchema(locales))
-  }), formUpdating = !assetItem || assetItem?.updating, handleClose = react.useCallback(() => {
+  }), formUpdating = !assetItem || assetItem?.updating, handleClose = useCallback(() => {
     dispatch(dialogActions.remove({ id }));
-  }, [dispatch, id]), handleDelete = react.useCallback(() => {
+  }, [dispatch, id]), handleDelete = useCallback(() => {
     assetItem?.asset && dispatch(
       dialogActions.showConfirmDeleteAssets({
         assets: [assetItem],
         closeDialogId: assetItem?.asset._id
       })
     );
-  }, [assetItem, dispatch]), handleAssetUpdate = react.useCallback((update) => {
+  }, [assetItem, dispatch]), handleAssetUpdate = useCallback((update) => {
     const { result, transition } = update;
     result && transition === "update" && setAssetSnapshot(result);
-  }, []), handleCreateTag = react.useCallback(
+  }, []), handleCreateTag = useCallback(
     (tagName) => {
       dispatch(
         tagsActions.createRequest({
@@ -3222,7 +3230,7 @@ const DialogAssetEdit = (props) => {
       );
     },
     [currentAsset?._id, dispatch]
-  ), hasOrphanedLocales = react.useMemo(() => {
+  ), hasOrphanedLocales = useMemo(() => {
     if (!currentAsset) return !1;
     const isLocaleObj = (v) => typeof v == "object" && v !== null && !Array.isArray(v), fields = [
       currentAsset.title,
@@ -3234,7 +3242,7 @@ const DialogAssetEdit = (props) => {
     if (!locales || locales.length === 0) return !0;
     const configuredIds = new Set(locales.map((l) => l.id));
     return fields.some((f) => isLocaleObj(f) ? Object.keys(f).some((k) => !configuredIds.has(k)) : !1);
-  }, [currentAsset, locales]), handleCleanupLocales = react.useCallback(async () => {
+  }, [currentAsset, locales]), handleCleanupLocales = useCallback(async () => {
     if (!currentAsset) return;
     const cleanField = (field) => {
       if (typeof field != "object" || field === null || Array.isArray(field)) return field;
@@ -3254,7 +3262,7 @@ const DialogAssetEdit = (props) => {
         creditLine: cleanField(currentAsset.creditLine)
       }
     }).commit();
-  }, [client, currentAsset, locales]), onSubmit = react.useCallback(
+  }, [client, currentAsset, locales]), onSubmit = useCallback(
     (formData) => {
       if (!assetItem?.asset)
         return;
@@ -3282,31 +3290,31 @@ const DialogAssetEdit = (props) => {
     },
     [assetItem?.asset, dispatch]
   );
-  react.useEffect(() => {
+  useEffect(() => {
     if (!assetItem?.asset)
       return;
-    const subscriptionAsset = client.listen(groq__default.default`*[_id == $id]`, { id: assetItem?.asset._id }).subscribe(handleAssetUpdate);
+    const subscriptionAsset = client.listen(groq`*[_id == $id]`, { id: assetItem?.asset._id }).subscribe(handleAssetUpdate);
     return () => {
       subscriptionAsset?.unsubscribe();
     };
-  }, [assetItem?.asset, client, handleAssetUpdate]), react.useEffect(() => {
+  }, [assetItem?.asset, client, handleAssetUpdate]), useEffect(() => {
     if (lastCreatedTag) {
       const updatedTags = (getValues("opt.media.tags") || []).concat([lastCreatedTag]);
       setValue("opt.media.tags", updatedTags, { shouldDirty: !0 });
     }
-  }, [getValues, lastCreatedTag, setValue]), react.useEffect(() => {
+  }, [getValues, lastCreatedTag, setValue]), useEffect(() => {
     if (lastRemovedTagIds) {
       const updatedTags = (getValues("opt.media.tags") || []).filter((tag) => !lastRemovedTagIds.includes(tag.value));
       setValue("opt.media.tags", updatedTags, { shouldDirty: !0 });
     }
-  }, [getValues, lastRemovedTagIds, setValue]), react.useEffect(() => {
+  }, [getValues, lastRemovedTagIds, setValue]), useEffect(() => {
     assetUpdatedPrev.current !== assetItem?.asset._updatedAt && reset(generateDefaultValues(assetItem?.asset)), assetUpdatedPrev.current = assetItem?.asset._updatedAt;
   }, [assetItem?.asset, generateDefaultValues, reset]);
-  const Footer = () => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
-    hasOrphanedLocales && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 3, radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", justify: "space-between", gap: 3, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: "This asset has localized fields that are no longer configured. Clean them up to avoid validation errors." }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Button,
+  const Footer = () => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+    hasOrphanedLocales && /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", gap: 3, children: [
+      /* @__PURE__ */ jsx(Text, { size: 1, children: "This asset has localized fields that are no longer configured. Clean them up to avoid validation errors." }),
+      /* @__PURE__ */ jsx(
+        Button,
         {
           fontSize: 1,
           mode: "ghost",
@@ -3316,9 +3324,9 @@ const DialogAssetEdit = (props) => {
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "space-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Button,
+    /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
+      /* @__PURE__ */ jsx(
+        Button,
         {
           disabled: formUpdating,
           fontSize: 1,
@@ -3328,7 +3336,7 @@ const DialogAssetEdit = (props) => {
           tone: "critical"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsx(
         FormSubmitButton,
         {
           disabled: formUpdating || !isDirty || !isValid || hasOrphanedLocales,
@@ -3354,23 +3362,23 @@ const DialogAssetEdit = (props) => {
     creditLine,
     locales
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     Dialog,
     {
       animate: !0,
-      footer: /* @__PURE__ */ jsxRuntime.jsx(Footer, {}),
+      footer: /* @__PURE__ */ jsx(Footer, {}),
       header: "Asset details",
       id,
       onClose: handleClose,
       width: 3,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: ["column-reverse", "column-reverse", "row-reverse"], children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginTop: [5, 5, 0], padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(sanity.WithReferringDocuments, { documentStore, id: currentAsset._id, children: ({ isLoading, referringDocuments }) => {
+        /* @__PURE__ */ jsxs(Flex, { direction: ["column-reverse", "column-reverse", "row-reverse"], children: [
+          /* @__PURE__ */ jsx(Box, { flex: 1, marginTop: [5, 5, 0], padding: 4, children: /* @__PURE__ */ jsx(WithReferringDocuments, { documentStore, id: currentAsset._id, children: ({ isLoading, referringDocuments }) => {
             const uniqueReferringDocuments = getUniqueDocuments(referringDocuments);
-            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.TabList, { space: 2, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Tab,
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(TabList, { space: 2, children: [
+                /* @__PURE__ */ jsx(
+                  Tab,
                   {
                     "aria-controls": "details-panel",
                     disabled: formUpdating,
@@ -3381,8 +3389,8 @@ const DialogAssetEdit = (props) => {
                     size: 2
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Tab,
+                /* @__PURE__ */ jsx(
+                  Tab,
                   {
                     "aria-controls": "references-panel",
                     disabled: formUpdating,
@@ -3394,31 +3402,31 @@ const DialogAssetEdit = (props) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { as: "form", marginTop: 4, onSubmit: handleSubmit(onSubmit), children: [
-                !assetItem && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { marginBottom: 3, padding: 3, radius: 2, shadow: 1, tone: "critical", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: "This file cannot be found \u2013 it may have been deleted." }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("button", { style: { display: "none" }, tabIndex: -1, type: "submit" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.TabPanel,
+              /* @__PURE__ */ jsxs(Box, { as: "form", marginTop: 4, onSubmit: handleSubmit(onSubmit), children: [
+                !assetItem && /* @__PURE__ */ jsx(Card, { marginBottom: 3, padding: 3, radius: 2, shadow: 1, tone: "critical", children: /* @__PURE__ */ jsx(Text, { size: 1, children: "This file cannot be found \u2013 it may have been deleted." }) }),
+                /* @__PURE__ */ jsx("button", { style: { display: "none" }, tabIndex: -1, type: "submit" }),
+                /* @__PURE__ */ jsx(
+                  TabPanel,
                   {
                     "aria-labelledby": "details",
                     hidden: tabSection !== "details",
                     id: "details-panel",
-                    children: CustomDetails ? /* @__PURE__ */ jsxRuntime.jsx(
+                    children: CustomDetails ? /* @__PURE__ */ jsx(
                       CustomDetails,
                       {
                         ...detailsProps,
                         renderDefaultDetails
                       }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(Details, { ...detailsProps })
+                    ) : /* @__PURE__ */ jsx(Details, { ...detailsProps })
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.TabPanel,
+                /* @__PURE__ */ jsx(
+                  TabPanel,
                   {
                     "aria-labelledby": "references",
                     hidden: tabSection !== "references",
                     id: "references-panel",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 5, children: assetItem?.asset && /* @__PURE__ */ jsxRuntime.jsx(
+                    children: /* @__PURE__ */ jsx(Box, { marginTop: 5, children: assetItem?.asset && /* @__PURE__ */ jsx(
                       DocumentList,
                       {
                         documents: uniqueReferringDocuments,
@@ -3430,10 +3438,10 @@ const DialogAssetEdit = (props) => {
               ] })
             ] });
           } }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { flex: 1, padding: 4, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { style: { aspectRatio: "1" }, children: [
-              isFileAsset(currentAsset) && /* @__PURE__ */ jsxRuntime.jsx(FileAssetPreview, { asset: currentAsset }),
-              isImageAsset(currentAsset) && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxs(Box, { flex: 1, padding: 4, children: [
+            /* @__PURE__ */ jsxs(Box, { style: { aspectRatio: "1" }, children: [
+              isFileAsset(currentAsset) && /* @__PURE__ */ jsx(FileAssetPreview, { asset: currentAsset }),
+              isImageAsset(currentAsset) && /* @__PURE__ */ jsx(
                 Image$1,
                 {
                   draggable: !1,
@@ -3443,7 +3451,7 @@ const DialogAssetEdit = (props) => {
                 }
               )
             ] }),
-            currentAsset && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(AssetMetadata, { asset: currentAsset, item: assetItem }) })
+            currentAsset && /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(AssetMetadata, { asset: currentAsset, item: assetItem }) })
           ] })
         ] }),
         children
@@ -3451,19 +3459,19 @@ const DialogAssetEdit = (props) => {
     }
   );
 }, DialogConfirm = (props) => {
-  const { children, dialog } = props, dispatch = reactRedux.useDispatch(), handleClose = () => {
+  const { children, dialog } = props, dispatch = useDispatch(), handleClose = () => {
     dispatch(dialogActions.remove({ id: dialog?.id }));
   }, handleConfirm = () => {
     dialog?.closeDialogId && dispatch(dialogActions.remove({ id: dialog?.closeDialogId })), dialog?.confirmCallbackAction && dispatch(dialog.confirmCallbackAction), handleClose();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxs(
     Dialog,
     {
       animate: !0,
-      footer: /* @__PURE__ */ jsxRuntime.jsx(() => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "space-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fontSize: 1, mode: "bleed", onClick: handleClose, text: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
+      footer: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
+        /* @__PURE__ */ jsx(Button, { fontSize: 1, mode: "bleed", onClick: handleClose, text: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
           {
             fontSize: 1,
             onClick: handleConfirm,
@@ -3472,17 +3480,17 @@ const DialogAssetEdit = (props) => {
           }
         )
       ] }) }), {}),
-      header: /* @__PURE__ */ jsxRuntime.jsx(() => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 1, children: /* @__PURE__ */ jsxRuntime.jsx(icons.WarningOutlineIcon, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: 2, children: dialog?.headerTitle })
+      header: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+        /* @__PURE__ */ jsx(Box, { paddingX: 1, children: /* @__PURE__ */ jsx(WarningOutlineIcon, {}) }),
+        /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: dialog?.headerTitle })
       ] }), {}),
       id: "confirm",
       onClose: handleClose,
       width: 1,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 4, paddingY: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
-          dialog?.title && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: dialog.title }),
-          dialog?.description && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: dialog.description }) })
+        /* @__PURE__ */ jsx(Box, { paddingX: 4, paddingY: 4, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+          dialog?.title && /* @__PURE__ */ jsx(Text, { size: 1, children: dialog.title }),
+          dialog?.description && /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsx("em", { children: dialog.description }) })
         ] }) }),
         children
       ]
@@ -3492,13 +3500,13 @@ const DialogAssetEdit = (props) => {
   const {
     children,
     dialog: { id }
-  } = props, dispatch = reactRedux.useDispatch(), handleClose = react.useCallback(() => {
+  } = props, dispatch = useDispatch(), handleClose = useCallback(() => {
     dispatch(dialogActions.clear());
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { animate: !0, header: "Filters", id, onClose: handleClose, width: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { padding: 3, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SearchFacets, { layout: "stack" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SearchFacetsControl, {})
+  return /* @__PURE__ */ jsxs(Dialog, { animate: !0, header: "Filters", id, onClose: handleClose, width: 1, children: [
+    /* @__PURE__ */ jsxs(Box, { padding: 3, children: [
+      /* @__PURE__ */ jsx(SearchFacets, { layout: "stack" }),
+      /* @__PURE__ */ jsx(SearchFacetsControl, {})
     ] }),
     children
   ] });
@@ -3506,13 +3514,13 @@ const DialogAssetEdit = (props) => {
   const {
     children,
     dialog: { id }
-  } = props, dispatch = reactRedux.useDispatch(), creating = useTypedSelector((state) => state.tags.creating), creatingError = useTypedSelector((state) => state.tags.creatingError), {
+  } = props, dispatch = useDispatch(), creating = useTypedSelector((state) => state.tags.creating), creatingError = useTypedSelector((state) => state.tags.creatingError), {
     // Read the formState before render to subscribe the form state through Proxy
     formState: { errors, isDirty, isValid },
     handleSubmit,
     register,
     setError
-  } = reactHookForm.useForm({
+  } = useForm({
     defaultValues: {
       name: ""
     },
@@ -3524,11 +3532,11 @@ const DialogAssetEdit = (props) => {
     const sanitizedFormData = sanitizeFormData(formData);
     dispatch(tagsActions.createRequest({ name: sanitizedFormData.name }));
   };
-  return react.useEffect(() => {
+  return useEffect(() => {
     creatingError && setError("name", {
       message: creatingError?.message
     });
-  }, [creatingError, setError]), /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { animate: !0, footer: /* @__PURE__ */ jsxRuntime.jsx(() => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+  }, [creatingError, setError]), /* @__PURE__ */ jsxs(Dialog, { animate: !0, footer: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsx(Flex, { justify: "flex-end", children: /* @__PURE__ */ jsx(
     FormSubmitButton,
     {
       disabled: formUpdating || !isDirty || !isValid,
@@ -3536,9 +3544,9 @@ const DialogAssetEdit = (props) => {
       onClick: handleSubmit(onSubmit)
     }
   ) }) }), {}), header: "Create Tag", id, onClose: handleClose, width: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { as: "form", padding: 4, onSubmit: handleSubmit(onSubmit), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { style: { display: "none" }, tabIndex: -1, type: "submit" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxs(Box, { as: "form", padding: 4, onSubmit: handleSubmit(onSubmit), children: [
+      /* @__PURE__ */ jsx("button", { style: { display: "none" }, tabIndex: -1, type: "submit" }),
+      /* @__PURE__ */ jsx(
         FormFieldInputText,
         {
           ...register("name"),
@@ -3555,7 +3563,7 @@ const DialogAssetEdit = (props) => {
   const {
     children,
     dialog: { id, tagId }
-  } = props, client = useVersionedClient(), dispatch = reactRedux.useDispatch(), tagItem = useTypedSelector((state) => selectTagById(state, String(tagId))), [tagSnapshot, setTagSnapshot] = react.useState(tagItem?.tag), currentTag = tagItem ? tagItem?.tag : tagSnapshot, generateDefaultValues = (tag) => ({
+  } = props, client = useVersionedClient(), dispatch = useDispatch(), tagItem = useTypedSelector((state) => selectTagById(state, String(tagId))), [tagSnapshot, setTagSnapshot] = useState(tagItem?.tag), currentTag = tagItem ? tagItem?.tag : tagSnapshot, generateDefaultValues = (tag) => ({
     name: tag?.name?.current || ""
   }), {
     // Read the formState before render to subscribe the form state through Proxy
@@ -3564,7 +3572,7 @@ const DialogAssetEdit = (props) => {
     register,
     reset,
     setError
-  } = reactHookForm.useForm({
+  } = useForm({
     defaultValues: generateDefaultValues(tagItem?.tag),
     mode: "onChange",
     resolver: zodFormResolver(tagFormSchema)
@@ -3593,28 +3601,27 @@ const DialogAssetEdit = (props) => {
         tag: tagItem?.tag
       })
     );
-  }, handleTagUpdate = react.useCallback(
+  }, handleTagUpdate = useCallback(
     (update) => {
       const { result, transition } = update;
       result && transition === "update" && (setTagSnapshot(result), reset(generateDefaultValues(result)));
     },
     [reset]
   );
-  react.useEffect(() => {
+  return useEffect(() => {
     tagItem?.error && setError("name", {
       message: tagItem.error?.message
     });
-  }, [setError, tagItem.error]), react.useEffect(() => {
+  }, [setError, tagItem.error]), useEffect(() => {
     if (!tagItem?.tag)
       return;
-    const subscriptionAsset = client.listen(groq__default.default`*[_id == $id]`, { id: tagItem?.tag._id }).subscribe(handleTagUpdate);
+    const subscriptionAsset = client.listen(groq`*[_id == $id]`, { id: tagItem?.tag._id }).subscribe(handleTagUpdate);
     return () => {
       subscriptionAsset?.unsubscribe();
     };
-  }, [client, handleTagUpdate, tagItem?.tag]);
-  const Footer = () => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "space-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Button,
+  }, [client, handleTagUpdate, tagItem?.tag]), currentTag ? /* @__PURE__ */ jsxs(Dialog, { animate: !0, footer: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
+    /* @__PURE__ */ jsx(
+      Button,
       {
         disabled: formUpdating,
         fontSize: 1,
@@ -3624,7 +3631,7 @@ const DialogAssetEdit = (props) => {
         tone: "critical"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsx(
       FormSubmitButton,
       {
         disabled: formUpdating || !isDirty || !isValid,
@@ -3633,12 +3640,11 @@ const DialogAssetEdit = (props) => {
         onClick: handleSubmit(onSubmit)
       }
     )
-  ] }) });
-  return currentTag ? /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { animate: !0, footer: /* @__PURE__ */ jsxRuntime.jsx(Footer, {}), header: "Edit Tag", id, onClose: handleClose, width: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { as: "form", padding: 4, onSubmit: handleSubmit(onSubmit), children: [
-      !tagItem && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { marginBottom: 3, padding: 3, radius: 2, shadow: 1, tone: "critical", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: "This tag cannot be found \u2013 it may have been deleted." }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { style: { display: "none" }, tabIndex: -1, type: "submit" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+  ] }) }), {}), header: "Edit Tag", id, onClose: handleClose, width: 1, children: [
+    /* @__PURE__ */ jsxs(Box, { as: "form", padding: 4, onSubmit: handleSubmit(onSubmit), children: [
+      !tagItem && /* @__PURE__ */ jsx(Card, { marginBottom: 3, padding: 3, radius: 2, shadow: 1, tone: "critical", children: /* @__PURE__ */ jsx(Text, { size: 1, children: "This tag cannot be found \u2013 it may have been deleted." }) }),
+      /* @__PURE__ */ jsx("button", { style: { display: "none" }, tabIndex: -1, type: "submit" }),
+      /* @__PURE__ */ jsx(
         FormFieldInputText,
         {
           ...register("name"),
@@ -3651,9 +3657,9 @@ const DialogAssetEdit = (props) => {
     ] }),
     children
   ] }) : null;
-}, TagContainer = styledComponents.styled(ui.Flex)`
+}, TagContainer = styled(Flex)`
   height: ${PANEL_HEIGHT}px;
-`, ButtonContainer = styledComponents.styled(ui.Flex)`
+`, ButtonContainer = styled(Flex)`
   @media (pointer: fine) {
     visibility: hidden;
   }
@@ -3665,16 +3671,16 @@ const DialogAssetEdit = (props) => {
   }
 `, TagButton = (props) => {
   const { disabled, icon, onClick, tone, tooltip } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Tooltip,
+  return /* @__PURE__ */ jsx(
+    Tooltip,
     {
       animate: !0,
-      content: /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { padding: 2, width: 0, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: tooltip }) }),
+      content: /* @__PURE__ */ jsx(Container$2, { padding: 2, width: 0, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: tooltip }) }),
       disabled: "ontouchstart" in window,
       placement: "top",
       portal: !0,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Button,
+      children: /* @__PURE__ */ jsx(
+        Button,
         {
           disabled,
           fontSize: 1,
@@ -3688,7 +3694,7 @@ const DialogAssetEdit = (props) => {
     }
   );
 }, Tag = (props) => {
-  const { actions, tag } = props, dispatch = reactRedux.useDispatch(), assetsPicked = useTypedSelector(selectAssetsPicked), isSearchFacetTag = useTypedSelector((state) => selectIsSearchFacetTag(state, tag?.tag?._id)), handleSearchFacetTagRemove = () => {
+  const { actions, tag } = props, dispatch = useDispatch(), assetsPicked = useTypedSelector(selectAssetsPicked), isSearchFacetTag = useTypedSelector((state) => selectIsSearchFacetTag(state, tag?.tag?._id)), handleSearchFacetTagRemove = () => {
     dispatch(searchActions.facetsRemoveByTag({ tagId: tag.tag._id }));
   }, handleShowAddTagToAssetsDialog = () => {
     dispatch(dialogActions.showConfirmAssetsTagAdd({ assetsPicked, tag: tag.tag }));
@@ -3714,9 +3720,9 @@ const DialogAssetEdit = (props) => {
       }) : searchActions.facetsAdd({ facet: searchFacet })
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(TagContainer, { align: "center", flex: 1, justify: "space-between", paddingLeft: 3, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Text,
+  return /* @__PURE__ */ jsxs(TagContainer, { align: "center", flex: 1, justify: "space-between", paddingLeft: 3, children: [
+    /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(
+      Text,
       {
         muted: !0,
         size: 1,
@@ -3728,51 +3734,51 @@ const DialogAssetEdit = (props) => {
         children: tag?.tag?.name?.current
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ButtonContainer, { align: "center", style: { flexShrink: 0 }, children: [
-      actions?.includes("search") && /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxs(ButtonContainer, { align: "center", style: { flexShrink: 0 }, children: [
+      actions?.includes("search") && /* @__PURE__ */ jsx(
         TagButton,
         {
           disabled: tag?.updating,
-          icon: isSearchFacetTag ? /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.SearchIcon, {}),
+          icon: isSearchFacetTag ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(SearchIcon, {}),
           onClick: isSearchFacetTag ? handleSearchFacetTagRemove : handleSearchFacetTagAddOrUpdate,
           tooltip: isSearchFacetTag ? "Remove filter" : "Filter by tag"
         }
       ),
-      actions?.includes("edit") && /* @__PURE__ */ jsxRuntime.jsx(
+      actions?.includes("edit") && /* @__PURE__ */ jsx(
         TagButton,
         {
           disabled: tag?.updating,
-          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.EditIcon, {}),
+          icon: /* @__PURE__ */ jsx(EditIcon, {}),
           onClick: handleShowTagEditDialog,
           tone: "primary",
           tooltip: "Edit tag"
         }
       ),
-      actions?.includes("applyAll") && /* @__PURE__ */ jsxRuntime.jsx(
+      actions?.includes("applyAll") && /* @__PURE__ */ jsx(
         TagButton,
         {
           disabled: tag?.updating,
-          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpIcon, {}),
+          icon: /* @__PURE__ */ jsx(ArrowUpIcon, {}),
           onClick: handleShowAddTagToAssetsDialog,
           tone: "primary",
           tooltip: "Add tag to selected assets"
         }
       ),
-      actions?.includes("removeAll") && /* @__PURE__ */ jsxRuntime.jsx(
+      actions?.includes("removeAll") && /* @__PURE__ */ jsx(
         TagButton,
         {
           disabled: tag?.updating,
-          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownIcon, {}),
+          icon: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
           onClick: handleShowRemoveTagFromAssetsDialog,
           tone: "critical",
           tooltip: "Remove tag from selected assets"
         }
       ),
-      actions?.includes("delete") && /* @__PURE__ */ jsxRuntime.jsx(
+      actions?.includes("delete") && /* @__PURE__ */ jsx(
         TagButton,
         {
           disabled: tag?.updating,
-          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.TrashIcon, {}),
+          icon: /* @__PURE__ */ jsx(TrashIcon, {}),
           onClick: handleShowTagDeleteDialog,
           tone: "critical",
           tooltip: "Delete tag"
@@ -3780,23 +3786,23 @@ const DialogAssetEdit = (props) => {
       )
     ] })
   ] });
-}, VirtualRow$1 = react.memo(
+}, VirtualRow$1 = memo(
   ({
     isScrolling,
     item
-  }) => typeof item == "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Flex,
+  }) => typeof item == "string" ? /* @__PURE__ */ jsx(
+    Flex,
     {
       align: "center",
       justify: "space-between",
       paddingX: 3,
       style: { height: `${PANEL_HEIGHT}px` },
-      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: 0, children: item })
+      children: /* @__PURE__ */ jsx(Label, { size: 0, children: item })
     },
     item
-  ) : /* @__PURE__ */ jsxRuntime.jsx(Tag, { actions: isScrolling ? void 0 : item.actions, tag: item }, item.tag?._id)
+  ) : /* @__PURE__ */ jsx(Tag, { actions: isScrolling ? void 0 : item.actions, tag: item }, item.tag?._id)
 ), TagsVirtualized = () => {
-  const assetsPicked = useTypedSelector(selectAssetsPicked), tags = useTypedSelector(selectTags), [isScrolling, setIsScrolling] = react.useState(!1), pickedTagIds = assetsPicked?.reduce((acc, val) => {
+  const assetsPicked = useTypedSelector(selectAssetsPicked), tags = useTypedSelector(selectTags), [isScrolling, setIsScrolling] = useState(!1), pickedTagIds = assetsPicked?.reduce((acc, val) => {
     const assetTagIds = val?.asset?.opt?.media?.tags?.map((tag) => tag._ref) || [];
     return acc = acc.concat(assetTagIds), acc;
   }, []), pickedTagIdsUnique = [...new Set(pickedTagIds)], tagIdsSegmented = pickedTagIdsUnique.reduce(
@@ -3834,8 +3840,8 @@ const DialogAssetEdit = (props) => {
     //
     "Unused",
     ...tagsUnused
-  ])), /* @__PURE__ */ jsxRuntime.jsx(
-    reactVirtuoso.Virtuoso,
+  ])), /* @__PURE__ */ jsx(
+    Virtuoso,
     {
       className: "media__custom-scrollbar",
       computeItemKey: (index) => {
@@ -3843,17 +3849,17 @@ const DialogAssetEdit = (props) => {
         return typeof item == "string" ? item : item.tag._id;
       },
       isScrolling: setIsScrolling,
-      itemContent: (index) => /* @__PURE__ */ jsxRuntime.jsx(VirtualRow$1, { isScrolling, item: items[index] }),
+      itemContent: (index) => /* @__PURE__ */ jsx(VirtualRow$1, { isScrolling, item: items[index] }),
       style: { flex: 1, overflowX: "hidden" },
       totalCount: items.length
     }
   );
 }, TagViewHeader = ({ allowCreate, light, title }) => {
-  const scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), tagsCreating = useTypedSelector((state) => state.tags.creating), tagsFetching = useTypedSelector((state) => state.tags.fetching), handleTagCreate = () => {
+  const scheme = useColorSchemeValue(), dispatch = useDispatch(), tagsCreating = useTypedSelector((state) => state.tags.creating), tagsFetching = useTypedSelector((state) => state.tags.fetching), handleTagCreate = () => {
     dispatch(DIALOG_ACTIONS.showTagCreate());
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Flex,
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    Flex,
     {
       align: "center",
       justify: "space-between",
@@ -3865,16 +3871,16 @@ const DialogAssetEdit = (props) => {
         height: `${PANEL_HEIGHT}px`
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 2, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: 0, children: title }),
-          tagsFetching && /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: 0, style: { opacity: 0.3 }, children: "Loading..." })
+        /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
+          /* @__PURE__ */ jsx(Label, { size: 0, children: title }),
+          tagsFetching && /* @__PURE__ */ jsx(Label, { size: 0, style: { opacity: 0.3 }, children: "Loading..." })
         ] }),
-        allowCreate && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
+        allowCreate && /* @__PURE__ */ jsx(Box, { marginRight: 1, children: /* @__PURE__ */ jsx(
+          Button,
           {
             disabled: tagsCreating,
             fontSize: 1,
-            icon: icons.ComposeIcon,
+            icon: ComposeIcon,
             mode: "bleed",
             onClick: handleTagCreate,
             style: {
@@ -3888,8 +3894,8 @@ const DialogAssetEdit = (props) => {
   ) });
 }, TagView = () => {
   const numPickedAssets = useTypedSelector(selectAssetsPickedLength), tags = useTypedSelector(selectTags), fetching = useTypedSelector((state) => state.tags.fetching), fetchComplete = useTypedSelector((state) => state.tags.fetchCount) !== -1, hasTags = !fetching && tags?.length > 0, hasPicked = numPickedAssets > 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", flex: 1, height: "fill", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", flex: 1, height: "fill", children: [
+    /* @__PURE__ */ jsx(
       TagViewHeader,
       {
         allowCreate: !0,
@@ -3897,26 +3903,26 @@ const DialogAssetEdit = (props) => {
         title: hasPicked ? "Tags (in selection)" : "Tags"
       }
     ),
-    fetchComplete && !hasTags && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: "No tags" }) }) }),
-    hasTags && /* @__PURE__ */ jsxRuntime.jsx(TagsVirtualized, {})
+    fetchComplete && !hasTags && /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsx("em", { children: "No tags" }) }) }),
+    hasTags && /* @__PURE__ */ jsx(TagsVirtualized, {})
   ] });
 }, DialogTags = (props) => {
   const {
     children,
     dialog: { id }
-  } = props, dispatch = reactRedux.useDispatch(), handleClose = react.useCallback(() => {
+  } = props, dispatch = useDispatch(), handleClose = useCallback(() => {
     dispatch(dialogActions.clear());
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { animate: !0, header: "All Tags", id, onClose: handleClose, width: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Box,
+  return /* @__PURE__ */ jsxs(Dialog, { animate: !0, header: "All Tags", id, onClose: handleClose, width: 1, children: [
+    /* @__PURE__ */ jsx(
+      Box,
       {
         style: {
           height: "100%",
           minHeight: "420px"
           // explicit height required as <TagView> is virtualized
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(TagView, {})
+        children: /* @__PURE__ */ jsx(TagView, {})
       }
     ),
     children
@@ -3926,43 +3932,43 @@ const DialogAssetEdit = (props) => {
     if (dialogs.length === 0 || index >= dialogs.length)
       return null;
     const dialog = dialogs[index], childDialogs = renderDialogs(dialogs, index + 1);
-    return dialog.type === "assetEdit" ? /* @__PURE__ */ jsxRuntime.jsx(DialogAssetEdit, { dialog, children: childDialogs }, index) : dialog.type === "confirm" ? /* @__PURE__ */ jsxRuntime.jsx(DialogConfirm, { dialog, children: childDialogs }, index) : dialog.type === "searchFacets" ? /* @__PURE__ */ jsxRuntime.jsx(DialogSearchFacets, { dialog, children: childDialogs }, index) : dialog.type === "tagCreate" ? /* @__PURE__ */ jsxRuntime.jsx(DialogTagCreate, { dialog, children: childDialogs }, index) : dialog.type === "tagEdit" ? /* @__PURE__ */ jsxRuntime.jsx(DialogTagEdit, { dialog, children: childDialogs }, index) : dialog.type === "tags" ? /* @__PURE__ */ jsxRuntime.jsx(DialogTags, { dialog, children: childDialogs }, index) : null;
+    return dialog.type === "assetEdit" ? /* @__PURE__ */ jsx(DialogAssetEdit, { dialog, children: childDialogs }, index) : dialog.type === "confirm" ? /* @__PURE__ */ jsx(DialogConfirm, { dialog, children: childDialogs }, index) : dialog.type === "searchFacets" ? /* @__PURE__ */ jsx(DialogSearchFacets, { dialog, children: childDialogs }, index) : dialog.type === "tagCreate" ? /* @__PURE__ */ jsx(DialogTagCreate, { dialog, children: childDialogs }, index) : dialog.type === "tagEdit" ? /* @__PURE__ */ jsx(DialogTagEdit, { dialog, children: childDialogs }, index) : dialog.type === "tags" ? /* @__PURE__ */ jsx(DialogTags, { dialog, children: childDialogs }, index) : null;
   };
   return renderDialogs(currentDialogs, 0);
-}, DropzoneDispatchContext = react.createContext(void 0), DropzoneDispatchProvider = (props) => {
+}, DropzoneDispatchContext = createContext(void 0), DropzoneDispatchProvider = (props) => {
   const { children, open } = props, contextValue = { open };
-  return /* @__PURE__ */ jsxRuntime.jsx(DropzoneDispatchContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx(DropzoneDispatchContext.Provider, { value: contextValue, children });
 }, useDropzoneActions = () => {
-  const context = react.useContext(DropzoneDispatchContext);
+  const context = useContext(DropzoneDispatchContext);
   if (context === void 0)
     throw new Error("useDropzoneActions must be used within an DropzoneDispatchProvider");
   return context;
 }, Header = (props) => {
   const { onClose } = props, { open } = useDropzoneActions(), { onSelect } = useAssetSourceActions(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), selectedDocument = useTypedSelector((state) => state.selected.document), { directUploads } = useToolOptions();
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingY: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", justify: "space-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginX: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { style: { whiteSpace: "nowrap" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { textOverflow: "ellipsis", weight: "semibold", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: onSelect ? `Insert ${assetTypes.join(" or ")}` : "Browse Assets" }) }),
-      selectedDocument && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { display: ["none", "none", "block"], children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { margin: "0 0.5em" }, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { symbol: "arrow-right" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { textTransform: "capitalize" }, children: selectedDocument._type })
+  return /* @__PURE__ */ jsx(Box, { paddingY: 2, children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", children: [
+    /* @__PURE__ */ jsx(Box, { flex: 1, marginX: 3, children: /* @__PURE__ */ jsxs(Inline, { style: { whiteSpace: "nowrap" }, children: [
+      /* @__PURE__ */ jsx(Text, { textOverflow: "ellipsis", weight: "semibold", children: /* @__PURE__ */ jsx("span", { children: onSelect ? `Insert ${assetTypes.join(" or ")}` : "Browse Assets" }) }),
+      selectedDocument && /* @__PURE__ */ jsx(Box, { display: ["none", "none", "block"], children: /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsx("span", { style: { margin: "0 0.5em" }, children: /* @__PURE__ */ jsx(Icon, { symbol: "arrow-right" }) }),
+        /* @__PURE__ */ jsx("span", { style: { textTransform: "capitalize" }, children: selectedDocument._type })
       ] }) })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { marginX: 2, children: [
-      directUploads && /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Button,
+    /* @__PURE__ */ jsxs(Flex, { marginX: 2, children: [
+      directUploads && /* @__PURE__ */ jsx(
+        Button,
         {
           fontSize: 1,
-          icon: icons.UploadIcon,
+          icon: UploadIcon,
           mode: "bleed",
           onClick: open,
-          text: `Upload ${assetTypes.length === 1 ? pluralize__default.default(assetTypes[0]) : "assets"}`
+          text: `Upload ${assetTypes.length === 1 ? pluralize(assetTypes[0]) : "assets"}`
         }
       ),
-      onClose && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Button,
+      onClose && /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
+        Button,
         {
           disabled: !onClose,
-          icon: icons.CloseIcon,
+          icon: CloseIcon,
           mode: "bleed",
           onClick: onClose,
           radius: 2
@@ -3971,10 +3977,10 @@ const DialogAssetEdit = (props) => {
     ] })
   ] }) });
 }, useBreakpointIndex = () => {
-  const mediaQueryLists = ui.studioTheme?.container?.map(
+  const mediaQueryLists = studioTheme?.container?.map(
     (width) => window.matchMedia(`(max-width: ${width}px)`)
-  ), getBreakpointIndex = () => mediaQueryLists.findIndex((mql) => mql.matches), [value, setValue] = react.useState(getBreakpointIndex());
-  return react.useEffect(() => {
+  ), getBreakpointIndex = () => mediaQueryLists.findIndex((mql) => mql.matches), [value, setValue] = useState(getBreakpointIndex());
+  return useEffect(() => {
     const handleBreakpoint = () => {
       setValue(getBreakpointIndex);
     };
@@ -3998,7 +4004,7 @@ const DialogAssetEdit = (props) => {
       }
     };
   }, []), value;
-}, selectCombinedItems = toolkit.createSelector(
+}, selectCombinedItems = createSelector(
   [
     (state) => state.assets.allIds,
     (state) => state.uploads.allIds
@@ -4007,17 +4013,17 @@ const DialogAssetEdit = (props) => {
     const assetItems = assetIds.map((id) => ({ id, type: "asset" }));
     return [...uploadIds.map((id) => ({ id, type: "upload" })), ...assetItems];
   }
-), CardWrapper$1 = styledComponents.styled(ui.Flex)`
+), CardWrapper$1 = styled(Flex)`
   box-sizing: border-box;
   height: 100%;
   overflow: hidden;
   position: relative;
   width: 100%;
-`, CardContainer = styledComponents.styled(ui.Flex)(({
+`, CardContainer = styled(Flex)(({
   $picked,
   theme,
   $updating
-}) => styledComponents.css`
+}) => css`
     border: 1px solid transparent;
     height: 100%;
     pointer-events: ${$updating ? "none" : "auto"};
@@ -4028,16 +4034,16 @@ const DialogAssetEdit = (props) => {
 
     border: ${$picked ? `1px solid ${theme.sanity.color.spot.orange} !important` : "1px solid inherit"};
 
-    ${!$updating && styledComponents.css`
+    ${!$updating && css`
       @media (hover: hover) and (pointer: fine) {
         &:hover {
           border: 1px solid var(--card-border-color);
         }
       }
     `}
-  `), ContextActionContainer$2 = styledComponents.styled(ui.Flex)(({
+  `), ContextActionContainer$2 = styled(Flex)(({
   $scheme
-}) => styledComponents.css`
+}) => css`
     cursor: pointer;
     height: ${PANEL_HEIGHT}px;
     transition: all 300ms;
@@ -4046,10 +4052,10 @@ const DialogAssetEdit = (props) => {
         background: ${getSchemeColor($scheme, "bg")};
       }
     }
-  `), StyledWarningOutlineIcon = styledComponents.styled(icons.WarningFilledIcon)(({ theme }) => ({
+  `), StyledWarningOutlineIcon = styled(WarningFilledIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
 })), CardAsset$1 = (props) => {
-  const { id, selected } = props, scheme = sanity.useColorSchemeValue(), shiftPressed = useKeyPress("shift"), dispatch = reactRedux.useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions();
+  const { id, selected } = props, scheme = useColorSchemeValue(), shiftPressed = useKeyPress("shift"), dispatch = useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions();
   if (!asset)
     return null;
   const handleAssetClick = (e) => {
@@ -4062,9 +4068,9 @@ const DialogAssetEdit = (props) => {
   }, handleContextActionClick = (e) => {
     e.stopPropagation(), onSelect ? dispatch(dialogActions.showAssetEdit({ assetId: asset._id })) : shiftPressed.current && !picked ? dispatch(assetsActions.pickRange({ startId: lastPicked || asset._id, endId: asset._id })) : dispatch(assetsActions.pick({ assetId: asset._id, picked: !picked }));
   }, opacityContainer = updating ? 0.5 : 1, opacityPreview = selected || updating ? 0.25 : 1;
-  return /* @__PURE__ */ jsxRuntime.jsx(CardWrapper$1, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(CardContainer, { direction: "column", $picked: picked, $updating: item.updating, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      ui.Box,
+  return /* @__PURE__ */ jsx(CardWrapper$1, { padding: 1, children: /* @__PURE__ */ jsxs(CardContainer, { direction: "column", $picked: picked, $updating: item.updating, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
       {
         flex: 1,
         style: {
@@ -4072,9 +4078,9 @@ const DialogAssetEdit = (props) => {
           position: "relative"
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { onClick: handleAssetClick, style: { height: "100%", opacity: opacityPreview }, children: [
-            isFileAsset(asset) && /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { extension: asset.extension, width: "80px" }),
-            isImageAsset(asset) && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxs("div", { onClick: handleAssetClick, style: { height: "100%", opacity: opacityPreview }, children: [
+            isFileAsset(asset) && /* @__PURE__ */ jsx(FileIcon, { extension: asset.extension, width: "80px" }),
+            isImageAsset(asset) && /* @__PURE__ */ jsx(
               Image$1,
               {
                 draggable: !1,
@@ -4088,8 +4094,8 @@ const DialogAssetEdit = (props) => {
               }
             )
           ] }),
-          selected && !updating && /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Flex,
+          selected && !updating && /* @__PURE__ */ jsx(
+            Flex,
             {
               align: "center",
               justify: "center",
@@ -4101,11 +4107,11 @@ const DialogAssetEdit = (props) => {
                 top: 0,
                 width: "100%"
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CheckmarkCircleIcon, {}) })
+              children: /* @__PURE__ */ jsx(Text, { size: 2, children: /* @__PURE__ */ jsx(CheckmarkCircleIcon, {}) })
             }
           ),
-          updating && /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Flex,
+          updating && /* @__PURE__ */ jsx(
+            Flex,
             {
               align: "center",
               justify: "center",
@@ -4116,13 +4122,13 @@ const DialogAssetEdit = (props) => {
                 top: 0,
                 width: "100%"
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {})
+              children: /* @__PURE__ */ jsx(Spinner, {})
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxs(
       ContextActionContainer$2,
       {
         align: "center",
@@ -4131,16 +4137,16 @@ const DialogAssetEdit = (props) => {
         $scheme: scheme,
         style: { opacity: opacityContainer },
         children: [
-          onSelect ? /* @__PURE__ */ jsxRuntime.jsx(
-            icons.EditIcon,
+          onSelect ? /* @__PURE__ */ jsx(
+            EditIcon,
             {
               style: {
                 flexShrink: 0,
                 opacity: 0.5
               }
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Checkbox,
+          ) : /* @__PURE__ */ jsx(
+            Checkbox,
             {
               checked: picked,
               readOnly: !0,
@@ -4151,12 +4157,12 @@ const DialogAssetEdit = (props) => {
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 0, textOverflow: "ellipsis", children: asset.originalFilename }) })
+          /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 0, textOverflow: "ellipsis", children: asset.originalFilename }) })
         ]
       }
     ),
-    error && /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Box,
+    error && /* @__PURE__ */ jsx(
+      Box,
       {
         padding: 3,
         style: {
@@ -4164,21 +4170,21 @@ const DialogAssetEdit = (props) => {
           right: 0,
           top: 0
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Tooltip,
+        children: /* @__PURE__ */ jsx(
+          Tooltip,
           {
             animate: !0,
-            content: /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { padding: 2, width: 0, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: error }) }),
+            content: /* @__PURE__ */ jsx(Container$2, { padding: 2, width: 0, children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) }),
             placement: "left",
             portal: !0,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(StyledWarningOutlineIcon, { color: "critical" }) })
+            children: /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsx(StyledWarningOutlineIcon, { color: "critical" }) })
           }
         )
       }
     )
   ] }) });
 };
-var CardAsset = react.memo(CardAsset$1);
+var CardAsset = memo(CardAsset$1);
 const PREVIEW_WIDTH = 180, createBlob = (img) => new Promise((resolve) => {
   const imageAspect = img.width / img.height, canvas = document.createElement("canvas");
   canvas.width = PREVIEW_WIDTH, canvas.height = Math.max(PREVIEW_WIDTH / imageAspect, 1);
@@ -4197,17 +4203,17 @@ const PREVIEW_WIDTH = 180, createBlob = (img) => new Promise((resolve) => {
   if (!blob)
     throw Error("Unable to generate file Blob");
   return window.URL.createObjectURL(blob);
-}, generatePreviewBlobUrl$ = (file) => rxjs.of(null).pipe(operators$1.mergeMap(() => rxjs.from(generatePreviewBlobUrl(file)))), DEFAULT_CONCURRENCY = 4;
+}, generatePreviewBlobUrl$ = (file) => of(null).pipe(mergeMap(() => from(generatePreviewBlobUrl(file)))), DEFAULT_CONCURRENCY = 4;
 function remove(array, item) {
   const index = array.indexOf(item);
   return index > -1 && array.splice(index, 1), array;
 }
 const createThrottler = (concurrency = DEFAULT_CONCURRENCY) => {
-  const currentSubscriptions = [], pendingObservables = [], ready$ = new rxjs.Subject();
+  const currentSubscriptions = [], pendingObservables = [], ready$ = new Subject();
   function request(observable) {
-    return new rxjs.Observable((observer) => {
+    return new Observable((observer) => {
       if (currentSubscriptions.length >= concurrency)
-        return scheduleAndWait$(observable).pipe(operators$1.mergeMap(request)).subscribe(observer);
+        return scheduleAndWait$(observable).pipe(mergeMap(request)).subscribe(observer);
       const subscription = observable.subscribe(observer);
       return currentSubscriptions.push(subscription), () => {
         for (remove(currentSubscriptions, subscription), remove(pendingObservables, observable), subscription.unsubscribe(); pendingObservables.length > 0 && currentSubscriptions.length < concurrency; )
@@ -4216,16 +4222,16 @@ const createThrottler = (concurrency = DEFAULT_CONCURRENCY) => {
     });
   }
   function scheduleAndWait$(observable) {
-    return pendingObservables.push(observable), ready$.asObservable().pipe(operators$1.first((obs) => obs === observable));
+    return pendingObservables.push(observable), ready$.asObservable().pipe(first((obs) => obs === observable));
   }
   return request;
 }, withMaxConcurrency = (func, concurrency = DEFAULT_CONCURRENCY) => {
   const throttler = createThrottler(concurrency);
-  return (...args) => rxjs.from(throttler(func(...args)));
+  return (...args) => from(throttler(func(...args)));
 }, fetchExisting$ = (client, type, hash) => client.observable.fetch("*[_type == $documentType && sha1hash == $hash][0]", {
   documentType: type,
   hash
-}), readFile$ = (file) => new rxjs.Observable((subscriber) => {
+}), readFile$ = (file) => new Observable((subscriber) => {
   const reader = new FileReader();
   return reader.onload = () => {
     subscriber.next(reader.result), subscriber.complete();
@@ -4234,25 +4240,25 @@ const createThrottler = (concurrency = DEFAULT_CONCURRENCY) => {
   }, reader.readAsArrayBuffer(file), () => {
     reader.abort();
   };
-}), hexFromBuffer = (buffer) => Array.prototype.map.call(new Uint8Array(buffer), (x) => `00${x.toString(16)}`.slice(-2)).join(""), hashFile$ = (file) => !window.crypto || !window.crypto.subtle || !window.FileReader ? rxjs.throwError({
+}), hexFromBuffer = (buffer) => Array.prototype.map.call(new Uint8Array(buffer), (x) => `00${x.toString(16)}`.slice(-2)).join(""), hashFile$ = (file) => !window.crypto || !window.crypto.subtle || !window.FileReader ? throwError({
   message: "Unable to generate hash: uploads are only allowed in secure contexts",
   statusCode: 500
 }) : readFile$(file).pipe(
-  operators$1.mergeMap((arrayBuffer) => window.crypto.subtle.digest("SHA-1", arrayBuffer)),
-  operators$1.map(hexFromBuffer)
-), uploadSanityAsset$ = (client, assetType, file, hash) => rxjs.of(null).pipe(
+  mergeMap((arrayBuffer) => window.crypto.subtle.digest("SHA-1", arrayBuffer)),
+  map(hexFromBuffer)
+), uploadSanityAsset$ = (client, assetType, file, hash) => of(null).pipe(
   // NOTE: the sanity api will still dedupe unique files, but this saves us from uploading the asset file entirely
-  operators$1.mergeMap(() => fetchExisting$(client, `sanity.${assetType}Asset`, hash)),
+  mergeMap(() => fetchExisting$(client, `sanity.${assetType}Asset`, hash)),
   // Cancel if the asset already exists
-  operators$1.mergeMap((existingAsset) => existingAsset ? rxjs.throwError({
+  mergeMap((existingAsset) => existingAsset ? throwError({
     message: "Asset already exists",
     statusCode: 409
-  }) : rxjs.of(null)),
-  operators$1.mergeMap(() => client.observable.assets.upload(assetType, file, {
+  }) : of(null)),
+  mergeMap(() => client.observable.assets.upload(assetType, file, {
     extract: ["blurhash", "exif", "location", "lqip", "palette"],
     preserveFilename: !0
   }).pipe(
-    operators$1.map(
+    map(
       (event) => event.type === "response" ? {
         // rewrite to a 'complete' event
         asset: event.body.document,
@@ -4264,7 +4270,7 @@ const createThrottler = (concurrency = DEFAULT_CONCURRENCY) => {
 ), uploadAsset$ = withMaxConcurrency(uploadSanityAsset$), initialState$2 = {
   allIds: [],
   byIds: {}
-}, uploadsSlice = toolkit.createSlice({
+}, uploadsSlice = createSlice({
   name: "uploads",
   initialState: initialState$2,
   extraReducers: (builder) => {
@@ -4310,14 +4316,14 @@ const createThrottler = (concurrency = DEFAULT_CONCURRENCY) => {
     }
   }
 }), uploadsAssetStartEpic = (action$, _state$, { client }) => action$.pipe(
-  operators$1.filter(uploadsActions.uploadStart.match),
-  operators$1.mergeMap((action) => {
+  filter(uploadsActions.uploadStart.match),
+  mergeMap((action) => {
     const { file, uploadItem } = action.payload;
-    return rxjs.merge(
+    return merge(
       // Generate low res preview
-      rxjs.of(null).pipe(
-        operators$1.mergeMap(() => generatePreviewBlobUrl$(file)),
-        operators$1.mergeMap((url) => rxjs.of(
+      of(null).pipe(
+        mergeMap(() => generatePreviewBlobUrl$(file)),
+        mergeMap((url) => of(
           uploadsActions.previewReady({
             blobUrl: url,
             hash: uploadItem.hash
@@ -4325,27 +4331,27 @@ const createThrottler = (concurrency = DEFAULT_CONCURRENCY) => {
         ))
       ),
       // Upload asset and receive progress / complete events
-      rxjs.of(null).pipe(
+      of(null).pipe(
         // delay(500000), // debug uploads
-        operators$1.mergeMap(() => uploadAsset$(client, uploadItem.assetType, file, uploadItem.hash)),
-        operators$1.takeUntil(
+        mergeMap(() => uploadAsset$(client, uploadItem.assetType, file, uploadItem.hash)),
+        takeUntil(
           action$.pipe(
-            operators$1.filter(uploadsActions.uploadCancel.match),
-            operators$1.filter((v) => v.payload.hash === uploadItem.hash)
+            filter(uploadsActions.uploadCancel.match),
+            filter((v) => v.payload.hash === uploadItem.hash)
           )
         ),
-        operators$1.mergeMap((event) => event?.type === "complete" ? rxjs.of(
+        mergeMap((event) => event?.type === "complete" ? of(
           UPLOADS_ACTIONS.uploadComplete({
             asset: event.asset
           })
-        ) : event?.type === "progress" && event?.stage === "upload" ? rxjs.of(
+        ) : event?.type === "progress" && event?.stage === "upload" ? of(
           uploadsActions.uploadProgress({
             event,
             uploadHash: uploadItem.hash
           })
-        ) : rxjs.empty()),
-        operators$1.catchError(
-          (error) => rxjs.of(
+        ) : empty()),
+        catchError(
+          (error) => of(
             uploadsActions.uploadError({
               error: {
                 message: error?.message || "Internal error",
@@ -4359,18 +4365,18 @@ const createThrottler = (concurrency = DEFAULT_CONCURRENCY) => {
     );
   })
 ), uploadsAssetUploadEpic = (action$, state$) => action$.pipe(
-  operators$1.filter(uploadsActions.uploadRequest.match),
-  operators$1.withLatestFrom(state$),
-  operators$1.mergeMap(([action, state]) => {
+  filter(uploadsActions.uploadRequest.match),
+  withLatestFrom(state$),
+  mergeMap(([action, state]) => {
     const { file, forceAsAssetType } = action.payload;
-    return rxjs.of(action).pipe(
+    return of(action).pipe(
       // Generate SHA1 hash from local file
       // This will throw in insecure contexts (non-localhost / https)
-      operators$1.mergeMap(() => hashFile$(file)),
+      mergeMap(() => hashFile$(file)),
       // Ignore if the file exists and is currently being uploaded
-      operators$1.filter((hash) => !state.uploads.byIds[hash]),
+      filter((hash) => !state.uploads.byIds[hash]),
       // Dispatch start action and begin upload process
-      operators$1.mergeMap((hash) => {
+      mergeMap((hash) => {
         const uploadItem = {
           _type: "upload",
           assetType: forceAsAssetType || (file.type.indexOf("image") >= 0 ? "image" : "file"),
@@ -4379,35 +4385,35 @@ const createThrottler = (concurrency = DEFAULT_CONCURRENCY) => {
           size: file.size,
           status: "queued"
         };
-        return rxjs.of(uploadsActions.uploadStart({ file, uploadItem }));
+        return of(uploadsActions.uploadStart({ file, uploadItem }));
       })
     );
   })
 ), uploadsCompleteQueueEpic = (action$) => action$.pipe(
-  operators$1.filter(UPLOADS_ACTIONS.uploadComplete.match),
-  operators$1.mergeMap((action) => rxjs.of(
+  filter(UPLOADS_ACTIONS.uploadComplete.match),
+  mergeMap((action) => of(
     uploadsActions.checkRequest({
       assets: [action.payload.asset]
     })
   ))
 ), uploadsCheckRequestEpic = (action$, state$, { client }) => action$.pipe(
-  operators$1.filter(uploadsActions.checkRequest.match),
-  operators$1.withLatestFrom(state$),
-  operators$1.mergeMap(([action, state]) => {
+  filter(uploadsActions.checkRequest.match),
+  withLatestFrom(state$),
+  mergeMap(([action, state]) => {
     const { assets } = action.payload, documentIds = assets.map((asset) => asset._id), constructedFilter = constructFilter({
       assetTypes: state.assets.assetTypes,
       searchFacets: state.search.facets,
       searchQuery: state.search.query
-    }), query = groq__default.default`
+    }), query = groq`
         *[${constructedFilter} && _id in $documentIds].sha1hash
       `;
-    return rxjs.of(action).pipe(
-      operators$1.delay(1e3),
+    return of(action).pipe(
+      delay(1e3),
       // give Sanity some time to register the recently uploaded asset
-      operators$1.mergeMap(() => client.observable.fetch(query, { documentIds })),
-      operators$1.mergeMap((resultHashes) => {
+      mergeMap(() => client.observable.fetch(query, { documentIds })),
+      mergeMap((resultHashes) => {
         const checkedResults = assets.reduce((acc, asset) => (acc[asset.sha1hash] = resultHashes.includes(asset.sha1hash) ? asset._id : null, acc), {});
-        return rxjs.of(
+        return of(
           uploadsActions.checkComplete({ results: checkedResults }),
           //
           assetsActions.insertUploads({ results: checkedResults })
@@ -4415,37 +4421,37 @@ const createThrottler = (concurrency = DEFAULT_CONCURRENCY) => {
       })
     );
   })
-), selectUploadsByIds = (state) => state.uploads.byIds, selectUploadsAllIds = (state) => state.uploads.allIds, selectUploadById = toolkit.createSelector(
+), selectUploadsByIds = (state) => state.uploads.byIds, selectUploadsAllIds = (state) => state.uploads.allIds, selectUploadById = createSelector(
   [
     (state) => state.uploads.byIds,
     (_state, uploadId) => uploadId
   ],
   (byIds, uploadId) => byIds[uploadId]
 );
-toolkit.createSelector(
+createSelector(
   [selectUploadsByIds, selectUploadsAllIds],
   (byIds, allIds) => allIds.map((id) => byIds[id])
 );
 const uploadsActions = { ...uploadsSlice.actions };
 var uploadsReducer = uploadsSlice.reducer;
-const CardWrapper = styledComponents.styled(ui.Flex)`
+const CardWrapper = styled(Flex)`
   box-sizing: border-box;
   height: 100%;
   overflow: hidden;
   position: relative;
   width: 100%;
 `, CardUpload = (props) => {
-  const { id } = props, scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id));
+  const { id } = props, scheme = useColorSchemeValue(), dispatch = useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id));
   if (!item)
     return null;
-  const fileSize = filesize__default.default(item.size, { base: 10, round: 0 }), percentLoaded = Math.round(item.percent || 0), isComplete = item.status === "complete", isUploading = item.status === "uploading", isQueued = item.status === "queued";
+  const fileSize = filesize(item.size, { base: 10, round: 0 }), percentLoaded = Math.round(item.percent || 0), isComplete = item.status === "complete", isUploading = item.status === "uploading", isQueued = item.status === "queued";
   let status;
   isComplete && (status = "Verifying"), isUploading && (status = `${percentLoaded}%`), isQueued && (status = "Queued");
   const handleCancelUpload = () => {
     dispatch(uploadsActions.uploadCancel({ hash: item.hash }));
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(CardWrapper, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Flex,
+  return /* @__PURE__ */ jsx(CardWrapper, { padding: 1, children: /* @__PURE__ */ jsxs(
+    Flex,
     {
       direction: "column",
       flex: 1,
@@ -4456,7 +4462,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -4472,8 +4478,8 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
             }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { flex: 1, style: { position: "relative" }, children: [
-          item.assetType === "image" && item?.objectUrl && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxs(Box, { flex: 1, style: { position: "relative" }, children: [
+          item.assetType === "image" && item?.objectUrl && /* @__PURE__ */ jsx(
             Image$1,
             {
               draggable: !1,
@@ -4484,9 +4490,9 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
               }
             }
           ),
-          item.assetType === "file" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "100%", opacity: 0.1 }, children: /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { width: "80px" }) }),
-          !isComplete && percentLoaded !== 100 && /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Flex,
+          item.assetType === "file" && /* @__PURE__ */ jsx("div", { style: { height: "100%", opacity: 0.1 }, children: /* @__PURE__ */ jsx(FileIcon, { width: "80px" }) }),
+          !isComplete && percentLoaded !== 100 && /* @__PURE__ */ jsx(
+            Flex,
             {
               align: "center",
               direction: "column",
@@ -4498,11 +4504,11 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
                 top: 0,
                 width: "100%"
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Button,
+              children: /* @__PURE__ */ jsx(
+                Button,
                 {
                   fontSize: 4,
-                  icon: icons.CloseIcon,
+                  icon: CloseIcon,
                   mode: "bleed",
                   onClick: handleCancelUpload,
                   padding: 2,
@@ -4513,48 +4519,48 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          ui.Flex,
+        /* @__PURE__ */ jsxs(
+          Flex,
           {
             align: "center",
             justify: "space-between",
             paddingX: 2,
             style: { height: `${PANEL_HEIGHT}px` },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 0, textOverflow: "ellipsis", children: [
+              /* @__PURE__ */ jsx(Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxs(Text, { size: 0, textOverflow: "ellipsis", children: [
                 item.name,
                 " (",
                 fileSize,
                 ")"
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 0, style: { flexShrink: 0 }, weight: "semibold", children: status })
+              /* @__PURE__ */ jsx(Text, { size: 0, style: { flexShrink: 0 }, weight: "semibold", children: status })
             ]
           }
         )
       ]
     }
   ) });
-}, CARD_HEIGHT = 220, CARD_WIDTH = 240, VirtualCell = react.memo(
-  ({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsxRuntime.jsx(CardAsset, { id: item.id, selected }) : item?.type === "upload" ? /* @__PURE__ */ jsxRuntime.jsx(CardUpload, { id: item.id }) : null
-), StyledItemContainer = styledComponents.styled.div`
+}, CARD_HEIGHT = 220, CARD_WIDTH = 240, VirtualCell = memo(
+  ({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsx(CardAsset, { id: item.id, selected }) : item?.type === "upload" ? /* @__PURE__ */ jsx(CardUpload, { id: item.id }) : null
+), StyledItemContainer = styled.div`
   height: ${CARD_HEIGHT}px;
   width: ${CARD_WIDTH}px;
-`, ItemContainer = react.forwardRef((props, ref) => {
+`, ItemContainer = forwardRef((props, ref) => {
   const { context, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledItemContainer, { ref, ...rest });
-}), StyledListContainer = styledComponents.styled.div`
+  return /* @__PURE__ */ jsx(StyledItemContainer, { ref, ...rest });
+}), StyledListContainer = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, ${CARD_WIDTH}px);
   grid-template-rows: repeat(auto-fill, ${CARD_HEIGHT}px);
   justify-content: center;
   margin: 0 auto;
-`, ListContainer = react.forwardRef((props, ref) => {
+`, ListContainer = forwardRef((props, ref) => {
   const { context, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledListContainer, { ref, ...rest });
+  return /* @__PURE__ */ jsx(StyledListContainer, { ref, ...rest });
 }), AssetGridVirtualized = (props) => {
   const { items, onLoadMore } = props, selectedAssets = useTypedSelector((state) => state.selected.assets), selectedIds = selectedAssets && selectedAssets.map((asset) => asset._id) || [], totalCount = items?.length;
-  return totalCount === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(
-    reactVirtuoso.VirtuosoGrid,
+  return totalCount === 0 ? null : /* @__PURE__ */ jsx(
+    VirtuosoGrid,
     {
       className: "media__custom-scrollbar",
       computeItemKey: (index) => items[index]?.id,
@@ -4565,7 +4571,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
       endReached: onLoadMore,
       itemContent: (index) => {
         const item = items[index], selected = selectedIds.includes(item?.id);
-        return /* @__PURE__ */ jsxRuntime.jsx(VirtualCell, { item, selected });
+        return /* @__PURE__ */ jsx(VirtualCell, { item, selected });
       },
       overscan: 48,
       style: { overflowX: "hidden", overflowY: "scroll" },
@@ -4573,9 +4579,9 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
     }
   );
 }, TableHeaderItem = (props) => {
-  const { field, title } = props, dispatch = reactRedux.useDispatch(), order = useTypedSelector((state) => state.assets.order), isActive = order.field === field;
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { muted: !field, size: 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Box,
+  const { field, title } = props, dispatch = useDispatch(), order = useTypedSelector((state) => state.assets.order), isActive = order.field === field;
+  return /* @__PURE__ */ jsx(Label, { muted: !field, size: 0, children: /* @__PURE__ */ jsxs(
+    Box,
     {
       onClick: field ? () => {
         if (!(!field || !title))
@@ -4591,7 +4597,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
         whiteSpace: "nowrap"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsx(
           "span",
           {
             style: {
@@ -4600,14 +4606,14 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
             children: title
           }
         ),
-        isActive && order?.direction === "asc" && /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronUpIcon, {}),
-        isActive && order?.direction === "desc" && /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {})
+        isActive && order?.direction === "asc" && /* @__PURE__ */ jsx(ChevronUpIcon, {}),
+        isActive && order?.direction === "desc" && /* @__PURE__ */ jsx(ChevronDownIcon, {})
       ]
     }
   ) });
-}, ContextActionContainer$1 = styledComponents.styled(ui.Flex)(({
+}, ContextActionContainer$1 = styled(Flex)(({
   $scheme
-}) => styledComponents.css`
+}) => css`
     cursor: pointer;
     @media (hover: hover) and (pointer: fine) {
       &:hover {
@@ -4615,11 +4621,11 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
       }
     }
   `), TableHeader = () => {
-  const scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), fetching = useTypedSelector((state) => state.assets.fetching), itemsLength = useTypedSelector(selectAssetsLength), numPickedAssets = useTypedSelector(selectAssetsPickedLength), mediaIndex = ui.useMediaIndex(), { onSelect } = useAssetSourceActions(), allSelected = numPickedAssets === itemsLength, handleContextActionClick = (e) => {
+  const scheme = useColorSchemeValue(), dispatch = useDispatch(), fetching = useTypedSelector((state) => state.assets.fetching), itemsLength = useTypedSelector(selectAssetsLength), numPickedAssets = useTypedSelector(selectAssetsPickedLength), mediaIndex = useMediaIndex(), { onSelect } = useAssetSourceActions(), allSelected = numPickedAssets === itemsLength, handleContextActionClick = (e) => {
     e.stopPropagation(), dispatch(allSelected ? assetsActions.pickClear() : assetsActions.pickAll());
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Grid,
+  return /* @__PURE__ */ jsxs(
+    Grid,
     {
       style: {
         alignItems: "center",
@@ -4638,7 +4644,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
         // force stacking context
       },
       children: [
-        onSelect ? /* @__PURE__ */ jsxRuntime.jsx(TableHeaderItem, {}) : /* @__PURE__ */ jsxRuntime.jsx(
+        onSelect ? /* @__PURE__ */ jsx(TableHeaderItem, {}) : /* @__PURE__ */ jsx(
           ContextActionContainer$1,
           {
             align: "center",
@@ -4649,8 +4655,8 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
               height: "100%",
               position: "relative"
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Checkbox,
+            children: /* @__PURE__ */ jsx(
+              Checkbox,
               {
                 checked: !fetching && allSelected,
                 readOnly: !0,
@@ -4663,18 +4669,18 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(TableHeaderItem, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(TableHeaderItem, { field: "originalFilename", title: "Filename" }),
-        /* @__PURE__ */ jsxRuntime.jsx(TableHeaderItem, { title: "Resolution" }),
-        /* @__PURE__ */ jsxRuntime.jsx(TableHeaderItem, { field: "mimeType", title: "MIME type" }),
-        /* @__PURE__ */ jsxRuntime.jsx(TableHeaderItem, { field: "size", title: "Size" }),
-        /* @__PURE__ */ jsxRuntime.jsx(TableHeaderItem, { field: "_updatedAt", title: "Last updated" }),
-        /* @__PURE__ */ jsxRuntime.jsx(TableHeaderItem, { title: "References" }),
-        /* @__PURE__ */ jsxRuntime.jsx(TableHeaderItem, {})
+        /* @__PURE__ */ jsx(TableHeaderItem, {}),
+        /* @__PURE__ */ jsx(TableHeaderItem, { field: "originalFilename", title: "Filename" }),
+        /* @__PURE__ */ jsx(TableHeaderItem, { title: "Resolution" }),
+        /* @__PURE__ */ jsx(TableHeaderItem, { field: "mimeType", title: "MIME type" }),
+        /* @__PURE__ */ jsx(TableHeaderItem, { field: "size", title: "Size" }),
+        /* @__PURE__ */ jsx(TableHeaderItem, { field: "_updatedAt", title: "Last updated" }),
+        /* @__PURE__ */ jsx(TableHeaderItem, { title: "References" }),
+        /* @__PURE__ */ jsx(TableHeaderItem, {})
       ]
     }
   );
-}, REFERENCE_COUNT_VISIBILITY_DELAY = 750, ContainerGrid = styledComponents.styled(ui.Grid)(({ $scheme, $selected, $updating }) => styledComponents.css`
+}, REFERENCE_COUNT_VISIBILITY_DELAY = 750, ContainerGrid = styled(Grid)(({ $scheme, $selected, $updating }) => css`
     align-items: center;
     cursor: ${$selected ? "default" : "pointer"};
     height: 100%;
@@ -4682,42 +4688,42 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
     user-select: none;
     white-space: nowrap;
 
-    ${!$updating && styledComponents.css`
+    ${!$updating && css`
       @media (hover: hover) and (pointer: fine) {
         &:hover {
           background: ${getSchemeColor($scheme, "bg")};
         }
       }
     `}
-  `), ContextActionContainer = styledComponents.styled(ui.Flex)(({
+  `), ContextActionContainer = styled(Flex)(({
   $scheme
-}) => styledComponents.css`
+}) => css`
     cursor: pointer;
     @media (hover: hover) and (pointer: fine) {
       &:hover {
         background: ${getSchemeColor($scheme, "bg2")};
       }
     }
-  `), StyledWarningIcon = styledComponents.styled(icons.WarningFilledIcon)(({ theme }) => ({
+  `), StyledWarningIcon = styled(WarningFilledIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
 })), TableRowAsset$1 = (props) => {
-  const { id, selected } = props, scheme = sanity.useColorSchemeValue(), shiftPressed = useKeyPress("shift"), [referenceCountVisible, setReferenceCountVisible] = react.useState(!1), refCountVisibleTimeout = react.useRef(null), dispatch = reactRedux.useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), mediaIndex = ui.useMediaIndex(), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions(), handleContextActionClick = react.useCallback(
+  const { id, selected } = props, scheme = useColorSchemeValue(), shiftPressed = useKeyPress("shift"), [referenceCountVisible, setReferenceCountVisible] = useState(!1), refCountVisibleTimeout = useRef(null), dispatch = useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), mediaIndex = useMediaIndex(), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions(), handleContextActionClick = useCallback(
     (e) => {
       e.stopPropagation(), asset && (onSelect ? dispatch(dialogActions.showAssetEdit({ assetId: asset._id })) : shiftPressed.current && !picked ? dispatch(assetsActions.pickRange({ startId: lastPicked || asset._id, endId: asset._id })) : dispatch(assetsActions.pick({ assetId: asset._id, picked: !picked })));
     },
     [asset, dispatch, lastPicked, onSelect, picked, shiftPressed]
-  ), handleClick = react.useCallback(
+  ), handleClick = useCallback(
     (e) => {
       e.stopPropagation(), asset && (onSelect ? onSelect([{ kind: "assetDocumentId", value: asset._id }]) : shiftPressed.current ? dispatch(picked ? assetsActions.pick({ assetId: asset._id, picked: !picked }) : assetsActions.pickRange({ startId: lastPicked || asset._id, endId: asset._id })) : dispatch(dialogActions.showAssetEdit({ assetId: asset._id })));
     },
     [asset, dispatch, lastPicked, onSelect, picked, shiftPressed]
   ), opacityCell = updating ? 0.5 : 1, opacityPreview = selected || updating ? 0.1 : 1;
-  return react.useEffect(() => (refCountVisibleTimeout.current = setTimeout(
+  return useEffect(() => (refCountVisibleTimeout.current = setTimeout(
     () => setReferenceCountVisible(!0),
     REFERENCE_COUNT_VISIBILITY_DELAY
   ), () => {
     refCountVisibleTimeout.current && clearTimeout(refCountVisibleTimeout.current);
-  }), []), asset ? /* @__PURE__ */ jsxRuntime.jsxs(
+  }), []), asset ? /* @__PURE__ */ jsxs(
     ContainerGrid,
     {
       onClick: selected ? void 0 : handleClick,
@@ -4731,7 +4737,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
       },
       $updating: item.updating,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsx(
           ContextActionContainer,
           {
             onClick: handleContextActionClick,
@@ -4746,16 +4752,16 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
               opacity: opacityCell,
               position: "relative"
             },
-            children: onSelect ? /* @__PURE__ */ jsxRuntime.jsx(
-              icons.EditIcon,
+            children: onSelect ? /* @__PURE__ */ jsx(
+              EditIcon,
               {
                 style: {
                   flexShrink: 0,
                   opacity: 0.5
                 }
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Checkbox,
+            ) : /* @__PURE__ */ jsx(
+              Checkbox,
               {
                 checked: picked,
                 readOnly: !0,
@@ -4768,8 +4774,8 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Box,
+        /* @__PURE__ */ jsx(
+          Box,
           {
             style: {
               gridColumn: 2,
@@ -4778,10 +4784,10 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
               height: "90px",
               width: "100px"
             },
-            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", justify: "center", style: { height: "100%", position: "relative" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { style: { height: "100%", opacity: opacityPreview, position: "relative" }, children: [
-                isFileAsset(asset) && /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { extension: asset.extension, width: "40px" }),
-                isImageAsset(asset) && /* @__PURE__ */ jsxRuntime.jsx(
+            children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "center", style: { height: "100%", position: "relative" }, children: [
+              /* @__PURE__ */ jsxs(Box, { style: { height: "100%", opacity: opacityPreview, position: "relative" }, children: [
+                isFileAsset(asset) && /* @__PURE__ */ jsx(FileIcon, { extension: asset.extension, width: "40px" }),
+                isImageAsset(asset) && /* @__PURE__ */ jsx(
                   Image$1,
                   {
                     draggable: !1,
@@ -4791,8 +4797,8 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
                   }
                 )
               ] }),
-              updating && /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Flex,
+              updating && /* @__PURE__ */ jsx(
+                Flex,
                 {
                   align: "center",
                   justify: "center",
@@ -4803,11 +4809,11 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
                     top: 0,
                     width: "100%"
                   },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {})
+                  children: /* @__PURE__ */ jsx(Spinner, {})
                 }
               ),
-              selected && !updating && /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Flex,
+              selected && !updating && /* @__PURE__ */ jsx(
+                Flex,
                 {
                   align: "center",
                   justify: "center",
@@ -4818,14 +4824,14 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
                     top: 0,
                     width: "100%"
                   },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CheckmarkCircleIcon, {}) })
+                  children: /* @__PURE__ */ jsx(Text, { size: 2, children: /* @__PURE__ */ jsx(CheckmarkCircleIcon, {}) })
                 }
               )
             ] })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Box,
+        /* @__PURE__ */ jsx(
+          Box,
           {
             marginLeft: mediaIndex < 3 ? 3 : 0,
             style: {
@@ -4833,11 +4839,11 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
               gridRow: mediaIndex < 3 ? 2 : "auto",
               opacity: opacityCell
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: asset.originalFilename })
+            children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: asset.originalFilename })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Box,
+        /* @__PURE__ */ jsx(
+          Box,
           {
             marginLeft: mediaIndex < 3 ? 3 : 0,
             style: {
@@ -4845,11 +4851,11 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
               gridRow: mediaIndex < 3 ? 3 : "auto",
               opacity: opacityCell
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: isImageAsset(asset) && getAssetResolution(asset) })
+            children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: isImageAsset(asset) && getAssetResolution(asset) })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Box,
+        /* @__PURE__ */ jsx(
+          Box,
           {
             style: {
               display: mediaIndex < 3 ? "none" : "block",
@@ -4857,11 +4863,11 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
               gridRow: "auto",
               opacity: opacityCell
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: asset.mimeType })
+            children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: asset.mimeType })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Box,
+        /* @__PURE__ */ jsx(
+          Box,
           {
             style: {
               display: mediaIndex < 3 ? "none" : "block",
@@ -4869,11 +4875,11 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
               gridRow: "auto",
               opacity: opacityCell
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: filesize__default.default(asset.size, { base: 10, round: 0 }) })
+            children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: filesize(asset.size, { base: 10, round: 0 }) })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Box,
+        /* @__PURE__ */ jsx(
+          Box,
           {
             marginLeft: mediaIndex < 3 ? 3 : 0,
             style: {
@@ -4881,11 +4887,11 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
               gridRow: mediaIndex < 3 ? 4 : "auto",
               opacity: opacityCell
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: dateFns.formatRelative(new Date(asset._updatedAt), /* @__PURE__ */ new Date()) })
+            children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: formatRelative(new Date(asset._updatedAt), /* @__PURE__ */ new Date()) })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Box,
+        /* @__PURE__ */ jsx(
+          Box,
           {
             style: {
               display: mediaIndex < 3 ? "none" : "block",
@@ -4893,14 +4899,14 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
               gridRow: "auto",
               opacity: opacityCell
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: referenceCountVisible ? /* @__PURE__ */ jsxRuntime.jsx(sanity.WithReferringDocuments, { id, children: ({ isLoading, referringDocuments }) => {
+            children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: referenceCountVisible ? /* @__PURE__ */ jsx(WithReferringDocuments, { id, children: ({ isLoading, referringDocuments }) => {
               const uniqueDocuments = getUniqueDocuments(referringDocuments);
-              return isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "-" }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.isArray(uniqueDocuments) ? uniqueDocuments.length : 0 });
-            } }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "-" }) })
+              return isLoading ? /* @__PURE__ */ jsx(Fragment, { children: "-" }) : /* @__PURE__ */ jsx(Fragment, { children: Array.isArray(uniqueDocuments) ? uniqueDocuments.length : 0 });
+            } }) : /* @__PURE__ */ jsx(Fragment, { children: "-" }) })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Flex,
+        /* @__PURE__ */ jsx(
+          Flex,
           {
             align: "center",
             justify: "center",
@@ -4910,14 +4916,14 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
               gridRowEnd: mediaIndex < 3 ? "span 5" : "auto",
               opacity: opacityCell
             },
-            children: error && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Tooltip,
+            children: error && /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(
+              Tooltip,
               {
                 animate: !0,
-                content: /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { padding: 2, width: 0, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: error }) }),
+                content: /* @__PURE__ */ jsx(Container$2, { padding: 2, width: 0, children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) }),
                 placement: "left",
                 portal: !0,
-                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(StyledWarningIcon, { color: "critical" }) })
+                children: /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsx(StyledWarningIcon, { color: "critical" }) })
               }
             ) })
           }
@@ -4926,19 +4932,19 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
     }
   ) : null;
 };
-var TableRowAsset = react.memo(TableRowAsset$1);
+var TableRowAsset = memo(TableRowAsset$1);
 const TableRowUpload = (props) => {
-  const { id } = props, scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id)), mediaIndex = ui.useMediaIndex();
+  const { id } = props, scheme = useColorSchemeValue(), dispatch = useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id)), mediaIndex = useMediaIndex();
   if (!item)
     return null;
-  const fileSize = filesize__default.default(item.size, { base: 10, round: 0 }), percentLoaded = Math.round(item.percent || 0), isComplete = item.status === "complete", isUploading = item.status === "uploading", isQueued = item.status === "queued";
+  const fileSize = filesize(item.size, { base: 10, round: 0 }), percentLoaded = Math.round(item.percent || 0), isComplete = item.status === "complete", isUploading = item.status === "uploading", isQueued = item.status === "queued";
   let status;
   isComplete && (status = "Verifying"), isUploading && (status = `${percentLoaded}%`), isQueued && (status = "Queued");
   const handleCancelUpload = () => {
     dispatch(uploadsActions.uploadCancel({ hash: item.hash }));
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Grid,
+  return /* @__PURE__ */ jsxs(
+    Grid,
     {
       style: {
         alignItems: "center",
@@ -4951,7 +4957,7 @@ const TableRowUpload = (props) => {
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -4967,8 +4973,8 @@ const TableRowUpload = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Box,
+        /* @__PURE__ */ jsx(
+          Box,
           {
             style: {
               gridColumn: 2,
@@ -4977,8 +4983,8 @@ const TableRowUpload = (props) => {
               height: "90px",
               width: "100px"
             },
-            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { style: { height: "100%", position: "relative" }, children: [
-              item.assetType === "image" && item?.objectUrl && /* @__PURE__ */ jsxRuntime.jsx(
+            children: /* @__PURE__ */ jsxs(Box, { style: { height: "100%", position: "relative" }, children: [
+              item.assetType === "image" && item?.objectUrl && /* @__PURE__ */ jsx(
                 Image$1,
                 {
                   draggable: !1,
@@ -4987,9 +4993,9 @@ const TableRowUpload = (props) => {
                   style: { opacity: 0.25 }
                 }
               ),
-              item.assetType === "file" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "100%", opacity: 0.1 }, children: /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { width: "40px" }) }),
-              !isComplete && percentLoaded !== 100 && /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Flex,
+              item.assetType === "file" && /* @__PURE__ */ jsx("div", { style: { height: "100%", opacity: 0.1 }, children: /* @__PURE__ */ jsx(FileIcon, { width: "40px" }) }),
+              !isComplete && percentLoaded !== 100 && /* @__PURE__ */ jsx(
+                Flex,
                 {
                   align: "center",
                   justify: "center",
@@ -5000,11 +5006,11 @@ const TableRowUpload = (props) => {
                     top: 0,
                     width: "100%"
                   },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.Button,
+                  children: /* @__PURE__ */ jsx(
+                    Button,
                     {
                       fontSize: 3,
-                      icon: icons.CloseIcon,
+                      icon: CloseIcon,
                       mode: "bleed",
                       onClick: handleCancelUpload,
                       padding: 2,
@@ -5017,60 +5023,60 @@ const TableRowUpload = (props) => {
             ] })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Box,
+        /* @__PURE__ */ jsx(
+          Box,
           {
             style: {
               gridColumn: mediaIndex < 3 ? 3 : "3/8",
               gridRow: mediaIndex < 3 ? "2/4" : "auto",
               marginLeft: mediaIndex < 3 ? 3 : 0
             },
-            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { muted: !0, size: 1, textOverflow: "ellipsis", children: [
+            children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+              /* @__PURE__ */ jsxs(Text, { muted: !0, size: 1, textOverflow: "ellipsis", children: [
                 item.name,
                 " (",
                 fileSize,
                 ")"
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, textOverflow: "ellipsis", weight: "semibold", children: status })
+              /* @__PURE__ */ jsx(Text, { size: 1, textOverflow: "ellipsis", weight: "semibold", children: status })
             ] })
           }
         )
       ]
     }
   );
-}, VirtualRow = react.memo(
-  ({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsxRuntime.jsx(TableRowAsset, { id: item.id, selected }) }) : item?.type === "upload" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsxRuntime.jsx(TableRowUpload, { id: item.id }) }) : null
+}, VirtualRow = memo(
+  ({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsx(Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsx(TableRowAsset, { id: item.id, selected }) }) : item?.type === "upload" ? /* @__PURE__ */ jsx(Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsx(TableRowUpload, { id: item.id }) }) : null
 ), AssetTableVirtualized = (props) => {
   const { items, onLoadMore } = props, selectedAssets = useTypedSelector((state) => state.selected.assets), selectedIds = selectedAssets && selectedAssets.map((asset) => asset._id) || [], totalCount = items?.length;
-  return totalCount === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(
-    reactVirtuoso.GroupedVirtuoso,
+  return totalCount === 0 ? null : /* @__PURE__ */ jsx(
+    GroupedVirtuoso,
     {
       className: "media__custom-scrollbar",
       computeItemKey: (index) => items[index]?.id || index,
       endReached: onLoadMore,
       groupCounts: Array(1).fill(totalCount),
-      groupContent: () => /* @__PURE__ */ jsxRuntime.jsx(TableHeader, {}),
+      groupContent: () => /* @__PURE__ */ jsx(TableHeader, {}),
       itemContent: (index) => {
         const item = items[index], selected = selectedIds.includes(item?.id);
-        return /* @__PURE__ */ jsxRuntime.jsx(VirtualRow, { item, selected });
+        return /* @__PURE__ */ jsx(VirtualRow, { item, selected });
       },
       style: { overflowX: "hidden" }
     }
   );
 }, Items = () => {
-  const dispatch = reactRedux.useDispatch(), fetchCount = useTypedSelector((state) => state.assets.fetchCount), fetching = useTypedSelector((state) => state.assets.fetching), tagsPanelVisible = useTypedSelector((state) => state.tags.panelVisible), view = useTypedSelector((state) => state.assets.view), combinedItems = useTypedSelector(selectCombinedItems), breakpointIndex = useBreakpointIndex(), hasFetchedOnce = fetchCount >= 0, hasItems = combinedItems.length > 0, handleLoadMoreItems = () => {
+  const dispatch = useDispatch(), fetchCount = useTypedSelector((state) => state.assets.fetchCount), fetching = useTypedSelector((state) => state.assets.fetching), tagsPanelVisible = useTypedSelector((state) => state.tags.panelVisible), view = useTypedSelector((state) => state.assets.view), combinedItems = useTypedSelector(selectCombinedItems), breakpointIndex = useBreakpointIndex(), hasFetchedOnce = fetchCount >= 0, hasItems = combinedItems.length > 0, handleLoadMoreItems = () => {
     fetching || dispatch(assetsActions.loadNextPage());
   };
-  return react.useEffect(() => {
+  return useEffect(() => {
     breakpointIndex <= 1 && tagsPanelVisible && dispatch(tagsActions.panelVisibleSet({ panelVisible: !1 }));
-  }, [breakpointIndex]), /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, style: { width: "100%" }, children: !hasItems && hasFetchedOnce && !fetching ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "semibold", children: "No results for the current query" }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    view === "grid" && /* @__PURE__ */ jsxRuntime.jsx(AssetGridVirtualized, { items: combinedItems, onLoadMore: handleLoadMoreItems }),
-    view === "table" && /* @__PURE__ */ jsxRuntime.jsx(AssetTableVirtualized, { items: combinedItems, onLoadMore: handleLoadMoreItems })
+  }, [breakpointIndex]), /* @__PURE__ */ jsx(Box, { flex: 1, style: { width: "100%" }, children: !hasItems && hasFetchedOnce && !fetching ? /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "No results for the current query" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    view === "grid" && /* @__PURE__ */ jsx(AssetGridVirtualized, { items: combinedItems, onLoadMore: handleLoadMoreItems }),
+    view === "table" && /* @__PURE__ */ jsx(AssetTableVirtualized, { items: combinedItems, onLoadMore: handleLoadMoreItems })
   ] }) });
 }, Notifications = () => {
-  const items = useTypedSelector((state) => state.notifications.items), toast = ui.useToast();
-  return react.useEffect(() => {
+  const items = useTypedSelector((state) => state.notifications.items), toast = useToast();
+  return useEffect(() => {
     if (items.length > 0) {
       const lastItem = items[items.length - 1];
       toast.push({
@@ -5081,13 +5087,13 @@ const TableRowUpload = (props) => {
     }
   }, [items.length]), null;
 }, PickedBar = () => {
-  const scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), assetsPicked = useTypedSelector(selectAssetsPicked), handlePickClear = () => {
+  const scheme = useColorSchemeValue(), dispatch = useDispatch(), assetsPicked = useTypedSelector(selectAssetsPicked), handlePickClear = () => {
     dispatch(assetsActions.pickClear());
   }, handleDeletePicked = () => {
     dispatch(dialogActions.showConfirmDeleteAssets({ assets: assetsPicked }));
   };
-  return assetsPicked.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Flex,
+  return assetsPicked.length === 0 ? null : /* @__PURE__ */ jsx(
+    Flex,
     {
       align: "center",
       justify: "flex-start",
@@ -5098,33 +5104,33 @@ const TableRowUpload = (props) => {
         position: "relative",
         width: "100%"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", paddingX: 3, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingRight: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Label, { size: 0, style: { color: "inherit" }, children: [
+      children: /* @__PURE__ */ jsxs(Flex, { align: "center", paddingX: 3, children: [
+        /* @__PURE__ */ jsx(Box, { paddingRight: 2, children: /* @__PURE__ */ jsxs(Label, { size: 0, style: { color: "inherit" }, children: [
           assetsPicked.length,
           " ",
-          pluralize__default.default("asset", assetsPicked.length),
+          pluralize("asset", assetsPicked.length),
           " selected"
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
+        /* @__PURE__ */ jsx(
+          Button,
           {
             mode: "bleed",
             onClick: handlePickClear,
             padding: 2,
             style: { background: "none", boxShadow: "none" },
             tone: "default",
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: 0, children: "Deselect" })
+            children: /* @__PURE__ */ jsx(Label, { size: 0, children: "Deselect" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
+        /* @__PURE__ */ jsx(
+          Button,
           {
             mode: "bleed",
             onClick: handleDeletePicked,
             padding: 2,
             style: { background: "none", boxShadow: "none" },
             tone: "critical",
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: 0, children: "Delete" })
+            children: /* @__PURE__ */ jsx(Label, { size: 0, children: "Delete" })
           }
         )
       ] })
@@ -5136,7 +5142,7 @@ function messageFromGenericErrorPayload(payload) {
 }
 const initialState$1 = {
   items: []
-}, notificationsSlice = toolkit.createSlice({
+}, notificationsSlice = createSlice({
   name: "notifications",
   initialState: initialState$1,
   reducers: {
@@ -5150,24 +5156,24 @@ const initialState$1 = {
     }
   }
 }), notificationsAssetsDeleteCompleteEpic = (action$) => action$.pipe(
-  operators$1.filter(assetsActions.deleteComplete.match),
-  operators$1.mergeMap((action) => {
+  filter(assetsActions.deleteComplete.match),
+  mergeMap((action) => {
     const { assetIds } = action.payload, deletedCount = assetIds.length;
-    return rxjs.of(
+    return of(
       notificationsSlice.actions.add({
         status: "info",
-        title: `${deletedCount} ${pluralize__default.default("asset", deletedCount)} deleted`
+        title: `${deletedCount} ${pluralize("asset", deletedCount)} deleted`
       })
     );
   })
 ), notificationsAssetsDeleteErrorEpic = (action$) => action$.pipe(
-  operators$1.filter(assetsActions.deleteError.match),
-  operators$1.mergeMap((action) => {
+  filter(assetsActions.deleteError.match),
+  mergeMap((action) => {
     const { assetIds } = action.payload, count = assetIds.length;
-    return rxjs.of(
+    return of(
       notificationsSlice.actions.add({
         status: "error",
-        title: `Unable to delete ${count} ${pluralize__default.default(
+        title: `Unable to delete ${count} ${pluralize(
           "asset",
           count
         )}. Please review any asset errors and try again.`
@@ -5175,42 +5181,42 @@ const initialState$1 = {
     );
   })
 ), notificationsAssetsTagsAddCompleteEpic = (action$) => action$.pipe(
-  operators$1.filter(ASSETS_ACTIONS.tagsAddComplete.match),
-  operators$1.mergeMap((action) => {
+  filter(ASSETS_ACTIONS.tagsAddComplete.match),
+  mergeMap((action) => {
     const count = action?.payload?.assets?.length;
-    return rxjs.of(
+    return of(
       notificationsSlice.actions.add({
         status: "info",
-        title: `Tag added to ${count} ${pluralize__default.default("asset", count)}`
+        title: `Tag added to ${count} ${pluralize("asset", count)}`
       })
     );
   })
 ), notificationsAssetsTagsRemoveCompleteEpic = (action$) => action$.pipe(
-  operators$1.filter(ASSETS_ACTIONS.tagsRemoveComplete.match),
-  operators$1.mergeMap((action) => {
+  filter(ASSETS_ACTIONS.tagsRemoveComplete.match),
+  mergeMap((action) => {
     const count = action?.payload?.assets?.length;
-    return rxjs.of(
+    return of(
       notificationsSlice.actions.add({
         status: "info",
-        title: `Tag removed from ${count} ${pluralize__default.default("asset", count)}`
+        title: `Tag removed from ${count} ${pluralize("asset", count)}`
       })
     );
   })
 ), notificationsAssetsUpdateCompleteEpic = (action$) => action$.pipe(
-  operators$1.filter(assetsActions.updateComplete.match),
-  operators$1.bufferTime(2e3),
-  operators$1.filter((actions) => actions.length > 0),
-  operators$1.mergeMap((actions) => {
+  filter(assetsActions.updateComplete.match),
+  bufferTime(2e3),
+  filter((actions) => actions.length > 0),
+  mergeMap((actions) => {
     const updatedCount = actions.length;
-    return rxjs.of(
+    return of(
       notificationsSlice.actions.add({
         status: "info",
-        title: `${updatedCount} ${pluralize__default.default("asset", updatedCount)} updated`
+        title: `${updatedCount} ${pluralize("asset", updatedCount)} updated`
       })
     );
   })
 ), notificationsGenericErrorEpic = (action$) => action$.pipe(
-  reduxObservable.ofType(
+  ofType(
     assetsActions.fetchError.type,
     assetsActions.updateError.type,
     tagsActions.createError.type,
@@ -5219,9 +5225,9 @@ const initialState$1 = {
     tagsActions.updateError.type,
     uploadsActions.uploadError.type
   ),
-  operators$1.mergeMap((action) => {
+  mergeMap((action) => {
     const title = `An error occurred: ${messageFromGenericErrorPayload(action.payload)}`;
-    return rxjs.of(
+    return of(
       notificationsSlice.actions.add({
         status: "error",
         title
@@ -5229,27 +5235,27 @@ const initialState$1 = {
     );
   })
 ), notificationsTagCreateCompleteEpic = (action$) => action$.pipe(
-  operators$1.filter(tagsActions.createComplete.match),
-  operators$1.mergeMap(() => rxjs.of(notificationsSlice.actions.add({ status: "info", title: "Tag created" })))
+  filter(tagsActions.createComplete.match),
+  mergeMap(() => of(notificationsSlice.actions.add({ status: "info", title: "Tag created" })))
 ), notificationsTagDeleteCompleteEpic = (action$) => action$.pipe(
-  operators$1.filter(tagsActions.deleteComplete.match),
-  operators$1.mergeMap(() => rxjs.of(notificationsSlice.actions.add({ status: "info", title: "Tag deleted" })))
+  filter(tagsActions.deleteComplete.match),
+  mergeMap(() => of(notificationsSlice.actions.add({ status: "info", title: "Tag deleted" })))
 ), notificationsTagUpdateCompleteEpic = (action$) => action$.pipe(
-  operators$1.filter(tagsActions.updateComplete.match),
-  operators$1.mergeMap(() => rxjs.of(notificationsSlice.actions.add({ status: "info", title: "Tag updated" })))
+  filter(tagsActions.updateComplete.match),
+  mergeMap(() => of(notificationsSlice.actions.add({ status: "info", title: "Tag updated" })))
 ), notificationsActions = { ...notificationsSlice.actions };
 var notificationsReducer = notificationsSlice.reducer;
 const initialState = {
   assets: [],
   document: void 0,
   documentAssetIds: []
-}, selectedSlice = toolkit.createSlice({
+}, selectedSlice = createSlice({
   name: "selected",
   initialState,
   reducers: {}
 });
 var selectedReducer = selectedSlice.reducer;
-const rootEpic = reduxObservable.combineEpics(
+const rootEpic = combineEpics(
   assetsDeleteEpic,
   assetsFetchEpic,
   assetsFetchAfterDeleteAllEpic,
@@ -5299,7 +5305,7 @@ const rootEpic = reduxObservable.combineEpics(
   selected: selectedReducer,
   tags: tagsReducer,
   uploads: uploadsReducer
-}, rootReducer = toolkit.combineReducers(reducers), isPlainObject = (value) => value !== null && typeof value == "object" && !Array.isArray(value), getAssetIds = (node, acc = []) => (Array.isArray(node) && node.forEach((v) => {
+}, rootReducer = combineReducers(reducers), isPlainObject = (value) => value !== null && typeof value == "object" && !Array.isArray(value), getAssetIds = (node, acc = []) => (Array.isArray(node) && node.forEach((v) => {
   getAssetIds(v, acc);
 }), isPlainObject(node) && (node?.asset?._type === "reference" && node?.asset?._ref && acc.push(node.asset._ref), Object.values(node).forEach((val) => {
   getAssetIds(val, acc);
@@ -5310,17 +5316,17 @@ const rootEpic = reduxObservable.combineEpics(
 function isSupportedAssetType(assetType) {
   return assetType ? SUPPORTED_ASSET_TYPES.includes(assetType) : !1;
 }
-class ReduxProvider extends react.Component {
+class ReduxProvider extends Component {
   store;
   constructor(props) {
     super(props);
-    const epicMiddleware = reduxObservable.createEpicMiddleware({
+    const epicMiddleware = createEpicMiddleware({
       dependencies: {
         client: props.client
         // inject sanity client as a dependency to all epics
       }
     });
-    this.store = toolkit.configureStore({
+    this.store = configureStore({
       reducer: rootReducer,
       middleware: (getDefaultMiddleware) => getDefaultMiddleware({
         /*
@@ -5370,18 +5376,18 @@ class ReduxProvider extends react.Component {
     }), epicMiddleware.run(rootEpic);
   }
   render() {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactRedux.Provider, { store: this.store, children: this.props.children });
+    return /* @__PURE__ */ jsx(Provider, { store: this.store, children: this.props.children });
   }
 }
-const TagsPanel = () => useTypedSelector((state) => state.tags.panelVisible) ? /* @__PURE__ */ jsxRuntime.jsx(
-  ui.Box,
+const TagsPanel = () => useTypedSelector((state) => state.tags.panelVisible) ? /* @__PURE__ */ jsx(
+  Box,
   {
     style: {
       position: "relative",
       width: TAGS_PANEL_WIDTH
     },
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Box,
+    children: /* @__PURE__ */ jsx(
+      Box,
       {
         className: "media__custom-scrollbar",
         style: {
@@ -5394,11 +5400,11 @@ const TagsPanel = () => useTypedSelector((state) => state.tags.panelVisible) ? /
           top: 0,
           width: "100%"
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(TagView, {})
+        children: /* @__PURE__ */ jsx(TagView, {})
       }
     )
   }
-) : null, UploadContainer = styledComponents.styled.div`
+) : null, UploadContainer = styled.div`
   color: white;
   height: 100%;
   min-height: 100%;
@@ -5409,7 +5415,7 @@ const TagsPanel = () => useTypedSelector((state) => state.tags.panelVisible) ? /
   &:focus {
     outline: none;
   }
-`, DragActiveContainer = styledComponents.styled.div`
+`, DragActiveContainer = styled.div`
   align-items: center;
   background: rgba(0, 0, 0, 0.75);
   display: flex;
@@ -5434,7 +5440,7 @@ const UploadDropzone = (props) => {
   const { children } = props, {
     dropzone: { maxSize },
     directUploads
-  } = useToolOptions(), { onSelect } = useAssetSourceActions(), dispatch = reactRedux.useDispatch(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), isImageAssetType = assetTypes.length === 1 && assetTypes[0] === "image", handleDrop = async (acceptedFiles) => {
+  } = useToolOptions(), { onSelect } = useAssetSourceActions(), dispatch = useDispatch(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), isImageAssetType = assetTypes.length === 1 && assetTypes[0] === "image", handleDrop = async (acceptedFiles) => {
     acceptedFiles.forEach(
       (file) => dispatch(
         uploadsActions.uploadRequest({
@@ -5465,7 +5471,7 @@ const UploadDropzone = (props) => {
         title: "Unable to upload some items (folders and packages aren't supported)"
       })
     ), files;
-  }, { getRootProps, getInputProps, isDragActive, open } = reactDropzone.useDropzone({
+  }, { getRootProps, getInputProps, isDragActive, open } = useDropzone({
     accept: isImageAssetType ? "image/*" : "",
     getFilesFromEvent: handleFileGetter,
     noClick: !0,
@@ -5477,9 +5483,9 @@ const UploadDropzone = (props) => {
     onDropRejected: handleDropRejected,
     disabled: !directUploads
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(DropzoneDispatchProvider, { open, children: /* @__PURE__ */ jsxRuntime.jsxs(UploadContainer, { ...getRootProps(), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
-    isDragActive && /* @__PURE__ */ jsxRuntime.jsx(DragActiveContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "column", justify: "center", style: { color: color.white.hex }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 3, style: { color: "inherit" }, children: "Drop files to upload" }) }) }),
+  return /* @__PURE__ */ jsx(DropzoneDispatchProvider, { open, children: /* @__PURE__ */ jsxs(UploadContainer, { ...getRootProps(), children: [
+    /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+    isDragActive && /* @__PURE__ */ jsx(DragActiveContainer, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", justify: "center", style: { color: white.hex }, children: /* @__PURE__ */ jsx(Text, { size: 3, style: { color: "inherit" }, children: "Drop files to upload" }) }) }),
     children
   ] }) });
 };
@@ -5524,16 +5530,16 @@ function createTagHandler(dispatch) {
   };
 }
 function useBrowserInit(client, schemaType) {
-  const dispatch = reactRedux.useDispatch(), tagsByIds = reactRedux.useSelector((state) => state.tags.byIds), tagsFetchCount = reactRedux.useSelector((state) => state.tags.fetchCount), tagNames = getMediaTagNames(schemaType), hasMediaTags = tagNames.length > 0;
-  react.useEffect(() => {
+  const dispatch = useDispatch(), tagsByIds = useSelector((state) => state.tags.byIds), tagsFetchCount = useSelector((state) => state.tags.fetchCount), tagNames = getMediaTagNames(schemaType), hasMediaTags = tagNames.length > 0;
+  useEffect(() => {
     hasMediaTags || dispatch(searchActions.facetsClear()), dispatch(tagsActions.fetchRequest());
     const assetSubscription = client.listen(
-      groq__default.default`*[_type in ["sanity.fileAsset", "sanity.imageAsset"] && !(_id in path("drafts.**"))]`
-    ).subscribe(createAssetHandler(dispatch)), tagSubscription = client.listen(groq__default.default`*[_type == "${TAG_DOCUMENT_NAME}" && !(_id in path("drafts.**"))]`).subscribe(createTagHandler(dispatch));
+      groq`*[_type in ["sanity.fileAsset", "sanity.imageAsset"] && !(_id in path("drafts.**"))]`
+    ).subscribe(createAssetHandler(dispatch)), tagSubscription = client.listen(groq`*[_type == "${TAG_DOCUMENT_NAME}" && !(_id in path("drafts.**"))]`).subscribe(createTagHandler(dispatch));
     return () => {
       assetSubscription.unsubscribe(), tagSubscription.unsubscribe();
     };
-  }, [client, dispatch, hasMediaTags]), react.useEffect(() => {
+  }, [client, dispatch, hasMediaTags]), useEffect(() => {
     if (!hasMediaTags || tagsFetchCount < 0) return;
     const tagFacetInput = inputs.tag;
     if (tagFacetInput.type !== "searchable") return;
@@ -5555,46 +5561,46 @@ const BrowserContent = ({
   onClose,
   schemaType
 }) => {
-  const client = useVersionedClient(), [portalElement, setPortalElement] = react.useState(null);
-  return useBrowserInit(client, schemaType), /* @__PURE__ */ jsxRuntime.jsx(ui.PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxRuntime.jsxs(UploadDropzone, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Dialogs, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(Notifications, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { display: "flex", height: "fill", ref: setPortalElement, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", flex: 1, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Header, { onClose }),
-      /* @__PURE__ */ jsxRuntime.jsx(Controls, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { flex: 1, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "flex-end", direction: "column", flex: 1, style: { position: "relative" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PickedBar, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(Items, {})
+  const client = useVersionedClient(), [portalElement, setPortalElement] = useState(null);
+  return useBrowserInit(client, schemaType), /* @__PURE__ */ jsx(PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxs(UploadDropzone, { children: [
+    /* @__PURE__ */ jsx(Dialogs, {}),
+    /* @__PURE__ */ jsx(Notifications, {}),
+    /* @__PURE__ */ jsx(Card, { display: "flex", height: "fill", ref: setPortalElement, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", flex: 1, children: [
+      /* @__PURE__ */ jsx(Header, { onClose }),
+      /* @__PURE__ */ jsx(Controls, {}),
+      /* @__PURE__ */ jsxs(Flex, { flex: 1, children: [
+        /* @__PURE__ */ jsxs(Flex, { align: "flex-end", direction: "column", flex: 1, style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx(PickedBar, {}),
+          /* @__PURE__ */ jsx(Items, {})
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(TagsPanel, {})
+        /* @__PURE__ */ jsx(TagsPanel, {})
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(DebugControls, {})
+      /* @__PURE__ */ jsx(DebugControls, {})
     ] }) })
   ] }) });
 }, Browser = (props) => {
   const client = useVersionedClient();
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     ReduxProvider,
     {
       assetType: props?.assetType,
       client,
       document: props?.document,
       selectedAssets: props?.selectedAssets,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(AssetBrowserDispatchProvider, { onSelect: props?.onSelect, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(BrowserContent, { onClose: props?.onClose, schemaType: props?.schemaType })
+      children: /* @__PURE__ */ jsxs(AssetBrowserDispatchProvider, { onSelect: props?.onSelect, children: [
+        /* @__PURE__ */ jsx(GlobalStyle, {}),
+        /* @__PURE__ */ jsx(BrowserContent, { onClose: props?.onClose, schemaType: props?.schemaType })
       ] })
     }
   );
 }, FormBuilderTool = (props) => {
-  const { onClose } = props, portalElement = useRootPortalElement(), currentDocument = sanity.useFormValue([]);
+  const { onClose } = props, portalElement = useRootPortalElement(), currentDocument = useFormValue([]);
   useKeyPress("escape", onClose);
   const handleStopPropagation = (event) => {
     event.nativeEvent.stopImmediatePropagation(), event.stopPropagation();
-  }, { zIndex } = ui.useLayer();
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Box,
+  }, { zIndex } = useLayer();
+  return /* @__PURE__ */ jsx(PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+    Box,
     {
       onDragEnter: handleStopPropagation,
       onDragLeave: handleStopPropagation,
@@ -5610,15 +5616,15 @@ const BrowserContent = ({
         width: "100%",
         zIndex
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(Browser, { document: currentDocument, schemaType: props.schemaType, ...props })
+      children: /* @__PURE__ */ jsx(Browser, { document: currentDocument, schemaType: props.schemaType, ...props })
     }
   ) }) });
 }, useRootPortalElement = () => {
-  const [container] = react.useState(() => document.createElement("div"));
-  return react.useEffect(() => (container.classList.add("media-portal"), document.body.appendChild(container), () => {
+  const [container] = useState(() => document.createElement("div"));
+  return useEffect(() => (container.classList.add("media-portal"), document.body.appendChild(container), () => {
     document.body.removeChild(container);
   }), [container]), container;
-}, Tool = () => /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "column", height: "fill", flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Browser, {}) });
+}, Tool = () => /* @__PURE__ */ jsx(Flex, { direction: "column", height: "fill", flex: 1, children: /* @__PURE__ */ jsx(Browser, {}) });
 var mediaTag = {
   title: "Media Tag",
   icon: TagIcon,
@@ -5645,7 +5651,7 @@ var mediaTag = {
   }
 };
 const plugin = {
-  icon: icons.ImageIcon,
+  icon: ImageIcon,
   name: "media",
   title: "Media"
 }, mediaAssetSource = {
@@ -5655,11 +5661,11 @@ const plugin = {
   ...plugin,
   component: Tool,
   __internalApplicationType: "sanity/media"
-}, media = sanity.definePlugin((options) => ({
+}, media = definePlugin((options) => ({
   name: "media",
   studio: {
     components: {
-      layout: (props) => /* @__PURE__ */ jsxRuntime.jsx(ToolOptionsProvider, { options, children: props.renderDefault(props) })
+      layout: (props) => /* @__PURE__ */ jsx(ToolOptionsProvider, { options, children: props.renderDefault(props) })
     }
   },
   form: {
@@ -5693,7 +5699,7 @@ async function doApplyMediaTags({
   if (!mediaTags || mediaTags.length === 0) return;
   const validTags = (await Promise.all(
     mediaTags.map(async (tagName) => await client.fetch(
-      groq__default.default`*[_type == "${TAG_DOCUMENT_NAME}" && name.current == $tagName][0]`,
+      groq`*[_type == "${TAG_DOCUMENT_NAME}" && name.current == $tagName][0]`,
       { tagName }
     ) || (createTagsOnUpload ? await client.create({
       _type: TAG_DOCUMENT_NAME,
@@ -5702,12 +5708,12 @@ async function doApplyMediaTags({
   )).filter((tag) => tag !== null);
   if (validTags.length === 0) return;
   const existing = await client.fetch(
-    groq__default.default`*[_id == $assetId][0]{'tagIds': opt.media.tags[]._ref}`,
+    groq`*[_id == $assetId][0]{'tagIds': opt.media.tags[]._ref}`,
     { assetId },
     { useCdn: !1 }
     // bypass CDN cache so we see the latest committed tag refs
   ), existingIds = new Set(existing?.tagIds ?? []), tagReferences = validTags.filter((tag) => !existingIds.has(tag._id)).map((tag) => ({
-    _key: nanoid.nanoid(),
+    _key: nanoid(),
     _ref: tag._id,
     _type: "reference",
     _weak: !0
@@ -5715,8 +5721,8 @@ async function doApplyMediaTags({
   tagReferences.length !== 0 && await client.patch(assetId).setIfMissing({ opt: {} }).setIfMissing({ "opt.media": {} }).setIfMissing({ "opt.media.tags": [] }).append("opt.media.tags", tagReferences).commit();
 }
 function AutoTagInput(props) {
-  const { renderDefault, schemaType, value, mediaTags: mediaTagsProp } = props, toast = ui.useToast(), mediaTags = mediaTagsProp ?? schemaType?.options?.mediaTags, client = useVersionedClient(), { createTagsOnUpload } = useToolOptions(), prevAssetRef = react.useRef(void 0), isInitialMount = react.useRef(!0), currentAssetRef = value?.asset?._ref;
-  return react.useEffect(() => {
+  const { renderDefault, schemaType, value, mediaTags: mediaTagsProp } = props, toast = useToast(), mediaTags = mediaTagsProp ?? schemaType?.options?.mediaTags, client = useVersionedClient(), { createTagsOnUpload } = useToolOptions(), prevAssetRef = useRef(void 0), isInitialMount = useRef(!0), currentAssetRef = value?.asset?._ref;
+  return useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = !1, prevAssetRef.current = currentAssetRef;
       return;
@@ -5739,15 +5745,17 @@ function AutoTagInput(props) {
   }, [currentAssetRef, mediaTags, client, createTagsOnUpload]), renderDefault(props);
 }
 function mediaField(config) {
-  const { mediaTags, options, components, ...rest } = config;
+  const { mediaTags, options, components: components2, ...rest } = config;
   return {
     ...rest,
     options: { ...options, mediaTags },
-    components: { ...components, input: AutoTagInput }
+    components: { ...components2, input: AutoTagInput }
   };
 }
-exports.AutoTagInput = AutoTagInput;
-exports.media = media;
-exports.mediaAssetSource = mediaAssetSource;
-exports.mediaField = mediaField;
+export {
+  AutoTagInput,
+  media,
+  mediaAssetSource,
+  mediaField
+};
 //# sourceMappingURL=index.js.map