sanity-plugin-iconify 1.1.1 → 2.0.0

package/dist/index.js

@@ -1,100 +1,52 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-var jsxRuntime = require('react/jsx-runtime');
-var sanity = require('sanity');
-var ui = require('@sanity/ui');
-var react = require('react');
-var react$1 = require('@headlessui/react');
-var tsPattern = require('ts-pattern');
-var reactQuery = require('@tanstack/react-query');
-var useDebounce = require('use-debounce');
-var styled = require('styled-components');
-var react$2 = require('@iconify/react');
-var icons = require('@sanity/icons');
-var utils = require('@iconify/utils');
-var changeCase = require('change-case');
-function _interopDefaultCompat(e) {
-  return e && typeof e === 'object' && 'default' in e ? e : {
-    default: e
-  };
-}
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { unset, set, definePlugin } from "sanity";
+import { Grid, Box, Card, Text, TextInput, Button, useToast, Popover, ThemeProvider, Stack, Flex } from "@sanity/ui";
+import { buildTheme } from "@sanity/ui/theme";
+import { useState, useCallback, forwardRef, useId, useRef, useEffect, useMemo } from "react";
+import { ComboboxInput, ComboboxOptions, ComboboxOption, Combobox } from "@headlessui/react";
+import { match } from "ts-pattern";
+import { useQueryClient, useQuery, keepPreviousData, QueryClient, QueryClientProvider as QueryClientProvider$1 } from "@tanstack/react-query";
+import { useDebounce } from "use-debounce";
+import styled from "styled-components";
+import { Icon } from "@iconify/react";
+import { TrashIcon } from "@sanity/icons";
+import { stringToIcon } from "@iconify/utils";
+import { sentenceCase } from "change-case";
 const BASE_API_URL = "https://api.iconify.design";
