@driftime/sanity-plugin-icon 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,49 +1,148 @@
-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 { r as pluginName, t as parseIconSet } from "./sets-kepuObH8.js";
+import { n as isDefined, t as convertCase } from "./utils-COPacfAq.js";
+import { a as resolveIconDrawing, o as serializeIconDrawing } from "./nodes-DAzj56Xn.js";
+import { t as Drawing } from "./drawing-ByrcBbWB.js";
+import { t as getIconSetKey } from "./registry-BEEpqK3z.js";
+import { ChangeIndicator, FieldActionsProvider, FieldActionsResolver, FormField, defineField, definePlugin, defineType, getPublishedId, set, setIfMissing, unset, useFormValue } 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CloseIcon } from "@sanity/icons/Close";
+import { Box, Button, Card, Dialog, Flex, Grid, Spinner, Stack, Text, TextInput } from "@sanity/ui";
 import { SearchIcon } from "@sanity/icons/Search";
+import { WarningOutlineIcon } from "@sanity/icons/WarningOutline";
 import { Popover } from "@sanity/ui/popover";
+import { iconRegistry } from "@driftime/sanity-plugin-icon/sets";
+/**
+* Checks whether a form node has members, as objects and arrays of objects do.
+*
+* @param node - The form node to check.
+* @returns True if the node has members.
+*/
+function hasMembers(node) {
+	return "members" in node;
+}
+/**
+* Collects the validation on a form node and everything inside it.
+*
+* @param node - The form node.
+* @returns Every validation result on the node or inside it.
+*/
+function collectNodeValidation(node) {
+	return [...node.validation, ...hasMembers(node) ? collectMemberValidation(node.members) : []];
+}
+/**
+* Collects the validation anywhere inside a field's members. The form only passes a field the
+* validation at its own path, so a field that hides its members would otherwise show none of theirs.
+*
+* @param members - The members.
+* @returns Every validation result on the members or inside them.
+*/
+function collectMemberValidation(members) {
+	return members.flatMap((member) => member.kind === "field" ? collectNodeValidation(member.field) : member.kind === "fieldSet" ? collectMemberValidation(member.fieldSet.members) : member.kind === "item" ? collectNodeValidation(member.item) : []);
+}
 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,
+	let $ = c(40), { actions, schemaType, title, description, presence, validation, level, inputId, path, changed, children, inputProps } = t0, t1;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [], $[0] = t1) : t1 = $[0];
+	let [headerActions, setHeaderActions] = useState(t1), t2;
+	$[1] === Symbol.for("react.memo_cache_sentinel") ? (t2 = ["_id"], $[1] = t2) : t2 = $[1];
+	let documentId = useFormValue(t2), fieldValidation, focused, t3;
+	if ($[2] !== actions || $[3] !== documentId || $[4] !== inputProps.focused || $[5] !== inputProps.members || $[6] !== path || $[7] !== schemaType || $[8] !== validation) {
+		let publishedId = typeof documentId == "string" ? getPublishedId(documentId) : void 0;
+		focused = inputProps.focused === !0;
+		let t4;
+		$[12] !== inputProps.members || $[13] !== validation ? (t4 = [...validation, ...collectMemberValidation(inputProps.members)], $[12] = inputProps.members, $[13] = validation, $[14] = t4) : t4 = $[14], fieldValidation = t4, t3 = isDefined(publishedId) && isDefined(actions) && /* @__PURE__ */ jsx(FieldActionsResolver, {
+			actions,
+			documentId: publishedId,
+			documentType: schemaType.name,
+			onActions: setHeaderActions,
+			path,
+			schemaType
+		}), $[2] = actions, $[3] = documentId, $[4] = inputProps.focused, $[5] = inputProps.members, $[6] = path, $[7] = schemaType, $[8] = validation, $[9] = fieldValidation, $[10] = focused, $[11] = t3;
+	} else fieldValidation = $[9], focused = $[10], t3 = $[11];
+	let t4;
+	$[15] !== changed || $[16] !== children || $[17] !== focused || $[18] !== path ? (t4 = /* @__PURE__ */ jsx(ChangeIndicator, {
+		path,
+		hasFocus: focused,
+		isChanged: changed,
+		children
+	}), $[15] = changed, $[16] = children, $[17] = focused, $[18] = path, $[19] = t4) : t4 = $[19];
+	let t5;
+	$[20] !== description || $[21] !== fieldValidation || $[22] !== headerActions || $[23] !== inputId || $[24] !== inputProps.readOnly || $[25] !== level || $[26] !== path || $[27] !== presence || $[28] !== schemaType.deprecated || $[29] !== t4 || $[30] !== title ? (t5 = /* @__PURE__ */ jsx(FormField, {
+		__unstable_headerActions: headerActions,
+		__unstable_presence: presence,
 		description,
 		inputId,
-		validation,
+		level,
+		title,
+		validation: fieldValidation,
+		deprecated: schemaType.deprecated,
 		path,
-		children
-	}), $[0] = children, $[1] = description, $[2] = inputId, $[3] = path, $[4] = title, $[5] = validation, $[6] = t1) : t1 = $[6], t1;
+		readOnly: inputProps.readOnly,
+		children: t4
+	}), $[20] = description, $[21] = fieldValidation, $[22] = headerActions, $[23] = inputId, $[24] = inputProps.readOnly, $[25] = level, $[26] = path, $[27] = presence, $[28] = schemaType.deprecated, $[29] = t4, $[30] = title, $[31] = t5) : t5 = $[31];
+	let t6;
+	$[32] !== focused || $[33] !== headerActions || $[34] !== path || $[35] !== t5 ? (t6 = /* @__PURE__ */ jsx(FieldActionsProvider, {
+		actions: headerActions,
+		focused,
+		path,
+		children: t5
+	}), $[32] = focused, $[33] = headerActions, $[34] = path, $[35] = t5, $[36] = t6) : t6 = $[36];
+	let t7;
+	return $[37] !== t3 || $[38] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t6] }), $[37] = t3, $[38] = t6, $[39] = t7) : t7 = $[39], t7;
+}
+/** Default props for the plugin's own icons. Icons from `@sanity/icons` already match the Studio. */
+const defaultIconProps = {
+	width: "1em",
+	height: "1em",
+	strokeWidth: 1.5
+};
+/**
+* Wraps an SVG icon component for use in the Studio.
+*
+* @param icon - The icon to wrap.
+* @param props - Props that override the Studio icon defaults.
+* @returns An icon component.
+*/
+function createSanityIcon(icon, props) {
+	let Icon = icon;
+	function SanityIcon() {
+		return createElement(Icon, {
+			...defaultIconProps,
+			...props
+		});
+	}
+	return SanityIcon;
 }
-/** Space between rows, in pixels. */
+/** Gap 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 $ = c(28), focusable, icon, onHover, onSelect, position, props, selected, total;
+	$[0] === t0 ? (focusable = $[1], icon = $[2], onHover = $[3], onSelect = $[4], position = $[5], props = $[6], selected = $[7], total = $[8]) : ({icon, selected, focusable, position, total, onSelect, onHover, ...props} = t0, $[0] = t0, $[1] = focusable, $[2] = icon, $[3] = onHover, $[4] = onSelect, $[5] = position, $[6] = props, $[7] = selected, $[8] = total);
 	let t1 = focusable ? 0 : -1, t2;
-	$[8] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {
+	$[9] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {
 		width: 40,
 		height: 40
-	}, $[8] = t2) : t2 = $[8];
+	}, $[9] = t2) : t2 = $[9];
 	let t3;
-	$[9] === icon.node ? t3 = $[10] : (t3 = /* @__PURE__ */ jsx(Drawing, {
-		node: icon.node,
+	$[10] === icon.drawing ? t3 = $[11] : (t3 = /* @__PURE__ */ jsx(Drawing, {
+		drawing: icon.drawing,
 		width: "1.25em",
-		height: "1.25em",
-		strokeWidth: 1.5
-	}), $[9] = icon.node, $[10] = t3);
+		height: "1.25em"
+	}), $[10] = icon.drawing, $[11] = t3);
 	let t4;
