sanity-plugin-media 3.0.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/index.d.mts +7 -4
  2. package/dist/index.d.ts +7 -4
  3. package/dist/index.js +436 -265
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +455 -285
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +19 -19
  8. package/src/components/AssetGridVirtualized/index.tsx +13 -2
  9. package/src/components/Browser/index.tsx +30 -41
  10. package/src/components/ButtonViewGroup/index.tsx +0 -1
  11. package/src/components/CardAsset/index.tsx +13 -14
  12. package/src/components/CardUpload/index.tsx +1 -1
  13. package/src/components/Controls/index.tsx +0 -1
  14. package/src/components/DebugControls/index.tsx +1 -0
  15. package/src/components/DialogAssetEdit/index.tsx +10 -3
  16. package/src/components/DialogConfirm/index.tsx +8 -1
  17. package/src/components/DialogSearchFacets/index.tsx +1 -1
  18. package/src/components/DialogTagCreate/index.tsx +1 -1
  19. package/src/components/DialogTagEdit/index.tsx +1 -1
  20. package/src/components/DialogTags/index.tsx +1 -1
  21. package/src/components/Dialogs/index.tsx +1 -1
  22. package/src/components/DocumentList/index.tsx +1 -1
  23. package/src/components/FileAssetPreview/index.tsx +1 -1
  24. package/src/components/FormFieldInputLabel/index.tsx +2 -1
  25. package/src/components/FormSubmitButton/index.tsx +1 -0
  26. package/src/components/Header/index.tsx +1 -1
  27. package/src/components/Image/index.tsx +4 -4
  28. package/src/components/OrderSelect/index.tsx +0 -1
  29. package/src/components/ReduxProvider/index.tsx +0 -1
  30. package/src/components/SearchFacet/index.tsx +4 -9
  31. package/src/components/SearchFacetNumber/index.tsx +1 -1
  32. package/src/components/SearchFacetSelect/index.tsx +1 -1
  33. package/src/components/SearchFacets/index.tsx +1 -1
  34. package/src/components/SearchFacetsControl/index.tsx +1 -1
  35. package/src/components/TableHeader/index.tsx +4 -6
  36. package/src/components/TableHeaderItem/index.tsx +1 -1
  37. package/src/components/TableRowAsset/index.tsx +37 -45
  38. package/src/components/TableRowUpload/index.tsx +6 -1
  39. package/src/components/Tag/index.tsx +1 -0
  40. package/src/components/TagIcon/index.tsx +0 -2
  41. package/src/components/TagView/index.tsx +1 -1
  42. package/src/components/TagsPanel/index.tsx +1 -1
  43. package/src/components/Tool/index.tsx +1 -1
  44. package/src/hooks/usePortalPopoverProps.ts +1 -0
  45. package/src/plugin.tsx +0 -1
package/dist/index.mjs CHANGED
@@ -1,9 +1,8 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import { useClient, useColorSchemeValue, useSchema, Preview, useDocumentStore, WithReferringDocuments, useFormValue, definePlugin } from "sanity";
3
3
  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";
4
- 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";
4
+ 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";
5
5
  import { useRef, useCallback, useEffect, createContext, useContext, useMemo, useState, forwardRef, memo, Component } from "react";
6
- import isHotkey from "is-hotkey";
7
6
  import groq from "groq";
8
7
  import { useSelector, useDispatch, Provider } from "react-redux";
9
8
  import { createAction, createSlice, isAnyOf, createSelector, combineReducers, configureStore } from "@reduxjs/toolkit";
@@ -29,6 +28,143 @@ import { FileIcon as FileIcon$1, defaultStyles } from "react-file-icon";
29
28
  import CreatableSelect from "react-select/creatable";
30
29
  import formatRelative from "date-fns/formatRelative";
31
30
  import { useDropzone } from "react-dropzone";
