@electrolux-oss/sanity-plugin-media 4.1.0 → 5.0.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useClient, useSchema, Preview, useColorSchemeValue, useDocumentStore, WithReferringDocuments, useCurrentUser, useFormValue, definePlugin } from "sanity";
+import { useClient, useSchema, Preview, useColorSchemeValue, useDocumentStore, WithReferringDocuments, useCurrentUser, useFormValue, defineType, defineField, definePlugin } from "sanity";
 import { forwardRef, createContext, useContext, useState, useEffect, useMemo, useRef, useCallback, memo } from "react";
-import { usePortal, Popover, Button, Text, Box, Stack, Inline, Flex, Dialog as Dialog$1, Card, Tooltip, TextInput, studioTheme, rem, TextArea, TabList, Tab, TabPanel, Label, MenuButton, Menu as Menu$2, MenuItem, MenuDivider, MenuGroup, Container as Container$2, useToast, PortalProvider, useMediaIndex, Switch, Spinner, Checkbox, Grid, useLayer, Portal } from "@sanity/ui";
+import { usePortal, Button, Text, Box, Stack, Inline, Flex, Dialog as Dialog$1, Card, TextInput, useTheme_v2, rem, TextArea, TabList, Tab, TabPanel, Label, Container as Container$2, PortalProvider, useMediaIndex, Switch, Spinner, Checkbox, Grid, useLayer, Portal } from "@sanity/ui";
 import { useSelector, useDispatch, Provider } from "react-redux";
 import groq from "groq";
 import { nanoid } from "nanoid";
@@ -17,13 +17,18 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
 import { format, formatRelative } from "date-fns";
 import filesize from "filesize";
+import { Popover } from "@sanity/ui/popover";
 import copy from "copy-to-clipboard";
 import { useIntentLink } from "sanity/router";
+import { getTheme_v2 } from "@sanity/ui/theme";
 import { FileIcon as FileIcon$1, defaultStyles } from "react-file-icon";
+import { Tooltip } from "@sanity/ui/tooltip";
 import { hues, white } from "@sanity/color";
 import CreatableSelect from "react-select/creatable";
 import Select, { components } from "react-select";
 import { Virtuoso, VirtuosoGrid, GroupedVirtuoso } from "react-virtuoso";
+import { MenuButton, Menu as Menu$2, MenuItem, MenuDivider, MenuGroup } from "@sanity/ui/menu";
+import { useToast } from "@sanity/ui/toast";
 import { isHotkey } from "is-hotkey-esm";
 import { useNProgress } from "@tanem/react-nprogress";
 import { useDropzone } from "react-dropzone";
@@ -1760,13 +1765,13 @@ const customScrollbar = css`
     throw new Error("useToolOptions must be used within an ToolOptionsProvider");
   return context;
 }, 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" })
+  label: z.string().trim().min(1, { error: "Label cannot be empty" }),
+  value: z.string().trim().min(1, { error: "Value cannot be empty" })
 }), tagFormSchema = z.object({
-  name: z.string().min(1, { message: "Name cannot be empty" })
+  name: z.string().min(1, { error: "Name cannot be empty" })
 }), createAssetFormSchema = (languages, validateAltTexts = !1) => {
   const defaultLanguage = languages.find((lang) => lang.default), createAltTextsSchema = () => {
-    const baseSchema = z.record(z.string().nullable());
+    const baseSchema = z.record(z.string(), z.string().nullable());
     return validateAltTexts ? baseSchema.refine(
       (altTexts) => {
         if (defaultLanguage) {
@@ -1778,7 +1783,7 @@ const customScrollbar = css`
         );
       },
       {
-        message: 'The default language must have alt text. Please fill in the default language field and click "Save and close".'
+        error: 'The default language must have alt text. Please fill in the default language field and click "Save and close".'
       }
     ) : baseSchema;
   };