-	$[11] !== icon || $[12] !== onSelect ? (t4 = () => {
+	$[12] !== icon || $[13] !== onSelect ? (t4 = () => {
 		onSelect(icon);
-	}, $[11] = icon, $[12] = onSelect, $[13] = t4) : t4 = $[13];
+	}, $[12] = icon, $[13] = onSelect, $[14] = t4) : t4 = $[14];
 	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, {
+	$[15] !== icon || $[16] !== onHover ? (t5 = (event) => {
+		onHover(icon, event.currentTarget);
+	}, $[15] = icon, $[16] = onHover, $[17] = t5) : t5 = $[17];
+	let t6;
+	return $[18] !== icon.label || $[19] !== position || $[20] !== props || $[21] !== selected || $[22] !== t1 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 || $[26] !== total ? (t6 = /* @__PURE__ */ jsx(Button, {
 		type: "button",
 		role: "option",
 		"aria-selected": selected,
@@ -56,83 +155,135 @@ function Cell(t0) {
 		style: t2,
 		icon: t3,
 		"aria-label": icon.label,
-		"data-icon": icon.name,
 		onClick: t4,
+		onMouseEnter: t5,
 		...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;
+	}), $[18] = icon.label, $[19] = position, $[20] = props, $[21] = selected, $[22] = t1, $[23] = t3, $[24] = t4, $[25] = t5, $[26] = total, $[27] = t6) : t6 = $[27], t6;
 }
 function Library(t0) {
-	let $ = c(27), activeCell, activeIndex, icons, onClearSearch, onSelect, props, rows, search, selected;
-	$[0] === t0 ? (activeCell = $[1], activeIndex = $[2], icons = $[3], onClearSearch = $[4], onSelect = $[5], props = $[6], rows = $[7], search = $[8], selected = $[9]) : ({icons, rows, selected, activeIndex, activeCell, search, onSelect, onClearSearch, ...props} = t0, $[0] = t0, $[1] = activeCell, $[2] = activeIndex, $[3] = icons, $[4] = onClearSearch, $[5] = onSelect, $[6] = props, $[7] = rows, $[8] = search, $[9] = selected);
-	let { totalRows, firstRow, lastRow } = rows, t1;
-	if ($[10] !== activeCell || $[11] !== activeIndex || $[12] !== firstRow || $[13] !== icons || $[14] !== lastRow || $[15] !== onClearSearch || $[16] !== onSelect || $[17] !== props || $[18] !== search || $[19] !== selected || $[20] !== totalRows) {
-		let visible = icons.slice(firstRow * 8, lastRow * 8), t2;
-		$[22] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {
+	let $ = c(44), activeCell, activeIndex, icons, onClearSearch, onHover, onSelect, props, rows, search, selected;
+	$[0] === t0 ? (activeCell = $[1], activeIndex = $[2], icons = $[3], onClearSearch = $[4], onHover = $[5], onSelect = $[6], props = $[7], rows = $[8], search = $[9], selected = $[10]) : ({icons, rows, selected, activeIndex, activeCell, search, onSelect, onHover, onClearSearch, ...props} = t0, $[0] = t0, $[1] = activeCell, $[2] = activeIndex, $[3] = icons, $[4] = onClearSearch, $[5] = onHover, $[6] = onSelect, $[7] = props, $[8] = rows, $[9] = search, $[10] = selected);
+	let { totalRows, firstRow, lastRow } = rows, T0, t1, t2, t3, t4, t5, t6;
+	if ($[11] !== activeCell || $[12] !== activeIndex || $[13] !== firstRow || $[14] !== icons || $[15] !== lastRow || $[16] !== onClearSearch || $[17] !== onHover || $[18] !== onSelect || $[19] !== props || $[20] !== search || $[21] !== selected || $[22] !== totalRows) {
+		let visible = icons.slice(firstRow * 8, lastRow * 8);
+		T0 = Box, t1 = "listbox", t2 = "Icon library", $[30] === icons ? t3 = $[31] : (t3 = isDefined(icons) ? {
 			height: 348,
 			overflowY: "auto"
-		}, $[22] = t2) : t2 = $[22];
-		let t3;
-		$[23] !== icons.length || $[24] !== onClearSearch || $[25] !== search ? (t3 = icons.length === 0 && /* @__PURE__ */ jsxs(Flex, {
+		} : void 0, $[30] = icons, $[31] = t3), t4 = props, $[32] !== icons || $[33] !== onClearSearch || $[34] !== search ? (t5 = !isDefined(icons) && /* @__PURE__ */ jsxs(Flex, {
 			align: "center",
 			justify: "center",
 			direction: "column",
 			gap: 3,
-			style: { height: 348 },
-			children: [/* @__PURE__ */ jsxs(Text, {
+			paddingTop: 5,
+			paddingBottom: 6,
+			children: [/* @__PURE__ */ jsx(Text, {
 				size: 1,
 				muted: !0,
-				children: [
-					"Nothing matches “",
-					search,
-					"”."
-				]
+				children: `Nothing matches "${search}".`
 			}), /* @__PURE__ */ jsx(Button, {
 				type: "button",
 				mode: "ghost",
 				text: "Clear search",
 				onClick: onClearSearch
 			})]
-		}), $[23] = icons.length, $[24] = onClearSearch, $[25] = search, $[26] = t3) : t3 = $[26], t1 = /* @__PURE__ */ jsxs(Box, {
-			role: "listbox",
-			"aria-label": "Icon library",
-			style: t2,
-			...props,
-			children: [t3, icons.length > 0 && /* @__PURE__ */ jsx(Grid, {
-				gridTemplateColumns: 8,
-				style: {
-					...gridLayoutStyle,
-					paddingTop: firstRow * 44,
-					paddingBottom: (totalRows - lastRow) * 44
-				},
-				children: visible.map((icon, offset) => {
-					let index = firstRow * 8 + offset;
-					return /* @__PURE__ */ jsx(Cell, {
-						ref: index === activeIndex ? activeCell : void 0,
-						icon,
-						selected: icon.name === selected,
-						focusable: index === activeIndex,
-						position: index + 1,
-						total: icons.length,
-						onSelect
-					}, icon.name);
-				})
-			})]
-		}), $[10] = activeCell, $[11] = activeIndex, $[12] = firstRow, $[13] = icons, $[14] = lastRow, $[15] = onClearSearch, $[16] = onSelect, $[17] = props, $[18] = search, $[19] = selected, $[20] = totalRows, $[21] = t1;
-	} else t1 = $[21];
-	return t1;
+		}), $[32] = icons, $[33] = onClearSearch, $[34] = search, $[35] = t5) : t5 = $[35], t6 = isDefined(icons) && /* @__PURE__ */ jsx(Grid, {
+			gridTemplateColumns: 8,
+			style: {
+				...gridLayoutStyle,
+				paddingTop: firstRow * 44,
+				paddingBottom: (totalRows - lastRow) * 44
+			},
+			children: visible.map((icon, offset) => {
+				let index = firstRow * 8 + offset;
+				return /* @__PURE__ */ jsx(Cell, {
+					ref: index === activeIndex ? activeCell : void 0,
+					icon,
+					selected: icon.name === selected,
+					focusable: index === activeIndex,
+					position: index + 1,
+					total: icons.length,
+					onSelect,
+					onHover
+				}, icon.name);
+			})
+		}), $[11] = activeCell, $[12] = activeIndex, $[13] = firstRow, $[14] = icons, $[15] = lastRow, $[16] = onClearSearch, $[17] = onHover, $[18] = onSelect, $[19] = props, $[20] = search, $[21] = selected, $[22] = totalRows, $[23] = T0, $[24] = t1, $[25] = t2, $[26] = t3, $[27] = t4, $[28] = t5, $[29] = t6;
+	} else T0 = $[23], t1 = $[24], t2 = $[25], t3 = $[26], t4 = $[27], t5 = $[28], t6 = $[29];
+	let t7;
+	return $[36] !== T0 || $[37] !== t1 || $[38] !== t2 || $[39] !== t3 || $[40] !== t4 || $[41] !== t5 || $[42] !== t6 ? (t7 = /* @__PURE__ */ jsxs(T0, {
+		role: t1,
+		"aria-label": t2,
+		style: t3,
+		...t4,
+		children: [t5, t6]
+	}), $[36] = T0, $[37] = t1, $[38] = t2, $[39] = t3, $[40] = t4, $[41] = t5, $[42] = t6, $[43] = t7) : t7 = $[43], t7;
+}
+function CodeText(t0) {
+	let $ = c(10), props, text;
+	$[0] === t0 ? (props = $[1], text = $[2]) : ({text, ...props} = t0, $[0] = t0, $[1] = props, $[2] = text);
+	let t1, t2;
+	if ($[3] !== props || $[4] !== text) {
+		let parts = text.split("`");
+		t1 = props, t2 = parts.map((part, index) => {
+			let start = parts.slice(0, index).join("`").length;
+			return index % 2 == 1 ? /* @__PURE__ */ jsx("code", { children: part }, start) : part;
+		}), $[3] = props, $[4] = text, $[5] = t1, $[6] = t2;
+	} else t1 = $[5], t2 = $[6];
+	let t3;
+	return $[7] !== t1 || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx("span", {
+		...t1,
+		children: t2
+	}), $[7] = t1, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
+}
+function Problem(t0) {
+	let $ = c(14), problem, props;
+	$[0] === t0 ? (problem = $[1], props = $[2]) : ({problem, ...props} = t0, $[0] = t0, $[1] = problem, $[2] = props);
+	let t1;
+	$[3] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		children: /* @__PURE__ */ jsx(WarningOutlineIcon, {})
+	}), $[3] = t1) : t1 = $[3];
+	let t2;
+	$[4] === problem.title ? t2 = $[5] : (t2 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		weight: "medium",
+		children: /* @__PURE__ */ jsx(CodeText, { text: problem.title })
+	}), $[4] = problem.title, $[5] = t2);
+	let t3;
+	$[6] === problem.description ? t3 = $[7] : (t3 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		muted: !0,
+		children: /* @__PURE__ */ jsx(CodeText, { text: problem.description })
+	}), $[6] = problem.description, $[7] = t3);
+	let t4;
+	$[8] !== t2 || $[9] !== t3 ? (t4 = /* @__PURE__ */ jsxs(Flex, {
+		gap: 3,
+		children: [t1, /* @__PURE__ */ jsxs(Stack, {
+			gap: 3,
+			children: [t2, t3]
+		})]
+	}), $[8] = t2, $[9] = t3, $[10] = t4) : t4 = $[10];
+	let t5;
+	return $[11] !== props || $[12] !== t4 ? (t5 = /* @__PURE__ */ jsx(Card, {
+		tone: "caution",
+		padding: 4,
+		radius: 2,
+		border: !0,
+		...props,
+		children: t4
+	}), $[11] = props, $[12] = t4, $[13] = t5) : t5 = $[13], 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 $ = c(26), icons, onForget, onHover, onSelect, props, selected;
+	$[0] === t0 ? (icons = $[1], onForget = $[2], onHover = $[3], onSelect = $[4], props = $[5], selected = $[6]) : ({icons, selected, onSelect, onHover, onForget, ...props} = t0, $[0] = t0, $[1] = icons, $[2] = onForget, $[3] = onHover, $[4] = onSelect, $[5] = props, $[6] = selected);
 	let t1;
