sanity-plugin-iconify 3.0.0 → 4.0.0

package/dist/index.cjs

@@ -1,71 +1,118 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: !0 });
-var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), ui = require("@sanity/ui"), theme$1 = require("@sanity/ui/theme"), react = require("react"), downshift = require("downshift"), tsPattern = require("ts-pattern"), reactQuery = require("@tanstack/react-query"), useDebounce = require("use-debounce"), styled = require("styled-components"), react$1 = require("@iconify/react"), icons = require("@sanity/icons"), utils = require("@iconify/utils"), changeCase = require("change-case");
-function _interopDefaultCompat(e) {
-  return e && typeof e == "object" && "default" in e ? e : { default: e };
-}
-var styled__default = /* @__PURE__ */ _interopDefaultCompat(styled);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let sanity = require("sanity");
+let _sanity_ui = require("@sanity/ui");
+let _sanity_ui_theme = require("@sanity/ui/theme");
+let react = require("react");
+let downshift = require("downshift");
+let ts_pattern = require("ts-pattern");
+let _tanstack_react_query = require("@tanstack/react-query");
+let use_debounce = require("use-debounce");
+let styled_components = require("styled-components");
+styled_components = __toESM(styled_components, 1);
+let _iconify_react = require("@iconify/react");
+let _sanity_icons = require("@sanity/icons");
+let _iconify_utils = require("@iconify/utils");
+let change_case = require("change-case");
+//#region src/lib/api.ts
 const BASE_API_URL = "https://api.iconify.design";
 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) => {
-      throw error instanceof Error ? error : (console.error(`Unknown error: ${error}`), new Error("Something went wrong"));
-    }
-  );
+	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: ${error}`);
+			throw new Error("Something went wrong");
+		}
+	});
 }
 function useSearch({ collections }) {
-  const queryClient2 = reactQuery.useQueryClient(), [term, setTerm] = react.useState(""), [debouncedTerm, setDebouncedTerm] = useDebounce.useDebounce(term, 500), updateTerm = react.useCallback(
-    (newTerm, updateImmediately = !1) => {
-      setTerm(newTerm), updateImmediately && setDebouncedTerm(newTerm);
-    },
-    [setDebouncedTerm]
-  ), { isLoading, isError, error, data, isPlaceholderData } = reactQuery.useQuery({
-    queryKey: ["search", collections, debouncedTerm],
-    queryFn: async ({ signal }) => {
-      const url = new URL("/search", BASE_API_URL);
-      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);
-      }), result?.icons ?? [];
-    },
-    enabled: debouncedTerm.length > 0,
-    placeholderData: reactQuery.keepPreviousData,
-    staleTime: 300 * 1e3
-    // 5 minutes
-  });
-  return {
-    term,
-    setTerm: updateTerm,
-    debouncedTerm,
-    isLoading,
-    isError,
-    error,
-    data,
-    isPreviousData: isPlaceholderData
-  };
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	const [term, setTerm] = (0, react.useState)("");
+	const [debouncedTerm, setDebouncedTerm] = (0, use_debounce.useDebounce)(term, 500);
+	const updateTerm = (0, react.useCallback)((newTerm, updateImmediately = false) => {
+		setTerm(newTerm);
+		if (updateImmediately) setDebouncedTerm(newTerm);
+	}, [setDebouncedTerm]);
+	const { isLoading, isError, error, data, isPlaceholderData } = (0, _tanstack_react_query.useQuery)({
+		queryKey: [
+			"search",
+			collections,
+			debouncedTerm
+		],
+		queryFn: async ({ signal }) => {
+			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(([prefix, info]) => {
+				queryClient.setQueryData(["iconSetInfo", prefix], info);
+			});
+			return result?.icons ?? [];
+		},
+		enabled: debouncedTerm.length > 0,
+		placeholderData: _tanstack_react_query.keepPreviousData,
+		staleTime: 300 * 1e3
+	});
+	return {
+		term,
+		setTerm: updateTerm,
+		debouncedTerm,
+		isLoading,
+		isError,
+		error,
+		data,
+		isPreviousData: isPlaceholderData
+	};
 }
 function useIconSetInfo({ prefix }) {
-  return reactQuery.useQuery({
-    queryKey: ["iconSetInfo", prefix],
-    queryFn: async ({ signal }) => {
-      if (!prefix) return null;
-      const url = new URL("/collection", BASE_API_URL);
-      return url.searchParams.append("prefix", prefix), url.searchParams.append("info", "true"), (await fetchJson({ url, signal }))?.info ?? null;
-    },
-    staleTime: 1 / 0
-  });
+	return (0, _tanstack_react_query.useQuery)({
+		queryKey: ["iconSetInfo", prefix],
+		queryFn: async ({ signal }) => {
+			if (!prefix) return null;
+			const url = new URL("/collection", BASE_API_URL);
+			url.searchParams.append("prefix", prefix);
+			url.searchParams.append("info", "true");
+			return (await fetchJson({
+				url,
+				signal
+			}))?.info ?? null;
+		},
+		staleTime: Infinity
+	});
 }
-styled__default.default(ui.Grid)`
+(0, styled_components.default)(_sanity_ui.Grid)`
   grid-template-columns: 1fr min-content;
   position: relative;
 `;