-function fetchJson(_ref) {
-  let {
-    url,
-    signal
-  } = _ref;
-  return fetch(url, {
-    signal
-  }).then(response => {
-    if (!response.ok) {
-      throw new Error("Network error: status ".concat(response.status));
-    }
+function fetchJson({ url, signal }) {
+  return fetch(url, { signal }).then((response) => {
+    if (!response.ok)
+      throw new Error(`Network error: status ${response.status}`);
     return response.json();
-  }).then(result => result, error => {
-    if (error instanceof Error) {
-      throw error;
-    } else {
-      console.error("Unknown error: ".concat(error));
-      throw new Error("Something went wrong");
+  }).then(
+    (result) => result,
+    (error) => {
+      throw error instanceof Error ? error : (console.error(`Unknown error: ${error}`), new Error("Something went wrong"));
     }
-  });
+  );
 }
-function useSearch(_ref2) {
-  let {
-    collections
-  } = _ref2;
-  const queryClient = reactQuery.useQueryClient();
-  const [term, setTerm] = react.useState("");
-  const [debouncedTerm, setDebouncedTerm] = useDebounce.useDebounce(term, 500);
-  const updateTerm = react.useCallback(function (newTerm) {
-    let updateImmediately = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    setTerm(newTerm);
-    if (updateImmediately) {
-      setDebouncedTerm(newTerm);
-    }
-  }, [setDebouncedTerm]);
-  const {
-    isLoading,
-    isError,
-    error,
-    data,
-    isPlaceholderData
-  } = reactQuery.useQuery({
+function useSearch({ collections }) {
+  const queryClient2 = useQueryClient(), [term, setTerm] = useState(""), [debouncedTerm, setDebouncedTerm] = useDebounce(term, 500), updateTerm = useCallback(
+    (newTerm, updateImmediately = !1) => {
+      setTerm(newTerm), updateImmediately && setDebouncedTerm(newTerm);
+    },
+    [setDebouncedTerm]
+  ), { isLoading, isError, error, data, isPlaceholderData } = useQuery({
     queryKey: ["search", collections, debouncedTerm],
-    queryFn: async _ref3 => {
-      let {
-        signal
-      } = _ref3;
+    queryFn: async ({ signal }) => {
       var _a;
       const url = new URL("/search", BASE_API_URL);
-      url.searchParams.append("query", debouncedTerm);
-      url.searchParams.append("limit", "60");
-      if (collections) {
-        url.searchParams.append("prefixes", collections.join(","));
-      }
-      const result = debouncedTerm ? await fetchJson({
-        url,
-        signal
-      }) : null;
-      if (result) {
-        Object.entries(result.collections).forEach(_ref4 => {
-          let [prefix, info] = _ref4;
-          queryClient.setQueryData(["iconSetInfo", prefix], info);
-        });
-      }
-      return (_a = result == null ? void 0 : result.icons) != null ? _a : [];
+      url.searchParams.append("query", debouncedTerm), url.searchParams.append("limit", "60"), collections && url.searchParams.append("prefixes", collections.join(","));
+      const result = debouncedTerm ? await fetchJson({ url, signal }) : null;
+      return result && Object.entries(result.collections).forEach(([prefix, info]) => {
+        queryClient2.setQueryData(["iconSetInfo", prefix], info);
+      }), (_a = result == null ? void 0 : result.icons) != null ? _a : [];
     },
     enabled: debouncedTerm.length > 0,
-    placeholderData: reactQuery.keepPreviousData,
+    placeholderData: keepPreviousData,
     staleTime: 5 * 60 * 1e3
     // 5 minutes
   });
-
   return {
     term,
     setTerm: updateTerm,
@@ -106,365 +58,230 @@ function useSearch(_ref2) {
     isPreviousData: isPlaceholderData
   };
 }
-function useIconSetInfo(_ref5) {
-  let {
-    prefix
-  } = _ref5;
-  return reactQuery.useQuery({
+function useIconSetInfo({ prefix }) {
+  return useQuery({
     queryKey: ["iconSetInfo", prefix],
-    queryFn: async _ref6 => {
-      let {
-        signal
-      } = _ref6;
+    queryFn: async ({ signal }) => {
       var _a;
       if (!prefix) return null;
       const url = new URL("/collection", BASE_API_URL);
-      url.searchParams.append("prefix", prefix);
-      url.searchParams.append("info", "true");
-      const result = await fetchJson({
-        url,
-        signal
-      });
+      url.searchParams.append("prefix", prefix), url.searchParams.append("info", "true");
+      const result = await fetchJson({ url, signal });
       return (_a = result == null ? void 0 : result.info) != null ? _a : null;
     },
-    staleTime: Infinity
+    staleTime: 1 / 0
   });
 }
-var __freeze = Object.freeze;
-var __defProp = Object.defineProperty;
-var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", {
-  value: __freeze(raw || cooked.slice())
-}));
-var _a, _b;
-const ComboboxWrapper = styled__default.default(ui.Grid)(_a || (_a = __template(["\n  grid-template-columns: 1fr min-content;\n  position: relative;\n"])));
-const OptionsWrapper = styled__default.default(ui.Box)(_b || (_b = __template(["\n  box-sizing: border-box;\n  padding: 0.5rem;\n\n  & [role='listbox'] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(min(100%, 2.5rem), 1fr));\n    gap: 0.5rem;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    @media (min-width: 650px) {\n      grid-template-columns: repeat(10, minmax(min(100%, 2.5rem), 1fr));\n    }\n  }\n\n  & [role='option'] {\n    display: grid;\n    place-items: center;\n\n    & button {\n      aspect-ratio: 1;\n      cursor: pointer;\n      width: 100%;\n\n      & > [data-ui='Box'] {\n        display: flex;\n      }\n    }\n  }\n"])));
-function MessageWrapper(_ref7) {
-  let {
-    children
-  } = _ref7;
-  return /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-    padding: 4,
-    children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-      align: "center",
-      muted: true,
-      children
-    })
-  });
+const ComboboxWrapper = styled(Grid)`
+  grid-template-columns: 1fr min-content;
+  position: relative;
+`, OptionsWrapper = styled(Box)`
+  box-sizing: border-box;
+  padding: 0.5rem;
+
+  & [role='listbox'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 2.5rem), 1fr));
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    @media (min-width: 650px) {
+      grid-template-columns: repeat(10, minmax(min(100%, 2.5rem), 1fr));
+    }
+  }
+
+  & [role='option'] {
+    display: grid;
+    place-items: center;
+
+    & button {
+      cursor: pointer;
+      aspect-ratio: 1;
+      width: 100%;
+
+      & > [data-ui='Box'] {
+        display: flex;
+      }
+    }
+  }
+`;
+function MessageWrapper({ children }) {
+  return /* @__PURE__ */ jsx(Card, { padding: 4, children: /* @__PURE__ */ jsx(Text, { align: "center", muted: !0, children }) });
 }
-const SearchInput = react.forwardRef((props, ref) => {
-  const {
-    term,
-    selectedIcon,
-    onChange
-  } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(react$1.Combobox.Input, {
-    as: ui.TextInput,
-    ref,
-    inputMode: "search",
-    value: term,
-    onChange,
-    icon: selectedIcon ? /* @__PURE__ */jsxRuntime.jsx(react$2.Icon, {
-      icon: selectedIcon
-    }) : null,
-    placeholder: selectedIcon ? "Search and replace selected icon..." : "Search for an icon..."
-  });
+const SearchInput = forwardRef((props, ref) => {
+  const { term, selectedIcon, onChange, suffix } = props;
+  return /* @__PURE__ */ jsx(
+    ComboboxInput,
+    {
+      as: TextInput,
+      ref,
+      inputMode: "search",
+      value: term,
+      onChange,
+      icon: selectedIcon ? /* @__PURE__ */ jsx(Icon, { icon: selectedIcon }) : null,
+      placeholder: selectedIcon ? "Search and replace selected icon..." : "Search for an icon...",
+      suffix
+    }
+  );
 });
 SearchInput.displayName = "SearchInput";
 function SearchResults(props) {
-  const {
-    state,
-    data
-  } = props;
-  if (state === "initial") {
-    return /* @__PURE__ */jsxRuntime.jsx(MessageWrapper, {
-      children: "Search for icons"
-    });
-  }
-  if (state === "loading") {
-    return /* @__PURE__ */jsxRuntime.jsx(MessageWrapper, {
-      children: "Searching..."
-    });
-  }
-  if (state === "error") {
-    return /* @__PURE__ */jsxRuntime.jsx(MessageWrapper, {
-      children: "Something went wrong..."
-    });
-  }
-  if (state === "empty") {
-    return /* @__PURE__ */jsxRuntime.jsx(MessageWrapper, {
-      children: "No icons found"
-    });
-  }
-  return /* @__PURE__ */jsxRuntime.jsx(react$1.Combobox.Options, {
-    style: {
-      opacity: state === "stale" ? 0.5 : 1
-    },
-    children: data.map(icon => /* @__PURE__ */jsxRuntime.jsx(react$1.Combobox.Option, {
-      value: icon,
-      children: _ref8 => {
-        let {
-          active
-        } = _ref8;
-        return /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-          padding: 3,
-          mode: "bleed",
-          selected: active,
-          children: /* @__PURE__ */jsxRuntime.jsx(react$2.Icon, {
-            icon,
-            width: "100%",
-            height: "100%"
-          })
-        });
-      }
-    }, icon))
-  });
+  const { state, data } = props;
+  return state === "initial" ? /* @__PURE__ */ jsx(MessageWrapper, { children: "Search for icons" }) : state === "loading" ? /* @__PURE__ */ jsx(MessageWrapper, { children: "Searching..." }) : state === "error" ? /* @__PURE__ */ jsx(MessageWrapper, { children: "Something went wrong..." }) : state === "empty" ? /* @__PURE__ */ jsx(MessageWrapper, { children: "No icons found" }) : /* @__PURE__ */ jsx(ComboboxOptions, { style: { opacity: state === "stale" ? 0.5 : 1 }, children: data.map((icon) => /* @__PURE__ */ jsx(ComboboxOption, { value: icon, children: ({ focus }) => /* @__PURE__ */ jsx(Button, { padding: 3, mode: "bleed", selected: focus, children: /* @__PURE__ */ jsx(Icon, { icon, width: "100%", height: "100%" }) }) }, icon)) });
 }
 function UnsetButton(props) {
-  const {
-    onUnset
-  } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-    border: true,
-    borderLeft: false,
-    padding: 1,
-    display: "flex",
-    children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-      icon: /* @__PURE__ */jsxRuntime.jsx(icons.TrashIcon, {}),
-      onClick: onUnset,
-      mode: "bleed",
-      fontSize: 1,
-      padding: 2
-    })
-  });
+  const { onUnset } = props;
+  return /* @__PURE__ */ jsx(Card, { border: !0, borderLeft: !1, padding: 1, display: "flex", radius: 2, children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(TrashIcon, {}), onClick: onUnset, mode: "bleed", fontSize: 1, padding: 2 }) });
 }
 function IconifyCombobox(props) {
-  const {
-    selectedIcon,
-    onSelect: pushSelection,
+  const { selectedIcon, onSelect: pushSelection, collections } = props, id = useId(), toast = useToast(), inputRef = useRef(null), { term, setTerm, debouncedTerm, isLoading, isError, error, data, isPreviousData } = useSearch({
     collections
-  } = props;
-  const id = react.useId();
-  const toast = ui.useToast();
-  const inputRef = react.useRef(null);
-  const {
-    term,
-    setTerm,
-    debouncedTerm,
-    isLoading,
-    isError,
-    error,
-    data,
-    isPreviousData
-  } = useSearch({
-    collections
-  });
-  const handleTermChange = react.useCallback(event => setTerm(event.target.value), [setTerm]);
-  const handleSelect = react.useCallback(icon => {
-    pushSelection(icon);
-    setTerm("", true);
-  }, [pushSelection, setTerm]);
-  const handleUnset = react.useCallback(() => handleSelect(""), [handleSelect]);
-  react.useEffect(() => {
-    if (isError) {
-      console.error("Iconify input error:", error);
-      toast.push({
-        id,
-        status: "error",
-        title: "Iconify input error",
-        description: error == null ? void 0 : error.message
-      });
-    }
-  }, [error, id, isError, toast]);
-  return /* @__PURE__ */jsxRuntime.jsxs(ComboboxWrapper, {
-    children: [/* @__PURE__ */jsxRuntime.jsx(react$1.Combobox, {
-      onChange: handleSelect,
-      children: _ref9 => {
-        let {
-          open
-        } = _ref9;
-        return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/* @__PURE__ */jsxRuntime.jsx(SearchInput, {
-            ref: inputRef,
-            term,
-            selectedIcon,
-            onChange: handleTermChange
-          }), /* @__PURE__ */jsxRuntime.jsx(ui.Popover, {
-            open,
-            placement: "bottom",
-            arrow: false,
-            matchReferenceWidth: true,
-            portal: true,
-            constrainSize: true,
-            referenceElement: inputRef.current,
-            content: /* @__PURE__ */jsxRuntime.jsx(OptionsWrapper, {
-              children: /* @__PURE__ */jsxRuntime.jsx(SearchResults, {
-                state: tsPattern.match(true).returnType().with(isLoading, () => "loading").with(!debouncedTerm, () => "initial").with(isError, () => "error").with(!data || data.length === 0, () => "empty").with(isPreviousData, () => "stale").otherwise(() => "data"),
-                data
-              })
-            })
-          })]
-        });
+  }), handleTermChange = useCallback(
+    (event) => setTerm(event.target.value),
+    [setTerm]
+  ), handleSelect = useCallback(
+    (icon) => {
+      pushSelection(icon), setTerm("", !0);
+    },
+    [pushSelection, setTerm]
+  ), handleUnset = useCallback(() => handleSelect(""), [handleSelect]);
+  return useEffect(() => {
+    isError && (console.error("Iconify input error:", error), toast.push({
+      id,
+      status: "error",
+      title: "Iconify input error",
+      description: error == null ? void 0 : error.message
+    }));
+  }, [error, id, isError, toast]), /* @__PURE__ */ jsx(ComboboxWrapper, { children: /* @__PURE__ */ jsx(Combobox, { onChange: handleSelect, children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        ref: inputRef,
+        term,
+        selectedIcon,
+        onChange: handleTermChange,
+        suffix: selectedIcon ? /* @__PURE__ */ jsx(UnsetButton, { onUnset: handleUnset }) : null
       }
-    }), selectedIcon ? /* @__PURE__ */jsxRuntime.jsx(UnsetButton, {
-      onUnset: handleUnset
-    }) : null]
-  });
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open,
+        placement: "bottom",
+        arrow: !1,
+        matchReferenceWidth: !0,
+        portal: !0,
+        constrainSize: !0,
+        referenceElement: inputRef.current,
+        content: /* @__PURE__ */ jsx(OptionsWrapper, { children: /* @__PURE__ */ jsx(
+          SearchResults,
+          {
+            state: match(!0).returnType().with(isLoading, () => "loading").with(!debouncedTerm, () => "initial").with(isError, () => "error").with(!data || data.length === 0, () => "empty").with(isPreviousData, () => "stale").otherwise(() => "data"),
+            data
+          }
+        ) })
+      }
+    )
+  ] }) }) });
 }
