@driftime/sanity-plugin-icon 0.1.0

package/dist/index.js

@@ -0,0 +1,685 @@
+import { a as convertCase, i as serialiseIconNode, n as parseIconNode, o as isDefined, r as resolveIconNode, t as Drawing } from "./drawing-Bo0HTICv.js";
+import { FormField, defineField, definePlugin, defineType, set, setIfMissing, unset } from "sanity";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CloseIcon } from "@sanity/icons/Close";
+import { Box, Button, Dialog, Flex, Grid, Spinner, Stack, Text, TextInput } from "@sanity/ui";
+import { createElement, useEffect, useRef, useState } from "react";
+import { SearchIcon } from "@sanity/icons/Search";
+import { Popover } from "@sanity/ui/popover";
+function Field(t0) {
+	let $ = c(7), { title, description, inputId, validation, path, children } = t0, t1;
+	return $[0] !== children || $[1] !== description || $[2] !== inputId || $[3] !== path || $[4] !== title || $[5] !== validation ? (t1 = /* @__PURE__ */ jsx(FormField, {
+		title,
+		description,
+		inputId,
+		validation,
+		path,
+		children
+	}), $[0] = children, $[1] = description, $[2] = inputId, $[3] = path, $[4] = title, $[5] = validation, $[6] = t1) : t1 = $[6], t1;
+}
+/** Space between rows, in pixels. */
+const gridLayoutStyle = {
+	justifyItems: "center",
+	rowGap: 4
+};
+function Cell(t0) {
+	let $ = c(24), focusable, icon, onSelect, position, props, selected, total;
+	$[0] === t0 ? (focusable = $[1], icon = $[2], onSelect = $[3], position = $[4], props = $[5], selected = $[6], total = $[7]) : ({icon, selected, focusable, position, total, onSelect, ...props} = t0, $[0] = t0, $[1] = focusable, $[2] = icon, $[3] = onSelect, $[4] = position, $[5] = props, $[6] = selected, $[7] = total);
+	let t1 = focusable ? 0 : -1, t2;
+	$[8] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {
+		width: 40,
+		height: 40
+	}, $[8] = t2) : t2 = $[8];
+	let t3;
+	$[9] === icon.node ? t3 = $[10] : (t3 = /* @__PURE__ */ jsx(Drawing, {
+		node: icon.node,
+		width: "1.25em",
+		height: "1.25em",
+		strokeWidth: 1.5
+	}), $[9] = icon.node, $[10] = t3);
+	let t4;
+	$[11] !== icon || $[12] !== onSelect ? (t4 = () => {
+		onSelect(icon);
+	}, $[11] = icon, $[12] = onSelect, $[13] = t4) : t4 = $[13];
+	let t5;
+	return $[14] !== icon.label || $[15] !== icon.name || $[16] !== position || $[17] !== props || $[18] !== selected || $[19] !== t1 || $[20] !== t3 || $[21] !== t4 || $[22] !== total ? (t5 = /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		role: "option",
+		"aria-selected": selected,
+		"aria-posinset": position,
+		"aria-setsize": total,
+		tabIndex: t1,
+		mode: "bleed",
+		selected,
+		padding: 0,
+		style: t2,
+		icon: t3,
+		"aria-label": icon.label,
+		"data-icon": icon.name,
+		onClick: t4,
+		...props
+	}), $[14] = icon.label, $[15] = icon.name, $[16] = position, $[17] = props, $[18] = selected, $[19] = t1, $[20] = t3, $[21] = t4, $[22] = total, $[23] = t5) : t5 = $[23], t5;
+}
+function Recent(t0) {
+	let $ = c(23), icons, onForget, onSelect, props, selected;
+	$[0] === t0 ? (icons = $[1], onForget = $[2], onSelect = $[3], props = $[4], selected = $[5]) : ({icons, selected, onSelect, onForget, ...props} = t0, $[0] = t0, $[1] = icons, $[2] = onForget, $[3] = onSelect, $[4] = props, $[5] = selected);
+	let t1;
+	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		weight: "medium",
+		muted: !0,
+		children: "Recent icons"
+	}), $[6] = t1) : t1 = $[6];
+	let t2;
+	$[7] === onForget ? t2 = $[8] : (t2 = /* @__PURE__ */ jsxs(Flex, {
+		align: "center",
+		justify: "space-between",
+		gap: 2,
+		children: [t1, /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			mode: "bleed",
+			fontSize: 1,
+			padding: 2,
+			text: "Clear",
+			onClick: onForget,
+			"aria-label": "Forget the recently used icons."
+		})]
+	}), $[7] = onForget, $[8] = t2);
+	let t3;
+	if ($[9] !== icons || $[10] !== onSelect || $[11] !== selected) {
+		let t4;
+		$[13] !== icons.length || $[14] !== onSelect || $[15] !== selected ? (t4 = (icon, index) => /* @__PURE__ */ jsx(Cell, {
+			icon,
+			selected: icon.name === selected,
+			focusable: !0,
+			position: index + 1,
+			total: icons.length,
+			onSelect
+		}, icon.name), $[13] = icons.length, $[14] = onSelect, $[15] = selected, $[16] = t4) : t4 = $[16], t3 = icons.map(t4), $[9] = icons, $[10] = onSelect, $[11] = selected, $[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	$[17] === t3 ? t4 = $[18] : (t4 = /* @__PURE__ */ jsx(Grid, {
+		role: "listbox",
+		"aria-label": "Recent icons",
+		gridTemplateColumns: 8,
+		style: gridLayoutStyle,
+		children: t3
+	}), $[17] = t3, $[18] = t4);
+	let t5;
+	return $[19] !== props || $[20] !== t2 || $[21] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		...props,
+		children: [t2, t4]
+	}), $[19] = props, $[20] = t2, $[21] = t4, $[22] = t5) : t5 = $[22], t5;
+}
+function Tooltip(t0) {
+	let $ = c(14), hovered, props;
+	$[0] === t0 ? (hovered = $[1], props = $[2]) : ({hovered, ...props} = t0, $[0] = t0, $[1] = hovered, $[2] = props);
+	let t1;
+	$[3] === hovered ? t1 = $[4] : (t1 = isDefined(hovered), $[3] = hovered, $[4] = t1);
+	let t2 = hovered?.element ?? null, t3, t4;
+	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t3 = [
+		-4,
+		0,
+		0,
+		0
+	], t4 = { pointerEvents: "none" }, $[5] = t3, $[6] = t4) : (t3 = $[5], t4 = $[6]);
+	let t5;
+	$[7] === hovered ? t5 = $[8] : (t5 = isDefined(hovered) && /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		style: { maxWidth: "16rem" },
+		children: [/* @__PURE__ */ jsx(Text, {
+			size: 1,
+			weight: "medium",
+			children: hovered.icon.label
+		}), isDefined(hovered.icon.tags) && /* @__PURE__ */ jsx(Text, {
+			size: 1,
+			muted: !0,
+			children: hovered.icon.tags
+		})]
+	}), $[7] = hovered, $[8] = t5);
+	let t6;
+	return $[9] !== props || $[10] !== t1 || $[11] !== t2 || $[12] !== t5 ? (t6 = /* @__PURE__ */ jsx(Popover, {
+		open: t1,
+		referenceElement: t2,
+		placement: "top",
+		portal: !0,
+		padding: 3,
+		__unstable_margins: t3,
+		style: t4,
+		content: t5,
+		...props
+	}), $[9] = props, $[10] = t1, $[11] = t2, $[12] = t5, $[13] = t6) : t6 = $[13], t6;
+}
+/** Properties every icon the Studio draws is rendered with. */
+const defaultIconProps = {
+	width: "1em",
+	height: "1em",
+	strokeWidth: 1.5
+};
+/**
+* Flattens text into the form a search compares against, so a hyphenated icon name and a multi-word
+* tag are matched the same way.
+*
+* @param value - The text to flatten.
+* @returns The text in comparable form.
+*/
+function normaliseTerms(value) {
+	return value.toLowerCase().replaceAll(/[\s-]+/gu, " ").trim();
+}
+/**
+* Reads the icon library, pairing each drawing with the terms it can be found by. Both files come
+* from the same release as the icons themselves, so the drawings and their terms never disagree.
+*
+* @returns Every icon the library offers.
+*/
+async function readLibrary() {
+	let [drawings, tags] = await Promise.all([import("lucide-static/icon-nodes.json"), import("lucide-static/tags.json")]), nodes = drawings.default, terms = tags.default;
+	return Object.keys(nodes).flatMap((name) => {
+		let node = parseIconNode(nodes[name]);
+		if (!isDefined(node)) return [];
+		let iconTags = terms[name] ?? [];
+		return [{
+			name,
+			label: convertCase(name, "sentence"),
+			tags: iconTags.join(", "),
+			node,
+			terms: normaliseTerms([name, ...iconTags].join(" "))
+		}];
+	});
+}
+/** The library once asked for, held so every field in a Studio session shares the one request. */
+let libraryRequest;
+/**
+* Reads the icon library, sharing a single request across every field opened in the session. The
+* library is a megabyte of data that never changes within a release, so asking twice only ever costs.
+*
+* @returns Every icon the library offers.
+*/
+async function requestLibrary() {
+	return libraryRequest ??= readLibrary(), await libraryRequest;
+}
+/**
+* Reads the icon library, sharing one request with every other field in the session. Callers mount
+* only while a picker is open, so a Studio that never opens one never pays the megabyte it costs.
+*
+* @returns Every icon the library offers, or undefined while it is still being read.
+*/
+function useIconLibrary() {
+	let $ = c(2), [library, setLibrary] = useState(), t0, t1;
+	return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => {
+		let active = !0;
+		return (async function load() {
+			let loaded = await requestLibrary();
+			active && setLibrary(loaded);
+		})(), () => {
+			active = !1;
+		};
+	}, t1 = [], $[0] = t0, $[1] = t1) : (t0 = $[0], t1 = $[1]), useEffect(t0, t1), library;
+}
+/** Where the icons an author reached for last are kept, in the browser rather than the dataset. */
+const storageKey = "driftime:sanity-plugin-icon:recent";
+/**
+* Reads the icons an author reached for last.
+*
+* @returns Names of the remembered icons, most recent first.
+*/
+function readRecent() {
+	try {
+		let stored = JSON.parse(globalThis.localStorage.getItem(storageKey) ?? "[]");
+		return Array.isArray(stored) ? stored.filter((entry) => typeof entry == "string") : [];
+	} catch {
+		return [];
+	}
+}
+/**
+* Remembers an icon as the one reached for most recently.
+*
+* @param name - Name of the chosen icon.
+* @returns Names of the remembered icons, most recent first.
+*/
+function writeRecent(name) {
+	let updated = [name, ...readRecent().filter((entry) => entry !== name)].slice(0, 8);
+	try {
+		globalThis.localStorage.setItem(storageKey, JSON.stringify(updated));
+	} catch {}
+	return updated;
+}
+/** Forgets every icon reached for so far. */
+function clearRecent() {
+	try {
+		globalThis.localStorage.removeItem(storageKey);
+	} catch {}
+}
+/**
+* Tracks the icons an author reached for last, keeping what is remembered and what is drawn in step.
+* The stored list is read as the picker mounts, so another tab choosing an icon is picked up too.
+*
+* @returns The remembered names, most recent first, alongside ways to add to and empty them.
+*/
+function useRecentIcons() {
+	let $ = c(4), [recent, setRecent] = useState(readRecent), t0;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = function remember(name) {
+		setRecent(writeRecent(name));
+	}, $[0] = t0) : t0 = $[0];
+	let remember = t0, t1;
+	$[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = function forget() {
+		clearRecent(), setRecent([]);
+	}, $[1] = t1) : t1 = $[1];
+	let forget = t1, t2;
+	return $[2] === recent ? t2 = $[3] : (t2 = {
+		recent,
+		remember,
+		forget
+	}, $[2] = recent, $[3] = t2), t2;
+}
+/**
+* Works out which icon a key press moves to, so the library can be walked without a mouse.
+*
+* @param key - The key pressed.
+* @param current - Index of the icon the grid is on.
+* @param last - Index of the final icon in the results.
+* @returns The index moved to, or undefined when the key does not move.
+*/
+function getNextIndex(key, current, last) {
+	if (key === "ArrowRight") return current + 1;
+	if (key === "ArrowLeft") return current - 1;
+	if (key === "ArrowDown") return current + 8;
+	if (key === "ArrowUp") return current - 8;
+	if (key === "Home") return 0;
+	if (key === "End") return last;
+}
+/**
+* Works out which rows the grid builds for a given scroll position, so only the icons near the
+* viewport are mounted. The rows above and below stand in as padding, keeping the scrollbar honest.
+*
+* @param scrollRow - Row the scrolling area has reached.
+* @param count - Number of icons in the results.
+* @returns The row the grid starts building at, the row it stops at, and the row count in total.
+*/
+function getVisibleRows(scrollRow, count) {
+	let totalRows = Math.ceil(count / 8), firstRow = Math.max(0, scrollRow - 8);
+	return {
+		totalRows,
+		firstRow,
+		lastRow: Math.min(totalRows, firstRow + 8 + 16)
+	};
+}
+function Picker(t0) {
+	let $ = c(28), onSelect, props, selected;
+	$[0] === t0 ? (onSelect = $[1], props = $[2], selected = $[3]) : ({selected, onSelect, ...props} = t0, $[0] = t0, $[1] = onSelect, $[2] = props, $[3] = selected);
+	let library = useIconLibrary(), { recent, remember, forget } = useRecentIcons(), [search, setSearch] = useState(""), [scrollRow, setScrollRow] = useState(0), [movedIndex, setMovedIndex] = useState(), [hovered, setHovered] = useState(), [scrolling, setScrolling] = useState(!1), scroller = useRef(null), activeCell = useRef(null), focusActiveCell = useRef(!1), scrollFrame = useRef(void 0), scrollStop = useRef(void 0), hoverStart = useRef(void 0), query = normaliseTerms(search), searching = isDefined(query), results = (library ?? []).filter((icon) => !searching || icon.terms.includes(query)), byName = new Map((library ?? []).map(_temp)), recentIcons = searching ? [] : recent.flatMap((entry) => {
+		let icon_1 = byName.get(entry);
+		return isDefined(icon_1) ? [icon_1] : [];
+	}), { totalRows, firstRow, lastRow } = getVisibleRows(scrollRow, results.length), visible = results.slice(firstRow * 8, lastRow * 8), selectedIndex = searching || !isDefined(library) || !isDefined(selected) ? -1 : library.findIndex((icon_2) => icon_2.name === selected), activeIndex = movedIndex ?? Math.max(0, selectedIndex), t1, t2;
+	$[4] === selectedIndex ? (t1 = $[5], t2 = $[6]) : (t1 = () => {
+		let element = scroller.current;
+		isDefined(element) && selectedIndex !== -1 && (element.scrollTop = Math.max(0, Math.floor(selectedIndex / 8) * 44 - 174));
+	}, t2 = [selectedIndex], $[4] = selectedIndex, $[5] = t1, $[6] = t2), useEffect(t1, t2);
+	let t3, t4;
+	$[7] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => () => {
+		isDefined(scrollFrame.current) && cancelAnimationFrame(scrollFrame.current), isDefined(scrollStop.current) && clearTimeout(scrollStop.current), isDefined(hoverStart.current) && clearTimeout(hoverStart.current);
+	}, t4 = [], $[7] = t3, $[8] = t4) : (t3 = $[7], t4 = $[8]), useEffect(t3, t4);
+	let t5;
+	$[9] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => {
+		focusActiveCell.current && (focusActiveCell.current = !1, isDefined(activeCell.current) && activeCell.current.focus());
+	}, $[9] = t5) : t5 = $[9];
+	let t6;
+	$[10] === activeIndex ? t6 = $[11] : (t6 = [activeIndex], $[10] = activeIndex, $[11] = t6), useEffect(t5, t6);
+	let t7;
+	$[12] !== onSelect || $[13] !== remember ? (t7 = function handleSelect(icon_3) {
+		remember(icon_3.name), onSelect(icon_3);
+	}, $[12] = onSelect, $[13] = remember, $[14] = t7) : t7 = $[14];
+	let handleSelect = t7, t8;
+	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t8 = function handleSearch(event) {
+		setSearch(event.currentTarget.value), setMovedIndex(void 0), isDefined(scroller.current) && (scroller.current.scrollTop = 0);
+	}, $[15] = t8) : t8 = $[15];
+	let handleSearch = t8, selectActive = function selectActive() {
+		let icon_4 = results[activeIndex];
+		isDefined(icon_4) && handleSelect(icon_4);
+	}, handleSearchKeyDown = function handleSearchKeyDown(event_0) {
+		if (event_0.key === "Enter") {
+			event_0.preventDefault(), selectActive();
+			return;
+		}
+		event_0.key === "ArrowDown" && (event_0.preventDefault(), isDefined(activeCell.current) && activeCell.current.focus());
+	}, t9;
+	$[16] === scrolling ? t9 = $[17] : (t9 = function handleScroll() {
+		isDefined(hoverStart.current) && clearTimeout(hoverStart.current), setHovered(void 0), scrolling || setScrolling(!0), isDefined(scrollStop.current) && clearTimeout(scrollStop.current), scrollStop.current = setTimeout(() => {
+			setScrolling(!1);
+		}, 150), !isDefined(scrollFrame.current) && (scrollFrame.current = requestAnimationFrame(() => {
+			scrollFrame.current = void 0;
+			let element_0 = scroller.current;
+			isDefined(element_0) && setScrollRow(Math.floor(element_0.scrollTop / 44));
+		}));
+	}, $[16] = scrolling, $[17] = t9);
+	let handleScroll = t9, handleHover = function handleHover(event_1) {
+		if (scrolling) return;
+		let target = event_1.target instanceof Element ? event_1.target.closest("[data-icon]") : void 0, cell = target instanceof HTMLElement ? target : void 0;
+		if (cell === hovered?.element) return;
+		let name = cell?.dataset.icon, icon_5 = isDefined(name) ? byName.get(name) : void 0;
+		if (isDefined(hoverStart.current) && clearTimeout(hoverStart.current), !isDefined(icon_5) || !isDefined(cell)) {
+			setHovered(void 0);
+			return;
+		}
+		if (isDefined(hovered)) {
+			setHovered({
+				icon: icon_5,
+				element: cell
+			});
+			return;
+		}
+		hoverStart.current = setTimeout(() => {
+			setHovered({
+				icon: icon_5,
+				element: cell
+			});
+		}, 200);
+	}, t10;
+	$[18] === hovered ? t10 = $[19] : (t10 = function clearHover() {
+		isDefined(hoverStart.current) && clearTimeout(hoverStart.current), isDefined(hovered) && setHovered(void 0);
+	}, $[18] = hovered, $[19] = t10);
+	let clearHover = t10, handleGridKeyDown = function handleGridKeyDown(event_2) {
+		let last = results.length - 1;
+		if (last < 0) return;
+		if (event_2.key === "Enter" || event_2.key === " ") {
+			event_2.preventDefault(), selectActive();
+			return;
+		}
+		let next = getNextIndex(event_2.key, activeIndex, last);
+		if (!isDefined(next)) return;
+		event_2.preventDefault();
+		let index = Math.min(Math.max(next, 0), last);
+		focusActiveCell.current = !0, setMovedIndex(index);
+		let element_1 = scroller.current;
+		if (!isDefined(element_1)) return;
+		let top = Math.floor(index / 8) * 44;
+		top < element_1.scrollTop ? element_1.scrollTop = top : top + 44 > element_1.scrollTop + 348 && (element_1.scrollTop = top + 44 - 348);
+	}, t11;
+	$[20] === Symbol.for("react.memo_cache_sentinel") ? (t11 = /* @__PURE__ */ jsx(SearchIcon, { ...defaultIconProps }), $[20] = t11) : t11 = $[20];
+	let t12;
+	$[21] === library ? t12 = $[22] : (t12 = isDefined(library), $[21] = library, $[22] = t12);
+	let t13;
+	$[23] === library ? t13 = $[24] : (t13 = !isDefined(library) && /* @__PURE__ */ jsx(Flex, {
+		align: "center",
+		justify: "center",
+		style: { height: 348 },
+		children: /* @__PURE__ */ jsx(Spinner, { muted: !0 })
+	}), $[23] = library, $[24] = t13);
+	let t14 = hovered?.icon.name, t15;
+	return $[25] !== hovered || $[26] !== t14 ? (t15 = /* @__PURE__ */ jsx(Tooltip, { hovered }, t14), $[25] = hovered, $[26] = t14, $[27] = t15) : t15 = $[27], /* @__PURE__ */ jsx(Dialog, {
+		header: "Select icon",
+		width: 1,
+		...props,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			padding: 4,
+			children: [
+				/* @__PURE__ */ jsx(TextInput, {
+					icon: t11,
+					placeholder: "Search by name or by what the icon depicts",
+					value: search,
+					onChange: handleSearch,
+					onKeyDown: handleSearchKeyDown,
+					disabled: !t12,
+					"aria-label": "Search the icon library"
+				}),
+				t13,
+				isDefined(recentIcons) && /* @__PURE__ */ jsx(Recent, {
+					icons: recentIcons,
+					selected,
+					onSelect: handleSelect,
+					onForget: forget,
+					onMouseOver: handleHover,
+					onMouseLeave: clearHover
+				}),
+				isDefined(library) && /* @__PURE__ */ jsxs(Stack, {
+					gap: 3,
+					children: [/* @__PURE__ */ jsx(Box, {
+						paddingY: 2,
+						children: /* @__PURE__ */ jsxs(Text, {
+							size: 1,
+							weight: "medium",
+							muted: !0,
+							children: [
+								"All icons (",
+								results.length.toLocaleString("en-GB"),
+								")"
+							]
+						})
+					}), /* @__PURE__ */ jsxs(Box, {
+						ref: scroller,
+						role: "listbox",
+						"aria-label": "Icon library",
+						onScroll: handleScroll,
+						onMouseOver: handleHover,
+						onMouseLeave: clearHover,
+						onKeyDown: handleGridKeyDown,
+						style: {
+							height: 348,
+							overflowY: "auto"
+						},
+						children: [results.length === 0 && /* @__PURE__ */ jsxs(Flex, {
+							align: "center",
+							justify: "center",
+							direction: "column",
+							gap: 3,
+							style: { height: 348 },
+							children: [/* @__PURE__ */ jsxs(Text, {
+								size: 1,
+								muted: !0,
+								children: [
+									"Nothing matches “",
+									search,
+									"”."
+								]
+							}), /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								mode: "ghost",
+								text: "Clear search",
+								onClick: () => {
+									setSearch(""), setMovedIndex(void 0);
+								}
+							})]
+						}), results.length > 0 && /* @__PURE__ */ jsx(Grid, {
+							gridTemplateColumns: 8,
+							style: {
+								...gridLayoutStyle,
+								paddingTop: firstRow * 44,
+								paddingBottom: (totalRows - lastRow) * 44
+							},
+							children: visible.map((icon_6, offset) => {
+								let index_0 = firstRow * 8 + offset;
+								return /* @__PURE__ */ jsx(Cell, {
+									ref: index_0 === activeIndex ? activeCell : void 0,
+									icon: icon_6,
+									selected: icon_6.name === selected,
+									focusable: index_0 === activeIndex,
+									position: index_0 + 1,
+									total: results.length,
+									onSelect: handleSelect
+								}, icon_6.name);
+							})
+						})]
+					})]
+				}),
+				t15
+			]
+		})
+	});
+}
+function _temp(icon_0) {
+	return [icon_0.name, icon_0];
+}
+/** Type name of the icon object. */
+const iconTypeName = "icon";
+function Input(t0) {
+	let $ = c(28), { id, value, onChange, readOnly } = t0, { name, node } = value ?? {}, [open, setOpen] = useState(!1), selectedNode = resolveIconNode(node), selectedLabel = isDefined(name) ? convertCase(name, "sentence") : void 0, t1;
+	$[0] !== onChange || $[1] !== setOpen ? (t1 = function handleSelect(icon) {
+		onChange([
+			setIfMissing({ _type: iconTypeName }),
+			set(icon.name, ["name"]),
+			set(serialiseIconNode(icon.node), ["node"])
+		]), setOpen(!1);
+	}, $[0] = onChange, $[1] = setOpen, $[2] = t1) : t1 = $[2];
+	let handleSelect = t1, T0 = Flex, T1 = Button, t5 = isDefined(selectedNode) ? /* @__PURE__ */ jsx(Drawing, {
+		node: selectedNode,
+		...defaultIconProps
+	}) : void 0, t6 = selectedLabel ?? "Select icon", t7;
+	$[3] === setOpen ? t7 = $[4] : (t7 = () => {
+		setOpen(!0);
+	}, $[3] = setOpen, $[4] = t7);
+	let t8 = isDefined(selectedLabel) ? `${selectedLabel} currently selected` : "Select icon", t9;
+	$[5] !== T1 || $[6] !== id || $[7] !== readOnly || $[8] !== t5 || $[9] !== t6 || $[10] !== t7 || $[11] !== t8 ? (t9 = /* @__PURE__ */ jsx(T1, {
+		id,
+		type: "button",
+		mode: "ghost",
+		icon: t5,
+		text: t6,
+		disabled: readOnly,
+		onClick: t7,
+		"aria-label": t8
+	}), $[5] = T1, $[6] = id, $[7] = readOnly, $[8] = t5, $[9] = t6, $[10] = t7, $[11] = t8, $[12] = t9) : t9 = $[12];
+	let t10;
+	$[13] !== onChange || $[14] !== readOnly || $[15] !== value ? (t10 = isDefined(value) && /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		mode: "ghost",
+		tone: "critical",
+		icon: /* @__PURE__ */ jsx(CloseIcon, { ...defaultIconProps }),
+		text: "Clear",
+		disabled: readOnly,
+		onClick: () => {
+			onChange(unset());
+		},
+		"aria-label": "Clear the currently selected icon."
+	}), $[13] = onChange, $[14] = readOnly, $[15] = value, $[16] = t10) : t10 = $[16];
+	let t11;
+	$[17] !== handleSelect || $[18] !== id || $[19] !== name || $[20] !== open || $[21] !== setOpen ? (t11 = open && /* @__PURE__ */ jsx(Picker, {
+		id: `${id}-library`,
+		selected: name,
+		onSelect: handleSelect,
+		onClose: () => {
+			setOpen(!1);
+		},
+		onClickOutside: () => {
+			setOpen(!1);
+		}
+	}), $[17] = handleSelect, $[18] = id, $[19] = name, $[20] = open, $[21] = setOpen, $[22] = t11) : t11 = $[22];
+	let t12;
+	return $[23] !== T0 || $[24] !== t10 || $[25] !== t11 || $[26] !== t9 ? (t12 = /* @__PURE__ */ jsxs(T0, {
+		gap: 2,
+		children: [
+			t9,
+			t10,
+			t11
+		]
+	}), $[23] = T0, $[24] = t10, $[25] = t11, $[26] = t9, $[27] = t12) : t12 = $[27], t12;
+}
+/**
+* Builds the media a stored icon previews with, so a document lists the drawing an author chose
+* rather than one placeholder standing in for every icon alike.
+*
+* @param value - The stored icon.
+* @returns The media component, or undefined when nothing readable was stored.
+* @public
+*/
+function createIconPreview(value) {
+	let node = resolveIconNode(value?.node);
+	if (isDefined(node)) return function IconPreview() {
+		return /* @__PURE__ */ jsx(Drawing, {
+			node,
+			...defaultIconProps
+		});
+	};
+}
+function SquareDashedIcon(props) {
+	let $ = c(14), t0, t1, t10, t11, t2, t3, t4, t5, t6, t7, t8, t9;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx("path", { d: "M5 3a2 2 0 0 0-2 2" }), t1 = /* @__PURE__ */ jsx("path", { d: "M19 3a2 2 0 0 1 2 2" }), t2 = /* @__PURE__ */ jsx("path", { d: "M21 19a2 2 0 0 1-2 2" }), t3 = /* @__PURE__ */ jsx("path", { d: "M5 21a2 2 0 0 1-2-2" }), t4 = /* @__PURE__ */ jsx("path", { d: "M9 3h1" }), t5 = /* @__PURE__ */ jsx("path", { d: "M9 21h1" }), t6 = /* @__PURE__ */ jsx("path", { d: "M14 3h1" }), t7 = /* @__PURE__ */ jsx("path", { d: "M14 21h1" }), t8 = /* @__PURE__ */ jsx("path", { d: "M3 9v1" }), t9 = /* @__PURE__ */ jsx("path", { d: "M21 9v1" }), t10 = /* @__PURE__ */ jsx("path", { d: "M3 14v1" }), t11 = /* @__PURE__ */ jsx("path", { d: "M21 14v1" }), $[0] = t0, $[1] = t1, $[2] = t10, $[3] = t11, $[4] = t2, $[5] = t3, $[6] = t4, $[7] = t5, $[8] = t6, $[9] = t7, $[10] = t8, $[11] = t9) : (t0 = $[0], t1 = $[1], t10 = $[2], t11 = $[3], t2 = $[4], t3 = $[5], t4 = $[6], t5 = $[7], t6 = $[8], t7 = $[9], t8 = $[10], t9 = $[11]);
+	let t12;
+	return $[12] === props ? t12 = $[13] : (t12 = /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 24,
+		height: 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [
+			t0,
+			t1,
+			t2,
+			t3,
+			t4,
+			t5,
+			t6,
+			t7,
+			t8,
+			t9,
+			t10,
+			t11
+		]
+	}), $[12] = props, $[13] = t12), t12;
+}
+/**
+* Creates a Sanity Studio icon component from an SVG icon.
+*
+* @param icon - The icon component to wrap.
+* @param props - Additional props merged over the default properties a Studio icon is drawn with.
+* @returns A Studio icon component.
+*/
+function createSanityIcon(icon, props) {
+	let Icon = icon;
+	function SanityIcon() {
+		return createElement(Icon, {
+			...defaultIconProps,
+			...props
+		});
+	}
+	return SanityIcon;
+}
+const iconType = defineType({
+	name: iconTypeName,
+	type: "object",
+	icon: createSanityIcon(SquareDashedIcon),
+	description: "Icon chosen from the Lucide library.",
+	components: {
+		field: Field,
+		input: Input
+	},
+	preview: {
+		select: {
+			name: "name",
+			node: "node"
+		},
+		prepare(selection) {
+			let { name, node } = selection;
+			return {
+				title: isDefined(name) ? convertCase(name, "sentence") : "No icon",
+				media: createIconPreview({
+					_type: iconTypeName,
+					name,
+					node
+				})
+			};
+		}
+	},
+	fields: [defineField({
+		name: "name",
+		type: "string",
+		description: "Name of the chosen icon in the library it was taken from."
+	}), defineField({
+		name: "node",
+		type: "text",
+		description: "Shapes the icon is drawn from, written when the icon is chosen."
+	})]
+}), iconPlugin = definePlugin({
+	name: "@driftime/sanity-plugin-icon",
+	schema: { types: [iconType] }
+});
+export { createIconPreview, iconPlugin };
+
+//# sourceMappingURL=index.js.map