-const OptionsWrapper = styled__default.default(ui.Box)`
+const OptionsWrapper = (0, styled_components.default)(_sanity_ui.Box)`
   box-sizing: border-box;
   padding: 0.5rem;
 
@@ -98,256 +145,249 @@ const OptionsWrapper = styled__default.default(ui.Box)`
   }
 `;
 function MessageWrapper({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { align: "center", muted: !0, children }) });
+	return <_sanity_ui.Card padding={4}>
+      <_sanity_ui.Text align="center" muted>
+        {children}
+      </_sanity_ui.Text>
+    </_sanity_ui.Card>;
 }
-const SearchInput = react.memo(
-  react.forwardRef((props, ref) => {
-    const { selectedIcon, suffix, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ui.TextInput,
-      {
-        ...rest,
-        ref,
-        inputMode: "search",
-        icon: selectedIcon ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: selectedIcon }) : null,
-        placeholder: selectedIcon ? "Search and replace selected icon..." : "Search for an icon...",
-        suffix
-      }
-    );
-  })
-);
+//#endregion
+//#region src/combobox/search-input.tsx
+const SearchInput = (0, react.memo)((0, react.forwardRef)((props, ref) => {
+	const { selectedIcon, suffix, onChange, ...rest } = props;
+	return <_sanity_ui.TextInput {...rest} onChange={onChange} ref={ref} inputMode="search" icon={selectedIcon ? <_iconify_react.Icon icon={selectedIcon} /> : null} placeholder={selectedIcon ? "Search and replace selected icon..." : "Search for an icon..."} suffix={suffix} />;
+}));
 SearchInput.displayName = "SearchInput";