31
+ function getDefaultExportFromCjs(x) {
32
+ return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
33
+ }
34
+ var lib = {}, hasRequiredLib;
35
+ function requireLib() {
36
+ if (hasRequiredLib) return lib;
37
+ hasRequiredLib = 1, Object.defineProperty(lib, "__esModule", {
38
+ value: !0
39
+ });
40
+ for (var IS_MAC = typeof window < "u" && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform), MODIFIERS = {
41
+ alt: "altKey",
42
+ control: "ctrlKey",
43
+ meta: "metaKey",
44
+ shift: "shiftKey"
45
+ }, ALIASES = {
46
+ add: "+",
47
+ break: "pause",
48
+ cmd: "meta",
49
+ command: "meta",
50
+ ctl: "control",
51
+ ctrl: "control",
52
+ del: "delete",
53
+ down: "arrowdown",
54
+ esc: "escape",
55
+ ins: "insert",
56
+ left: "arrowleft",
57
+ mod: IS_MAC ? "meta" : "control",
58
+ opt: "alt",
59
+ option: "alt",
60
+ return: "enter",
61
+ right: "arrowright",
62
+ space: " ",
63
+ spacebar: " ",
64
+ up: "arrowup",
65
+ win: "meta",
66
+ windows: "meta"
67
+ }, CODES = {
68
+ backspace: 8,
69
+ tab: 9,
70
+ enter: 13,
71
+ shift: 16,
72
+ control: 17,
73
+ alt: 18,
74
+ pause: 19,
75
+ capslock: 20,
76
+ escape: 27,
77
+ " ": 32,
78
+ pageup: 33,
79
+ pagedown: 34,
80
+ end: 35,
81
+ home: 36,
82
+ arrowleft: 37,
83
+ arrowup: 38,
84
+ arrowright: 39,
85
+ arrowdown: 40,
86
+ insert: 45,
87
+ delete: 46,
88
+ meta: 91,
89
+ numlock: 144,
90
+ scrolllock: 145,
91
+ ";": 186,
92
+ "=": 187,
93
+ ",": 188,
94
+ "-": 189,
95
+ ".": 190,
96
+ "/": 191,
97
+ "`": 192,
98
+ "[": 219,
99
+ "\\": 220,
100
+ "]": 221,
101
+ "'": 222
102
+ }, f = 1; f < 20; f++)
103
+ CODES["f" + f] = 111 + f;
104
+ function isHotkey2(hotkey, options, event) {
105
+ options && !("byKey" in options) && (event = options, options = null), Array.isArray(hotkey) || (hotkey = [hotkey]);
106
+ var array = hotkey.map(function(string) {
107
+ return parseHotkey(string, options);
108
+ }), check = function(e) {
109
+ return array.some(function(object) {
110
+ return compareHotkey(object, e);
111
+ });
112
+ }, ret = event == null ? check : check(event);
113
+ return ret;
114
+ }
115
+ function isCodeHotkey(hotkey, event) {
116
+ return isHotkey2(hotkey, event);
117
+ }
118
+ function isKeyHotkey(hotkey, event) {
119
+ return isHotkey2(hotkey, { byKey: !0 }, event);
120
+ }
121
+ function parseHotkey(hotkey, options) {
122
+ var byKey = options && options.byKey, ret = {};
123
+ hotkey = hotkey.replace("++", "+add");
124
+ var values = hotkey.split("+"), length = values.length;
125
+ for (var k in MODIFIERS)
126
+ ret[MODIFIERS[k]] = !1;
127
+ var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
128
+ try {
129
+ for (var _iterator = values[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
130
+ var value = _step.value, optional = value.endsWith("?") && value.length > 1;
131
+ optional && (value = value.slice(0, -1));
132
+ var name = toKeyName(value), modifier = MODIFIERS[name];
133
+ if (value.length > 1 && !modifier && !ALIASES[value] && !CODES[name])
134
+ throw new TypeError('Unknown modifier: "' + value + '"');
135
+ (length === 1 || !modifier) && (byKey ? ret.key = name : ret.which = toKeyCode(value)), modifier && (ret[modifier] = optional ? null : !0);
136
+ }
137
+ } catch (err) {
138
+ _didIteratorError = !0, _iteratorError = err;
139
+ } finally {
140
+ try {
141
+ !_iteratorNormalCompletion && _iterator.return && _iterator.return();
142
+ } finally {
143
+ if (_didIteratorError)
144
+ throw _iteratorError;
145
+ }
146
+ }
147
+ return ret;
148
+ }
149
+ function compareHotkey(object, event) {
150
+ for (var key in object) {
151
+ var expected = object[key], actual = void 0;
152
+ if (expected != null && (key === "key" && event.key != null ? actual = event.key.toLowerCase() : key === "which" ? actual = expected === 91 && event.which === 93 ? 91 : event.which : actual = event[key], !(actual == null && expected === !1) && actual !== expected))
153
+ return !1;
154
+ }
155
+ return !0;
156
+ }
157
+ function toKeyCode(name) {
158
+ name = toKeyName(name);
159
+ var code = CODES[name] || name.toUpperCase().charCodeAt(0);
160
+ return code;
161
+ }
162
+ function toKeyName(name) {
163
+ return name = name.toLowerCase(), name = ALIASES[name] || name, name;
164
+ }
165
+ return lib.default = isHotkey2, lib.isHotkey = isHotkey2, lib.isCodeHotkey = isCodeHotkey, lib.isKeyHotkey = isKeyHotkey, lib.parseHotkey = parseHotkey, lib.compareHotkey = compareHotkey, lib.toKeyCode = toKeyCode, lib.toKeyName = toKeyName, lib;
166
+ }
167
+ var libExports = requireLib(), isHotkey = /* @__PURE__ */ getDefaultExportFromCjs(libExports);
32
168
  const useKeyPress = (hotkey, onPress) => {
33
169
  const keyPressed = useRef(!1), downHandler = useCallback(
34
170
  (e) => {
@@ -1696,6 +1832,7 @@ const ButtonViewGroup = () => {
1696
1832
  function usePortalPopoverProps() {
1697
1833
  const portal = usePortal();
1698
1834
  return {
1835
+ animate: !0,
1699
1836
  constrainSize: !0,
1700
1837
  floatingBoundary: portal.element,
1701
1838
  portal: !0,
@@ -1811,36 +1948,29 @@ const OrderSelect = () => {
1811
1948
  function getSchemeColor(scheme, colorKey) {
1812
1949
  return SCHEME_COLORS[colorKey]?.[scheme];
1813
1950
  }
1814
- const Container$1 = styled(Box)(({ scheme, theme }) => css`
1815
- background: ${getSchemeColor(scheme, "bg")};
1951
+ const Container$1 = styled(Box)(({ $scheme, theme }) => css`
1952
+ background: ${getSchemeColor($scheme, "bg")};
1816
1953
  border-radius: ${rem(theme.sanity.radius[2])};
1817
1954
  `), SearchFacet = (props) => {
1818
1955
  const { children, facet } = props, scheme = useColorSchemeValue(), dispatch = useDispatch(), handleClose = () => {
1819
1956
  dispatch(searchActions.facetsRemoveById({ facetId: facet.id }));
1820
1957
  };
1821
- return /* @__PURE__ */ jsx(
1822
- Container$1,
1823
- {
1824
- padding: [2, 2, 1],
1825
- scheme,
1826
- children: /* @__PURE__ */ jsxs(Flex, { align: ["flex-start", "flex-start", "center"], direction: ["column", "column", "row"], children: [
1827
- /* @__PURE__ */ jsx(Box, { paddingBottom: [3, 3, 0], paddingLeft: 1, paddingRight: 2, paddingTop: [1, 1, 0], children: /* @__PURE__ */ jsx(
1828
- Label,
1829
- {
1830
- size: 0,
1831
- style: {
1832
- whiteSpace: "nowrap"
1833
- },
1834
- children: facet.title
1835
- }
1836
- ) }),
1837
- /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
1838
- children,
1839
- /* @__PURE__ */ jsx(Box, { marginLeft: 1, paddingX: 2, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 0, children: /* @__PURE__ */ jsx(CloseIcon, { onClick: handleClose }) }) })
1840
- ] })
1841
- ] })
1842
- }
1843
- );
1958
+ 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: [
1959
+ /* @__PURE__ */ jsx(Box, { paddingBottom: [3, 3, 0], paddingLeft: 1, paddingRight: 2, paddingTop: [1, 1, 0], children: /* @__PURE__ */ jsx(
1960
+ Label,
1961
+ {
1962
+ size: 0,
1963
+ style: {
1964
+ whiteSpace: "nowrap"
1965
+ },
1966
+ children: facet.title
1967
+ }
1968
+ ) }),
1969
+ /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
1970
+ children,
1971
+ /* @__PURE__ */ jsx(Box, { marginLeft: 1, paddingX: 2, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 0, children: /* @__PURE__ */ jsx(CloseIcon, { onClick: handleClose }) }) })
1972
+ ] })
1973
+ ] }) });
1844
1974
  }, TextInputNumber = (props) => {
1845
1975
  const { onValueChange, value, ...remainingProps } = props;
1846
1976
  return /* @__PURE__ */ jsx(
@@ -2498,6 +2628,7 @@ const DebugControls = () => {
2498
2628
  /* @__PURE__ */ jsx(
2499
2629
  Tooltip,
2500
2630
  {
2631
+ animate: !0,
2501
2632
  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" }) }),
2502
2633
  fallbackPlacements: ["right", "left"],
2503
2634
  placement: "bottom",
@@ -2816,6 +2947,7 @@ const imageDprUrl = (asset, options) => {
2816
2947
  error && /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsx(
2817
2948
  Tooltip,
2818
2949
  {
2950
+ animate: !0,
2819
2951
  content: /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsxs(Text, { muted: !0, size: 1, children: [
2820
2952
  /* @__PURE__ */ jsx(StyledErrorOutlineIcon, { style: { marginRight: "0.1em" } }),
2821
2953
  error
@@ -2931,6 +3063,7 @@ const imageDprUrl = (asset, options) => {
2931
3063
  ] }) : content = "No unpublished changes" : content = "There are validation errors that need to be fixed before this document can be published", /* @__PURE__ */ jsx(
2932
3064
  Tooltip,
2933
3065
  {
3066
+ animate: !0,
2934
3067
  content: /* @__PURE__ */ jsx(Box, { padding: 3, style: { maxWidth: "185px" }, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: content }) }),
2935
3068
  disabled: "ontouchstart" in window,
2936
3069
  placement: "top",
@@ -2948,14 +3081,14 @@ const imageDprUrl = (asset, options) => {
2948
3081
  }
2949
3082
  );
2950
3083
  }, Image$1 = styled.img`
2951
- --checkerboard-color: ${(props) => props.scheme ? getSchemeColor(props.scheme, "bg2") : "inherit"};
3084
+ --checkerboard-color: ${(props) => props.$scheme ? getSchemeColor(props.$scheme, "bg2") : "inherit"};
2952
3085
 
2953
3086
  display: block;
2954
3087
  width: 100%;
2955
3088
  height: 100%;
2956
3089
  object-fit: contain;
2957
3090
 
2958
- ${(props) => props.showCheckerboard && css`
3091
+ ${(props) => props.$showCheckerboard && css`
2959
3092
  background-image: linear-gradient(45deg, var(--checkerboard-color) 25%, transparent 25%),
2960
3093
  linear-gradient(-45deg, var(--checkerboard-color) 25%, transparent 25%),
2961
3094
  linear-gradient(45deg, transparent 75%, var(--checkerboard-color) 75%),
@@ -3059,204 +3192,226 @@ const imageDprUrl = (asset, options) => {
3059
3192
  }
3060
3193
  }, [getValues, lastRemovedTagIds, setValue]), useEffect(() => {
3061
3194
  assetUpdatedPrev.current !== assetItem?.asset._updatedAt && reset(generateDefaultValues(assetItem?.asset)), assetUpdatedPrev.current = assetItem?.asset._updatedAt;
3062
- }, [assetItem?.asset, generateDefaultValues, reset]), currentAsset ? /* @__PURE__ */ jsxs(Dialog, { footer: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
3063
- /* @__PURE__ */ jsx(
3064
- Button,
3065
- {
3066
- disabled: formUpdating,
3067
- fontSize: 1,
3068
- mode: "bleed",
3069
- onClick: handleDelete,
3070
- text: "Delete",
3071
- tone: "critical"
3072
- }
3073
- ),
3074
- /* @__PURE__ */ jsx(
3075
- FormSubmitButton,
3076
- {
3077
- disabled: formUpdating || !isDirty || !isValid,
3078
- isValid,
3079
- lastUpdated: currentAsset?._updatedAt,
3080
- onClick: handleSubmit(onSubmit)
3081
- }
3082
- )
3083
- ] }) }), {}), header: "Asset details", id, onClose: handleClose, width: 3, children: [
3084
- /* @__PURE__ */ jsxs(Flex, { direction: ["column-reverse", "column-reverse", "row-reverse"], children: [
3085
- /* @__PURE__ */ jsx(Box, { flex: 1, marginTop: [5, 5, 0], padding: 4, children: /* @__PURE__ */ jsx(WithReferringDocuments, { documentStore, id: currentAsset._id, children: ({ isLoading, referringDocuments }) => {
3086
- const uniqueReferringDocuments = getUniqueDocuments(referringDocuments);
3087
- return /* @__PURE__ */ jsxs(Fragment, { children: [
3088
- /* @__PURE__ */ jsxs(TabList, { space: 2, children: [
3089
- /* @__PURE__ */ jsx(
3090
- Tab,
3091
- {
3092
- "aria-controls": "details-panel",
3093
- disabled: formUpdating,
3094
- id: "details-tab",
3095
- label: "Details",
3096
- onClick: () => setTabSection("details"),
3097
- selected: tabSection === "details",
3098
- size: 2
3099
- }
3100
- ),
3101
- /* @__PURE__ */ jsx(
3102
- Tab,
3103
- {
3104
- "aria-controls": "references-panel",
3105
- disabled: formUpdating,
3106
- id: "references-tab",
3107
- label: `References${!isLoading && Array.isArray(uniqueReferringDocuments) ? ` (${uniqueReferringDocuments.length})` : ""}`,
3108
- onClick: () => setTabSection("references"),
3109
- selected: tabSection === "references",
3110
- size: 2
3111
- }
3112
- )
3113
- ] }),
3114
- /* @__PURE__ */ jsxs(Box, { as: "form", marginTop: 4, onSubmit: handleSubmit(onSubmit), children: [
3115
- !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." }) }),
3116
- /* @__PURE__ */ jsx("button", { style: { display: "none" }, tabIndex: -1, type: "submit" }),
3117
- /* @__PURE__ */ jsx(
3118
- TabPanel,
3119
- {
3120
- "aria-labelledby": "details",
3121
- hidden: tabSection !== "details",
3122
- id: "details-panel",
3123
- children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
3124
- /* @__PURE__ */ jsx(
3125
- FormFieldInputTags,
3126
- {
3127
- control,
3128
- disabled: formUpdating,
3129
- error: errors?.opt?.media?.tags?.message,
3130
- label: "Tags",
3131
- name: "opt.media.tags",
3132
- onCreateTag: handleCreateTag,
3133
- options: allTagOptions,
3134
- placeholder: "Select or create...",
3135
- value: assetTagOptions
3136
- }
3137
- ),
3138
- /* @__PURE__ */ jsx(
3139
- FormFieldInputText,
3140
- {
3141
- ...register("originalFilename"),
3142
- disabled: formUpdating,
3143
- error: errors?.originalFilename?.message,
3144
- label: "Filename",
3145
- name: "originalFilename",
3146
- value: currentAsset?.originalFilename
3147
- }
3148
- ),
3149
- /* @__PURE__ */ jsx(
3150
- FormFieldInputText,
3151
- {
3152
- ...register("title"),
3153
- disabled: formUpdating,
3154
- error: errors?.title?.message,
3155
- label: "Title",
3156
- name: "title",
3157
- value: currentAsset?.title
3158
- }
3159
- ),
3160
- /* @__PURE__ */ jsx(
3161
- FormFieldInputText,
3162
- {
3163
- ...register("altText"),
3164
- disabled: formUpdating,
3165
- error: errors?.altText?.message,
3166
- label: "Alt Text",
3167
- name: "altText",
3168
- value: currentAsset?.altText
3169
- }
3170
- ),
3171
- /* @__PURE__ */ jsx(
3172
- FormFieldInputTextarea,
3173
- {
3174
- ...register("description"),
3175
- disabled: formUpdating,
3176
- error: errors?.description?.message,
3177
- label: "Description",
3178
- name: "description",
3179
- rows: 5,
3180
- value: currentAsset?.description
3181
- }
3182
- ),
3183
- creditLine?.enabled && /* @__PURE__ */ jsx(
3184
- FormFieldInputText,
3185
- {
3186
- ...register("creditLine"),
3187
- error: errors?.creditLine?.message,
3188
- label: "Credit",
3189
- name: "creditLine",
3190
- value: currentAsset?.creditLine,
3191
- disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
3192
- }
3193
- )
3194
- ] })
3195
- }
3196
- ),
3197
- /* @__PURE__ */ jsx(
3198
- TabPanel,
3199
- {
3200
- "aria-labelledby": "references",
3201
- hidden: tabSection !== "references",
3202
- id: "references-panel",
3203
- children: /* @__PURE__ */ jsx(Box, { marginTop: 5, children: assetItem?.asset && /* @__PURE__ */ jsx(
3204
- DocumentList,
3195
+ }, [assetItem?.asset, generateDefaultValues, reset]), currentAsset ? /* @__PURE__ */ jsxs(
3196
+ Dialog,
3197
+ {
3198
+ animate: !0,
3199
+ footer: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
3200
+ /* @__PURE__ */ jsx(
3201
+ Button,
3202
+ {
3203
+ disabled: formUpdating,
3204
+ fontSize: 1,
3205
+ mode: "bleed",
3206
+ onClick: handleDelete,
3207
+ text: "Delete",
3208
+ tone: "critical"
3209
+ }
3210
+ ),
3211
+ /* @__PURE__ */ jsx(
3212
+ FormSubmitButton,
3213
+ {
3214
+ disabled: formUpdating || !isDirty || !isValid,
3215
+ isValid,
3216
+ lastUpdated: currentAsset?._updatedAt,
3217
+ onClick: handleSubmit(onSubmit)
3218
+ }
3219
+ )
3220
+ ] }) }), {}),
3221
+ header: "Asset details",
3222
+ id,
3223
+ onClose: handleClose,
3224
+ width: 3,
3225
+ children: [
3226
+ /* @__PURE__ */ jsxs(Flex, { direction: ["column-reverse", "column-reverse", "row-reverse"], children: [
3227
+ /* @__PURE__ */ jsx(Box, { flex: 1, marginTop: [5, 5, 0], padding: 4, children: /* @__PURE__ */ jsx(WithReferringDocuments, { documentStore, id: currentAsset._id, children: ({ isLoading, referringDocuments }) => {
3228
+ const uniqueReferringDocuments = getUniqueDocuments(referringDocuments);
3229
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
3230
+ /* @__PURE__ */ jsxs(TabList, { space: 2, children: [
3231
+ /* @__PURE__ */ jsx(
3232
+ Tab,
3205
3233
  {
3206
- documents: uniqueReferringDocuments,
3207
- isLoading
3234
+ "aria-controls": "details-panel",
3235
+ disabled: formUpdating,
3236
+ id: "details-tab",
3237
+ label: "Details",
3238
+ onClick: () => setTabSection("details"),
3239
+ selected: tabSection === "details",
3240
+ size: 2
3208
3241
  }
3209
- ) })
3210
- }
3211
- )
3242
+ ),
3243
+ /* @__PURE__ */ jsx(
3244
+ Tab,
3245
+ {
3246
+ "aria-controls": "references-panel",
3247
+ disabled: formUpdating,
3248
+ id: "references-tab",
3249
+ label: `References${!isLoading && Array.isArray(uniqueReferringDocuments) ? ` (${uniqueReferringDocuments.length})` : ""}`,
3250
+ onClick: () => setTabSection("references"),
3251
+ selected: tabSection === "references",
3252
+ size: 2
3253
+ }
3254
+ )
3255
+ ] }),
3256
+ /* @__PURE__ */ jsxs(Box, { as: "form", marginTop: 4, onSubmit: handleSubmit(onSubmit), children: [
3257
+ !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." }) }),
3258
+ /* @__PURE__ */ jsx("button", { style: { display: "none" }, tabIndex: -1, type: "submit" }),
3259
+ /* @__PURE__ */ jsx(
3260
+ TabPanel,
3261
+ {
3262
+ "aria-labelledby": "details",
3263
+ hidden: tabSection !== "details",
3264
+ id: "details-panel",
3265
+ children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
3266
+ /* @__PURE__ */ jsx(
3267
+ FormFieldInputTags,
3268
+ {
3269
+ control,
3270
+ disabled: formUpdating,
3271
+ error: errors?.opt?.media?.tags?.message,
3272
+ label: "Tags",
3273
+ name: "opt.media.tags",
3274
+ onCreateTag: handleCreateTag,
3275
+ options: allTagOptions,
3276
+ placeholder: "Select or create...",
3277
+ value: assetTagOptions
3278
+ }
3279
+ ),
3280
+ /* @__PURE__ */ jsx(
3281
+ FormFieldInputText,
3282
+ {
3283
+ ...register("originalFilename"),
3284
+ disabled: formUpdating,
3285
+ error: errors?.originalFilename?.message,
3286
+ label: "Filename",
3287
+ name: "originalFilename",
3288
+ value: currentAsset?.originalFilename
3289
+ }
3290
+ ),
3291
+ /* @__PURE__ */ jsx(
3292
+ FormFieldInputText,
3293
+ {
3294
+ ...register("title"),
3295
+ disabled: formUpdating,
3296
+ error: errors?.title?.message,
3297
+ label: "Title",
3298
+ name: "title",
3299
+ value: currentAsset?.title
3300
+ }
3301
+ ),
3302
+ /* @__PURE__ */ jsx(
3303
+ FormFieldInputText,
3304
+ {
3305
+ ...register("altText"),
3306
+ disabled: formUpdating,
3307
+ error: errors?.altText?.message,
3308
+ label: "Alt Text",
3309
+ name: "altText",
3310
+ value: currentAsset?.altText
3311
+ }
3312
+ ),
3313
+ /* @__PURE__ */ jsx(
3314
+ FormFieldInputTextarea,
3315
+ {
3316
+ ...register("description"),
3317
+ disabled: formUpdating,
3318
+ error: errors?.description?.message,
3319
+ label: "Description",
3320
+ name: "description",
3321
+ rows: 5,
3322
+ value: currentAsset?.description
3323
+ }
3324
+ ),
3325
+ creditLine?.enabled && /* @__PURE__ */ jsx(
3326
+ FormFieldInputText,
3327
+ {
3328
+ ...register("creditLine"),
3329
+ error: errors?.creditLine?.message,
3330
+ label: "Credit",
3331
+ name: "creditLine",
3332
+ value: currentAsset?.creditLine,
3333
+ disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
3334
+ }
3335
+ )
3336
+ ] })
3337
+ }
3338
+ ),
3339
+ /* @__PURE__ */ jsx(
3340
+ TabPanel,
3341
+ {
3342
+ "aria-labelledby": "references",
3343
+ hidden: tabSection !== "references",
3344
+ id: "references-panel",
3345
+ children: /* @__PURE__ */ jsx(Box, { marginTop: 5, children: assetItem?.asset && /* @__PURE__ */ jsx(
3346
+ DocumentList,
3347
+ {
3348
+ documents: uniqueReferringDocuments,
3349
+ isLoading
3350
+ }
3351
+ ) })
3352
+ }
3353
+ )
3354
+ ] })
3355
+ ] });
3356
+ } }) }),
3357
+ /* @__PURE__ */ jsxs(Box, { flex: 1, padding: 4, children: [
3358
+ /* @__PURE__ */ jsxs(Box, { style: { aspectRatio: "1" }, children: [
3359
+ isFileAsset(currentAsset) && /* @__PURE__ */ jsx(FileAssetPreview, { asset: currentAsset }),
3360
+ isImageAsset(currentAsset) && /* @__PURE__ */ jsx(
3361
+ Image$1,
3362
+ {
3363
+ draggable: !1,
3364
+ $scheme: scheme,
3365
+ $showCheckerboard: !currentAsset?.metadata?.isOpaque,
3366
+ src: imageDprUrl(currentAsset, { height: 600, width: 600 })
3367
+ }
3368
+ )
3369
+ ] }),
3370
+ currentAsset && /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(AssetMetadata, { asset: currentAsset, item: assetItem }) })
3212
3371
  ] })
3213
- ] });
3214
- } }) }),
3215
- /* @__PURE__ */ jsxs(Box, { flex: 1, padding: 4, children: [
3216
- /* @__PURE__ */ jsxs(Box, { style: { aspectRatio: "1" }, children: [
3217
- isFileAsset(currentAsset) && /* @__PURE__ */ jsx(FileAssetPreview, { asset: currentAsset }),
3218
- isImageAsset(currentAsset) && /* @__PURE__ */ jsx(
3219
- Image$1,
3220
- {
3221
- draggable: !1,
3222
- scheme,
3223
- showCheckerboard: !currentAsset?.metadata?.isOpaque,
3224
- src: imageDprUrl(currentAsset, { height: 600, width: 600 })
3225
- }
3226
- )
3227
3372
  ] }),
3228
- currentAsset && /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(AssetMetadata, { asset: currentAsset, item: assetItem }) })
3229
- ] })
3230
- ] }),
3231
- children
3232
- ] }) : null;
3373
+ children
3374
+ ]
3375
+ }
3376
+ ) : null;
3233
3377
  }, DialogConfirm = (props) => {
3234
3378
  const { children, dialog } = props, dispatch = useDispatch(), handleClose = () => {
3235
3379
  dispatch(dialogActions.remove({ id: dialog?.id }));
3236
3380
  }, handleConfirm = () => {
3237
3381
  dialog?.closeDialogId && dispatch(dialogActions.remove({ id: dialog?.closeDialogId })), dialog?.confirmCallbackAction && dispatch(dialog.confirmCallbackAction), handleClose();
3238
3382
  };
3239
- return /* @__PURE__ */ jsxs(Dialog, { footer: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
3240
- /* @__PURE__ */ jsx(Button, { fontSize: 1, mode: "bleed", onClick: handleClose, text: "Cancel" }),
3241
- /* @__PURE__ */ jsx(
3242
- Button,
3243
- {
3244
- fontSize: 1,
3245
- onClick: handleConfirm,
3246
- text: dialog?.confirmText,
3247
- tone: dialog?.tone
3248
- }
3249
- )
3250
- ] }) }), {}), header: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
3251
- /* @__PURE__ */ jsx(Box, { paddingX: 1, children: /* @__PURE__ */ jsx(WarningOutlineIcon, {}) }),
3252
- /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: dialog?.headerTitle })
3253
- ] }), {}), id: "confirm", onClose: handleClose, width: 1, children: [
3254
- /* @__PURE__ */ jsx(Box, { paddingX: 4, paddingY: 4, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
3255
- dialog?.title && /* @__PURE__ */ jsx(Text, { size: 1, children: dialog.title }),
3256
- dialog?.description && /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsx("em", { children: dialog.description }) })
3257
- ] }) }),
3258
- children
3259
- ] });
3383
+ return /* @__PURE__ */ jsxs(
3384
+ Dialog,
3385
+ {
3386
+ animate: !0,
3387
+ footer: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
3388
+ /* @__PURE__ */ jsx(Button, { fontSize: 1, mode: "bleed", onClick: handleClose, text: "Cancel" }),
3389
+ /* @__PURE__ */ jsx(
3390
+ Button,
3391
+ {
3392
+ fontSize: 1,
3393
+ onClick: handleConfirm,
3394
+ text: dialog?.confirmText,
3395
+ tone: dialog?.tone
3396
+ }
3397
+ )
3398
+ ] }) }), {}),
3399
+ header: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
3400
+ /* @__PURE__ */ jsx(Box, { paddingX: 1, children: /* @__PURE__ */ jsx(WarningOutlineIcon, {}) }),
3401
+ /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: dialog?.headerTitle })
3402
+ ] }), {}),
3403
+ id: "confirm",
3404
+ onClose: handleClose,
3405
+ width: 1,
3406
+ children: [
3407
+ /* @__PURE__ */ jsx(Box, { paddingX: 4, paddingY: 4, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
3408
+ dialog?.title && /* @__PURE__ */ jsx(Text, { size: 1, children: dialog.title }),
3409
+ dialog?.description && /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsx("em", { children: dialog.description }) })
3410
+ ] }) }),
3411
+ children
3412
+ ]
3413
+ }
3414
+ );
3260
3415
  }, DialogSearchFacets = (props) => {
3261
3416
  const {
3262
3417
  children,
@@ -3264,7 +3419,7 @@ const imageDprUrl = (asset, options) => {
3264
3419
  } = props, dispatch = useDispatch(), handleClose = useCallback(() => {
3265
3420
  dispatch(dialogActions.clear());
3266
3421
  }, []);
3267
- return /* @__PURE__ */ jsxs(Dialog, { header: "Filters", id, onClose: handleClose, width: 1, children: [
3422
+ return /* @__PURE__ */ jsxs(Dialog, { animate: !0, header: "Filters", id, onClose: handleClose, width: 1, children: [
3268
3423
  /* @__PURE__ */ jsxs(Box, { padding: 3, children: [
3269
3424
  /* @__PURE__ */ jsx(SearchFacets, { layout: "stack" }),
3270
3425
  /* @__PURE__ */ jsx(SearchFacetsControl, {})
@@ -3297,7 +3452,7 @@ const imageDprUrl = (asset, options) => {
3297
3452
  creatingError && setError("name", {
3298
3453
  message: creatingError?.message
3299
3454
  });
3300
- }, [creatingError, setError]), /* @__PURE__ */ jsxs(Dialog, { footer: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsx(Flex, { justify: "flex-end", children: /* @__PURE__ */ jsx(
3455
+ }, [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(
3301
3456
  FormSubmitButton,
3302
3457
  {
3303
3458
  disabled: formUpdating || !isDirty || !isValid,
@@ -3380,7 +3535,7 @@ const imageDprUrl = (asset, options) => {
3380
3535
  return () => {
3381
3536
  subscriptionAsset?.unsubscribe();
3382
3537
  };
3383
- }, [client, handleTagUpdate, tagItem?.tag]), currentTag ? /* @__PURE__ */ jsxs(Dialog, { footer: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
3538
+ }, [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: [
3384
3539
  /* @__PURE__ */ jsx(
3385
3540
  Button,
3386
3541
  {
@@ -3435,6 +3590,7 @@ const imageDprUrl = (asset, options) => {
3435
3590
  return /* @__PURE__ */ jsx(
3436
3591
  Tooltip,
3437
3592
  {
3593
+ animate: !0,
3438
3594
  content: /* @__PURE__ */ jsx(Container$2, { padding: 2, width: 0, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: tooltip }) }),
3439
3595
  disabled: "ontouchstart" in window,
3440
3596
  placement: "top",
@@ -3673,7 +3829,7 @@ const imageDprUrl = (asset, options) => {
3673
3829
  } = props, dispatch = useDispatch(), handleClose = useCallback(() => {
3674
3830
  dispatch(dialogActions.clear());
3675
3831
  }, []);
3676
- return /* @__PURE__ */ jsxs(Dialog, { header: "All Tags", id, onClose: handleClose, width: 1, children: [
3832
+ return /* @__PURE__ */ jsxs(Dialog, { animate: !0, header: "All Tags", id, onClose: handleClose, width: 1, children: [
3677
3833
  /* @__PURE__ */ jsx(
3678
3834
  Box,
3679
3835
  {
@@ -3781,18 +3937,18 @@ const imageDprUrl = (asset, options) => {
3781
3937
  position: relative;
3782
3938
  width: 100%;
3783
3939
  `, CardContainer = styled(Flex)(
3784
- ({ picked, theme, updating }) => css`
3940
+ ({ $picked, theme, $updating }) => css`
3785
3941
  border: 1px solid transparent;
3786
3942
  height: 100%;
3787
- pointer-events: ${updating ? "none" : "auto"};
3943
+ pointer-events: ${$updating ? "none" : "auto"};
3788
3944
  position: relative;
3789
3945
  transition: all 300ms;
3790
3946
  user-select: none;
3791
3947
  width: 100%;
3792
3948
 
3793
- border: ${picked ? `1px solid ${theme.sanity.color.spot.orange} !important` : "1px solid inherit"};
3949
+ border: ${$picked ? `1px solid ${theme.sanity.color.spot.orange} !important` : "1px solid inherit"};
3794
3950
 
3795
- ${!updating && css`
3951
+ ${!$updating && css`
3796
3952
  @media (hover: hover) and (pointer: fine) {
3797
3953
  &:hover {
3798
3954
  border: 1px solid var(--card-border-color);
@@ -3801,14 +3957,13 @@ const imageDprUrl = (asset, options) => {
3801
3957
  `}
3802
3958
  `
3803
3959
  ), ContextActionContainer$2 = styled(Flex)(
3804
- // @ts-expect-error - fix typings later
3805
- ({ scheme }) => css`
3960
+ ({ $scheme }) => css`
3806
3961
  cursor: pointer;
3807
3962
  height: ${PANEL_HEIGHT}px;
3808
3963
  transition: all 300ms;
3809
3964
  @media (hover: hover) and (pointer: fine) {
3810
3965
  &:hover {
3811
- background: ${getSchemeColor(scheme, "bg")};
3966
+ background: ${getSchemeColor($scheme, "bg")};
3812
3967
  }
3813
3968
  }
3814
3969
  `
@@ -3828,7 +3983,7 @@ const imageDprUrl = (asset, options) => {
3828
3983
  }, handleContextActionClick = (e) => {
3829
3984
  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 }));
3830
3985
  }, opacityContainer = updating ? 0.5 : 1, opacityPreview = selected || updating ? 0.25 : 1;
3831
- return /* @__PURE__ */ jsx(CardWrapper$1, { padding: 1, children: /* @__PURE__ */ jsxs(CardContainer, { direction: "column", picked, updating: item.updating, children: [
3986
+ return /* @__PURE__ */ jsx(CardWrapper$1, { padding: 1, children: /* @__PURE__ */ jsxs(CardContainer, { direction: "column", $picked: picked, $updating: item.updating, children: [
3832
3987
  /* @__PURE__ */ jsxs(
3833
3988
  Box,
3834
3989
  {
@@ -3844,8 +3999,8 @@ const imageDprUrl = (asset, options) => {
3844
3999
  Image$1,
3845
4000
  {
3846
4001
  draggable: !1,
3847
- scheme,
3848
- showCheckerboard: !isOpaque,
4002
+ $scheme: scheme,
4003
+ $showCheckerboard: !isOpaque,
3849
4004
  src: imageDprUrl(asset, { height: 250, width: 250 }),
3850
4005
  style: {
3851
4006
  draggable: !1,
@@ -3894,7 +4049,7 @@ const imageDprUrl = (asset, options) => {
3894
4049
  align: "center",
3895
4050
  onClick: handleContextActionClick,
3896
4051
  paddingX: 1,
3897
- scheme,
4052
+ $scheme: scheme,
3898
4053
  style: { opacity: opacityContainer },
3899
4054
  children: [
3900
4055
  onSelect ? /* @__PURE__ */ jsx(
@@ -3933,6 +4088,7 @@ const imageDprUrl = (asset, options) => {
3933
4088
  children: /* @__PURE__ */ jsx(
3934
4089
  Tooltip,
3935
4090
  {
4091
+ animate: !0,
3936
4092
  content: /* @__PURE__ */ jsx(Container$2, { padding: 2, width: 0, children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) }),
3937
4093
  placement: "left",
3938
4094
  portal: !0,
@@ -4242,7 +4398,7 @@ const CardWrapper = styled(Flex)`
4242
4398
  Image$1,
4243
4399
  {
4244
4400
  draggable: !1,
4245
- scheme,
4401
+ $scheme: scheme,
4246
4402
  src: item.objectUrl,
4247
4403
  style: {
4248
4404
  opacity: 0.4
@@ -4301,16 +4457,26 @@ const CardWrapper = styled(Flex)`
4301
4457
  ) });
4302
4458
  }, CARD_HEIGHT = 220, CARD_WIDTH = 240, VirtualCell = memo(
4303
4459
  ({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsx(CardAsset$1, { id: item.id, selected }) : item?.type === "upload" ? /* @__PURE__ */ jsx(CardUpload, { id: item.id }) : null
4304
- ), ItemContainer = styled.div`
4460
+ ), StyledItemContainer = styled.div`
4305
4461
  height: ${CARD_HEIGHT}px;
4306
4462
  width: ${CARD_WIDTH}px;
4307
- `, ListContainer = styled.div`
4463
+ `;
4464
+ function ItemContainer(props) {
4465
+ const { context, ...rest } = props;
4466
+ return /* @__PURE__ */ jsx(StyledItemContainer, { ...rest });
4467
+ }
4468
+ const StyledListContainer = styled.div`
4308
4469
  display: grid;
4309
4470
  grid-template-columns: repeat(auto-fill, ${CARD_WIDTH}px);
4310
4471
  grid-template-rows: repeat(auto-fill, ${CARD_HEIGHT}px);
4311
4472
  justify-content: center;
4312
4473
  margin: 0 auto;
4313
- `, AssetGridVirtualized = (props) => {
4474
+ `;
4475
+ function ListContainer(props) {
4476
+ const { context, ...rest } = props;
4477
+ return /* @__PURE__ */ jsx(StyledListContainer, { ...rest });
4478
+ }
4479
+ const AssetGridVirtualized = (props) => {
4314
4480
  const { items, onLoadMore } = props, selectedAssets = useTypedSelector((state) => state.selected.assets), selectedIds = selectedAssets && selectedAssets.map((asset) => asset._id) || [], totalCount = items?.length;
4315
4481
  return totalCount === 0 ? null : /* @__PURE__ */ jsx(
4316
4482
  VirtuosoGrid,
@@ -4365,12 +4531,11 @@ const CardWrapper = styled(Flex)`
4365
4531
  }
4366
4532
  ) });
4367
4533
  }, ContextActionContainer$1 = styled(Flex)(
4368
- // @ts-expect-error - fix typings later
4369
- ({ scheme }) => css`
4534
+ ({ $scheme }) => css`
4370
4535
  cursor: pointer;
4371
4536
  @media (hover: hover) and (pointer: fine) {
4372
4537
  &:hover {
4373
- background: ${getSchemeColor(scheme, "bg")};
4538
+ background: ${getSchemeColor($scheme, "bg")};
4374
4539
  }
4375
4540
  }
4376
4541
  `
@@ -4404,7 +4569,7 @@ const CardWrapper = styled(Flex)`
4404
4569
  align: "center",
4405
4570
  justify: "center",
4406
4571
  onClick: handleContextActionClick,
4407
- scheme,
4572
+ $scheme: scheme,
4408
4573
  style: {
4409
4574
  height: "100%",
4410
4575
  position: "relative"
@@ -4434,36 +4599,31 @@ const CardWrapper = styled(Flex)`
4434
4599
  ]
4435
4600
  }
4436
4601
  );
4437
- }, REFERENCE_COUNT_VISIBILITY_DELAY = 750, ContainerGrid = styled(Grid)(
4438
- // @ts-expect-error - fix typings later
4439
- ({
4440
- scheme,
4441
- selected,
4442
- updating
4443
- }) => css`
4444
- align-items: center;
4445
- cursor: ${selected ? "default" : "pointer"};
4446
- height: 100%;
4447
- pointer-events: ${updating ? "none" : "auto"};
4448
- user-select: none;
4449
- white-space: nowrap;
4602
+ }, REFERENCE_COUNT_VISIBILITY_DELAY = 750, ContainerGrid = styled(Grid)(({ $scheme, $selected, $updating }) => css`
4603
+ align-items: center;
4604
+ cursor: ${$selected ? "default" : "pointer"};
4605
+ height: 100%;
4606
+ pointer-events: ${$updating ? "none" : "auto"};
4607
+ user-select: none;
4608
+ white-space: nowrap;
4450
4609
 
4451
- ${!updating && css`
4452
- @media (hover: hover) and (pointer: fine) {
4453
- &:hover {
4454
- background: ${getSchemeColor(scheme, "bg")};
4455
- }
4610
+ ${!$updating && css`
4611
+ @media (hover: hover) and (pointer: fine) {
4612
+ &:hover {
4613
+ background: ${getSchemeColor($scheme, "bg")};
4456
4614
  }
4457
- `}
4458
- `
4459
- ), ContextActionContainer = styled(Flex)(({ scheme }) => css`
4460
- cursor: pointer;
4461
- @media (hover: hover) and (pointer: fine) {
4462
- &:hover {
4463
- background: ${getSchemeColor(scheme, "bg2")};
4464
4615
  }
4465
- }
4466
- `), StyledWarningIcon = styled(WarningFilledIcon)(({ theme }) => ({
4616
+ `}
4617
+ `), ContextActionContainer = styled(Flex)(
4618
+ ({ $scheme }) => css`
4619
+ cursor: pointer;
4620
+ @media (hover: hover) and (pointer: fine) {
4621
+ &:hover {
4622
+ background: ${getSchemeColor($scheme, "bg2")};
4623
+ }
4624
+ }
4625
+ `
4626
+ ), StyledWarningIcon = styled(WarningFilledIcon)(({ theme }) => ({
4467
4627
  color: theme.sanity.color.spot.red
4468
4628
  })), TableRowAsset = (props) => {
4469
4629
  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(
@@ -4486,21 +4646,21 @@ const CardWrapper = styled(Flex)`
4486
4646
  ContainerGrid,
4487
4647
  {
4488
4648
  onClick: selected ? void 0 : handleClick,
4489
- scheme,
4490
- selected,
4649
+ $scheme: scheme,
4650
+ $selected: selected,
4491
4651
  style: {
4492
4652
  gridColumnGap: mediaIndex < 3 ? 0 : "16px",
4493
4653
  gridRowGap: 0,
4494
4654
  gridTemplateColumns: mediaIndex < 3 ? GRID_TEMPLATE_COLUMNS.SMALL : GRID_TEMPLATE_COLUMNS.LARGE,
4495
4655
  gridTemplateRows: mediaIndex < 3 ? "auto" : "1fr"
4496
4656
  },
4497
- updating: item.updating,
4657
+ $updating: item.updating,
4498
4658
  children: [
4499
4659
  /* @__PURE__ */ jsx(
4500
4660
  ContextActionContainer,
4501
4661
  {
4502
4662
  onClick: handleContextActionClick,
4503
- scheme,
4663
+ $scheme: scheme,
4504
4664
  style: {
4505
4665
  alignItems: "center",
4506
4666
  gridColumn: 1,
@@ -4550,8 +4710,8 @@ const CardWrapper = styled(Flex)`
4550
4710
  Image$1,
4551
4711
  {
4552
4712
  draggable: !1,
4553
- scheme,
4554
- showCheckerboard: !isOpaque,
4713
+ $scheme: scheme,
4714
+ $showCheckerboard: !isOpaque,
4555
4715
  src: imageDprUrl(asset, { height: 100, width: 100 })
4556
4716
  }
4557
4717
  )
@@ -4678,6 +4838,7 @@ const CardWrapper = styled(Flex)`
4678
4838
  children: error && /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(
4679
4839
  Tooltip,
4680
4840
  {
4841
+ animate: !0,
4681
4842
  content: /* @__PURE__ */ jsx(Container$2, { padding: 2, width: 0, children: /* @__PURE__ */ jsx(Text, { size: 1, children: error }) }),
4682
4843
  placement: "left",
4683
4844
  portal: !0,
@@ -4742,7 +4903,15 @@ const TableRowUpload = (props) => {
4742
4903
  width: "100px"
4743
4904
  },
4744
4905
  children: /* @__PURE__ */ jsxs(Box, { style: { height: "100%", position: "relative" }, children: [
4745
- item.assetType === "image" && item?.objectUrl && /* @__PURE__ */ jsx(Image$1, { draggable: !1, scheme, src: item.objectUrl, style: { opacity: 0.25 } }),
4906
+ item.assetType === "image" && item?.objectUrl && /* @__PURE__ */ jsx(
4907
+ Image$1,
4908
+ {
4909
+ draggable: !1,
4910
+ $scheme: scheme,
4911
+ src: item.objectUrl,
4912
+ style: { opacity: 0.25 }
4913
+ }
4914
+ ),
4746
4915
  item.assetType === "file" && /* @__PURE__ */ jsx("div", { style: { height: "100%", opacity: 0.1 }, children: /* @__PURE__ */ jsx(FileIcon, { width: "40px" }) }),
4747
4916
  !isComplete && percentLoaded !== 100 && /* @__PURE__ */ jsx(
4748
4917
  Flex,
@@ -5230,14 +5399,15 @@ const UploadDropzone = (props) => {
5230
5399
  children
5231
5400
  ] }) });
5232
5401
  }, BrowserContent = ({ onClose }) => {
5233
- const client = useVersionedClient(), [portalElement, setPortalElement] = useState(null), dispatch = useDispatch(), handleAssetUpdate = (update) => {
5234
- const { documentId, result, transition } = update;
5235
- transition === "appear" && dispatch(assetsActions.listenerCreateQueue({ asset: result })), transition === "disappear" && dispatch(assetsActions.listenerDeleteQueue({ assetId: documentId })), transition === "update" && dispatch(assetsActions.listenerUpdateQueue({ asset: result }));
5236
- }, handleTagUpdate = (update) => {
5237
- const { documentId, result, transition } = update;
5238
- transition === "appear" && dispatch(tagsActions.listenerCreateQueue({ tag: result })), transition === "disappear" && dispatch(tagsActions.listenerDeleteQueue({ tagId: documentId })), transition === "update" && dispatch(tagsActions.listenerUpdateQueue({ tag: result }));
5239
- };
5402
+ const client = useVersionedClient(), [portalElement, setPortalElement] = useState(null), dispatch = useDispatch();
5240
5403
  return useEffect(() => {
5404
+ const handleAssetUpdate = (update) => {
5405
+ const { documentId, result, transition } = update;
5406
+ transition === "appear" && dispatch(assetsActions.listenerCreateQueue({ asset: result })), transition === "disappear" && dispatch(assetsActions.listenerDeleteQueue({ assetId: documentId })), transition === "update" && dispatch(assetsActions.listenerUpdateQueue({ asset: result }));
5407
+ }, handleTagUpdate = (update) => {
5408
+ const { documentId, result, transition } = update;
5409
+ transition === "appear" && dispatch(tagsActions.listenerCreateQueue({ tag: result })), transition === "disappear" && dispatch(tagsActions.listenerDeleteQueue({ tagId: documentId })), transition === "update" && dispatch(tagsActions.listenerUpdateQueue({ tag: result }));
5410
+ };
5241
5411
  dispatch(assetsActions.loadPageIndex({ pageIndex: 0 })), dispatch(tagsActions.fetchRequest());
5242
5412
  const subscriptionAsset = client.listen(
5243
5413
  groq`*[_type in ["sanity.fileAsset", "sanity.imageAsset"] && !(_id in path("drafts.**"))]`
@@ -5245,7 +5415,7 @@ const UploadDropzone = (props) => {
5245
5415
  return () => {
5246
5416
  subscriptionAsset?.unsubscribe(), subscriptionTag?.unsubscribe();
5247
5417
  };
5248
- }, []), /* @__PURE__ */ jsx(PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxs(UploadDropzone, { children: [
5418
+ }, [client, dispatch]), /* @__PURE__ */ jsx(PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxs(UploadDropzone, { children: [
5249
5419
  /* @__PURE__ */ jsx(Dialogs, {}),
5250
5420
  /* @__PURE__ */ jsx(Notifications, {}),
5251
5421
  /* @__PURE__ */ jsx(Card, { display: "flex", height: "fill", ref: setPortalElement, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", flex: 1, children: [
@@ -5262,7 +5432,7 @@ const UploadDropzone = (props) => {
5262
5432
  ] }) })
5263
5433
  ] }) });
5264
5434
  }, Browser = (props) => {
5265
- const client = useVersionedClient(), scheme = useColorSchemeValue();
5435
+ const client = useVersionedClient();
5266
5436
  return /* @__PURE__ */ jsx(
5267
5437
  ReduxProvider,
5268
5438
  {
@@ -5270,10 +5440,10 @@ const UploadDropzone = (props) => {
5270
5440
  client,
5271
5441
  document: props?.document,
5272
5442
  selectedAssets: props?.selectedAssets,
5273
- children: /* @__PURE__ */ jsx(ThemeProvider, { scheme, theme: studioTheme, children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsxs(AssetBrowserDispatchProvider, { onSelect: props?.onSelect, children: [
5443
+ children: /* @__PURE__ */ jsxs(AssetBrowserDispatchProvider, { onSelect: props?.onSelect, children: [
5274
5444
  /* @__PURE__ */ jsx(GlobalStyle, {}),
5275
5445
  /* @__PURE__ */ jsx(BrowserContent, { onClose: props?.onClose })
5276
- ] }) }) })
5446
+ ] })
5277
5447
  }
5278
5448
  );
5279
5449
  }, FormBuilderTool = (props) => {