@@ -1792,7 +1797,7 @@ const customScrollbar = css`
         tags: z.array(tagOptionSchema).nullable()
       })
     }),
-    originalFilename: z.string().trim().min(1, { message: "Filename cannot be empty" }),
+    originalFilename: z.string().trim().min(1, { error: "Filename cannot be empty" }),
     title: z.string().trim().optional()
   });
 };
@@ -1993,7 +1998,7 @@ const ButtonAssetCopy = ({ disabled, url }) => {
     window.location.href = `${asset.url}?dl=${asset.originalFilename}`;
   };
   return /* @__PURE__ */ jsxs(Box, { marginTop: 3, children: [
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Stack, { gap: 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() }),
@@ -2014,7 +2019,7 @@ const ButtonAssetCopy = ({ disabled, url }) => {
           }
         }
       ),
-      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Stack, { gap: 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` }),
@@ -2028,7 +2033,7 @@ const ButtonAssetCopy = ({ disabled, url }) => {
         )
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx(Box, { marginTop: 5, children: /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
+    /* @__PURE__ */ jsx(Box, { marginTop: 5, children: /* @__PURE__ */ jsxs(Inline, { gap: 2, children: [
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -2045,7 +2050,7 @@ const ButtonAssetCopy = ({ disabled, url }) => {
   ] });
 }, 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)) }) });
+  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, { gap: 2, children: documents?.map((doc) => /* @__PURE__ */ jsx(ReferringDocument, { doc, schemaType: schema.get(doc._type) }, doc._id)) }) });
 }, ReferringDocument = (props) => {
   const { doc, schemaType } = props, { onClick } = useIntentLink({
     intent: "edit",
@@ -2057,7 +2062,7 @@ const ButtonAssetCopy = ({ disabled, url }) => {
   ] }) });
 }, Container$1 = styled(Box)(({ theme }) => css`
     text {
-      font-family: ${theme.sanity.fonts.text.family} !important;
+      font-family: ${getTheme_v2(theme).font.text.family} !important;
       font-size: 8px !important;
       font-weight: 500 !important;
     }
@@ -2101,11 +2106,11 @@ const ButtonAssetCopy = ({ disabled, url }) => {
     })
   });
 }), StyledErrorOutlineIcon = styled(ErrorOutlineIcon)(({ theme }) => ({
-  color: theme.sanity.color.spot.red
+  color: getTheme_v2(theme).color.avatar.red.bg
 })), FormFieldInputLabel = (props) => {
   const { description, error, label, name } = props;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { marginY: 3, children: /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
+    /* @__PURE__ */ jsx(Box, { marginY: 3, children: /* @__PURE__ */ jsxs(Inline, { gap: 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,
@@ -2179,30 +2184,6 @@ const ButtonAssetCopy = ({ disabled, url }) => {
   bg2: {
     dark: hues.gray[900].hex,
     light: hues.gray[100].hex
-  },
-  inputEnabledBorder: {
-    dark: studioTheme.color.dark.default.input.default.enabled.border,
-    light: studioTheme.color.light.default.input.default.enabled.border
-  },
-  inputHoveredBorder: {
-    dark: studioTheme.color.dark.default.input.default.hovered.border,
-    light: studioTheme.color.light.default.input.default.hovered.border
-  },
-  mutedHoveredBg: {
-    dark: studioTheme.color.dark.primary.muted.primary.hovered.bg,
-    light: studioTheme.color.light.primary.muted.primary.hovered.bg
-  },
-  mutedHoveredFg: {
-    dark: studioTheme.color.dark.primary.muted.primary.hovered.fg,
-    light: studioTheme.color.light.primary.muted.primary.hovered.fg
-  },
-  mutedSelectedBg: {
-    dark: studioTheme.color.dark.primary.muted.primary.selected.bg,
-    light: studioTheme.color.light.primary.muted.primary.selected.bg
-  },
-  spotBlue: {
-    dark: studioTheme.color.dark.primary.spot.blue,
-    light: studioTheme.color.light.primary.spot.blue
   }
 };
 function getSchemeColor(scheme, colorKey) {
@@ -2275,87 +2256,90 @@ const Image$1 = styled.img`
       strokeLinejoin: "round"
     })
   });