-const SearchResults = react.memo(
-  react.forwardRef((props, ref) => {
-    const { state, data, getItemProps, highlightedIndex, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      (() => {
-        switch (state) {
-          case "initial":
-            return /* @__PURE__ */ jsxRuntime.jsx(MessageWrapper, { children: "Search for icons" });
-          case "loading":
-            return /* @__PURE__ */ jsxRuntime.jsx(MessageWrapper, { children: "Searching..." });
-          case "error":
-            return /* @__PURE__ */ jsxRuntime.jsx(MessageWrapper, { children: "Something went wrong..." });
-          case "empty":
-            return /* @__PURE__ */ jsxRuntime.jsx(MessageWrapper, { children: "No icons found" });
-        }
-      })(),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "ul",
-        {
-          ...rest,
-          ref,
-          "data-testid": "iconify-results",
-          style: { opacity: state === "stale" ? 0.5 : 1 },
-          children: (state === "data" || state === "stale") && data?.map((icon, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { ...getItemProps({ item: icon, index }), children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { padding: 3, mode: "bleed", selected: index === highlightedIndex, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon, width: "100%", height: "100%" }) }) }, icon))
-        }
-      )
-    ] });
-  })
-);
+//#endregion
+//#region src/combobox/search-result.tsx
+const SearchResults = (0, react.memo)((0, react.forwardRef)((props, ref) => {
+	const { state, data, getItemProps, highlightedIndex, ...rest } = props;
+	return <>
+        {(() => {
+		switch (state) {
+			case "initial": return <MessageWrapper>Search for icons</MessageWrapper>;
+			case "loading": return <MessageWrapper>Searching...</MessageWrapper>;
+			case "error": return <MessageWrapper>Something went wrong...</MessageWrapper>;
+			case "empty": return <MessageWrapper>No icons found</MessageWrapper>;
+		}
+	})()}
+
+        <ul {...rest} ref={ref} data-testid="iconify-results" style={{ opacity: state === "stale" ? .5 : 1 }}>
+          {(state === "data" || state === "stale") && data?.map((icon, index) => <li key={icon} {...getItemProps({
+		item: icon,
+		index
+	})}>
+                <_sanity_ui.Button padding={3} mode="bleed" selected={index === highlightedIndex}>
+                  <_iconify_react.Icon icon={icon} width="100%" height="100%" />
+                </_sanity_ui.Button>
+              </li>)}
+        </ul>
+      </>;
+}));
+//#endregion
+//#region src/combobox/unset-button.tsx
 function UnsetButton(props) {
-  const { onUnset } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { border: !0, borderLeft: !1, padding: 1, display: "flex", radius: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Button,
-    {
-      "data-testid": "iconify-unset",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(icons.TrashIcon, {}),
-      onClick: onUnset,
-      mode: "bleed",
-      fontSize: 1,
-      padding: 2
-    }
-  ) });
+	const { onUnset } = props;
+	return <_sanity_ui.Card border borderLeft={false} padding={1} display="flex" radius={2}>
+      <_sanity_ui.Button data-testid="iconify-unset" icon={<_sanity_icons.TrashIcon />} onClick={onUnset} mode="bleed" fontSize={1} padding={2} />
+    </_sanity_ui.Card>;
 }