-const queryClient = new reactQuery.QueryClient();
+const queryClient = new QueryClient();
 function QueryClientProvider(props) {
-  return /* @__PURE__ */jsxRuntime.jsx(reactQuery.QueryClientProvider, {
-    client: queryClient,
-    children: props.children
-  });
+  return /* @__PURE__ */ jsx(QueryClientProvider$1, { client: queryClient, children: props.children });
 }
 function usePrettyIconName(props) {
   var _a, _b;
-  const {
-    name
-  } = props;
-  const iconMeta = react.useMemo(() => {
-    var _a2;
-    return (_a2 = props.iconMeta) != null ? _a2 : name ? utils.stringToIcon(name) : null;
-  }, [name, props.iconMeta]);
-  const iconSetInfo = useIconSetInfo({
-    prefix: (_a = iconMeta == null ? void 0 : iconMeta.prefix) != null ? _a : null
-  });
-  return react.useMemo(() => {
-    var _a2, _b2;
-    return iconMeta ? {
-      name: changeCase.sentenceCase(iconMeta.name),
-      collection: (_b2 = (_a2 = iconSetInfo.data) == null ? void 0 : _a2.name) != null ? _b2 : iconMeta.prefix
-    } : null;
-  }, [iconMeta, (_b = iconSetInfo.data) == null ? void 0 : _b.name]);
+  const { name } = props, iconMeta = useMemo(
+    () => {
+      var _a2;
+      return (_a2 = props.iconMeta) != null ? _a2 : name ? stringToIcon(name) : null;
+    },
+    [name, props.iconMeta]
+  ), iconSetInfo = useIconSetInfo({ prefix: (_a = iconMeta == null ? void 0 : iconMeta.prefix) != null ? _a : null });
+  return useMemo(
+    () => {
+      var _a2, _b2;
+      return iconMeta ? {
+        name: sentenceCase(iconMeta.name),
+        collection: (_b2 = (_a2 = iconSetInfo.data) == null ? void 0 : _a2.name) != null ? _b2 : iconMeta.prefix
+      } : null;
+    },
+    [iconMeta, (_b = iconSetInfo.data) == null ? void 0 : _b.name]
+  );
 }
 function IconifyInput(props) {
   var _a, _b, _c, _d, _e;
-  const {
-    config,
-    value,
-    onChange: pushChange,
-    schemaType
-  } = props;
-  const selectedIcon = (_a = value == null ? void 0 : value.name) != null ? _a : null;
-  const options = schemaType.options;
-  const collections = !!((_b = options == null ? void 0 : options.collections) == null ? void 0 : _b.length) && options.collections || !!((_c = config == null ? void 0 : config.collections) == null ? void 0 : _c.length) && config.collections || null;
-  const showName = (_e = (_d = options == null ? void 0 : options.showName) != null ? _d : config == null ? void 0 : config.showName) != null ? _e : false;
-  const parentTheme = ui.useTheme();
-  const theme = react.useMemo(() => parentTheme ? {
-    ...parentTheme.sanity,
-    color: ui.studioTheme.color
-  } : ui.studioTheme, [parentTheme]);
-  const handleSelect = react.useCallback(icon => {
-    pushChange(icon === "" ? sanity.unset() : sanity.set(icon, ["name"]));
-  }, [pushChange]);
-  return /* @__PURE__ */jsxRuntime.jsx(QueryClientProvider, {
-    children: /* @__PURE__ */jsxRuntime.jsx(ui.ThemeProvider, {
-      theme,
-      children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-        space: 2,
-        children: [/* @__PURE__ */jsxRuntime.jsx(IconifyCombobox, {
-          selectedIcon,
-          onSelect: handleSelect,
-          collections
-        }), showName && selectedIcon ? /* @__PURE__ */jsxRuntime.jsx(IconifyNameDisplay, {
-          name: selectedIcon
-        }) : null]
-      })
-    })
-  });
+  const { config, value, onChange: pushChange, schemaType } = props, selectedIcon = (_a = value == null ? void 0 : value.name) != null ? _a : null, options = schemaType.options, collections = !!((_b = options == null ? void 0 : options.collections) != null && _b.length) && options.collections || !!((_c = config == null ? void 0 : config.collections) != null && _c.length) && config.collections || null, showName = (_e = (_d = options == null ? void 0 : options.showName) != null ? _d : config == null ? void 0 : config.showName) != null ? _e : !1, handleSelect = useCallback(
+    (icon) => {
+      pushChange(icon === "" ? unset() : set(icon, ["name"]));
+    },
+    [pushChange]
+  );
+  return /* @__PURE__ */ jsx(QueryClientProvider, { children: /* @__PURE__ */ jsx(ThemeProvider, { theme: buildTheme(), children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+    /* @__PURE__ */ jsx(
+      IconifyCombobox,
+      {
+        selectedIcon,
+        onSelect: handleSelect,
+        collections
+      }
+    ),
+    showName && selectedIcon ? /* @__PURE__ */ jsx(IconifyNameDisplay, { name: selectedIcon }) : null
+  ] }) }) });
 }
 function IconifyNameDisplay(props) {
   var _a;
-  const {
-    name
-  } = props;
-  const prettyName = usePrettyIconName({
-    name
-  });
-  return /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
-    gap: 1,
-    children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-      size: 1,
-      muted: true,
-      children: "Selected:"
-    }), /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-      size: 1,
-      weight: "semibold",
-      children: (_a = prettyName == null ? void 0 : prettyName.name) != null ? _a : name
-    }), (prettyName == null ? void 0 : prettyName.collection) && /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
-      size: 1,
-      muted: true,
-      style: {
-        fontStyle: "italic"
-      },
-      children: ["by ", prettyName == null ? void 0 : prettyName.collection]
-    })]
-  });
+  const { name } = props, prettyName = usePrettyIconName({ name });
+  return /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+    /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "Selected:" }),
+    /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: (_a = prettyName == null ? void 0 : prettyName.name) != null ? _a : name }),
+    (prettyName == null ? void 0 : prettyName.collection) && /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, style: { fontStyle: "italic" }, children: [
+      "by ",
+      prettyName == null ? void 0 : prettyName.collection
+    ] })
+  ] });
 }
 function IconifyPreview(props) {
-  const {
-    title
-  } = props;
-  const iconName = typeof props.title === "string" ? utils.stringToIcon(props.title) : null;
-  if (typeof title === "string" && iconName) {
-    return /* @__PURE__ */jsxRuntime.jsx(QueryClientProvider, {
-      children: /* @__PURE__ */jsxRuntime.jsx(IconifyPreviewInner, {
-        ...props,
-        iconName: title,
-        iconMeta: iconName
-      })
-    });
-  }
-  return props.renderDefault(props);
+  const { title } = props, iconName = typeof props.title == "string" ? stringToIcon(props.title) : null;
+  return typeof title == "string" && iconName ? /* @__PURE__ */ jsx(QueryClientProvider, { children: /* @__PURE__ */ jsx(IconifyPreviewInner, { ...props, iconName: title, iconMeta: iconName }) }) : props.renderDefault(props);
 }
 function IconifyPreviewInner(props) {
   var _a;
-  const {
-    iconMeta,
-    iconName,
-    ...previewProps
-  } = props;
-  const prettyName = usePrettyIconName({
-    iconMeta
-  });
+  const { iconMeta, iconName, ...previewProps } = props, prettyName = usePrettyIconName({ iconMeta });
   return props.renderDefault({
     ...previewProps,
-    media: /* @__PURE__ */jsxRuntime.jsx(react$2.Icon, {
-      icon: iconName
-    }),
+    media: /* @__PURE__ */ jsx(Icon, { icon: iconName }),
     title: (_a = prettyName == null ? void 0 : prettyName.name) != null ? _a : iconName,
     subtitle: prettyName == null ? void 0 : prettyName.collection
   });
 }
-const iconify = sanity.definePlugin(function () {
-  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return {
-    name: "sanity-plugin-iconify",
-    schema: {
-      types: [{
+const iconify = definePlugin((config = {}) => ({
+  name: "sanity-plugin-iconify",
+  schema: {
+    types: [
+      {
         name: "icon",
         title: "Icon",
         type: "object",
-        fields: [{
-          name: "name",
-          title: "Name",
-          type: "string"
-        }],
+        fields: [
+          {
+            name: "name",
+            title: "Name",
+            type: "string"
+          }
+        ],
         components: {
-          input: props => /* @__PURE__ */jsxRuntime.jsx(IconifyInput, {
-            ...props,
-            config
-          }),
+          input: (props) => /* @__PURE__ */ jsx(IconifyInput, { ...props, config }),
           preview: IconifyPreview,
           // This makes sure the input component is not indented
-          field: props => props.renderDefault({
-            ...props,
-            level: 0
-          })
+          field: (props) => props.renderDefault({ ...props, level: 0 })
         }
-      }]
-    }
-  };
-});
-exports.iconify = iconify;
+      }
+    ]
+  }
+}));
+export {
+  iconify
+};
 //# sourceMappingURL=index.js.map