-	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx(Text, {
+	$[7] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx(Text, {
 		size: 1,
 		weight: "medium",
 		muted: !0,
 		children: "Recent icons"
-	}), $[6] = t1) : t1 = $[6];
+	}), $[7] = t1) : t1 = $[7];
 	let t2;
-	$[7] === onForget ? t2 = $[8] : (t2 = /* @__PURE__ */ jsxs(Flex, {
+	$[8] === onForget ? t2 = $[9] : (t2 = /* @__PURE__ */ jsxs(Flex, {
 		align: "center",
 		justify: "space-between",
 		gap: 2,
@@ -143,98 +294,74 @@ function Recent(t0) {
 			padding: 2,
 			text: "Clear",
 			onClick: onForget,
-			"aria-label": "Forget the recently used icons."
+			"aria-label": "Clear recent icons"
 		})]
-	}), $[7] = onForget, $[8] = t2);
+	}), $[8] = onForget, $[9] = t2);
 	let t3;
-	if ($[9] !== icons || $[10] !== onSelect || $[11] !== selected) {
+	if ($[10] !== icons || $[11] !== onHover || $[12] !== onSelect || $[13] !== selected) {
 		let t4;
-		$[13] !== icons.length || $[14] !== onSelect || $[15] !== selected ? (t4 = (icon, index) => /* @__PURE__ */ jsx(Cell, {
+		$[15] !== icons.length || $[16] !== onHover || $[17] !== onSelect || $[18] !== 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];
+			onSelect,
+			onHover
+		}, icon.name), $[15] = icons.length, $[16] = onHover, $[17] = onSelect, $[18] = selected, $[19] = t4) : t4 = $[19], t3 = icons.map(t4), $[10] = icons, $[11] = onHover, $[12] = onSelect, $[13] = selected, $[14] = t3;
+	} else t3 = $[14];
 	let t4;
-	$[17] === t3 ? t4 = $[18] : (t4 = /* @__PURE__ */ jsx(Grid, {
+	$[20] === t3 ? t4 = $[21] : (t4 = /* @__PURE__ */ jsx(Grid, {
 		role: "listbox",
 		"aria-label": "Recent icons",
 		gridTemplateColumns: 8,
 		style: gridLayoutStyle,
 		children: t3
-	}), $[17] = t3, $[18] = t4);
+	}), $[20] = t3, $[21] = t4);
 	let t5;
-	return $[19] !== props || $[20] !== t2 || $[21] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Stack, {
+	return $[22] !== props || $[23] !== t2 || $[24] !== 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;
+	}), $[22] = props, $[23] = t2, $[24] = t4, $[25] = t5) : t5 = $[25], t5;
 }
-/** 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.
+* Normalises text for search, so hyphenated names and multi-word keywords match the same way.
 *
-* @param value - The text to flatten.
-* @returns The text in comparable form.
+* @param value - The text.
+* @returns The normalised text.
 */
-function normaliseTerms(value) {
+function normalizeTerms(value) {
 	return value.toLowerCase().replaceAll(/[\s-]+/gu, " ").trim();
 }
 /**
-* Narrows the library to a chosen set of icons, in the order they were named. A name the library does
-* not recognise is skipped, so a set outlives the release it was written against.
+* Splits text into the parts a search matches and the parts it doesn't, matching the way search does: ignoring case,
+* and treating spaces and hyphens alike.
+*
+* @param text - The text to split.
+* @param query - The normalised search.
+* @returns The parts in order, each with where it starts in the text and whether it matches.
+*/
+function splitMatches(text, query) {
+	if (!isDefined(query)) return [{
+		text,
+		start: 0,
+		match: !1
+	}];
+	let pattern = query.split(" ").map((word) => word.replaceAll(/[$()*+.?[\\\]^{|}]/gu, String.raw`\$&`)).join(String.raw`[\s-]+`), parts = text.split(RegExp(`(${pattern})`, "giu"));
+	return parts.map((part, index) => ({
+		text: part,
+		start: parts.slice(0, index).join("").length,
+		match: index % 2 == 1
+	}));
+}
+/**
+* Narrows the library to the named icons, in the order given. Unknown names are skipped, so a list keeps working
+* across library releases.
 *
-* @param library - Every icon the library offers.
-* @param names - Names of the icons to offer, or nothing to offer them all.
-* @returns The icons on offer.
+* @param library - Every icon in the library.
+* @param names - The icons to offer, or undefined for all of them.
+* @returns The icons to offer.
 */
 function selectIcons(library, names) {
 	if (!isDefined(names)) return library;
@@ -245,165 +372,320 @@ function selectIcons(library, names) {
 	});
 }
 /**
-* 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.
+* Lists identifiers as inline code, separated by commas.
 *
-* @returns Every icon the library offers.
+* @param identifiers - The identifiers.
+* @returns The list.
 */
