@sanity/color-input

Index: package/dist/index.js
===================================================================
--- package/dist/index.js
+++ package/dist/index.js
@@ -2,12 +2,28 @@
 import "@sanity/ui/styles.css";
 import { definePlugin, defineType } from "sanity";
 import { c } from "react/compiler-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { lazy } from "react";
+import { Box, Text } from "@sanity/ui";
+import { Suspense, lazy } from "react";
 import { jsx } from "react/jsx-runtime";
-const ColorInput = lazy(() => import("./ColorInput-Bk3g75c0.js"));
-var backgroundColorVar = "var(--_1cggvdy0)", colorPreview = "_1cggvdy2", opacityVar = "var(--_1cggvdy1)";
+const ColorInputLazy = lazy(() => import("./ColorInput-EY_NI5Gu.js")), fallback = /* @__PURE__ */ jsx(Box, {
+	padding: 3,
+	children: /* @__PURE__ */ jsx(Text, { children: "Loading color input..." })
+});
+/**
+* The document form suspends as one tree, and that tree includes the field
+* group tabs. Loading the picker here keeps that fallback inside the field,
+* so the tabs stay mounted and keep the width they already measured.
+*/
+function ColorInput(props) {
+	let $ = c(2), t0;
+	return $[0] === props ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(Suspense, {
+		fallback,
+		children: /* @__PURE__ */ jsx(ColorInputLazy, { ...props })
+	}), $[0] = props, $[1] = t0), t0;
+}
+var backgroundColorVar = "var(--_175fse20)", colorPreview = "_175fse22", opacityVar = "var(--_175fse21)";
 const round = (val = 1) => Math.round(val * 100);
 function ColorPreviewMedia(t0) {
 	let $ = c(5), { hex, alpha } = t0, t1 = hex ?? "#000", t2 = String(alpha ?? 1), t3;
 	$[0] !== t1 || $[1] !== t2 ? (t3 = assignInlineVars({