-const IconifyCombobox = react.memo(function(props) {
-  const {
-    selectedIcon,
-    onSelect: pushSelection,
-    collections,
-    studioElementProps,
-    fieldFocused
-  } = props, id = react.useId(), toast = ui.useToast(), inputRef = react.useRef(null), composedInputRef = react.useCallback(
-    (node) => {
-      inputRef.current = node, studioElementProps?.ref && (studioElementProps.ref.current = node);
-    },
-    [studioElementProps?.ref]
-  ), suppressNextBlur = react.useRef(!1), handleFocus = react.useCallback(
-    (event) => {
-      suppressNextBlur.current = !0, setTimeout(() => {
-        suppressNextBlur.current = !1;
-      }, 0), studioElementProps?.onFocus?.(event);
-    },
-    [studioElementProps]
-  ), handleBlur = react.useCallback(
-    (event) => {
-      if (suppressNextBlur.current) {
-        suppressNextBlur.current = !1;
-        return;
-      }
-      studioElementProps?.onBlur?.(event);
-    },
-    [studioElementProps]
-  ), { term, setTerm, debouncedTerm, isLoading, isError, error, data, isPreviousData } = useSearch({
-    collections
-  }), {
-    isOpen,
-    getMenuProps,
-    getInputProps,
-    highlightedIndex,
-    getItemProps,
-    selectItem,
-    setInputValue,
-    closeMenu
-  } = downshift.useCombobox({
-    items: data ?? [],
-    inputValue: term,
-    onInputValueChange({ inputValue, selectedItem }) {
-      inputValue !== selectedItem && setTerm(inputValue);
-    },
-    onSelectedItemChange({ selectedItem }) {
-      selectedItem && (pushSelection(selectedItem), setTerm("", !0), setInputValue(""));
-    }
-  });
-  react.useEffect(() => {
-    fieldFocused || closeMenu();
-  }, [fieldFocused, closeMenu]);
-  const handleUnset = react.useCallback(() => {
-    pushSelection(""), setTerm("", !0), selectItem("");
-  }, [pushSelection, setTerm, selectItem]);
-  react.useEffect(() => {
-    isError && (console.error("Iconify input error:", error), toast.push({
-      id,
-      status: "error",
-      title: "Iconify input error",
-      description: error?.message
-    }));
-  }, [error, id, isError, toast]);
-  const { onBlur: _downshiftOnBlur, ...inputProps } = getInputProps({
-    ref: composedInputRef,
-    id: studioElementProps?.id,
-    "aria-describedby": studioElementProps?.["aria-describedby"],
-    onFocus: handleFocus
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      SearchInput,
-      {
-        ...inputProps,
-        onBlur: handleBlur,
-        selectedIcon,
-        suffix: selectedIcon ? /* @__PURE__ */ jsxRuntime.jsx(UnsetButton, { onUnset: handleUnset }) : null
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Popover,
-      {
-        open: !0,
-        style: { display: isOpen ? "block" : "none" },
-        placement: "bottom",
-        arrow: !1,
-        matchReferenceWidth: !0,
-        constrainSize: !0,
-        referenceElement: inputRef.current,
-        content: /* @__PURE__ */ jsxRuntime.jsx(OptionsWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          SearchResults,
-          {
-            ...getMenuProps(),
-            state: tsPattern.match(!0).returnType().with(isLoading, () => "loading").with(!debouncedTerm, () => "initial").with(isError, () => "error").with(!data || data.length === 0, () => "empty").with(isPreviousData, () => "stale").otherwise(() => "data"),
-            data,
-            getItemProps,
-            highlightedIndex
-          }
-        ) })
-      }
-    )
-  ] });
-}), queryClient = new reactQuery.QueryClient();
+//#endregion
+//#region src/combobox/iconify-combobox.tsx
+const IconifyCombobox = (0, react.memo)(function IconifyCombobox(props) {
+	const { selectedIcon, onSelect: pushSelection, collections, studioElementProps, fieldFocused } = props;
+	const id = (0, react.useId)();
+	const toast = (0, _sanity_ui.useToast)();
+	const inputRef = (0, react.useRef)(null);
+	const composedInputRef = (0, react.useCallback)((node) => {
+		inputRef.current = node;
+		if (studioElementProps?.ref) studioElementProps.ref.current = node;
+	}, [studioElementProps?.ref]);
+	const suppressNextBlur = (0, react.useRef)(false);
+	const handleFocus = (0, react.useCallback)((event) => {
+		suppressNextBlur.current = true;
+		setTimeout(() => {
+			suppressNextBlur.current = false;
+		}, 0);
+		studioElementProps?.onFocus?.(event);
+	}, [studioElementProps]);
+	const handleBlur = (0, react.useCallback)((event) => {
+		if (suppressNextBlur.current) {
+			suppressNextBlur.current = false;
+			return;
+		}
+		studioElementProps?.onBlur?.(event);
+	}, [studioElementProps]);
+	const { term, setTerm, debouncedTerm, isLoading, isError, error, data, isPreviousData } = useSearch({ collections });
+	const { isOpen, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectItem, setInputValue, closeMenu } = (0, downshift.useCombobox)({
+		items: data ?? [],
+		inputValue: term,
+		onInputValueChange({ inputValue, selectedItem }) {
+			if (inputValue !== selectedItem) setTerm(inputValue);
+		},
+		onSelectedItemChange({ selectedItem }) {
+			if (selectedItem) {
+				pushSelection(selectedItem);
+				setTerm("", true);
+				setInputValue("");
+			}
+		}
+	});
+	(0, react.useEffect)(() => {
+		if (!fieldFocused) closeMenu();
+	}, [fieldFocused, closeMenu]);
+	const handleUnset = (0, react.useCallback)(() => {
+		pushSelection("");
+		setTerm("", true);
+		selectItem("");
+	}, [
+		pushSelection,
+		setTerm,
+		selectItem
+	]);
+	(0, react.useEffect)(() => {
+		if (isError) {
+			console.error("Iconify input error:", error);
+			toast.push({
+				id,
+				status: "error",
+				title: "Iconify input error",
+				description: error?.message
+			});
+		}
+	}, [
+		error,
+		id,
+		isError,
+		toast
+	]);
+	const { onBlur: _downshiftOnBlur, ...inputProps } = getInputProps({
+		ref: composedInputRef,
+		id: studioElementProps?.id,
+		"aria-describedby": studioElementProps?.["aria-describedby"],
+		onFocus: handleFocus
+	});
+	return <div>
+      <SearchInput {...inputProps} onBlur={handleBlur} selectedIcon={selectedIcon} suffix={selectedIcon ? <UnsetButton onUnset={handleUnset} /> : null} />
+
+      <_sanity_ui.Popover open={true} style={{ display: isOpen ? "block" : "none" }} placement="bottom" arrow={false} matchReferenceWidth constrainSize referenceElement={inputRef.current} content={<OptionsWrapper>
+            <SearchResults {...getMenuProps()} state={(0, ts_pattern.match)(true).returnType().with(isLoading, () => "loading").with(!debouncedTerm, () => "initial").with(isError, () => "error").with(!data || data.length === 0, () => "empty").with(isPreviousData, () => "stale").otherwise(() => "data")} data={data} getItemProps={getItemProps} highlightedIndex={highlightedIndex} />
+          </OptionsWrapper>} />
+    </div>;
+});
+//#endregion
+//#region src/lib/query-client.tsx
+const queryClient = new _tanstack_react_query.QueryClient();
 function QueryClientProvider(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: props.children });
