sanity-plugin-media 5.0.7 → 5.0.8

package/dist/index.js

@@ -4,7 +4,7 @@ import { useClient, useColorSchemeValue, useSchema, Preview, useDocumentStore, W
 import { Inline, Button, usePortal, MenuButton, Menu as Menu$2, MenuItem, MenuDivider, Box, studioTheme, Flex, Label, Text, rem, 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, memo, Component } from "react";
 import { isHotkey } from "is-hotkey-esm";
-import { css, createGlobalStyle, styled } from "styled-components";
+import { createGlobalStyle, css, 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";
@@ -45,7 +45,7 @@ import { ArrowUpIcon } from "@sanity/icons/ArrowUp";
 import { EditIcon } from "@sanity/icons/Edit";
 import { TrashIcon } from "@sanity/icons/Trash";
 import { ComposeIcon } from "@sanity/icons/Compose";
-import { Icon } from "@sanity/icons";
+import { ArrowRightIcon } from "@sanity/icons/ArrowRight";
 import { UploadIcon } from "@sanity/icons/Upload";
 import { CheckmarkCircleIcon } from "@sanity/icons/CheckmarkCircle";
 import { WarningFilledIcon } from "@sanity/icons/WarningFilled";
@@ -75,7 +75,7 @@ const useKeyPress = (hotkey, onPress) => {
   return context;
 }, useVersionedClient = () => useClient({
   apiVersion: "2025-10-02"
-}), customScrollbar = css`::-webkit-scrollbar{width:14px;}::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid rgba(0,0,0,0);background:var(--card-border-color);background-clip:padding-box;&:hover{background:var(--card-muted-fg-color);background-clip:padding-box;}}`, GlobalStyle = createGlobalStyle`.media__custom-scrollbar{${customScrollbar}}div[data-ui="Box"]{${customScrollbar}}div[data-ui="Dialog"]{background-color:rgba(15,17,18,0.9);}`, useTypedSelector = useSelector, ORDER_DICTIONARY = {
+}), customScrollbar = /* @__PURE__ */ css(["::-webkit-scrollbar{width:14px;}::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid rgba(0,0,0,0);background:var(--card-border-color);background-clip:padding-box;&:hover{background:var(--card-muted-fg-color);background-clip:padding-box;}}"]), GlobalStyle = /* @__PURE__ */ createGlobalStyle([".media__custom-scrollbar{", '}div[data-ui="Box"]{', '}div[data-ui="Dialog"]{background-color:rgba(15,17,18,0.9);}'], customScrollbar, customScrollbar), useTypedSelector = useSelector, ORDER_DICTIONARY = {
   _createdAt: {
     asc: "Last created: Oldest first",
     desc: "Last created: Newest first"
@@ -1729,7 +1729,7 @@ const Container$1 = /* @__PURE__ */ styled(Box).withConfig({
 })(({
   $scheme,
   theme
-}) => css`background:${getSchemeColor($scheme, "bg")};border-radius:${rem(theme.sanity.radius[2])};`), SearchFacet = (props) => {
+}) => css(["background:", ";border-radius:", ";"], getSchemeColor($scheme, "bg"), rem(theme.sanity.radius[2]))), SearchFacet = (props) => {
   const {
     children,
     facet
@@ -1972,7 +1972,7 @@ const Container$1 = /* @__PURE__ */ styled(Box).withConfig({
   componentId: "sc-cuu8kf-0"
 })(({
   theme
-}) => css`> *{margin-bottom:${rem(theme.sanity.space[2])};}`), SearchFacets = (props) => {
+}) => css(["> *{margin-bottom:", ";}"], rem(theme.sanity.space[2]))), SearchFacets = (props) => {
   const {
     layout = "inline"
   } = props, searchFacets = useTypedSelector((state) => state.search.facets), Items2 = searchFacets.map((facet) => {
@@ -2308,7 +2308,7 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
   componentId: "sc-19eu02y-0"
 })(({
   theme
-}) => css`text{font-family:${theme.sanity.fonts.text.family} !important;font-size:8px !important;font-weight:500 !important;}`), FileIcon = (props) => {
+}) => css(["text{font-family:", " !important;font-size:8px !important;font-weight:500 !important;}"], theme.sanity.fonts.text.family)), FileIcon = (props) => {
   const {
     extension,
     onClick,
@@ -2347,10 +2347,10 @@ const getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asse
   ] }) : 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__ */ 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__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Button, { disabled, fontSize: 1, onClick, text: "Save and close", tone: "primary" }) }) });