-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(" "))
-		}];
-	});
+function formatList(identifiers) {
+	return identifiers.map((identifier) => `\`${identifier}\``).join(", ");
+}
+/**
+* Describes why a library the project hasn't installed can't be shown, and what to add.
+*
+* @param label - Readable name of the library.
+* @param packageName - Package the library is read from, or an example of one for a family of packages.
+* @param family - Whether the library is a family of packages, one per style.
+* @param listed - Whether the project's `package.json` lists the package.
+* @param sitePackage - Another package of the library the project lists, or undefined when there's none.
+* @returns The problem.
+*/
+function describeMissingLibrary(label, packageName, family, listed, sitePackage) {
+	return listed ? {
+		title: `${label} isn't installed yet`,
+		description: `\`${packageName}\` is in \`package.json\` but not in \`node_modules\`. Reinstall the project's dependencies.`
+	} : isDefined(sitePackage) ? {
+		title: `${label} needs \`${packageName}\``,
+		description: `The Studio reads ${label} from \`${packageName}\`, not \`${sitePackage}\`. Add it as a dev dependency.`
+	} : {
+		title: `${label} isn't installed`,
+		description: family ? `Install a ${label} style package, such as \`${packageName}\`.` : `Install \`${packageName}\` in the project.`
+	};
+}
+/**
+* Loads one library style from the sets the build step converted.
+*
+* @param library - Identifier of the library, or undefined when none is set.
+* @param style - Identifier of the style, or undefined for the library's default.
+* @returns The icons, or why they can't be shown.
+*/
+async function readLibrary(library, style) {
+	if (!isDefined(library)) return { problem: {
+		title: "No icon library set",
+		description: "Set `library` in the icon plugin's configuration or in the field's options."
+	} };
+	if (!iconRegistry.ready) return { problem: {
+		title: "Icons aren't set up",
+		description: "Add `withIcons()` to the Studio's build configuration, then restart the Studio."
+	} };
+	let info = iconRegistry.libraries[library];
+	if (!isDefined(info)) return { problem: {
+		title: "Unknown icon library",
+		description: `There's no icon library called \`${library}\`. Use one of: ${formatList(Object.keys(iconRegistry.libraries))}.`
+	} };
+	let { label, packageName, packagePrefix, styles, listed, installed, sitePackage } = info;
+	if (!installed) return { problem: describeMissingLibrary(label, packageName, isDefined(packagePrefix), listed, sitePackage) };
+	let resolvedStyle = style ?? styles[0] ?? "", loader = iconRegistry.sets[getIconSetKey(library, resolvedStyle)];
+	if (!isDefined(loader)) return { problem: isDefined(packagePrefix) ? {
+		title: `${label} style \`${resolvedStyle}\` isn't installed`,
+		description: `Install \`${packagePrefix}${resolvedStyle}\` in the project.`
+	} : {
+		title: `Unknown ${label} style`,
+		description: `${label} has no \`${resolvedStyle}\` style. Use one of: ${formatList(styles)}.`
+	} };
+	let module = await loader(), set = parseIconSet(module.default);
+	return isDefined(set) ? { icons: set.icons.map(({ name, keywords, node, root }) => ({
+		name,
+		label: convertCase(name, "title"),
+		tags: keywords.join(", "),
+		drawing: {
+			root: root ?? set.root,
+			node
+		},
+		terms: normalizeTerms([name, ...keywords].join(" "))
+	})) } : { problem: {
+		title: `Couldn't load ${label}`,
+		description: "Restart the Studio and try again."
+	} };
 }
-/** The library once asked for, held so every field in a Studio session shares the one request. */
-let libraryRequest;
+/** Library requests shared by every field in the session, keyed by library and style, since the data never changes. */
+const libraryRequests = /* @__PURE__ */ new Map();
 /**
-* 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.
+* Loads a library style, reusing a request already in progress.
 *
-* @returns Every icon the library offers.
+* @param library - Identifier of the library, or undefined when none is set.
+* @param style - Identifier of the style, or undefined for the library's default.
+* @returns The icons, or why they can't be shown.
+*/
+async function requestLibrary(library, style) {
+	let key = getIconSetKey(library ?? "", style ?? ""), request = libraryRequests.get(key);
+	return isDefined(request) || (request = readLibrary(library, style), libraryRequests.set(key, request)), await request;
+}
+/**
+* Gap between the tooltip and its cell, set through margins because `@sanity/ui` offers no other way.
+* Only the top is set, since the tooltip always appears above the cell.
 */
-async function requestLibrary() {
-	return libraryRequest ??= readLibrary(), await libraryRequest;
+const tooltipMargins = [
+	-4,
+	0,
+	0,
+	0
+], matchStyle = {
+	background: "none",
+	color: "inherit",
+	textDecorationLine: "underline",
+	textUnderlineOffset: "0.2em"
+};
+function Highlight(t0) {
+	let $ = c(10), props, query, text;
+	$[0] === t0 ? (props = $[1], query = $[2], text = $[3]) : ({text, query, ...props} = t0, $[0] = t0, $[1] = props, $[2] = query, $[3] = text);
+	let t1;
+	$[4] !== query || $[5] !== text ? (t1 = splitMatches(text, query).map(_temp$1), $[4] = query, $[5] = text, $[6] = t1) : t1 = $[6];
+	let t2;
+	return $[7] !== props || $[8] !== t1 ? (t2 = /* @__PURE__ */ jsx("span", {
+		...props,
+		children: t1
+	}), $[7] = props, $[8] = t1, $[9] = t2) : t2 = $[9], t2;
+}
+function _temp$1(part) {
+	return part.match ? /* @__PURE__ */ jsx("mark", {
+		style: matchStyle,
+		children: part.text
+	}, part.start) : part.text;
+}
+function Tooltip(t0) {
+	let $ = c(15), hovered, props, query;
+	$[0] === t0 ? (hovered = $[1], props = $[2], query = $[3]) : ({hovered, query, ...props} = t0, $[0] = t0, $[1] = hovered, $[2] = props, $[3] = query);
+	let t1;
+	$[4] === hovered ? t1 = $[5] : (t1 = isDefined(hovered), $[4] = hovered, $[5] = t1);
+	let t2 = hovered?.element ?? null, t3;
+	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t3 = { pointerEvents: "none" }, $[6] = t3) : t3 = $[6];
+	let t4;
+	$[7] !== hovered || $[8] !== query ? (t4 = isDefined(hovered) && /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		style: { maxWidth: "16rem" },
+		children: [/* @__PURE__ */ jsx(Text, {
+			size: 1,
+			weight: "medium",
+			children: /* @__PURE__ */ jsx(Highlight, {
+				text: hovered.icon.label,
+				query
+			})
+		}), isDefined(hovered.icon.tags) && /* @__PURE__ */ jsx(Text, {
+			size: 1,
+			muted: !0,
+			children: /* @__PURE__ */ jsx(Highlight, {
+				text: hovered.icon.tags,
+				query
+			})
+		})]
+	}), $[7] = hovered, $[8] = query, $[9] = t4) : t4 = $[9];
+	let t5;
+	return $[10] !== props || $[11] !== t1 || $[12] !== t2 || $[13] !== t4 ? (t5 = /* @__PURE__ */ jsx(Popover, {
+		open: t1,
+		referenceElement: t2,
+		placement: "top",
+		portal: !0,
+		padding: 3,
+		__unstable_margins: tooltipMargins,
+		style: t3,
+		content: t4,
+		...props
+	}), $[10] = props, $[11] = t1, $[12] = t2, $[13] = t4, $[14] = t5) : t5 = $[14], t5;
 }
 /**
-* 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.
+* Loads an icon library style. Only an open picker calls this, so a Studio that never opens one never loads it.
 *
-* @returns Every icon the library offers, or undefined while it is still being read.
+* @param library - Identifier of the library, or undefined when none is set.
+* @param style - Identifier of the style, or undefined for the library's default.
+* @returns The icons or why they can't be shown, or undefined while loading.
 */
-function useIconLibrary() {
-	let $ = c(2), [library, setLibrary] = useState(), t0, t1;
-	return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => {
+function useIconLibrary(library, style) {
+	let $ = c(4), [result, setResult] = useState(), t0, t1;
+	return $[0] !== library || $[1] !== style ? (t0 = () => {
 		let active = !0;
 		return (async function load() {
-			let loaded = await requestLibrary();
-			active && setLibrary(loaded);
+			let loaded = await requestLibrary(library, style);
+			active && setResult(loaded);
 		})(), () => {
 			active = !1;
 		};
-	}, t1 = [], $[0] = t0, $[1] = t1) : (t0 = $[0], t1 = $[1]), useEffect(t0, t1), library;
+	}, t1 = [library, style], $[0] = library, $[1] = style, $[2] = t0, $[3] = t1) : (t0 = $[2], t1 = $[3]), useEffect(t0, t1), result;
 }
 /**
-* Tracks which icon the cursor rests on, holding a tooltip back until it has settled somewhere.
+* Tracks the icon under the cursor, showing its tooltip after a short delay. Tooltips are held back while the grid
+* scrolls, and the icon left under the cursor gets its tooltip once scrolling stops.
 *
-* @param byName - Every icon the library offers, keyed by the name it goes by.
-* @param scrolling - Whether the grid is currently moving under the cursor.
-* @returns The icon being hovered, alongside ways to follow the cursor and to dismiss it.
+* @param scrolling - Whether the grid is scrolling.
+* @returns The hovered icon, and functions to update and clear it.
 */