+	return <_tanstack_react_query.QueryClientProvider client={queryClient}>{props.children}</_tanstack_react_query.QueryClientProvider>;
 }
+//#endregion
+//#region src/lib/use-pretty-icon-name.ts
 function usePrettyIconName(props) {
-  const { name } = props, iconMeta = react.useMemo(
-    () => props.iconMeta ?? (name ? utils.stringToIcon(name) : null),
-    [name, props.iconMeta]
-  ), iconSetInfo = useIconSetInfo({ prefix: iconMeta?.prefix ?? null });
-  return react.useMemo(
-    () => iconMeta ? {
-      name: changeCase.sentenceCase(iconMeta.name),
-      collection: iconSetInfo.data?.name ?? iconMeta.prefix
-    } : null,
-    [iconMeta, iconSetInfo.data?.name]
-  );
+	const { name } = props;
+	const iconMeta = (0, react.useMemo)(() => props.iconMeta ?? (name ? (0, _iconify_utils.stringToIcon)(name) : null), [name, props.iconMeta]);
+	const iconSetInfo = useIconSetInfo({ prefix: iconMeta?.prefix ?? null });
+	return (0, react.useMemo)(() => iconMeta ? {
+		name: (0, change_case.sentenceCase)(iconMeta.name),
+		collection: iconSetInfo.data?.name ?? iconMeta.prefix
+	} : null, [iconMeta, iconSetInfo.data?.name]);
 }
-const theme = theme$1.buildTheme(), IconifyInput = react.memo(function(props) {
-  const { config, value, onChange: pushChange, schemaType, elementProps, focused } = props, selectedIcon = value?.name ?? null, options = schemaType.options, collections = !!options?.collections?.length && options.collections || !!config?.collections?.length && config.collections || null, showName = options?.showName ?? config?.showName ?? !1, 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,
-        studioElementProps: elementProps,
-        fieldFocused: focused
-      }
-    ),
-    showName && selectedIcon ? /* @__PURE__ */ jsxRuntime.jsx(IconifyNameDisplay, { name: selectedIcon }) : null
-  ] }) }) });
+//#endregion
+//#region src/iconify-input.tsx
+const theme = (0, _sanity_ui_theme.buildTheme)();
+const IconifyInput = (0, react.memo)(function IconifyInput(props) {
+	const { config, value, onChange: pushChange, schemaType, elementProps, focused } = props;
+	const selectedIcon = value?.name ?? null;
+	const options = schemaType.options;
+	const collections = !!options?.collections?.length && options.collections || !!config?.collections?.length && config.collections || null;
+	const showName = options?.showName ?? config?.showName ?? false;
+	const handleSelect = (0, react.useCallback)((icon) => {
+		pushChange(icon === "" ? (0, sanity.unset)() : (0, sanity.set)(icon, ["name"]));
+	}, [pushChange]);
+	return <QueryClientProvider>
+      <_sanity_ui.ThemeProvider theme={theme}>
+        <_sanity_ui.Stack space={2}>
+          <IconifyCombobox selectedIcon={selectedIcon} onSelect={handleSelect} collections={collections} studioElementProps={elementProps} fieldFocused={focused} />
+
+          {showName && selectedIcon ? <IconifyNameDisplay name={selectedIcon} /> : null}
+        </_sanity_ui.Stack>
+      </_sanity_ui.ThemeProvider>
+    </QueryClientProvider>;
 });
 function IconifyNameDisplay(props) {
-  const { name } = props, prettyName = usePrettyIconName({ name });
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: "Selected:" }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "semibold", children: prettyName?.name ?? name }),
-    prettyName?.collection && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, muted: !0, style: { fontStyle: "italic" }, children: [
-      "by ",
-      prettyName?.collection
-    ] })
-  ] });
+	const { name } = props;
+	const prettyName = usePrettyIconName({ name });
+	return <_sanity_ui.Flex gap={1}>
+      <_sanity_ui.Text size={1} muted>
+        Selected:
+      </_sanity_ui.Text>
+
+      <_sanity_ui.Text size={1} weight="semibold">
+        {prettyName?.name ?? name}
+      </_sanity_ui.Text>
+
+      {prettyName?.collection && <_sanity_ui.Text size={1} muted style={{ fontStyle: "italic" }}>
+          by {prettyName?.collection}
+        </_sanity_ui.Text>}
+    </_sanity_ui.Flex>;
 }