-}), { radius: themeRadius$1, space: themeSpace$1 } = studioTheme, reactSelectStyles$1 = (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")},
+}), useReactSelectStyles$1 = () => {
+  const scheme = useColorSchemeValue(), { color, font, radius, space } = useTheme_v2();
+  return {
+    control: (styles, { isFocused }) => {
+      let boxShadow = "inset 0 0 0 1px var(--card-border-color)";
+      return isFocused && (boxShadow = `inset 0 0 0 1px ${color.input.default.enabled.border},
         0 0 0 1px var(--card-bg-color),
         0 0 0 3px var(--card-focus-ring-color) !important`), {
+        ...styles,
+        backgroundColor: "var(--card-bg-color)",
+        color: "inherit",
+        border: "none",
+        borderRadius: radius[1],
+        boxShadow,
+        margin: 0,
+        minHeight: "35px",
+        outline: "none",
+        padding: rem(space[1]),
+        transition: "none",
+        "&:hover": {
+          boxShadow: `inset 0 0 0 1px ${color.input.default.hovered.border}`
+        }
+      };
+    },
+    indicatorsContainer: (styles, { isDisabled }) => ({
       ...styles,
-      backgroundColor: "var(--card-bg-color)",
-      color: "inherit",
-      border: "none",
-      borderRadius: themeRadius$1[1],
-      boxShadow,
-      margin: 0,
-      minHeight: "35px",
-      outline: "none",
-      padding: rem(themeSpace$1[1]),
-      transition: "none",
+      opacity: isDisabled ? 0.25 : 1
+    }),
+    input: (styles) => ({
+      ...styles,
+      color: "var(--card-fg-color)",
+      fontFamily: font.text.family,
+      marginLeft: rem(space[2])
+    }),
+    menuList: (styles) => ({
+      ...styles
+    }),
+    multiValue: (styles, { isDisabled }) => ({
+      ...styles,
+      backgroundColor: color.button.ghost.primary.hovered.bg,
+      borderRadius: radius[2],
+      opacity: isDisabled ? 0.5 : 1
+    }),
+    multiValueLabel: () => ({
+      color: color.button.ghost.primary.hovered.fg,
+      fontSize: "inherit",
+      padding: 0
+    }),
+    multiValueRemove: (styles) => ({
+      ...styles,
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      svg: { color: color.button.ghost.primary.hovered.fg },
       "&:hover": {
-        boxShadow: `inset 0 0 0 1px ${getSchemeColor(scheme, "inputHoveredBorder")}`
+        backgroundColor: color.button.ghost.primary.selected.bg
       }
-    };
-  },
-  indicatorsContainer: (styles, { isDisabled }) => ({
-    ...styles,
-    opacity: isDisabled ? 0.25 : 1
-  }),
-  input: (styles) => ({
-    ...styles,
-    color: "var(--card-fg-color)",
-    fontFamily: studioTheme.fonts.text.family,
-    marginLeft: rem(themeSpace$1[2])
-  }),
-  menuList: (styles) => ({
-    ...styles
-  }),
-  multiValue: (styles, { isDisabled }) => ({
-    ...styles,
-    backgroundColor: getSchemeColor(scheme, "mutedHoveredBg"),
-    borderRadius: themeRadius$1[2],
-    opacity: isDisabled ? 0.5 : 1
-  }),
-  multiValueLabel: () => ({
-    color: getSchemeColor(scheme, "mutedHoveredFg"),
-    fontSize: "inherit",
-    padding: 0
-  }),
-  multiValueRemove: (styles) => ({
-    ...styles,
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-    svg: { color: getSchemeColor(scheme, "mutedHoveredFg") },
-    "&:hover": {
-      backgroundColor: getSchemeColor(scheme, "mutedSelectedBg")
-    }
-  }),
-  noOptionsMessage: (styles) => ({
-    ...styles,
-    fontFamily: studioTheme.fonts.text.family,
-    lineHeight: "1em"
-  }),
-  option: (styles, { isFocused }) => ({
-    ...styles,
-    backgroundColor: isFocused ? getSchemeColor(scheme, "spotBlue") : "transparent",
-    borderRadius: themeRadius$1[2],
-    color: isFocused ? getSchemeColor(scheme, "bg") : "inherit",
-    padding: `${rem(themeSpace$1[1])} ${rem(themeSpace$1[2])}`,
-    "&:hover": {
-      backgroundColor: getSchemeColor(scheme, "spotBlue"),
-      color: getSchemeColor(scheme, "bg")
-    }
-  }),
-  placeholder: (styles) => ({
-    ...styles,
-    marginLeft: rem(themeSpace$1[2])
-  }),
-  valueContainer: (styles) => ({
-    ...styles,
-    margin: 0,
-    padding: 0
-  })
-}), DropdownIndicator = (props) => /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx(Box, { paddingX: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) }) }) }), Menu$1 = (props) => /* @__PURE__ */ jsx(components.Menu, { ...props, children: /* @__PURE__ */ jsx(Card, { radius: 1, shadow: 2, children: props.children }) }), MenuList$1 = (props) => {
+    }),
+    noOptionsMessage: (styles) => ({
+      ...styles,
+      fontFamily: font.text.family,
+      lineHeight: "1em"
+    }),
+    option: (styles, { isFocused }) => ({
+      ...styles,
+      backgroundColor: isFocused ? color.avatar.blue.bg : "transparent",
+      borderRadius: radius[2],
+      color: isFocused ? getSchemeColor(scheme, "bg") : "inherit",
+      padding: `${rem(space[1])} ${rem(space[2])}`,
+      "&:hover": {
+        backgroundColor: color.avatar.blue.bg,
+        color: getSchemeColor(scheme, "bg")
+      }
+    }),
+    placeholder: (styles) => ({
+      ...styles,
+      marginLeft: rem(space[2])
+    }),
+    valueContainer: (styles) => ({
+      ...styles,
+      margin: 0,
+      padding: 0
+    })
+  };
+}, DropdownIndicator = (props) => /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx(Box, { paddingX: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) }) }) }), 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 = 37;
   if (Array.isArray(children)) {
     const height = children.length > MAX_ROWS ? OPTION_HEIGHT * MAX_ROWS : children.length * OPTION_HEIGHT;
@@ -2396,7 +2380,7 @@ const Image$1 = styled.img`
     options,
     placeholder,
     value
-  } = props, scheme = useColorSchemeValue(), creating = useTypedSelector((state) => state.tags.creating), tagsFetching = useTypedSelector((state) => state.tags.fetching);
+  } = props, reactSelectStyles = useReactSelectStyles$1(), creating = useTypedSelector((state) => state.tags.creating), tagsFetching = useTypedSelector((state) => state.tags.fetching);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -2427,7 +2411,7 @@ const Image$1 = styled.img`
                   onCreateOption: onCreateTag,
                   options,
                   placeholder: tagsFetching ? "Loading..." : placeholder,
-                  styles: reactSelectStyles$1(scheme),
+                  styles: reactSelectStyles,
                   value: controllerValue
                 }
               );