-function useIconTooltip(byName, scrolling) {
-	let $ = c(12), [hovered, setHovered] = useState(), hoverStart = useRef(void 0), t0, t1;
+function useIconTooltip(scrolling) {
+	let $ = c(14), [hovered, setHovered] = useState(), hoverStart = useRef(void 0), scrolledOnto = useRef(void 0), t0, t1;
 	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => () => {
 		isDefined(hoverStart.current) && clearTimeout(hoverStart.current);
 	}, t1 = [], $[0] = t0, $[1] = t1) : (t0 = $[0], t1 = $[1]), useEffect(t0, t1);
-	let t2;
-	$[2] === hovered ? t2 = $[3] : (t2 = function clearHover() {
+	let t2, t3;
+	$[2] === scrolling ? (t2 = $[3], t3 = $[4]) : (t2 = () => {
+		let landed = scrolledOnto.current;
+		!scrolling && isDefined(landed) && (scrolledOnto.current = void 0, landed.element.isConnected && landed.element.matches(":hover") && (hoverStart.current = setTimeout(() => {
+			setHovered(landed);
+		}, 200)));
+	}, t3 = [scrolling], $[2] = scrolling, $[3] = t2, $[4] = t3), useEffect(t2, t3);
+	let t4;
+	$[5] === hovered ? t4 = $[6] : (t4 = function clearHover() {
 		isDefined(hoverStart.current) && clearTimeout(hoverStart.current), isDefined(hovered) && setHovered(void 0);
-	}, $[2] = hovered, $[3] = t2);
-	let clearHover = t2, t3;
-	$[4] !== byName || $[5] !== hovered || $[6] !== scrolling ? (t3 = function handleHover(event) {
-		if (scrolling) return;
-		let target = event.target instanceof Element ? event.target.closest("[data-icon]") : void 0, cell = target instanceof HTMLElement ? target : void 0;
-		if (cell === hovered?.element) return;
-		let name = cell?.dataset.icon, icon = isDefined(name) ? byName.get(name) : void 0;
-		if (isDefined(hoverStart.current) && clearTimeout(hoverStart.current), !isDefined(icon) || !isDefined(cell)) {
-			setHovered(void 0);
-			return;
-		}
-		if (isDefined(hovered)) {
-			setHovered({
+	}, $[5] = hovered, $[6] = t4);
+	let clearHover = t4, t5;
+	$[7] !== hovered || $[8] !== scrolling ? (t5 = function handleHover(icon, element) {
+		if (scrolling) {
+			scrolledOnto.current = {
 				icon,
-				element: cell
-			});
+				element
+			};
 			return;
 		}
-		hoverStart.current = setTimeout(() => {
-			setHovered({
-				icon,
-				element: cell
-			});
-		}, 200);
-	}, $[4] = byName, $[5] = hovered, $[6] = scrolling, $[7] = t3) : t3 = $[7];
-	let handleHover = t3, t4;
-	return $[8] !== clearHover || $[9] !== handleHover || $[10] !== hovered ? (t4 = {
+		if (element !== hovered?.element) {
+			if (isDefined(hoverStart.current) && clearTimeout(hoverStart.current), isDefined(hovered)) {
+				setHovered({
+					icon,
+					element
+				});
+				return;
+			}
+			hoverStart.current = setTimeout(() => {
+				setHovered({
+					icon,
+					element
+				});
+			}, 200);
+		}
+	}, $[7] = hovered, $[8] = scrolling, $[9] = t5) : t5 = $[9];
+	let handleHover = t5, t6;
+	return $[10] !== clearHover || $[11] !== handleHover || $[12] !== hovered ? (t6 = {
 		hovered,
 		handleHover,
 		clearHover
-	}, $[8] = clearHover, $[9] = handleHover, $[10] = hovered, $[11] = t4) : t4 = $[11], t4;
+	}, $[10] = clearHover, $[11] = handleHover, $[12] = hovered, $[13] = t6) : t6 = $[13], t6;
+}
+/**
+* Builds the storage key for one library style.
+*
+* @param scope - The library and style, such as `phosphor/bold`.
+* @returns The storage key.
+*/
+function getStorageKey(scope) {
+	return `driftime:sanity-plugin-icon:recent:${scope}`;
 }
-/** 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.
+* Reads the recently chosen icons.
 *
-* @returns Names of the remembered icons, most recent first.
+* @param scope - The library and style, such as `phosphor/bold`.
+* @returns The icon names, most recent first.
 */
-function readRecent() {
+function readRecent(scope) {
 	try {
-		let stored = JSON.parse(globalThis.localStorage.getItem(storageKey) ?? "[]");
+		let stored = JSON.parse(globalThis.localStorage.getItem(getStorageKey(scope)) ?? "[]");
 		return Array.isArray(stored) ? stored.filter((entry) => typeof entry == "string") : [];
 	} catch {
 		return [];
 	}
 }
 /**
-* Remembers an icon as the one reached for most recently.
+* Adds an icon to the front of the recent list.
 *
-* @param name - Name of the chosen icon.
-* @returns Names of the remembered icons, most recent first.
+* @param scope - The library and style, such as `phosphor/bold`.
+* @param name - The chosen icon's name.
+* @returns The updated icon names, most recent first.
 */
-function writeRecent(name) {
-	let updated = [name, ...readRecent().filter((entry) => entry !== name)].slice(0, 8);
+function writeRecent(scope, name) {
+	let updated = [name, ...readRecent(scope).filter((entry) => entry !== name)].slice(0, 8);
 	try {
-		globalThis.localStorage.setItem(storageKey, JSON.stringify(updated));
+		globalThis.localStorage.setItem(getStorageKey(scope), JSON.stringify(updated));
 	} catch {}
 	return updated;
 }
-/** Forgets every icon reached for so far. */
-function clearRecent() {
+/**
+* Clears the recent icons.
+*
+* @param scope - The library and style, such as `phosphor/bold`.
+*/
+function clearRecent(scope) {
 	try {
-		globalThis.localStorage.removeItem(storageKey);
+		globalThis.localStorage.removeItem(getStorageKey(scope));
 	} 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.
+* Tracks the icons an author chose most recently from one library style. The list is read when the picker opens, so
+* choices made in another tab are included.
 *
-* @returns The remembered names, most recent first, alongside ways to add to and empty them.
+* @param scope - The library and style, such as `phosphor/bold`.
+* @returns The recent icon names, most recent first, and functions to add to and clear 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 = {
+function useRecentIcons(scope) {
+	let $ = c(10), t0;
+	$[0] === scope ? t0 = $[1] : (t0 = () => readRecent(scope), $[0] = scope, $[1] = t0);
+	let [recent, setRecent] = useState(t0), t1;
+	$[2] === scope ? t1 = $[3] : (t1 = function remember(name) {
+		setRecent(writeRecent(scope, name));
+	}, $[2] = scope, $[3] = t1);
+	let remember = t1, t2;
+	$[4] === scope ? t2 = $[5] : (t2 = function forget() {
+		clearRecent(scope), setRecent([]);
+	}, $[4] = scope, $[5] = t2);
+	let forget = t2, t3;
+	return $[6] !== forget || $[7] !== recent || $[8] !== remember ? (t3 = {
 		recent,
 		remember,
 		forget
-	}, $[2] = recent, $[3] = t2), t2;
+	}, $[6] = forget, $[7] = recent, $[8] = remember, $[9] = t3) : t3 = $[9], t3;
 }
 /**
-* Works out which icon a key press moves to, so the library can be walked without a mouse.
+* Works out which icon a key press moves to.
 *
 * @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.
+* @param current - Index of the current icon.
+* @param last - Index of the last icon.
+* @returns The new index, or undefined when the key doesn't move.
 */
 function getNextIndex(key, current, last) {
 	if (key === "ArrowRight") return current + 1;
@@ -414,12 +696,12 @@ function getNextIndex(key, current, last) {
 	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.
+* Works out which rows to render at a scroll position, so only icons near the viewport are mounted.
+* Padding replaces the other rows, so the scrollbar stays the right size.
 *
-* @param scrollRow - Row the scrolling area has reached.
+* @param scrollRow - The row scrolled to.
 * @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.
+* @returns The first and last rows to render, and the total number of rows.
 */
 function getVisibleRows(scrollRow, count) {
 	let totalRows = Math.ceil(count / 8), firstRow = Math.max(0, scrollRow - 8);
@@ -430,58 +712,56 @@ function getVisibleRows(scrollRow, count) {
 	};
 }
 /**
-* Works out where the scrolling area sits to show a given icon in the middle, for opening on the
-* icon already chosen.
+* Works out the scroll position that centres an icon, for opening on the selected icon.
 *
-* @param index - Index of the icon to show.
-* @returns The position to scroll to.
+* @param index - Index of the icon.
+* @returns The scroll position.
 */
-function getCentredScrollTop(index) {
+function getCenteredScrollTop(index) {
 	return Math.max(0, Math.floor(index / 8) * 44 - 174);
 }
 /**
-* Works out where the scrolling area moves to bring a given icon into view, staying put when the
-* icon already shows. Taken from the index rather than the icon's own cell, since Home and End can
-* land outside the rows that are mounted.
+* Works out the scroll position that brings an icon into view, keeping the current one if it's
+* already visible. It uses the index because Home and End can move to rows that aren't mounted.
 *
-* @param index - Index of the icon to reveal.
-* @param scrollTop - Position the scrolling area has reached.
-* @returns The position to scroll to.
+* @param index - Index of the icon.
+* @param scrollTop - The current scroll position.
+* @returns The scroll position.
 */
 function getRevealedScrollTop(index, scrollTop) {
 	let top = Math.floor(index / 8) * 44;
 	return top < scrollTop ? top : top + 44 > scrollTop + 348 ? top + 44 - 348 : scrollTop;
 }
 function Picker(t0) {
-	let $ = c(35), allowed, onSelect, props, selected;
-	$[0] === t0 ? (allowed = $[1], onSelect = $[2], props = $[3], selected = $[4]) : ({allowed, selected, onSelect, ...props} = t0, $[0] = t0, $[1] = allowed, $[2] = onSelect, $[3] = props, $[4] = selected);
-	let library = useIconLibrary(), icons = selectIcons(library ?? [], allowed), { recent, remember, forget } = useRecentIcons(), [search, setSearch] = useState(""), [scrollRow, setScrollRow] = useState(0), [movedIndex, setMovedIndex] = useState(), [scrolling, setScrolling] = useState(!1), scroller = useRef(null), activeCell = useRef(null), focusActiveCell = useRef(!1), scrollFrame = useRef(void 0), scrollStop = useRef(void 0), query = normaliseTerms(search), searching = isDefined(query), results = icons.filter((icon) => !searching || icon.terms.includes(query)), byName = new Map(icons.map(_temp)), recentIcons = searching ? [] : recent.flatMap((entry) => {
+	let $ = c(39), allowed, iconStyle, libraryName, onSelect, props, selected;
+	$[0] === t0 ? (allowed = $[1], iconStyle = $[2], libraryName = $[3], onSelect = $[4], props = $[5], selected = $[6]) : ({library: libraryName, iconStyle, allowed, selected, onSelect, ...props} = t0, $[0] = t0, $[1] = allowed, $[2] = iconStyle, $[3] = libraryName, $[4] = onSelect, $[5] = props, $[6] = selected);
+	let result = useIconLibrary(libraryName, iconStyle), library = result?.icons, icons = selectIcons(library ?? [], allowed), t1 = libraryName ?? "", t2 = iconStyle ?? "default", t3;
+	$[7] !== t1 || $[8] !== t2 ? (t3 = getIconSetKey(t1, t2), $[7] = t1, $[8] = t2, $[9] = t3) : t3 = $[9];
+	let { recent, remember, forget } = useRecentIcons(t3), [search, setSearch] = useState(""), [scrollRow, setScrollRow] = useState(0), [movedIndex, setMovedIndex] = useState(), [scrolling, setScrolling] = useState(!1), scroller = useRef(null), activeCell = useRef(null), focusIndex = useRef(void 0), scrollFrame = useRef(void 0), scrollStop = useRef(void 0), query = normalizeTerms(search), searching = isDefined(query), results = icons.filter((icon) => !searching || icon.terms.includes(query)), byName = new Map(icons.map(_temp)), recentIcons = searching ? [] : recent.flatMap((entry) => {
 		let icon_1 = byName.get(entry);
 		return isDefined(icon_1) ? [icon_1] : [];
-	}), { hovered, handleHover, clearHover } = useIconTooltip(byName, scrolling), rows = getVisibleRows(scrollRow, results.length), selectedIndex = searching || !isDefined(selected) ? -1 : icons.findIndex((icon_2) => icon_2.name === selected), activeIndex = movedIndex ?? Math.max(0, selectedIndex);
+	}), { hovered, handleHover, clearHover } = useIconTooltip(scrolling), rows = getVisibleRows(scrollRow, results.length), selectedIndex = searching || !isDefined(selected) ? -1 : icons.findIndex((icon_2) => icon_2.name === selected), activeIndex = movedIndex ?? Math.max(0, selectedIndex);
 	useEffect(() => {
 		let element = scroller.current;
-		isDefined(element) && selectedIndex !== -1 && (element.scrollTop = getCentredScrollTop(selectedIndex));
-	}, [selectedIndex]);
-	let t1, t2;
-	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => () => {
+		isDefined(element) && selectedIndex !== -1 && (element.scrollTop = getCenteredScrollTop(selectedIndex));
+	}, [scroller, selectedIndex]);
+	let t4, t5;
+	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => () => {
 		isDefined(scrollFrame.current) && cancelAnimationFrame(scrollFrame.current), isDefined(scrollStop.current) && clearTimeout(scrollStop.current);
-	}, t2 = [], $[5] = t1, $[6] = t2) : (t1 = $[5], t2 = $[6]), useEffect(t1, t2);
-	let t3;
-	$[7] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => {
-		focusActiveCell.current && (focusActiveCell.current = !1, isDefined(activeCell.current) && activeCell.current.focus());
-	}, $[7] = t3) : t3 = $[7];
-	let t4;
-	$[8] === activeIndex ? t4 = $[9] : (t4 = [activeIndex], $[8] = activeIndex, $[9] = t4), useEffect(t3, t4);
-	let t5;
-	$[10] !== onSelect || $[11] !== remember ? (t5 = function handleSelect(icon_3) {
+	}, t5 = [], $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), useEffect(t4, t5);
+	let t6, t7;
+	$[12] === activeIndex ? (t6 = $[13], t7 = $[14]) : (t6 = () => {
+		focusIndex.current === activeIndex && (focusIndex.current = void 0, isDefined(activeCell.current) && activeCell.current.focus());
+	}, t7 = [activeIndex], $[12] = activeIndex, $[13] = t6, $[14] = t7), useEffect(t6, t7);
+	let t8;
+	$[15] !== onSelect || $[16] !== remember ? (t8 = function handleSelect(icon_3) {
 		remember(icon_3.name), onSelect(icon_3);
-	}, $[10] = onSelect, $[11] = remember, $[12] = t5) : t5 = $[12];
-	let handleSelect = t5, t6;
-	$[13] === Symbol.for("react.memo_cache_sentinel") ? (t6 = function clearSearch() {
+	}, $[15] = onSelect, $[16] = remember, $[17] = t8) : t8 = $[17];
+	let handleSelect = t8, t9;
+	$[18] === Symbol.for("react.memo_cache_sentinel") ? (t9 = function clearSearch() {
 		setSearch(""), setMovedIndex(void 0);
-	}, $[13] = t6) : t6 = $[13];
-	let clearSearch = t6, handleSearch = function handleSearch(event) {
+	}, $[18] = t9) : t9 = $[18];
+	let clearSearch = t9, handleSearch = function handleSearch(event) {
 		setSearch(event.currentTarget.value), setMovedIndex(void 0), isDefined(scroller.current) && (scroller.current.scrollTop = 0);
 	}, selectActive = function selectActive() {
 		let icon_4 = results[activeIndex];
@@ -511,20 +791,35 @@ function Picker(t0) {
 		if (!isDefined(next)) return;
 		event_1.preventDefault();
 		let index = Math.min(Math.max(next, 0), last);
-		focusActiveCell.current = !0, setMovedIndex(index);
+		focusIndex.current = index, setMovedIndex(index);
 		let element_1 = scroller.current;
 		isDefined(element_1) && (element_1.scrollTop = getRevealedScrollTop(index, element_1.scrollTop));
-	}, t7;
-	$[14] === Symbol.for("react.memo_cache_sentinel") ? (t7 = /* @__PURE__ */ jsx(SearchIcon, { ...defaultIconProps }), $[14] = t7) : t7 = $[14];
-	let t8;
-	$[15] === library ? t8 = $[16] : (t8 = !isDefined(library) && /* @__PURE__ */ jsx(Flex, {
+	}, T0 = Dialog, T1 = Stack, t14 = !isDefined(result?.problem) && /* @__PURE__ */ jsx(TextInput, {
+		type: "search",
+		icon: /* @__PURE__ */ jsx(SearchIcon, {}),
+		placeholder: "Search by name or keyword",
+		value: search,
+		onChange: handleSearch,
+		onKeyDown: handleSearchKeyDown,
+		disabled: !isDefined(library) || !isDefined(icons),
+		"aria-label": "Search the icon library"
+	}), t15;
+	$[19] === result ? t15 = $[20] : (t15 = !isDefined(result) && /* @__PURE__ */ jsx(Flex, {
 		align: "center",
 		justify: "center",
 		style: { height: 348 },
 		children: /* @__PURE__ */ jsx(Spinner, { muted: !0 })
-	}), $[15] = library, $[16] = t8);
-	let t9;
-	$[17] !== activeIndex || $[18] !== clearHover || $[19] !== clearSearch || $[20] !== handleGridKeyDown || $[21] !== handleHover || $[22] !== handleScroll || $[23] !== handleSelect || $[24] !== icons || $[25] !== library || $[26] !== results || $[27] !== rows || $[28] !== scroller || $[29] !== search || $[30] !== selected ? (t9 = isDefined(library) && /* @__PURE__ */ jsxs(Stack, {
+	}), $[19] = result, $[20] = t15);
+	let t16;
+	$[21] === result ? t16 = $[22] : (t16 = isDefined(result?.problem) && /* @__PURE__ */ jsx(Problem, { problem: result.problem }), $[21] = result, $[22] = t16);
+	let t17 = isDefined(recentIcons) && /* @__PURE__ */ jsx(Recent, {
+		icons: recentIcons,
+		selected,
+		onSelect: handleSelect,
+		onHover: handleHover,
+		onForget: forget,
+		onMouseLeave: clearHover
+	}), t18 = isDefined(library) && /* @__PURE__ */ jsxs(Stack, {
 		gap: 3,
 		children: [
 			/* @__PURE__ */ jsx(Box, {
@@ -535,22 +830,23 @@ function Picker(t0) {
 					muted: !0,
 					children: [
 						"All icons (",
-						results.length.toLocaleString("en-GB"),
+						results.length.toLocaleString("en-US"),
 						")"
 					]
 				})
 			}),
-			icons.length === 0 && /* @__PURE__ */ jsx(Flex, {
+			!isDefined(icons) && /* @__PURE__ */ jsx(Flex, {
 				align: "center",
 				justify: "center",
-				style: { height: 348 },
+				paddingTop: 5,
+				paddingBottom: 6,
 				children: /* @__PURE__ */ jsx(Text, {
 					size: 1,
 					muted: !0,
-					children: "No icons are available to choose from."
+					children: "No icons available."
 				})
 			}),
-			icons.length > 0 && /* @__PURE__ */ jsx(Library, {
+			isDefined(icons) && /* @__PURE__ */ jsx(Library, {
 				ref: scroller,
 				icons: results,
 				rows,
@@ -559,105 +855,151 @@ function Picker(t0) {
 				activeCell,
 				search,
 				onSelect: handleSelect,
+				onHover: handleHover,
 				onClearSearch: clearSearch,
 				onScroll: handleScroll,
-				onMouseOver: handleHover,
 				onMouseLeave: clearHover,
 				onKeyDown: handleGridKeyDown
 			})
 		]
-	}), $[17] = activeIndex, $[18] = clearHover, $[19] = clearSearch, $[20] = handleGridKeyDown, $[21] = handleHover, $[22] = handleScroll, $[23] = handleSelect, $[24] = icons, $[25] = library, $[26] = results, $[27] = rows, $[28] = scroller, $[29] = search, $[30] = selected, $[31] = t9) : t9 = $[31];
-	let t10 = hovered?.icon.name, t11;
-	return $[32] !== hovered || $[33] !== t10 ? (t11 = /* @__PURE__ */ jsx(Tooltip, { hovered }, t10), $[32] = hovered, $[33] = t10, $[34] = t11) : t11 = $[34], /* @__PURE__ */ jsx(Dialog, {
+	}), t19 = hovered?.icon.name, t20;
+	$[23] !== hovered || $[24] !== query || $[25] !== t19 ? (t20 = /* @__PURE__ */ jsx(Tooltip, {
+		hovered,
+		query
+	}, t19), $[23] = hovered, $[24] = query, $[25] = t19, $[26] = t20) : t20 = $[26];
+	let t21;
+	$[27] !== T1 || $[28] !== t14 || $[29] !== t15 || $[30] !== t16 || $[31] !== t17 || $[32] !== t18 || $[33] !== t20 ? (t21 = /* @__PURE__ */ jsxs(T1, {
+		gap: 4,
+		padding: 4,
+		children: [
+			t14,
+			t15,
+			t16,
+			t17,
+			t18,
+			t20
+		]
+	}), $[27] = T1, $[28] = t14, $[29] = t15, $[30] = t16, $[31] = t17, $[32] = t18, $[33] = t20, $[34] = t21) : t21 = $[34];
+	let t22;
+	return $[35] !== T0 || $[36] !== props || $[37] !== t21 ? (t22 = /* @__PURE__ */ jsx(T0, {
 		header: "Select icon",
 		width: 1,
 		...props,
-		children: /* @__PURE__ */ jsxs(Stack, {
-			gap: 4,
-			padding: 4,
-			children: [
-				/* @__PURE__ */ jsx(TextInput, {
-					icon: t7,
-					placeholder: "Search by name or by what the icon depicts",
-					value: search,
-					onChange: handleSearch,
-					onKeyDown: handleSearchKeyDown,
-					disabled: !isDefined(library) || icons.length === 0,
-					"aria-label": "Search the icon library"
-				}),
-				t8,
-				isDefined(recentIcons) && /* @__PURE__ */ jsx(Recent, {
-					icons: recentIcons,
-					selected,
-					onSelect: handleSelect,
-					onForget: forget,
-					onMouseOver: handleHover,
-					onMouseLeave: clearHover
-				}),
-				t9,
-				t11
-			]
-		})
-	});
+		children: t21
+	}), $[35] = T0, $[36] = props, $[37] = t21, $[38] = t22) : t22 = $[38], t22;
 }
 function _temp(icon_0) {
 	return [icon_0.name, icon_0];
 }
-/** Type name of the icon object. */
+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;
+}
+/**
+* Resolves the library, style, and icons a field offers. A field that names a library replaces all three of the
+* plugin's, and one that doesn't uses the plugin's.
+*
+* @param options - The field's options.
+* @param config - The plugin configuration.
+* @returns The field's settings, whose library is undefined when neither the field nor the plugin names one.
+*/
+function resolveIconOptions(options, config) {
+	let { library, style, icons } = (isDefined(options?.library) ? options : config) ?? {};
+	return {
+		library,
+		style,
+		icons
+	};
+}
+/** Schema type name of the icon object. */
 const iconTypeName = "icon";
 /**
-* Creates the input an icon field is drawn with, holding the icons the plugin was configured with so
-* a field naming its own replaces them rather than adding to them.
+* Creates the icon field input, bound to the plugin's configuration. A field's own icons replace the
+* plugin's rather than adding to them.
 *
-* @param icons - Icons every field offers, or nothing to offer them all.
+* @param config - The plugin configuration.
 * @returns The input component.
 */
-function createInput(icons) {
+function createInput(config) {
 	function Input(t0) {
-		let $ = c(29), { id, schemaType, value, onChange, readOnly } = t0, { name, node } = value ?? {}, [open, setOpen] = useState(!1), allowed = schemaType.options?.icons ?? icons, selectedNode = resolveIconNode(node), selectedLabel = isDefined(name) ? convertCase(name, "sentence") : void 0, t1;
-		$[0] !== onChange || $[1] !== setOpen ? (t1 = function handleSelect(icon) {
+		let $ = c(35), { id, schemaType, value, onChange, readOnly } = t0, { library: storedLibrary, name, node } = value ?? {}, [open, setOpen] = useState(!1), t1;
+		$[0] === schemaType.options ? t1 = $[1] : (t1 = resolveIconOptions(schemaType.options, config), $[0] = schemaType.options, $[1] = t1);
+		let { library, style, icons } = t1, selectedDrawing = resolveIconDrawing(node), selectedName = storedLibrary === library ? name : void 0, selectedLabel = isDefined(name) ? convertCase(name, "title") : void 0, t2;
+		$[2] !== library || $[3] !== onChange || $[4] !== setOpen || $[5] !== style ? (t2 = function handleSelect(icon) {
 			onChange([
 				setIfMissing({ _type: iconTypeName }),
+				isDefined(library) ? set(library, ["library"]) : unset(["library"]),
+				isDefined(style) ? set(style, ["style"]) : unset(["style"]),
 				set(icon.name, ["name"]),
-				set(serialiseIconNode(icon.node), ["node"])
+				set(serializeIconDrawing(icon.drawing), ["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 = () => {
+		}, $[2] = library, $[3] = onChange, $[4] = setOpen, $[5] = style, $[6] = t2) : t2 = $[6];
+		let handleSelect = t2, T0 = Flex, T1 = Button, t6 = isDefined(selectedDrawing) ? /* @__PURE__ */ jsx(Drawing, {
+			drawing: selectedDrawing,
+			width: "1em",
+			height: "1em"
+		}) : /* @__PURE__ */ jsx(SquareDashedIcon, { ...defaultIconProps }), t7 = selectedLabel ?? "Select icon", t8;
+		$[7] === setOpen ? t8 = $[8] : (t8 = () => {
 			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, {
+		}, $[7] = setOpen, $[8] = t8);
+		let t9 = isDefined(selectedLabel) ? `${selectedLabel} currently selected` : "Select icon", t10;
+		$[9] !== T1 || $[10] !== id || $[11] !== readOnly || $[12] !== t6 || $[13] !== t7 || $[14] !== t8 || $[15] !== t9 ? (t10 = /* @__PURE__ */ jsx(T1, {
 			id,
 			type: "button",
 			mode: "ghost",
-			icon: t5,
-			text: t6,
+			icon: t6,
+			text: t7,
 			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, {
+			onClick: t8,
+			"aria-label": t9
+		}), $[9] = T1, $[10] = id, $[11] = readOnly, $[12] = t6, $[13] = t7, $[14] = t8, $[15] = t9, $[16] = t10) : t10 = $[16];
+		let t11;
+		$[17] !== onChange || $[18] !== readOnly || $[19] !== value ? (t11 = isDefined(value) && /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			mode: "ghost",
 			tone: "critical",
-			icon: /* @__PURE__ */ jsx(CloseIcon, { ...defaultIconProps }),
+			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
 			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] !== allowed || $[18] !== handleSelect || $[19] !== id || $[20] !== name || $[21] !== open || $[22] !== setOpen ? (t11 = open && /* @__PURE__ */ jsx(Picker, {
+			"aria-label": "Clear the selected icon"
+		}), $[17] = onChange, $[18] = readOnly, $[19] = value, $[20] = t11) : t11 = $[20];
+		let t12;
+		$[21] !== handleSelect || $[22] !== icons || $[23] !== id || $[24] !== library || $[25] !== open || $[26] !== selectedName || $[27] !== setOpen || $[28] !== style ? (t12 = open && /* @__PURE__ */ jsx(Picker, {
 			id: `${id}-library`,
-			allowed,
-			selected: name,
+			library,
+			iconStyle: style,
+			allowed: icons,
+			selected: selectedName,
 			onSelect: handleSelect,
 			onClose: () => {
 				setOpen(!1);
@@ -665,101 +1007,53 @@ function createInput(icons) {
 			onClickOutside: () => {
 				setOpen(!1);
 			}
-		}), $[17] = allowed, $[18] = handleSelect, $[19] = id, $[20] = name, $[21] = open, $[22] = setOpen, $[23] = t11) : t11 = $[23];
-		let t12;
-		return $[24] !== T0 || $[25] !== t10 || $[26] !== t11 || $[27] !== t9 ? (t12 = /* @__PURE__ */ jsxs(T0, {
+		}), $[21] = handleSelect, $[22] = icons, $[23] = id, $[24] = library, $[25] = open, $[26] = selectedName, $[27] = setOpen, $[28] = style, $[29] = t12) : t12 = $[29];
+		let t13;
+		return $[30] !== T0 || $[31] !== t10 || $[32] !== t11 || $[33] !== t12 ? (t13 = /* @__PURE__ */ jsxs(T0, {
 			gap: 2,
 			children: [
-				t9,
 				t10,
-				t11
+				t11,
+				t12
 			]
-		}), $[24] = T0, $[25] = t10, $[26] = t11, $[27] = t9, $[28] = t12) : t12 = $[28], t12;
+		}), $[30] = T0, $[31] = t10, $[32] = t11, $[33] = t12, $[34] = t13) : t13 = $[34], t13;
 	}
 	return Input;
 }
-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;
-}
 /**
-* 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.
+* Creates preview media for a stored icon, so each document shows its own icon instead of a placeholder.
 *
 * @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() {
+	let drawing = resolveIconDrawing(value?.node);
+	if (isDefined(drawing)) return function IconPreview() {
 		return createElement(Drawing, {
-			node,
-			...defaultIconProps
+			drawing,
+			width: "1em",
+			height: "1em"
 		});
 	};
 }
 /**
-* Creates the object type an icon is stored as, offering the icons it is given to every field that
-* does not name its own.
+* Creates the icon object type, offering the plugin's icons to fields that don't set their own.
 *
-* @param icons - Icons every field offers, or nothing to offer them all.
-* @returns An object type definition for a stored icon.
+* @param config - The plugin configuration.
+* @returns The icon type.
 */
-function createIconType(icons) {
+function createIconType(config) {
 	return defineType({
 		name: iconTypeName,
 		type: "object",
 		icon: createSanityIcon(SquareDashedIcon),
-		description: "Icon chosen from the Lucide library.",
+		description: "Icon chosen from an icon library.",
 		components: {
 			field: Field,
-			input: createInput(icons)
+			input: createInput(config)
 		},
+		validation: (rule) => rule.custom((value) => !isDefined(value?.name) || isDefined(value.node) ? !0 : "Select the icon again to save its drawing."),
 		preview: {
 			select: {
 				name: "name",
@@ -768,7 +1062,7 @@ function createIconType(icons) {
 			prepare(selection) {
 				let { name, node } = selection;
 				return {
-					title: isDefined(name) ? convertCase(name, "sentence") : "No icon",
+					title: isDefined(name) ? convertCase(name, "title") : "No icon",
 					media: createIconPreview({
 						_type: iconTypeName,
 						name,
@@ -777,34 +1071,43 @@ function createIconType(icons) {
 				};
 			}
 		},
-		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."
-		})]
+		fields: [
+			defineField({
+				name: "library",
+				type: "string",
+				description: "Identifier of the library the icon came from."
+			}),
+			defineField({
+				name: "style",
+				type: "string",
+				description: "Identifier of the library style the icon came from."
+			}),
+			defineField({
+				name: "name",
+				type: "string",
+				description: "Name of the icon in its library."
+			}),
+			defineField({
+				name: "node",
+				type: "text",
+				description: "Shapes the icon is drawn from, saved when it's chosen."
+			})
+		]
 	});
 }
-/** The plugin as Sanity defines it, wrapped below so that its configuration can genuinely be left out. */
-const plugin = definePlugin((config) => {
-	let { icons } = config;
-	return {
-		name: "@driftime/sanity-plugin-icon",
-		schema: { types: [createIconType(icons)] }
-	};
-});
+const plugin = definePlugin((config) => ({
+	name: pluginName,
+	schema: { types: [createIconType(config)] }
+}));
 /**
-* Creates the icon field type for Sanity Studio, offering the Lucide library through a searchable
-* picker and storing the chosen drawing ready to render.
+* Adds an icon field type to Sanity Studio, with a searchable picker for the installed icon libraries that
+* stores the chosen icon's drawing.
 *
-* @param config - Plugin configuration.
-* @returns Sanity plugin definition.
+* @param config - The plugin configuration.
+* @returns The plugin.
 * @public
 */
-function iconPlugin(config = {}) {
+function iconPlugin(config) {
 	return plugin(config);
 }
 export { createIconPreview, iconPlugin };