sanity-plugin-media 2.3.0 → 2.3.2

package/README.md

@@ -95,6 +95,29 @@ export default defineConfig({
 })
 ```
 
+### Plugin Config
+
+```ts
+// sanity.config.ts
+export default defineConfig({
+  //...
+  plugins: [
+    media({
+      creditLine: {
+        enabled: true,
+        // boolean - enables an optional "Credit Line" field in the plugin.
+        // Used to store credits e.g. photographer, licence information
+        excludeSources: ['unsplash'],
+        // string | string[] - when used with 3rd party asset sources, you may
+        // wish to prevent users overwriting the creditLine based on the `source.name`
+      },
+      maximumUploadSize: 10000000
+      // number - maximum file size (in bytes) that can be uploaded through the plugin interface
+    })
+  ],
+})
+```
+
 ## Known issues
 
 <details>

package/dist/index.d.ts

@@ -1,12 +1,25 @@
-import type {AssetSource} from 'sanity'
+import {AssetSourceComponentProps} from 'sanity'
+import {JSX as JSX_2} from 'react/jsx-runtime'
 import {Plugin as Plugin_2} from 'sanity'
+import {default as React_2} from 'react'
 
 export declare const media: Plugin_2<void | MediaToolOptions>
 
-export declare const mediaAssetSource: AssetSource
+export declare const mediaAssetSource: {
+  component: (props: AssetSourceComponentProps) => JSX_2.Element
+  icon: React_2.ForwardRefExoticComponent<
+    Omit<React_2.SVGProps<SVGSVGElement>, 'ref'> & React_2.RefAttributes<SVGSVGElement>
+  >
+  name: string
+  title: string
+}
 
-declare type MediaToolOptions = {
+export declare type MediaToolOptions = {
   maximumUploadSize?: number
+  creditLine: {
+    enabled: boolean
+    excludeSources?: string | string[]
+  }
 }
 
 export {}

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import { useClient, useColorScheme, useSchema, Preview, useDocumentStore, WithReferringDocuments, useFormValue, definePlugin } from 'sanity';
-import { forwardRef, createElement, useRef, useCallback, useEffect, createContext, useContext, useState, memo, Component, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useClient, useColorScheme, useSchema, Preview, useDocumentStore, WithReferringDocuments, useFormValue, definePlugin } from 'sanity';
+import { forwardRef, createElement, useRef, useCallback, useEffect, createContext, useContext, useMemo, useState, memo, Component } from 'react';
 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, ThemeProvider, ToastProvider, PortalProvider, useLayer, Portal } from '@sanity/ui';
 import isHotkey from 'is-hotkey';
 import groq from 'groq';
@@ -4146,6 +4146,16 @@ const inputs = {
     type: "string",
     value: ""
   },
+  creditLine: {
+    assetTypes: ["file", "image"],
+    field: "creditLine",
+    name: "creditLine",
+    operatorType: "empty",
+    operatorTypes: ["empty", "notEmpty", null, "includes", "doesNotInclude"],
+    title: "Credit",
+    type: "string",
+    value: ""
+  },
   description: {
     assetTypes: ["file", "image"],
     field: "description",
@@ -4414,7 +4424,7 @@ null, {
   direction: "asc",
   field: "size"
 }];
-const FACETS = [inputs.tag, divider, inputs.inUse, inputs.inCurrentDocument, divider, inputs.title, inputs.altText, inputs.description, divider, inputs.isOpaque, divider, inputs.fileName, inputs.size, inputs.type, divider, inputs.orientation, inputs.width, inputs.height];
+const FACETS = [inputs.tag, divider, inputs.inUse, inputs.inCurrentDocument, divider, inputs.title, inputs.altText, inputs.creditLine, inputs.description, divider, inputs.isOpaque, divider, inputs.fileName, inputs.size, inputs.type, divider, inputs.orientation, inputs.width, inputs.height];
 const GRID_TEMPLATE_COLUMNS = {
   SMALL: "3rem 100px auto 1.5rem",
   LARGE: "3rem 100px auto 5.5rem 5.5rem 3.5rem 8.5rem 4.75rem 2rem"
@@ -4563,7 +4573,7 @@ const constructFilter = _ref => {
   // NOTE: Currently this only searches direct fields on sanity.fileAsset/sanity.imageAsset and NOT referenced tags
   // 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(_b$a || (_b$a = __template$j(["[_id, altText, assetId, description, originalFilename, title, url] match '*", "*'"])), searchQuery.trim())] : []),
+  ...(searchQuery ? [groq(_b$a || (_b$a = __template$j(["[_id, altText, assetId, creditLine, description, originalFilename, title, url] match '*", "*'"])), searchQuery.trim())] : []),
   // Search facets
   ...searchFacetFragments].join(" && ");
   return constructedQuery;
@@ -5385,7 +5395,7 @@ const assetsSlice = createSlice({
           sort = groq(_a$g || (_a$g = __template$g(["order(_updatedAt desc)"])))
         } = _ref19;
         const pipe = sort || selector ? "|" : "";
-        const query = groq(_b$8 || (_b$8 = __template$g(['\n          {\n            "items": *[', "] {\n              _id,\n              _type,\n              _createdAt,\n              _updatedAt,\n              altText,\n              description,\n              extension,\n              metadata {\n                dimensions,\n                exif,\n                isOpaque,\n              },\n              mimeType,\n              opt {\n                media\n              },\n              originalFilename,\n              size,\n              title,\n              url\n            } ", " ", " ", ",\n          }\n        "])), queryFilter, pipe, sort, selector);
+        const query = groq(_b$8 || (_b$8 = __template$g(['\n          {\n            "items": *[', "] {\n              _id,\n              _type,\n              _createdAt,\n              _updatedAt,\n              altText,\n              creditLine,\n              description,\n              extension,\n              metadata {\n                dimensions,\n                exif,\n                isOpaque,\n              },\n              mimeType,\n              opt {\n                media\n              },\n              originalFilename,\n              size,\n              source {\n                name\n              },\n              title,\n              url\n            } ", " ", " ", ",\n          }\n        "])), queryFilter, pipe, sort, selector);
         return {
           payload: {
             params,
@@ -7227,14 +7237,55 @@ const SearchFacets = props => {
   }
   throw Error("Invalid layout");
 };
+const ToolOptionsContext = createContext(null);
+const ToolOptionsProvider = _ref43 => {
+  let {
+    options,
+    children
+  } = _ref43;
+  var _a, _b;
+  const value = useMemo(() => {
+    var _a2, _b2, _c, _d;
+    let creditLineExcludeSources;
+    if ((_a2 = options == null ? void 0 : options.creditLine) == null ? void 0 : _a2.excludeSources) {
+      creditLineExcludeSources = Array.isArray((_b2 = options == null ? void 0 : options.creditLine) == null ? void 0 : _b2.excludeSources) ? options.creditLine.excludeSources : [(_c = options == null ? void 0 : options.creditLine) == null ? void 0 : _c.excludeSources];
+    }
+    return {
+      dropzone: {
+        maxSize: options == null ? void 0 : options.maximumUploadSize
+      },
+      creditLine: {
+        enabled: ((_d = options == null ? void 0 : options.creditLine) == null ? void 0 : _d.enabled) || false,
+        excludeSources: creditLineExcludeSources
+      }
+    };
+  }, [(_a = options == null ? void 0 : options.creditLine) == null ? void 0 : _a.enabled, (_b = options == null ? void 0 : options.creditLine) == null ? void 0 : _b.excludeSources, options == null ? void 0 : options.maximumUploadSize]);
+  return /* @__PURE__ */jsx(ToolOptionsContext.Provider, {
+    value,
+    children
+  });
+};
+const useToolOptions = () => {
+  const context = useContext(ToolOptionsContext);
+  if (!context) {
+    throw new Error("useToolOptions must be used within an ToolOptionsProvider");
+  }
+  return context;
+};
 const SearchFacetsControl = () => {
   const dispatch = useDispatch();
   const assetTypes = useTypedSelector(state => state.assets.assetTypes);
   const searchFacets = useTypedSelector(state => state.search.facets);
   const selectedDocument = useTypedSelector(state => state.selected.document);
   const popoverProps = usePortalPopoverProps();
+  const {
+    creditLine
+  } = useToolOptions();
   const isTool = !selectedDocument;
   const filteredFacets = FACETS.filter(facet => {
+    if (!(creditLine == null ? void 0 : creditLine.enabled) && (facet == null ? void 0 : facet.type) === "string" && (facet == null ? void 0 : facet.name) === "creditLine") {
+      return false;
+    }
     if (facet.type === "group" || facet.type === "divider") {
       return true;
     }
@@ -7563,6 +7614,7 @@ const tagOptionSchema = z.object({
 });
 const assetFormSchema = z.object({
   altText: z.string().trim().optional(),
+  creditLine: z.string().trim().optional(),
   description: z.string().trim().optional(),
   opt: z.object({
     media: z.object({
@@ -7620,11 +7672,11 @@ const isImageAsset = asset => {
 const getAssetResolution = asset => {
   return "".concat(asset.metadata.dimensions.width, "x").concat(asset.metadata.dimensions.height, "px");
 };
-const ButtonAssetCopy = _ref43 => {
+const ButtonAssetCopy = _ref44 => {
   let {
     disabled,
     url
-  } = _ref43;
+  } = _ref44;
   const popoverProps = usePortalPopoverProps();
   const refPopoverTimeout = useRef();
   const [popoverVisible, setPopoverVisible] = useState(false);
@@ -7666,11 +7718,11 @@ const ButtonAssetCopy = _ref43 => {
     })
   });
 };
-const Row = _ref44 => {
+const Row = _ref45 => {
   let {
     label,
     value
-  } = _ref44;
+  } = _ref45;
   return /* @__PURE__ */jsxs(Flex, {
     justify: "space-between",
     children: [/* @__PURE__ */jsx(Text, {
@@ -7781,11 +7833,11 @@ const Dialog = props => {
     }
   });
 };
-const DocumentList = _ref45 => {
+const DocumentList = _ref46 => {
   let {
     documents,
     isLoading
-  } = _ref45;
+  } = _ref46;
   const schema = useSchema();
   if (isLoading) {
     return /* @__PURE__ */jsx(Text, {
@@ -7857,10 +7909,10 @@ var __template$c = (cooked, raw) => __freeze$c(__defProp$d(cooked, "raw", {
   value: __freeze$c(raw || cooked.slice())
 }));
 var _a$c;
-const Container = styled(Box)(_ref46 => {
+const Container = styled(Box)(_ref47 => {
   let {
     theme
-  } = _ref46;
+  } = _ref47;
   return css(_a$c || (_a$c = __template$c(["\n    text {\n      font-family: ", " !important;\n      font-size: 8px !important;\n      font-weight: 500 !important;\n    }\n  "])), theme.sanity.fonts.text.family);
 });
 const FileIcon = props => {
@@ -7928,10 +7980,10 @@ const {
 } = studioTheme;
 const reactSelectStyles = scheme => {
   return {
-    control: (styles, _ref47) => {
+    control: (styles, _ref48) => {
       let {
         isFocused
-      } = _ref47;
+      } = _ref48;
       let boxShadow = "inset 0 0 0 1px var(--card-border-color)";
       if (isFocused) {
         boxShadow = "inset 0 0 0 1px ".concat(getSchemeColor(scheme, "inputEnabledBorder"), ",\n        0 0 0 1px var(--card-bg-color),\n        0 0 0 3px var(--card-focus-ring-color) !important");
@@ -7953,10 +8005,10 @@ const reactSelectStyles = scheme => {
         }
       };
     },
-    indicatorsContainer: (styles, _ref48) => {
+    indicatorsContainer: (styles, _ref49) => {
       let {
         isDisabled
-      } = _ref48;
+      } = _ref49;
       return {
         ...styles,
         opacity: isDisabled ? 0.25 : 1
@@ -7971,10 +8023,10 @@ const reactSelectStyles = scheme => {
     menuList: styles => ({
       ...styles
     }),
-    multiValue: (styles, _ref49) => {
+    multiValue: (styles, _ref50) => {
       let {
         isDisabled
-      } = _ref49;
+      } = _ref50;
       return {
         ...styles,
         backgroundColor: getSchemeColor(scheme, "mutedHoveredBg"),
@@ -8003,10 +8055,10 @@ const reactSelectStyles = scheme => {
       fontFamily: studioTheme.fonts.text.family,
       lineHeight: "1em"
     }),
-    option: (styles, _ref50) => {
+    option: (styles, _ref51) => {
       let {
         isFocused
-      } = _ref50;
+      } = _ref51;
       return {
         ...styles,
         backgroundColor: isFocused ? getSchemeColor(scheme, "spotBlue") : "transparent",
@@ -8126,10 +8178,10 @@ const reactSelectComponents = {
   MultiValueRemove,
   Option
 };
-const StyledErrorOutlineIcon = styled(ErrorOutlineIcon)(_ref51 => {
+const StyledErrorOutlineIcon = styled(ErrorOutlineIcon)(_ref52 => {
   let {
     theme
-  } = _ref51;
+  } = _ref52;
   return {
     color: theme.sanity.color.spot.red
   };
@@ -8216,10 +8268,10 @@ const FormFieldInputTags = props => {
       control,
       defaultValue: value,
       name,
-      render: _ref52 => {
+      render: _ref53 => {
         let {
           field
-        } = _ref52;
+        } = _ref53;
         const {
           onBlur,
           onChange,
@@ -8390,9 +8442,13 @@ const DialogAssetEdit = props => {
   const currentAsset = assetItem ? assetItem == null ? void 0 : assetItem.asset : assetSnapshot;
   const allTagOptions = getTagSelectOptions(tags);
   const assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset));
+  const {
+    creditLine
+  } = useToolOptions();
   const generateDefaultValues = useCallback(asset => {
     return {
       altText: (asset == null ? void 0 : asset.altText) || "",
+      creditLine: (asset == null ? void 0 : asset.creditLine) || "",
       description: (asset == null ? void 0 : asset.description) || "",
       originalFilename: (asset == null ? void 0 : asset.originalFilename) || "",
       opt: {
@@ -8550,12 +8606,12 @@ const DialogAssetEdit = props => {
         children: /* @__PURE__ */jsx(WithReferringDocuments, {
           documentStore,
           id: currentAsset._id,
-          children: _ref53 => {
+          children: _ref54 => {
             let {
               isLoading,
               referringDocuments
-            } = _ref53;
-            var _a3, _b, _c, _d, _e, _f, _g;
+            } = _ref54;
+            var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j;
             const uniqueReferringDocuments = getUniqueDocuments(referringDocuments);
             return /* @__PURE__ */jsxs(Fragment, {
               children: [/* @__PURE__ */jsxs(TabList, {
@@ -8642,6 +8698,13 @@ const DialogAssetEdit = props => {
                       name: "description",
                       rows: 5,
                       value: currentAsset == null ? void 0 : currentAsset.description
+                    }), (creditLine == null ? void 0 : creditLine.enabled) && /* @__PURE__ */jsx(FormFieldInputText, {
+                      ...register("creditLine"),
+                      error: (_h = errors == null ? void 0 : errors.creditLine) == null ? void 0 : _h.message,
+                      label: "Credit",
+                      name: "creditLine",
+                      value: currentAsset == null ? void 0 : currentAsset.creditLine,
+                      disabled: formUpdating || ((_j = creditLine == null ? void 0 : creditLine.excludeSources) == null ? void 0 : _j.includes((_i = currentAsset == null ? void 0 : currentAsset.source) == null ? void 0 : _i.name))
                     })]
                   })
                 }), /* @__PURE__ */jsx(TabPanel, {
@@ -9190,11 +9253,11 @@ const Tag = props => {
     })]
   });
 };
-const VirtualRow$1 = memo(_ref54 => {
+const VirtualRow$1 = memo(_ref55 => {
   let {
     isScrolling,
     item
-  } = _ref54;
+  } = _ref55;
   var _a;
   if (typeof item === "string") {
     return /* @__PURE__ */jsx(Flex, {
@@ -9300,12 +9363,12 @@ const TagsVirtualized = () => {
     totalCount: items.length
   });
 };
-const TagViewHeader = _ref55 => {
+const TagViewHeader = _ref56 => {
   let {
     allowCreate,
     light,
     title
-  } = _ref55;
+  } = _ref56;
   const {
     scheme
   } = useColorScheme();
@@ -9602,24 +9665,24 @@ var __template$7 = (cooked, raw) => __freeze$7(__defProp$8(cooked, "raw", {
 }));
 var _a$7, _b$4, _c$1, _d;
 const CardWrapper$1 = styled(Flex)(_a$7 || (_a$7 = __template$7(["\n  box-sizing: border-box;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n"])));
-const CardContainer = styled(Flex)(_ref56 => {
+const CardContainer = styled(Flex)(_ref57 => {
   let {
     picked,
     theme,
     updating
-  } = _ref56;
+  } = _ref57;
   return css(_c$1 || (_c$1 = __template$7(["\n      border: 1px solid transparent;\n      height: 100%;\n      pointer-events: ", ";\n      position: relative;\n      transition: all 300ms;\n      user-select: none;\n      width: 100%;\n\n      border: ", ";\n\n      ", "\n    "])), updating ? "none" : "auto", picked ? "1px solid ".concat(theme.sanity.color.spot.orange, " !important") : "1px solid inherit", !updating && css(_b$4 || (_b$4 = __template$7(["\n        @media (hover: hover) and (pointer: fine) {\n          &:hover {\n            border: 1px solid var(--card-border-color);\n          }\n        }\n      "]))));
 });
-const ContextActionContainer$2 = styled(Flex)(_ref57 => {
+const ContextActionContainer$2 = styled(Flex)(_ref58 => {
   let {
     scheme
-  } = _ref57;
+  } = _ref58;
   return css(_d || (_d = __template$7(["\n    cursor: pointer;\n    height: ", "px;\n    transition: all 300ms;\n    @media (hover: hover) and (pointer: fine) {\n      &:hover {\n        background: ", ";\n      }\n    }\n  "])), PANEL_HEIGHT, getSchemeColor(scheme, "bg"));
 });
-const StyledWarningOutlineIcon = styled(WarningFilledIcon)(_ref58 => {
+const StyledWarningOutlineIcon = styled(WarningFilledIcon)(_ref59 => {
   let {
     theme
-  } = _ref58;
+  } = _ref59;
   return {
     color: theme.sanity.color.spot.red
   };
@@ -10050,10 +10113,10 @@ const uploadsSlice = createSlice({
     }
   }
 });
-const uploadsAssetStartEpic = (action$, _state$, _ref59) => {
+const uploadsAssetStartEpic = (action$, _state$, _ref60) => {
   let {
     client
-  } = _ref59;
+  } = _ref60;
   return action$.pipe(filter(uploadsActions.uploadStart.match), mergeMap(action => {
     const {
       file,
@@ -10092,8 +10155,8 @@ const uploadsAssetStartEpic = (action$, _state$, _ref59) => {
     })))));
   }));
 };
-const uploadsAssetUploadEpic = (action$, state$) => action$.pipe(filter(uploadsActions.uploadRequest.match), withLatestFrom(state$), mergeMap(_ref60 => {
-  let [action, state] = _ref60;
+const uploadsAssetUploadEpic = (action$, state$) => action$.pipe(filter(uploadsActions.uploadRequest.match), withLatestFrom(state$), mergeMap(_ref61 => {
+  let [action, state] = _ref61;
   const {
     file,
     forceAsAssetType
@@ -10129,12 +10192,12 @@ const uploadsCompleteQueueEpic = action$ => action$.pipe(filter(UPLOADS_ACTIONS.
     assets: [action.payload.asset]
   }));
 }));
-const uploadsCheckRequestEpic = (action$, state$, _ref61) => {
+const uploadsCheckRequestEpic = (action$, state$, _ref62) => {
   let {
     client
-  } = _ref61;
-  return action$.pipe(filter(uploadsActions.checkRequest.match), withLatestFrom(state$), mergeMap(_ref62 => {
-    let [action, state] = _ref62;
+  } = _ref62;
+  return action$.pipe(filter(uploadsActions.checkRequest.match), withLatestFrom(state$), mergeMap(_ref63 => {
+    let [action, state] = _ref63;
     const {
       assets
     } = action.payload;
@@ -10314,11 +10377,11 @@ var __template$4 = (cooked, raw) => __freeze$4(__defProp$5(cooked, "raw", {
 var _a$4, _b$3;
 const CARD_HEIGHT = 220;
 const CARD_WIDTH = 240;
-const VirtualCell = memo(_ref63 => {
+const VirtualCell = memo(_ref64 => {
   let {
     item,
     selected
-  } = _ref63;
+  } = _ref64;
   if ((item == null ? void 0 : item.type) === "asset") {
     return /* @__PURE__ */jsx(CardAsset$1, {
       id: item.id,
@@ -10426,10 +10489,10 @@ var __template$3 = (cooked, raw) => __freeze$3(__defProp$4(cooked, "raw", {
   value: __freeze$3(raw || cooked.slice())
 }));
 var _a$3;
-const ContextActionContainer$1 = styled(Flex)(_ref64 => {
+const ContextActionContainer$1 = styled(Flex)(_ref65 => {
   let {
     scheme
-  } = _ref64;
+  } = _ref65;
   return css(_a$3 || (_a$3 = __template$3(["\n    cursor: pointer;\n    @media (hover: hover) and (pointer: fine) {\n      &:hover {\n        background: ", ";\n      }\n    }\n  "])), getSchemeColor(scheme, "bg"));
 });
 const TableHeader = () => {
@@ -10515,24 +10578,24 @@ var __template$2 = (cooked, raw) => __freeze$2(__defProp$3(cooked, "raw", {
 }));
 var _a$2, _b$2, _c;
 const REFERENCE_COUNT_VISIBILITY_DELAY = 750;
-const ContainerGrid = styled(Grid)(_ref65 => {
+const ContainerGrid = styled(Grid)(_ref66 => {
   let {
     scheme,
     selected,
     updating
-  } = _ref65;
+  } = _ref66;
   return css(_b$2 || (_b$2 = __template$2(["\n      align-items: center;\n      cursor: ", ";\n      height: 100%;\n      pointer-events: ", ";\n      user-select: none;\n      white-space: nowrap;\n\n      ", "\n    "])), selected ? "default" : "pointer", updating ? "none" : "auto", !updating && css(_a$2 || (_a$2 = __template$2(["\n        @media (hover: hover) and (pointer: fine) {\n          &:hover {\n            background: ", ";\n          }\n        }\n      "])), getSchemeColor(scheme, "bg")));
 });
-const ContextActionContainer = styled(Flex)(_ref66 => {
+const ContextActionContainer = styled(Flex)(_ref67 => {
   let {
     scheme
-  } = _ref66;
+  } = _ref67;
   return css(_c || (_c = __template$2(["\n    cursor: pointer;\n    @media (hover: hover) and (pointer: fine) {\n      &:hover {\n        background: ", ";\n      }\n    }\n  "])), getSchemeColor(scheme, "bg2"));
 });
-const StyledWarningIcon = styled(WarningFilledIcon)(_ref67 => {
+const StyledWarningIcon = styled(WarningFilledIcon)(_ref68 => {
   let {
     theme
-  } = _ref67;
+  } = _ref68;
   return {
     color: theme.sanity.color.spot.red
   };
@@ -10816,11 +10879,11 @@ const TableRowAsset = props => {
         textOverflow: "ellipsis",
         children: referenceCountVisible ? /* @__PURE__ */jsx(WithReferringDocuments, {
           id,
-          children: _ref68 => {
+          children: _ref69 => {
             let {
               isLoading,
               referringDocuments
-            } = _ref68;
+            } = _ref69;
             const uniqueDocuments = getUniqueDocuments(referringDocuments);
             return isLoading ? /* @__PURE__ */jsx(Fragment, {
               children: "-"
@@ -11000,11 +11063,11 @@ const TableRowUpload = props => {
     })]
   });
 };
-const VirtualRow = memo(_ref69 => {
+const VirtualRow = memo(_ref70 => {
   let {
     item,
     selected
-  } = _ref69;
+  } = _ref70;
   if ((item == null ? void 0 : item.type) === "asset") {
     return /* @__PURE__ */jsx(Box, {
       style: {
@@ -11411,29 +11474,6 @@ const TagsPanel = () => {
     })
   });
 };
-const ToolOptionsContext = createContext(null);
-const ToolOptionsProvider = _ref70 => {
-  let {
-    options,
-    children
-  } = _ref70;
-  const value = useMemo(() => ({
-    dropzone: {
-      maxSize: options == null ? void 0 : options.maximumUploadSize
-    }
-  }), [options == null ? void 0 : options.maximumUploadSize]);
-  return /* @__PURE__ */jsx(ToolOptionsContext.Provider, {
-    value,
-    children
-  });
-};
-const useToolOptions = () => {
-  const context = useContext(ToolOptionsContext);
-  if (!context) {
-    throw new Error("useToolOptions must be used within an ToolOptionsProvider");
-  }
-  return context;
-};
 var __freeze$1 = Object.freeze;
 var __defProp$1 = Object.defineProperty;
 var __template$1 = (cooked, raw) => __freeze$1(__defProp$1(cooked, "raw", {
@@ -11731,20 +11771,12 @@ const useRootPortalElement = () => {
   }, [container]);
   return container;
 };
-const Tool = _ref74 => {
-  let {
-    tool: {
-      options
-    }
-  } = _ref74;
-  return /* @__PURE__ */jsx(ToolOptionsProvider, {
-    options,
-    children: /* @__PURE__ */jsx(Flex, {
-      direction: "column",
-      height: "fill",
-      flex: 1,
-      children: /* @__PURE__ */jsx(Browser, {})
-    })
+const Tool = () => {
+  return /* @__PURE__ */jsx(Flex, {
+    direction: "column",
+    height: "fill",
+    flex: 1,
+    children: /* @__PURE__ */jsx(Browser, {})
   });
 };
 var mediaTag = {
@@ -11781,8 +11813,20 @@ const mediaAssetSource = {
   ...plugin,
   component: FormBuilderTool
 };
+const tool = {
+  ...plugin,
+  component: Tool
+};
 const media = definePlugin(options => ({
   name: "media",
+  studio: {
+    components: {
+      layout: props => /* @__PURE__ */jsx(ToolOptionsProvider, {
+        options,
+        children: props.renderDefault(props)
+      })
+    }
+  },
   form: {
     file: {
       assetSources: prev => {
@@ -11799,11 +11843,7 @@ const media = definePlugin(options => ({
     types: [mediaTag]
   },
   tools: prev => {
-    return [...prev, {
-      ...plugin,
-      options,
-      component: Tool
-    }];
+    return [...prev, tool];
   }
 }));
 export { media, mediaAssetSource };