-}, Image$1 = styled.img.withConfig({
+}, Image$1 = /* @__PURE__ */ styled.img.withConfig({
   displayName: "Image",
   componentId: "sc-hf3ld2-0"
-})`--checkerboard-color:${(props) => props.$scheme ? getSchemeColor(props.$scheme, "bg2") : "inherit"};display:block;width:100%;height:100%;object-fit:contain;${(props) => props.$showCheckerboard && css`background-image:linear-gradient(45deg,var(--checkerboard-color) 25%,transparent 25%),linear-gradient(-45deg,var(--checkerboard-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checkerboard-color) 75%),linear-gradient(-45deg,transparent 75%,var(--checkerboard-color) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;`}`, {
+})(["--checkerboard-color:", ";display:block;width:100%;height:100%;object-fit:contain;", ""], (props) => props.$scheme ? getSchemeColor(props.$scheme, "bg2") : "inherit", (props) => props.$showCheckerboard && css(["background-image:linear-gradient(45deg,var(--checkerboard-color) 25%,transparent 25%),linear-gradient(-45deg,var(--checkerboard-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checkerboard-color) 75%),linear-gradient(-45deg,transparent 75%,var(--checkerboard-color) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;"])), {
   radius: themeRadius,
   space: themeSpace
 } = studioTheme, reactSelectStyles = (scheme) => ({
@@ -3058,13 +3058,13 @@ const DialogAssetEdit = (props) => {
       ]
     }
   ) : null;
-}, TagContainer = styled(Flex).withConfig({
+}, TagContainer = /* @__PURE__ */ styled(Flex).withConfig({
   displayName: "TagContainer",
   componentId: "sc-sujhn-0"
-})`height:${PANEL_HEIGHT}px;`, ButtonContainer = styled(Flex).withConfig({
+})(["height:", "px;"], PANEL_HEIGHT), ButtonContainer = /* @__PURE__ */ styled(Flex).withConfig({
   displayName: "ButtonContainer",
   componentId: "sc-sujhn-1"
-})`@media (pointer:fine){visibility:hidden;}@media (hover:hover) and (pointer:fine){${TagContainer}:hover &{visibility:visible;}}`, TagButton = (props) => {
+})(["@media (pointer:fine){visibility:hidden;}@media (hover:hover) and (pointer:fine){", ":hover &{visibility:visible;}}"], TagContainer), TagButton = (props) => {
   const {
     disabled,
     icon,
@@ -3276,7 +3276,7 @@ const DialogAssetEdit = (props) => {
       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" }) }),
+        }, children: /* @__PURE__ */ jsx(ArrowRightIcon, {}) }),
         /* @__PURE__ */ jsx("span", { style: {
           textTransform: "capitalize"
         }, children: selectedDocument._type })
@@ -3324,22 +3324,22 @@ const DialogAssetEdit = (props) => {
     id,
     type: "upload"
   })), ...assetItems];