@@ -2468,7 +2452,7 @@ function Details({
   currentAsset,
   creditLine
 }) {
-  return /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+  return /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
     /* @__PURE__ */ jsx(
       FormFieldInputTags,
       {
@@ -2698,7 +2682,7 @@ const DialogAssetEdit = (props) => {
           /* @__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__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs(TabList, { space: 2, children: [
+              /* @__PURE__ */ jsxs(TabList, { gap: 2, children: [
                 /* @__PURE__ */ jsx(
                   Tab,
                   {
@@ -2764,7 +2748,7 @@ const DialogAssetEdit = (props) => {
                     id: "alt-texts",
                     children: [
                       altTextsError && /* @__PURE__ */ jsx(Stack, { marginBottom: 3, children: /* @__PURE__ */ jsx(Card, { padding: [3, 3, 4], radius: 2, shadow: 1, tone: "critical", children: /* @__PURE__ */ jsx(Text, { size: 1, children: altTextsError }) }) }),
-                      /* @__PURE__ */ jsx(Stack, { space: 2, style: { height: "65dvh", overflowY: "auto" }, children: languages.map((language) => {
+                      /* @__PURE__ */ jsx(Stack, { gap: 2, style: { height: "65dvh", overflowY: "auto" }, children: languages.map((language) => {
                         const label = language.default ? `${language.title} (Default)` : language.title;
                         return /* @__PURE__ */ jsx(
                           FormFieldInputText,
@@ -2855,7 +2839,7 @@ const DialogAssetEdit = (props) => {
       onClose: handleClose,
       width: 1,
       children: [
-        /* @__PURE__ */ jsx(Box, { paddingX: 4, paddingY: 4, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+        /* @__PURE__ */ jsx(Box, { paddingX: 4, paddingY: 4, children: /* @__PURE__ */ jsxs(Stack, { gap: 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 }) })
         ] }) }),
@@ -2883,7 +2867,7 @@ const DialogAssetEdit = (props) => {
 }), Container = styled(Box)(
   ({ $scheme, theme }) => css`
       background: ${getSchemeColor($scheme, "bg")};
-      border-radius: ${rem(theme.sanity.radius[2])};
+      border-radius: ${rem(getTheme_v2(theme).radius[2])};
     `
 ), SearchFacet = (props) => {
   const { children, facet } = props, scheme = useColorSchemeValue(), dispatch = useDispatch(), handleClose = () => {
@@ -3105,84 +3089,81 @@ const DialogAssetEdit = (props) => {
     () => excludeTagSlugs.length > 0 ? tags.filter((tagItem) => !excludeTagSlugs.includes(tagItem.tag.name.current)) : tags,
     [excludeTagSlugs, tags]
   );
-}, {
-  fonts: {
-    text: { sizes: themeTextSizes }
-  },
-  radius: themeRadius,
-  space: themeSpace
-} = studioTheme, reactSelectStyles = (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")},
+}, useReactSelectStyles = () => {
+  const scheme = useColorSchemeValue(), { color, font, radius, space } = useTheme_v2();
+  return {
+    control: (styles, { isDisabled, isFocused }) => {
+      let boxShadow = "inset 0 0 0 1px var(--card-border-color)";
+      return isFocused && (boxShadow = `inset 0 0 0 1px ${color.input.default.enabled.border},
         0 0 0 1px ${getSchemeColor(scheme, "bg2")},
         0 0 0 3px var(--card-focus-ring-color) !important`), {
+        ...styles,
+        backgroundColor: "var(--card-bg-color)",
+        color: "inherit",
+        border: "none",
+        borderRadius: radius[2],
+        boxShadow,
+        fontSize: font.text.sizes[1].fontSize,
+        minHeight: "25px",
+        opacity: isDisabled ? 0.5 : "inherit",
+        outline: "none",
+        transition: "none",
+        "&:hover": {
+          boxShadow: `inset 0 0 0 1px ${color.input.default.hovered.border}`
+        }
+      };
+    },
+    input: (styles) => ({
       ...styles,
-      backgroundColor: "var(--card-bg-color)",
-      color: "inherit",
-      border: "none",
-      borderRadius: themeRadius[2],
-      boxShadow,
-      fontSize: themeTextSizes[1].fontSize,
-      minHeight: "25px",
-      opacity: isDisabled ? 0.5 : "inherit",
-      outline: "none",
-      transition: "none",
+      color: "var(--card-fg-color)",
+      fontFamily: font.text.family,
+      fontSize: font.text.sizes[1].fontSize,
+      marginLeft: rem(space[2])
+    }),
+    menuList: (styles) => ({
+      ...styles,
+      padding: 0
+    }),
+    noOptionsMessage: (styles) => ({
+      ...styles,
+      fontFamily: font.text.family,
+      fontSize: font.text.sizes[1].fontSize,
+      lineHeight: "1em"
+    }),
+    option: (styles, { isFocused }) => ({
+      ...styles,
+      backgroundColor: isFocused ? color.avatar.blue.bg : "transparent",
+      borderRadius: radius[2],
+      color: isFocused ? getSchemeColor(scheme, "bg") : "inherit",
+      fontSize: font.text.sizes[1].fontSize,
+      lineHeight: "1em",
+      margin: 0,
+      padding: rem(space[1]),
       "&:hover": {
-        boxShadow: `inset 0 0 0 1px ${getSchemeColor(scheme, "inputHoveredBorder")}`
+        backgroundColor: color.avatar.blue.bg,
+        color: getSchemeColor(scheme, "bg")
       }
-    };
-  },
-  input: (styles) => ({
-    ...styles,
-    color: "var(--card-fg-color)",
-    fontFamily: studioTheme.fonts.text.family,
-    fontSize: themeTextSizes[1].fontSize,
-    marginLeft: rem(themeSpace[2])
-  }),
-  menuList: (styles) => ({
-    ...styles,
-    padding: 0
-  }),
-  noOptionsMessage: (styles) => ({
-    ...styles,
-    fontFamily: studioTheme.fonts.text.family,
-    fontSize: themeTextSizes[1].fontSize,
-    lineHeight: "1em"
-  }),
-  option: (styles, { isFocused }) => ({
-    ...styles,
-    backgroundColor: isFocused ? getSchemeColor(scheme, "spotBlue") : "transparent",
-    borderRadius: themeRadius[2],
-    color: isFocused ? getSchemeColor(scheme, "bg") : "inherit",
-    fontSize: themeTextSizes[1].fontSize,
-    lineHeight: "1em",
-    margin: 0,
-    padding: rem(themeSpace[1]),
-    "&:hover": {
-      backgroundColor: getSchemeColor(scheme, "spotBlue"),
-      color: getSchemeColor(scheme, "bg")
-    }
-  }),
-  placeholder: (styles) => ({
-    ...styles,
-    fontSize: themeTextSizes[1].fontSize,
-    marginLeft: rem(themeSpace[2]),
-    paddingLeft: 0
-  }),
-  singleValue: (styles) => ({
-    ...styles,
-    alignItems: "center",
-    display: "inline-flex",
-    height: "100%",
-    marginLeft: rem(themeSpace[2])
-  }),
-  valueContainer: (styles) => ({
-    ...styles,
-    margin: 0,
-    padding: 0
-  })
-}), ClearIndicator = (props) => /* @__PURE__ */ jsx(components.ClearIndicator, { ...props, children: /* @__PURE__ */ jsx(
+    }),
+    placeholder: (styles) => ({
+      ...styles,
+      fontSize: font.text.sizes[1].fontSize,
+      marginLeft: rem(space[2]),
+      paddingLeft: 0
+    }),
+    singleValue: (styles) => ({
+      ...styles,
+      alignItems: "center",
+      display: "inline-flex",
+      height: "100%",
+      marginLeft: rem(space[2])
+    }),
+    valueContainer: (styles) => ({
+      ...styles,
+      margin: 0,
+      padding: 0
+    })
+  };
+}, ClearIndicator = (props) => /* @__PURE__ */ jsx(components.ClearIndicator, { ...props, children: /* @__PURE__ */ jsx(
   Box,
   {
     paddingRight: 1,
@@ -3219,7 +3200,7 @@ const DialogAssetEdit = (props) => {
   Option,
   SingleValue
 }, SearchFacetTags = ({ facet }) => {
-  const scheme = useColorSchemeValue(), dispatch = useDispatch(), tags = useVisibleTags(), tagsFetching = useTypedSelector((state) => state.tags.fetching), allTagOptions = getTagSelectOptions(tags), popoverProps = usePortalPopoverProps(), handleChange = (option) => {
+  const reactSelectStyles = useReactSelectStyles(), dispatch = useDispatch(), tags = useVisibleTags(), tagsFetching = useTypedSelector((state) => state.tags.fetching), allTagOptions = getTagSelectOptions(tags), popoverProps = usePortalPopoverProps(), handleChange = (option) => {
     dispatch(
       searchActions.facetsUpdateById({
         id: facet.id,
@@ -3255,7 +3236,7 @@ const DialogAssetEdit = (props) => {
             fontSize: 1,
             onClick: () => handleOperatorItemClick(operatorType),
             padding: 2,
-            space: 4,
+            gap: 4,
             style: { minWidth: "150px" },
             text: operators[operatorType].label
           },
@@ -3277,14 +3258,14 @@ const DialogAssetEdit = (props) => {
         onChange: (value) => handleChange(value),
         options: allTagOptions,
         placeholder: tagsFetching ? "Loading..." : "Select...",
-        styles: reactSelectStyles(scheme),
+        styles: reactSelectStyles,
         value: facet?.value
       }
     ) })
   ] });
 }, StackContainer = styled(Flex)(({ theme }) => css`
     > * {
-      margin-bottom: ${rem(theme.sanity.space[2])};
+      margin-bottom: ${rem(getTheme_v2(theme).space[2])};
     }
   `), SearchFacets = (props) => {
   const { layout = "inline" } = props, searchFacets = useTypedSelector((state) => state.search.facets), Items2 = searchFacets.map((facet) => {
@@ -3292,7 +3273,7 @@ const DialogAssetEdit = (props) => {
     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__ */ jsx(Box, { marginBottom: 2, children: /* @__PURE__ */ jsx(Inline, { space: 2, children: Items2 }) });
+    return searchFacets.length === 0 ? null : /* @__PURE__ */ jsx(Box, { marginBottom: 2, children: /* @__PURE__ */ jsx(Inline, { gap: 2, children: Items2 }) });
   if (layout === "stack")
     return /* @__PURE__ */ jsx(StackContainer, { align: "flex-start", direction: "column", children: Items2 });
   throw Error("Invalid layout");
@@ -3334,7 +3315,7 @@ const DialogAssetEdit = (props) => {
             fontSize: 1,
             icon: AddIcon,
             mode: "bleed",
-            space: 2,
+            gap: 2,
             text: "Add filter",
             tone: "primary"
           }
@@ -3827,7 +3808,7 @@ const DialogAssetEdit = (props) => {
         height: `${PANEL_HEIGHT}px`
       },
       children: [
-        /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
+        /* @__PURE__ */ jsxs(Inline, { gap: 2, children: [
           /* @__PURE__ */ jsx(Label, { size: 0, children: title }),
           tagsFetching && /* @__PURE__ */ jsx(Label, { size: 0, style: { opacity: 0.3 }, children: "Loading..." })
         ] }),
@@ -4529,7 +4510,7 @@ const EPIC_END_TYPE = "media/epicEnd", createReduxStore = (props) => {
   });
 }), ButtonViewGroup = () => {
   const dispatch = useDispatch(), view = useTypedSelector((state) => state.assets.view);
-  return /* @__PURE__ */ jsxs(Inline, { space: 0, style: { whiteSpace: "nowrap" }, children: [
+  return /* @__PURE__ */ jsxs(Inline, { gap: 0, style: { whiteSpace: "nowrap" }, children: [
     /* @__PURE__ */ jsx(
       Button,
       {
@@ -4606,7 +4587,7 @@ const EPIC_END_TYPE = "media/epicEnd", createReduxStore = (props) => {
               ),
               padding: 2,
               selected,
-              space: 4,
+              gap: 4,
               style: { minWidth: "200px" },
               text: getOrderTitle(item.field, item.direction)
             },
@@ -4750,7 +4731,7 @@ const EPIC_END_TYPE = "media/epicEnd", createReduxStore = (props) => {
                     /* @__PURE__ */ jsx(SearchFacets, {}),
                     /* @__PURE__ */ jsx(SearchFacetsControl, {})
                   ] }),
-                  /* @__PURE__ */ jsx(Box, { display: ["block", "block", "none"], marginX: 2, children: /* @__PURE__ */ jsxs(Inline, { space: 2, style: { whiteSpace: "nowrap" }, children: [
+                  /* @__PURE__ */ jsx(Box, { display: ["block", "block", "none"], marginX: 2, children: /* @__PURE__ */ jsxs(Inline, { gap: 2, style: { whiteSpace: "nowrap" }, children: [
                     /* @__PURE__ */ jsx(
                       Button,
                       {
@@ -5002,7 +4983,7 @@ const EPIC_END_TYPE = "media/epicEnd", createReduxStore = (props) => {
       user-select: none;
       width: 100%;
 
-      border: ${$picked ? `1px solid ${theme.sanity.color.spot.orange} !important` : "1px solid inherit"};
+      border: ${$picked ? `1px solid ${getTheme_v2(theme).color.avatar.orange.bg} !important` : "1px solid inherit"};
 
       ${!$updating && css`
         @media (hover: hover) and (pointer: fine) {
@@ -5024,7 +5005,7 @@ const EPIC_END_TYPE = "media/epicEnd", createReduxStore = (props) => {
       }
     `
 ), StyledWarningOutlineIcon = styled(WarningFilledIcon)(({ theme }) => ({
-  color: theme.sanity.color.spot.red
+  color: getTheme_v2(theme).color.avatar.red.bg
 })), CardAsset$1 = (props) => {
   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)
@@ -5444,7 +5425,7 @@ const CardWrapper = styled(Flex)`
       }
     `
 ), StyledWarningIcon = styled(WarningFilledIcon)(({ theme }) => ({
-  color: theme.sanity.color.spot.red
+  color: getTheme_v2(theme).color.avatar.red.bg
 })), TableRowAsset$1 = (props) => {
   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) => {
@@ -5770,7 +5751,7 @@ const TableRowUpload = (props) => {
               gridRow: mediaIndex < 3 ? "2/4" : "auto",
               marginLeft: mediaIndex < 3 ? 3 : 0
             },
-            children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+            children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
               /* @__PURE__ */ jsxs(Text, { muted: !0, size: 1, textOverflow: "ellipsis", children: [
                 item.name,
                 " (",
@@ -6110,31 +6091,30 @@ const UploadDropzone = (props) => {
     [toast]
   ), null;
 };
-var mediaTag = {
+var mediaTag = defineType({
   title: "Media Tag",
   icon: TagIcon,
   name: TAG_DOCUMENT_NAME,
   type: "document",
   fields: [
-    {
+    defineField({
       title: "Name",
       name: "name",
       type: "slug"
-    }
+    })
   ],
   preview: {
     select: {
       name: "name"
     },
-    prepare(selection) {
-      const { name } = selection;
+    prepare({ name }) {
       return {
         media: TagIcon,
         title: name?.current
       };
     }
   }
-};
+});
 const getUploadedAssetId = (patches) => (Array.isArray(patches) ? patches : [patches]).find(
   (patch) => patch?.type === "set" && patch.path?.length === 1 && patch.path[0] === "asset" && typeof patch.value?._ref == "string"
 )?.value?._ref, withUploaderRecording = (source, { client, uploader }) => {