-const IconifyPreview = react.memo(function(props) {
-  const { title } = props, iconName = typeof props.title == "string" ? utils.stringToIcon(props.title) : null;
-  return typeof title == "string" && iconName ? /* @__PURE__ */ jsxRuntime.jsx(QueryClientProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(IconifyPreviewInner, { ...props, iconName: title, iconMeta: iconName }) }) : props.renderDefault(props);
+//#endregion
+//#region src/iconify-preview.tsx
+const IconifyPreview = (0, react.memo)(function IconifyPreview(props) {
+	const { title } = props;
+	const iconName = typeof props.title === "string" ? (0, _iconify_utils.stringToIcon)(props.title) : null;
+	if (typeof title === "string" && iconName) return <QueryClientProvider>
+        <IconifyPreviewInner {...props} iconName={title} iconMeta={iconName} />
+      </QueryClientProvider>;
+	return props.renderDefault(props);
 });
 function IconifyPreviewInner(props) {
-  const { iconMeta, iconName, ...previewProps } = props, prettyName = usePrettyIconName({ iconMeta });
-  return props.renderDefault({
-    ...previewProps,
-    media: /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: iconName }),
-    title: prettyName?.name ?? iconName,
-    subtitle: prettyName?.collection
-  });
+	const { iconMeta, iconName, ...previewProps } = props;
+	const prettyName = usePrettyIconName({ iconMeta });
+	return props.renderDefault({
+		...previewProps,
+		media: <_iconify_react.Icon icon={iconName} />,
+		title: prettyName?.name ?? iconName,
+		subtitle: prettyName?.collection
+	});
 }
-const iconify = sanity.definePlugin((config = {}) => ({
-  name: "sanity-plugin-iconify",
-  schema: {
-    types: [
-      {
-        name: "icon",
-        title: "Icon",
-        type: "object",
-        fields: [
-          {
-            name: "name",
-            title: "Name",
-            type: "string"
-          }
-        ],
-        components: {
-          input: (props) => /* @__PURE__ */ jsxRuntime.jsx(IconifyInput, { ...props, config }),
-          preview: IconifyPreview,
-          // This makes sure the input component is not indented
-          field: (props) => props.renderDefault({ ...props, level: 0 })
-        }
-      }
-    ]
-  }
-}));
+//#endregion
+//#region src/iconify-plugin.tsx
+/**
+* Usage in `sanity.config.ts` (or .js)
+*
+* ```ts
+* import { defineConfig } from 'sanity'
+* import { iconify } from 'sanity-plugin-iconify'
+*
+* export default defineConfig({
+*   // ...
+*   plugins: [iconify()],
+* })
+* ```
+*/
+const iconify = (0, sanity.definePlugin)((config = {}) => {
+	return {
+		name: "sanity-plugin-iconify",
+		schema: { types: [{
+			name: "icon",
+			title: "Icon",
+			type: "object",
+			fields: [{
+				name: "name",
+				title: "Name",
+				type: "string"
+			}],
+			components: {
+				input: (props) => <IconifyInput {...props} config={config} />,
+				preview: IconifyPreview,
+				field: (props) => props.renderDefault({
+					...props,
+					level: 0
+				})
+			}
+		}] }
+	};
+});
+//#endregion
 exports.iconify = iconify;
-//# sourceMappingURL=index.cjs.map