-}), CardWrapper$1 = styled(Flex).withConfig({
+}), CardWrapper$1 = /* @__PURE__ */ styled(Flex).withConfig({
   displayName: "CardWrapper",
   componentId: "sc-88amzd-0"
-})`box-sizing:border-box;height:100%;overflow:hidden;position:relative;width:100%;`, CardContainer = /* @__PURE__ */ styled(Flex).withConfig({
+})(["box-sizing:border-box;height:100%;overflow:hidden;position:relative;width:100%;"]), CardContainer = /* @__PURE__ */ styled(Flex).withConfig({
   displayName: "CardContainer",
   componentId: "sc-88amzd-1"
 })(({
   $picked,
   theme,
   $updating
-}) => css`border:1px solid transparent;height:100%;pointer-events:${$updating ? "none" : "auto"};position:relative;transition:all 300ms;user-select:none;width:100%;border:${$picked ? `1px solid ${theme.sanity.color.spot.orange} !important` : "1px solid inherit"};${!$updating && css`@media (hover:hover) and (pointer:fine){&:hover{border:1px solid var(--card-border-color);}}`}`), ContextActionContainer$2 = /* @__PURE__ */ styled(Flex).withConfig({
+}) => css(["border:1px solid transparent;height:100%;pointer-events:", ";position:relative;transition:all 300ms;user-select:none;width:100%;border:", ";", ""], $updating ? "none" : "auto", $picked ? `1px solid ${theme.sanity.color.spot.orange} !important` : "1px solid inherit", !$updating && css(["@media (hover:hover) and (pointer:fine){&:hover{border:1px solid var(--card-border-color);}}"]))), ContextActionContainer$2 = /* @__PURE__ */ styled(Flex).withConfig({
   displayName: "ContextActionContainer",
   componentId: "sc-88amzd-2"
 })(({
   $scheme
-}) => css`cursor:pointer;height:${PANEL_HEIGHT}px;transition:all 300ms;@media (hover:hover) and (pointer:fine){&:hover{background:${getSchemeColor($scheme, "bg")};}}`), StyledWarningOutlineIcon = /* @__PURE__ */ styled(WarningFilledIcon).withConfig({
+}) => css(["cursor:pointer;height:", "px;transition:all 300ms;@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}"], PANEL_HEIGHT, getSchemeColor($scheme, "bg"))), StyledWarningOutlineIcon = /* @__PURE__ */ styled(WarningFilledIcon).withConfig({
   displayName: "StyledWarningOutlineIcon",
   componentId: "sc-88amzd-3"
 })(({
@@ -3670,10 +3670,10 @@ const createThrottler = (concurrency = DEFAULT_CONCURRENCY) => {
   ...uploadsSlice.actions
 };
 var uploadsReducer = uploadsSlice.reducer;
-const CardWrapper = styled(Flex).withConfig({
+const CardWrapper = /* @__PURE__ */ styled(Flex).withConfig({
   displayName: "CardWrapper",
   componentId: "sc-11n35er-0"
-})`box-sizing:border-box;height:100%;overflow:hidden;position:relative;width:100%;`, CardUpload = (props) => {
+})(["box-sizing:border-box;height:100%;overflow:hidden;position:relative;width:100%;"]), CardUpload = (props) => {
   const {
     id
   } = props, scheme = useColorSchemeValue(), dispatch = useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id));
@@ -3745,20 +3745,20 @@ const CardWrapper = styled(Flex).withConfig({
 }, 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.withConfig({
+}) => item?.type === "asset" ? /* @__PURE__ */ jsx(CardAsset, { id: item.id, selected }) : item?.type === "upload" ? /* @__PURE__ */ jsx(CardUpload, { id: item.id }) : null), StyledItemContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledItemContainer",
   componentId: "sc-9owt7i-0"
-})`height:${CARD_HEIGHT}px;width:${CARD_WIDTH}px;`, ItemContainer = (props) => {
+})(["height:", "px;width:", "px;"], CARD_HEIGHT, CARD_WIDTH), ItemContainer = (props) => {
   const {
     context,
     ref,
     ...rest
   } = props;
   return /* @__PURE__ */ jsx(StyledItemContainer, { ref, ...rest });
-}, StyledListContainer = styled.div.withConfig({
+}, StyledListContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledListContainer",
   componentId: "sc-9owt7i-1"
-})`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 = (props) => {
+})(["display:grid;grid-template-columns:repeat(auto-fill,", "px);grid-template-rows:repeat(auto-fill,", "px);justify-content:center;margin:0 auto;"], CARD_WIDTH, CARD_HEIGHT), ListContainer = (props) => {
   const {
     context,
     ref,
@@ -3818,7 +3818,7 @@ const CardWrapper = styled(Flex).withConfig({
   componentId: "sc-i9fhtm-0"
 })(({
   $scheme
-}) => css`cursor:pointer;@media (hover:hover) and (pointer:fine){&:hover{background:${getSchemeColor($scheme, "bg")};}}`), TableHeader = () => {
+}) => css(["cursor:pointer;@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}"], getSchemeColor($scheme, "bg"))), TableHeader = () => {
   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) => {
@@ -3864,12 +3864,12 @@ const CardWrapper = styled(Flex).withConfig({
   $scheme,
   $selected,
   $updating
-}) => css`align-items:center;cursor:${$selected ? "default" : "pointer"};height:100%;pointer-events:${$updating ? "none" : "auto"};user-select:none;white-space:nowrap;${!$updating && css`@media (hover:hover) and (pointer:fine){&:hover{background:${getSchemeColor($scheme, "bg")};}}`}`), ContextActionContainer = /* @__PURE__ */ styled(Flex).withConfig({
+}) => css(["align-items:center;cursor:", ";height:100%;pointer-events:", ";user-select:none;white-space:nowrap;", ""], $selected ? "default" : "pointer", $updating ? "none" : "auto", !$updating && css(["@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}"], getSchemeColor($scheme, "bg")))), ContextActionContainer = /* @__PURE__ */ styled(Flex).withConfig({
   displayName: "ContextActionContainer",
   componentId: "sc-1nb1qw9-1"
 })(({
   $scheme
-}) => css`cursor:pointer;@media (hover:hover) and (pointer:fine){&:hover{background:${getSchemeColor($scheme, "bg2")};}}`), StyledWarningIcon = /* @__PURE__ */ styled(WarningFilledIcon).withConfig({
+}) => css(["cursor:pointer;@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}"], getSchemeColor($scheme, "bg2"))), StyledWarningIcon = /* @__PURE__ */ styled(WarningFilledIcon).withConfig({
   displayName: "StyledWarningIcon",
   componentId: "sc-1nb1qw9-2"
 })(({
@@ -4373,13 +4373,13 @@ const TagsPanel = () => useTypedSelector((state) => state.tags.panelVisible) ? /
   right: 0,
   top: 0,
   width: "100%"
-}, children: /* @__PURE__ */ jsx(TagView, {}) }) }) : null, UploadContainer = styled.div.withConfig({
+}, children: /* @__PURE__ */ jsx(TagView, {}) }) }) : null, UploadContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "UploadContainer",
   componentId: "sc-1wiv2t5-0"
-})`color:white;height:100%;min-height:100%;right:0;top:0;width:100%;&:focus{outline:none;}`, DragActiveContainer = styled.div.withConfig({
+})(["color:white;height:100%;min-height:100%;right:0;top:0;width:100%;&:focus{outline:none;}"]), DragActiveContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "DragActiveContainer",
   componentId: "sc-1wiv2t5-1"
-})`align-items:center;background:rgba(0,0,0,0.75);display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:100%;z-index:3;`;
+})(["align-items:center;background:rgba(0,0,0,0.75);display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:100%;z-index:3;"]);
 async function filterFiles(fileList) {
   const files = Array.from(fileList), filteredFiles = [];
   for (const file of files)