@sanity/ui 3.0.0-static.25 → 3.0.0-static.27

package/dist/_visual-editing.d.cts

@@ -658,6 +658,7 @@ declare type StackOwnProps = Omit<
   | 'direction'
   | 'display'
   | 'flexDirection'
+  | 'flexWrap'
   | 'gapX'
   | 'gapY'
   | 'justify'

package/dist/_visual-editing.d.ts

@@ -658,6 +658,7 @@ declare type StackOwnProps = Omit<
   | 'direction'
   | 'display'
   | 'flexDirection'
+  | 'flexWrap'
   | 'gapX'
   | 'gapY'
   | 'justify'

package/dist/css.cjs

@@ -194,7 +194,7 @@ var options$1 = { clip: { 0: "ui-e4u24p0", 1: "ui-e4u24p1", 2: "ui-e4u24p2", 3:
 function textOverflow(props) {
   return _responsiveClassName(options$1, props.textOverflow);
 }
-var options = { 0: { 0: "ui-nswtc7l", 1: "ui-nswtc7m", 2: "ui-nswtc7n", 3: "ui-nswtc7o", 4: "ui-nswtc7p", 5: "ui-nswtc7q", 6: "ui-nswtc7r" }, 1: { 0: "ui-nswtc7s", 1: "ui-nswtc7t", 2: "ui-nswtc7u", 3: "ui-nswtc7v", 4: "ui-nswtc7w", 5: "ui-nswtc7x", 6: "ui-nswtc7y" }, 2: { 0: "ui-nswtc7z", 1: "ui-nswtc710", 2: "ui-nswtc711", 3: "ui-nswtc712", 4: "ui-nswtc713", 5: "ui-nswtc714", 6: "ui-nswtc715" }, 3: { 0: "ui-nswtc716", 1: "ui-nswtc717", 2: "ui-nswtc718", 3: "ui-nswtc719", 4: "ui-nswtc71a", 5: "ui-nswtc71b", 6: "ui-nswtc71c" }, 4: { 0: "ui-nswtc71d", 1: "ui-nswtc71e", 2: "ui-nswtc71f", 3: "ui-nswtc71g", 4: "ui-nswtc71h", 5: "ui-nswtc71i", 6: "ui-nswtc71j" }, 5: { 0: "ui-nswtc71k", 1: "ui-nswtc71l", 2: "ui-nswtc71m", 3: "ui-nswtc71n", 4: "ui-nswtc71o", 5: "ui-nswtc71p", 6: "ui-nswtc71q" }, auto: { 0: "ui-nswtc70", 1: "ui-nswtc71", 2: "ui-nswtc72", 3: "ui-nswtc73", 4: "ui-nswtc74", 5: "ui-nswtc75", 6: "ui-nswtc76" }, fill: { 0: "ui-nswtc77", 1: "ui-nswtc78", 2: "ui-nswtc79", 3: "ui-nswtc7a", 4: "ui-nswtc7b", 5: "ui-nswtc7c", 6: "ui-nswtc7d" }, stretch: { 0: "ui-nswtc7e", 1: "ui-nswtc7f", 2: "ui-nswtc7g", 3: "ui-nswtc7h", 4: "ui-nswtc7i", 5: "ui-nswtc7j", 6: "ui-nswtc7k" } };
+var options = { 0: { 0: "ui-nswtc7s", 1: "ui-nswtc7t", 2: "ui-nswtc7u", 3: "ui-nswtc7v", 4: "ui-nswtc7w", 5: "ui-nswtc7x", 6: "ui-nswtc7y" }, 1: { 0: "ui-nswtc7z", 1: "ui-nswtc710", 2: "ui-nswtc711", 3: "ui-nswtc712", 4: "ui-nswtc713", 5: "ui-nswtc714", 6: "ui-nswtc715" }, 2: { 0: "ui-nswtc716", 1: "ui-nswtc717", 2: "ui-nswtc718", 3: "ui-nswtc719", 4: "ui-nswtc71a", 5: "ui-nswtc71b", 6: "ui-nswtc71c" }, 3: { 0: "ui-nswtc71d", 1: "ui-nswtc71e", 2: "ui-nswtc71f", 3: "ui-nswtc71g", 4: "ui-nswtc71h", 5: "ui-nswtc71i", 6: "ui-nswtc71j" }, 4: { 0: "ui-nswtc71k", 1: "ui-nswtc71l", 2: "ui-nswtc71m", 3: "ui-nswtc71n", 4: "ui-nswtc71o", 5: "ui-nswtc71p", 6: "ui-nswtc71q" }, 5: { 0: "ui-nswtc71r", 1: "ui-nswtc71s", 2: "ui-nswtc71t", 3: "ui-nswtc71u", 4: "ui-nswtc71v", 5: "ui-nswtc71w", 6: "ui-nswtc71x" }, auto: { 0: "ui-nswtc70", 1: "ui-nswtc71", 2: "ui-nswtc72", 3: "ui-nswtc73", 4: "ui-nswtc74", 5: "ui-nswtc75", 6: "ui-nswtc76" }, fill: { 0: "ui-nswtc77", 1: "ui-nswtc78", 2: "ui-nswtc79", 3: "ui-nswtc7a", 4: "ui-nswtc7b", 5: "ui-nswtc7c", 6: "ui-nswtc7d" }, min: { 0: "ui-nswtc7e", 1: "ui-nswtc7f", 2: "ui-nswtc7g", 3: "ui-nswtc7h", 4: "ui-nswtc7i", 5: "ui-nswtc7j", 6: "ui-nswtc7k" }, stretch: { 0: "ui-nswtc7l", 1: "ui-nswtc7m", 2: "ui-nswtc7n", 3: "ui-nswtc7o", 4: "ui-nswtc7p", 5: "ui-nswtc7q", 6: "ui-nswtc7r" } };
 function width(props) {
   return _responsiveClassName(options, props.width);
 }

package/dist/css.d.cts

@@ -14871,7 +14871,7 @@ export declare const vars: {
 }
 
 /** @public */
-export declare type Width = ContainerWidth | 'auto' | 'fill' | 'stretch'
+export declare type Width = ContainerWidth | 'auto' | 'fill' | 'stretch' | 'min'
 
 /** @public */
 export declare function width(props: WidthStyleProps): string | undefined

package/dist/css.d.ts

@@ -14871,7 +14871,7 @@ export declare const vars: {
 }
 
 /** @public */
-export declare type Width = ContainerWidth | 'auto' | 'fill' | 'stretch'
+export declare type Width = ContainerWidth | 'auto' | 'fill' | 'stretch' | 'min'
 
 /** @public */
 export declare function width(props: WidthStyleProps): string | undefined

package/dist/css.js

@@ -192,7 +192,7 @@ var options$1 = { clip: { 0: "ui-e4u24p0", 1: "ui-e4u24p1", 2: "ui-e4u24p2", 3:
 function textOverflow(props) {
   return _responsiveClassName(options$1, props.textOverflow);
 }
-var options = { 0: { 0: "ui-nswtc7l", 1: "ui-nswtc7m", 2: "ui-nswtc7n", 3: "ui-nswtc7o", 4: "ui-nswtc7p", 5: "ui-nswtc7q", 6: "ui-nswtc7r" }, 1: { 0: "ui-nswtc7s", 1: "ui-nswtc7t", 2: "ui-nswtc7u", 3: "ui-nswtc7v", 4: "ui-nswtc7w", 5: "ui-nswtc7x", 6: "ui-nswtc7y" }, 2: { 0: "ui-nswtc7z", 1: "ui-nswtc710", 2: "ui-nswtc711", 3: "ui-nswtc712", 4: "ui-nswtc713", 5: "ui-nswtc714", 6: "ui-nswtc715" }, 3: { 0: "ui-nswtc716", 1: "ui-nswtc717", 2: "ui-nswtc718", 3: "ui-nswtc719", 4: "ui-nswtc71a", 5: "ui-nswtc71b", 6: "ui-nswtc71c" }, 4: { 0: "ui-nswtc71d", 1: "ui-nswtc71e", 2: "ui-nswtc71f", 3: "ui-nswtc71g", 4: "ui-nswtc71h", 5: "ui-nswtc71i", 6: "ui-nswtc71j" }, 5: { 0: "ui-nswtc71k", 1: "ui-nswtc71l", 2: "ui-nswtc71m", 3: "ui-nswtc71n", 4: "ui-nswtc71o", 5: "ui-nswtc71p", 6: "ui-nswtc71q" }, auto: { 0: "ui-nswtc70", 1: "ui-nswtc71", 2: "ui-nswtc72", 3: "ui-nswtc73", 4: "ui-nswtc74", 5: "ui-nswtc75", 6: "ui-nswtc76" }, fill: { 0: "ui-nswtc77", 1: "ui-nswtc78", 2: "ui-nswtc79", 3: "ui-nswtc7a", 4: "ui-nswtc7b", 5: "ui-nswtc7c", 6: "ui-nswtc7d" }, stretch: { 0: "ui-nswtc7e", 1: "ui-nswtc7f", 2: "ui-nswtc7g", 3: "ui-nswtc7h", 4: "ui-nswtc7i", 5: "ui-nswtc7j", 6: "ui-nswtc7k" } };
+var options = { 0: { 0: "ui-nswtc7s", 1: "ui-nswtc7t", 2: "ui-nswtc7u", 3: "ui-nswtc7v", 4: "ui-nswtc7w", 5: "ui-nswtc7x", 6: "ui-nswtc7y" }, 1: { 0: "ui-nswtc7z", 1: "ui-nswtc710", 2: "ui-nswtc711", 3: "ui-nswtc712", 4: "ui-nswtc713", 5: "ui-nswtc714", 6: "ui-nswtc715" }, 2: { 0: "ui-nswtc716", 1: "ui-nswtc717", 2: "ui-nswtc718", 3: "ui-nswtc719", 4: "ui-nswtc71a", 5: "ui-nswtc71b", 6: "ui-nswtc71c" }, 3: { 0: "ui-nswtc71d", 1: "ui-nswtc71e", 2: "ui-nswtc71f", 3: "ui-nswtc71g", 4: "ui-nswtc71h", 5: "ui-nswtc71i", 6: "ui-nswtc71j" }, 4: { 0: "ui-nswtc71k", 1: "ui-nswtc71l", 2: "ui-nswtc71m", 3: "ui-nswtc71n", 4: "ui-nswtc71o", 5: "ui-nswtc71p", 6: "ui-nswtc71q" }, 5: { 0: "ui-nswtc71r", 1: "ui-nswtc71s", 2: "ui-nswtc71t", 3: "ui-nswtc71u", 4: "ui-nswtc71v", 5: "ui-nswtc71w", 6: "ui-nswtc71x" }, auto: { 0: "ui-nswtc70", 1: "ui-nswtc71", 2: "ui-nswtc72", 3: "ui-nswtc73", 4: "ui-nswtc74", 5: "ui-nswtc75", 6: "ui-nswtc76" }, fill: { 0: "ui-nswtc77", 1: "ui-nswtc78", 2: "ui-nswtc79", 3: "ui-nswtc7a", 4: "ui-nswtc7b", 5: "ui-nswtc7c", 6: "ui-nswtc7d" }, min: { 0: "ui-nswtc7e", 1: "ui-nswtc7f", 2: "ui-nswtc7g", 3: "ui-nswtc7h", 4: "ui-nswtc7i", 5: "ui-nswtc7j", 6: "ui-nswtc7k" }, stretch: { 0: "ui-nswtc7l", 1: "ui-nswtc7m", 2: "ui-nswtc7n", 3: "ui-nswtc7o", 4: "ui-nswtc7p", 5: "ui-nswtc7q", 6: "ui-nswtc7r" } };
 function width(props) {
   return _responsiveClassName(options, props.width);
 }

package/dist/index.cjs

@@ -306,7 +306,7 @@ function Badge(props) {
   let t7;
   $[12] !== children || $[13] !== fontSize ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: fontSize, children }), $[12] = children, $[13] = fontSize, $[14] = t7) : t7 = $[14];
   let t8;
-  return $[15] !== as || $[16] !== padding || $[17] !== radius || $[18] !== rest || $[19] !== t6 || $[20] !== t7 ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "data-ui": "Badge", ...rest, as, className: t6, display: "inline-flex", maxWidth: "fill", padding, radius, children: t7 }), $[15] = as, $[16] = padding, $[17] = radius, $[18] = rest, $[19] = t6, $[20] = t7, $[21] = t8) : t8 = $[21], t8;
+  return $[15] !== as || $[16] !== padding || $[17] !== radius || $[18] !== rest || $[19] !== t6 || $[20] !== t7 ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "data-ui": "Badge", ...rest, as, className: t6, display: "flex", maxWidth: "fill", padding, radius, width: "min", children: t7 }), $[15] = as, $[16] = padding, $[17] = radius, $[18] = rest, $[19] = t6, $[20] = t7, $[21] = t8) : t8 = $[21], t8;
 }
 const DEFAULT_CHECKBOX_ELEMENT = "input";
 function Checkbox(props) {
@@ -463,145 +463,6 @@ class ErrorBoundary extends react.Component {
     return this.props.children;
   }
 }
-const DEFAULT_SR_ONLY_ELEMENT = "span";
-function SrOnly(props) {
-  const $ = reactCompilerRuntime.c(12), t0 = props;
-  let children, className, rest, t1;
-  $[0] !== t0 ? ({
-    as: t1,
-    children,
-    className,
-    ...rest
-  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = rest, $[4] = t1) : (children = $[1], className = $[2], rest = $[3], t1 = $[4]);
-  const Element2 = t1 === void 0 ? DEFAULT_SR_ONLY_ELEMENT : t1;
-  let t2;
-  $[5] !== className ? (t2 = css.srOnly({
-    className
-  }), $[5] = className, $[6] = t2) : t2 = $[6];
-  let t3;
-  return $[7] !== Element2 || $[8] !== children || $[9] !== rest || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { "data-ui": "SrOnly", ...rest, "aria-hidden": !0, className: t2, children }), $[7] = Element2, $[8] = children, $[9] = rest, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
-}
-const DEFAULT_VIRTUAL_LIST_ELEMENT = "div";
-function VirtualList(props) {
-  const $ = reactCompilerRuntime.c(58), t0 = props;
-  let forwardedRef, getItemKey, onChange, renderItem, rest, t1, t2, t3;
-  $[0] !== t0 ? ({
-    as: t1,
-    gap: t2,
-    getItemKey,
-    items: t3,
-    onChange,
-    renderItem,
-    ref: forwardedRef,
-    ...rest
-  } = t0, $[0] = t0, $[1] = forwardedRef, $[2] = getItemKey, $[3] = onChange, $[4] = renderItem, $[5] = rest, $[6] = t1, $[7] = t2, $[8] = t3) : (forwardedRef = $[1], getItemKey = $[2], onChange = $[3], renderItem = $[4], rest = $[5], t1 = $[6], t2 = $[7], t3 = $[8]);
-  const as = t1 === void 0 ? DEFAULT_VIRTUAL_LIST_ELEMENT : t1, gap = t2 === void 0 ? 0 : t2;
-  let t4;
-  $[9] !== t3 ? (t4 = t3 === void 0 ? [] : t3, $[9] = t3, $[10] = t4) : t4 = $[10];
-  const items = t4, ref = react.useRef(null), wrapperRef = react.useRef(null), [scrollTop, setScrollTop] = react.useState(0), [scrollHeight, setScrollHeight] = react.useState(0), [itemHeight, setItemHeight] = react.useState(-1), [gapValue, setGapValue] = react.useState(0);
-  let t5;
-  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[11] = t5) : t5 = $[11], react.useImperativeHandle(forwardedRef, t5);
-  let t6, t7;
-  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => {
-    if (!ref.current)
-      return;
-    const scrollEl = findScrollable(ref.current.parentNode);
-    if (scrollEl) {
-      if (!(scrollEl instanceof HTMLElement))
-        return;
-      const handleScroll = () => {
-        setScrollTop(scrollEl.scrollTop);
-      };
-      scrollEl.addEventListener("scroll", handleScroll, {
-        passive: !0
-      });
-      const ro = new _visualEditing._ResizeObserver((entries) => {
-        setScrollHeight(entries[0].contentRect.height);
-      });
-      return ro.observe(scrollEl), handleScroll(), () => {
-        scrollEl.removeEventListener("scroll", handleScroll), ro.unobserve(scrollEl), ro.disconnect();
-      };
-    }
-    const handleScroll_0 = () => {
-      setScrollTop(window.scrollY);
-    }, handleResize = () => {
-      setScrollHeight(window.innerHeight);
-    };
-    return window.addEventListener("scroll", handleScroll_0, {
-      passive: !0
-    }), window.addEventListener("resize", handleResize), setScrollHeight(window.innerHeight), handleScroll_0(), () => {
-      window.removeEventListener("scroll", handleScroll_0), window.removeEventListener("resize", handleResize);
-    };
-  }, t7 = [], $[12] = t6, $[13] = t7) : (t6 = $[12], t7 = $[13]), react.useEffect(t6, t7);
-  const len = items.length, height = itemHeight ? len * (itemHeight + gapValue) - gapValue : 0, fromIndex = height ? Math.max(Math.floor(scrollTop / height * len) - 2, 0) : 0, toIndex = height ? Math.ceil((scrollTop + scrollHeight) / height * len) + 1 : 0;
-  let t8, t9;
-  $[14] !== fromIndex || $[15] !== gapValue || $[16] !== itemHeight || $[17] !== onChange || $[18] !== scrollHeight || $[19] !== scrollTop || $[20] !== toIndex ? (t8 = () => {
-    onChange?.({
-      fromIndex,
-      gap: gapValue,
-      itemHeight,
-      scrollHeight,
-      scrollTop,
-      toIndex
-    });
-  }, t9 = [fromIndex, gapValue, itemHeight, onChange, scrollHeight, scrollTop, toIndex], $[14] = fromIndex, $[15] = gapValue, $[16] = itemHeight, $[17] = onChange, $[18] = scrollHeight, $[19] = scrollTop, $[20] = toIndex, $[21] = t8, $[22] = t9) : (t8 = $[21], t9 = $[22]), react.useEffect(t8, t9);
-  let t10;
-  bb0: {
-    if (!renderItem || items.length === 0) {
-      t10 = null;
-      break bb0;
-    }
-    if (itemHeight === -1) {
-      let t113;
-      $[23] === Symbol.for("react.memo_cache_sentinel") ? (t113 = (el) => el ? setItemHeight(el.offsetHeight) : void 0, $[23] = t113) : t113 = $[23];
-      let t122;
-      $[24] !== items[0] || $[25] !== renderItem ? (t122 = renderItem(items[0]), $[24] = items[0], $[25] = renderItem, $[26] = t122) : t122 = $[26];
-      let t132;
-      $[27] !== t122 ? (t132 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { ref: t113, insetTop: 0, insetLeft: 0, insetRight: 0, position: "absolute", children: t122 }, 0), $[27] = t122, $[28] = t132) : t132 = $[28];
-      let t142;
-      $[29] === Symbol.for("react.memo_cache_sentinel") ? (t142 = (el_0) => el_0 ? setGapValue(el_0.offsetHeight) : void 0, $[29] = t142) : t142 = $[29];
-      const t15 = css.vars.space[gap];
-      let t16;
-      $[30] !== t15 ? (t16 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: t142, style: {
-        height: t15
-      } }), $[30] = t15, $[31] = t16) : t16 = $[31];
-      let t17;
-      $[32] !== t132 || $[33] !== t16 ? (t17 = [/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        t132,
-        t16
-      ] })], $[32] = t132, $[33] = t16, $[34] = t17) : t17 = $[34], t10 = t17;
-      break bb0;
-    }
-    let t112;
-    if ($[35] !== fromIndex || $[36] !== gapValue || $[37] !== getItemKey || $[38] !== itemHeight || $[39] !== items || $[40] !== renderItem || $[41] !== toIndex) {
-      let t122;
-      $[43] !== fromIndex || $[44] !== gapValue || $[45] !== getItemKey || $[46] !== itemHeight || $[47] !== renderItem ? (t122 = (item, _itemIndex) => {
-        const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
-        return /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { insetLeft: 0, insetRight: 0, position: "absolute", style: {
-          top: itemIndex * (itemHeight + gapValue) - gapValue
-        }, children: node }, key);
-      }, $[43] = fromIndex, $[44] = gapValue, $[45] = getItemKey, $[46] = itemHeight, $[47] = renderItem, $[48] = t122) : t122 = $[48], t112 = items.slice(fromIndex, toIndex).map(t122), $[35] = fromIndex, $[36] = gapValue, $[37] = getItemKey, $[38] = itemHeight, $[39] = items, $[40] = renderItem, $[41] = toIndex, $[42] = t112;
-    } else
-      t112 = $[42];
-    t10 = t112;
-  }
-  const children = t10;
-  let t11, t12;
-  $[49] !== height ? (t12 = {
-    height
-  }, $[49] = height, $[50] = t12) : t12 = $[50], t11 = t12;
-  const wrapperStyle = t11;
-  let t13;
-  $[51] !== children || $[52] !== wrapperStyle ? (t13 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: wrapperStyle, children }), $[51] = children, $[52] = wrapperStyle, $[53] = t13) : t13 = $[53];
-  let t14;
-  return $[54] !== as || $[55] !== rest || $[56] !== t13 ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "data-ui": "VirtualList", ...rest, as, position: "relative", ref, children: t13 }), $[54] = as, $[55] = rest, $[56] = t13, $[57] = t14) : t14 = $[57], t14;
-}
-function findScrollable(parentNode) {
-  let _scrollEl = parentNode;
-  for (; _scrollEl && !_isScrollable(_scrollEl); )
-    _scrollEl = _scrollEl.parentNode;
-  return _scrollEl;
-}
 const DEFAULT_RADIO_ELEMENT = "input";
 function Radio(props) {
   const $ = reactCompilerRuntime.c(25), t0 = props;
@@ -686,6 +547,24 @@ function Select(props) {
     t16
   ] }), $[34] = t12, $[35] = t16, $[36] = t9, $[37] = t17) : t17 = $[37], t17;
 }
+const DEFAULT_SR_ONLY_ELEMENT = "span";
+function SrOnly(props) {
+  const $ = reactCompilerRuntime.c(12), t0 = props;
+  let children, className, rest, t1;
+  $[0] !== t0 ? ({
+    as: t1,
+    children,
+    className,
+    ...rest
+  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = rest, $[4] = t1) : (children = $[1], className = $[2], rest = $[3], t1 = $[4]);
+  const Element2 = t1 === void 0 ? DEFAULT_SR_ONLY_ELEMENT : t1;
+  let t2;
+  $[5] !== className ? (t2 = css.srOnly({
+    className
+  }), $[5] = className, $[6] = t2) : t2 = $[6];
+  let t3;
+  return $[7] !== Element2 || $[8] !== children || $[9] !== rest || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { "data-ui": "SrOnly", ...rest, "aria-hidden": !0, className: t2, children }), $[7] = Element2, $[8] = children, $[9] = rest, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
+}
 const DEFAULT_SWITCH_ELEMENT = "input";
 function Switch(props) {
   const $ = reactCompilerRuntime.c(31), t0 = props;
@@ -724,7 +603,7 @@ function Switch(props) {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: css._switchThumb() })
   ] }), $[24] = t14) : t14 = $[24];
   let t15;
-  return $[25] !== style || $[26] !== t13 || $[27] !== t5 || $[28] !== t6 || $[29] !== t7 ? (t15 = /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Box, { className: t5, "data-checked": t6, "data-indeterminate": t7, "data-ui": "Switch", display: "inline-block", position: "relative", style, children: [
+  return $[25] !== style || $[26] !== t13 || $[27] !== t5 || $[28] !== t6 || $[29] !== t7 ? (t15 = /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Box, { className: t5, "data-checked": t6, "data-indeterminate": t7, "data-ui": "Switch", display: "block", position: "relative", style, children: [
     t13,
     t14
   ] }), $[25] = style, $[26] = t13, $[27] = t5, $[28] = t6, $[29] = t7, $[30] = t15) : t15 = $[30], t15;
@@ -2039,6 +1918,127 @@ function TreeItem(props) {
     /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { expanded, children }) })
   ] });
 }
+const DEFAULT_VIRTUAL_LIST_ELEMENT = "div";
+function VirtualList(props) {
+  const $ = reactCompilerRuntime.c(58), t0 = props;
+  let forwardedRef, getItemKey, onChange, renderItem, rest, t1, t2, t3;
+  $[0] !== t0 ? ({
+    as: t1,
+    gap: t2,
+    getItemKey,
+    items: t3,
+    onChange,
+    renderItem,
+    ref: forwardedRef,
+    ...rest
+  } = t0, $[0] = t0, $[1] = forwardedRef, $[2] = getItemKey, $[3] = onChange, $[4] = renderItem, $[5] = rest, $[6] = t1, $[7] = t2, $[8] = t3) : (forwardedRef = $[1], getItemKey = $[2], onChange = $[3], renderItem = $[4], rest = $[5], t1 = $[6], t2 = $[7], t3 = $[8]);
+  const as = t1 === void 0 ? DEFAULT_VIRTUAL_LIST_ELEMENT : t1, gap = t2 === void 0 ? 0 : t2;
+  let t4;
+  $[9] !== t3 ? (t4 = t3 === void 0 ? [] : t3, $[9] = t3, $[10] = t4) : t4 = $[10];
+  const items = t4, ref = react.useRef(null), wrapperRef = react.useRef(null), [scrollTop, setScrollTop] = react.useState(0), [scrollHeight, setScrollHeight] = react.useState(0), [itemHeight, setItemHeight] = react.useState(-1), [gapValue, setGapValue] = react.useState(0);
+  let t5;
+  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[11] = t5) : t5 = $[11], react.useImperativeHandle(forwardedRef, t5);
+  let t6, t7;
+  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => {
+    if (!ref.current)
+      return;
+    const scrollEl = findScrollable(ref.current.parentNode);
+    if (scrollEl) {
+      if (!(scrollEl instanceof HTMLElement))
+        return;
+      const handleScroll = () => {
+        setScrollTop(scrollEl.scrollTop);
+      };
+      scrollEl.addEventListener("scroll", handleScroll, {
+        passive: !0
+      });
+      const ro = new _visualEditing._ResizeObserver((entries) => {
+        setScrollHeight(entries[0].contentRect.height);
+      });
+      return ro.observe(scrollEl), handleScroll(), () => {
+        scrollEl.removeEventListener("scroll", handleScroll), ro.unobserve(scrollEl), ro.disconnect();
+      };
+    }
+    const handleScroll_0 = () => {
+      setScrollTop(window.scrollY);
+    }, handleResize = () => {
+      setScrollHeight(window.innerHeight);
+    };
+    return window.addEventListener("scroll", handleScroll_0, {
+      passive: !0
+    }), window.addEventListener("resize", handleResize), setScrollHeight(window.innerHeight), handleScroll_0(), () => {
+      window.removeEventListener("scroll", handleScroll_0), window.removeEventListener("resize", handleResize);
+    };
+  }, t7 = [], $[12] = t6, $[13] = t7) : (t6 = $[12], t7 = $[13]), react.useEffect(t6, t7);
+  const len = items.length, height = itemHeight ? len * (itemHeight + gapValue) - gapValue : 0, fromIndex = height ? Math.max(Math.floor(scrollTop / height * len) - 2, 0) : 0, toIndex = height ? Math.ceil((scrollTop + scrollHeight) / height * len) + 1 : 0;
+  let t8, t9;
+  $[14] !== fromIndex || $[15] !== gapValue || $[16] !== itemHeight || $[17] !== onChange || $[18] !== scrollHeight || $[19] !== scrollTop || $[20] !== toIndex ? (t8 = () => {
+    onChange?.({
+      fromIndex,
+      gap: gapValue,
+      itemHeight,
+      scrollHeight,
+      scrollTop,
+      toIndex
+    });
+  }, t9 = [fromIndex, gapValue, itemHeight, onChange, scrollHeight, scrollTop, toIndex], $[14] = fromIndex, $[15] = gapValue, $[16] = itemHeight, $[17] = onChange, $[18] = scrollHeight, $[19] = scrollTop, $[20] = toIndex, $[21] = t8, $[22] = t9) : (t8 = $[21], t9 = $[22]), react.useEffect(t8, t9);
+  let t10;
+  bb0: {
+    if (!renderItem || items.length === 0) {
+      t10 = null;
+      break bb0;
+    }
+    if (itemHeight === -1) {
+      let t113;
+      $[23] === Symbol.for("react.memo_cache_sentinel") ? (t113 = (el) => el ? setItemHeight(el.offsetHeight) : void 0, $[23] = t113) : t113 = $[23];
+      let t122;
+      $[24] !== items[0] || $[25] !== renderItem ? (t122 = renderItem(items[0]), $[24] = items[0], $[25] = renderItem, $[26] = t122) : t122 = $[26];
+      let t132;
+      $[27] !== t122 ? (t132 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { ref: t113, insetTop: 0, insetLeft: 0, insetRight: 0, position: "absolute", children: t122 }, 0), $[27] = t122, $[28] = t132) : t132 = $[28];
+      let t142;
+      $[29] === Symbol.for("react.memo_cache_sentinel") ? (t142 = (el_0) => el_0 ? setGapValue(el_0.offsetHeight) : void 0, $[29] = t142) : t142 = $[29];
+      const t15 = css.vars.space[gap];
+      let t16;
+      $[30] !== t15 ? (t16 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: t142, style: {
+        height: t15
+      } }), $[30] = t15, $[31] = t16) : t16 = $[31];
+      let t17;
+      $[32] !== t132 || $[33] !== t16 ? (t17 = [/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        t132,
+        t16
+      ] })], $[32] = t132, $[33] = t16, $[34] = t17) : t17 = $[34], t10 = t17;
+      break bb0;
+    }
+    let t112;
+    if ($[35] !== fromIndex || $[36] !== gapValue || $[37] !== getItemKey || $[38] !== itemHeight || $[39] !== items || $[40] !== renderItem || $[41] !== toIndex) {
+      let t122;
+      $[43] !== fromIndex || $[44] !== gapValue || $[45] !== getItemKey || $[46] !== itemHeight || $[47] !== renderItem ? (t122 = (item, _itemIndex) => {
+        const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
+        return /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { insetLeft: 0, insetRight: 0, position: "absolute", style: {
+          top: itemIndex * (itemHeight + gapValue) - gapValue
+        }, children: node }, key);
+      }, $[43] = fromIndex, $[44] = gapValue, $[45] = getItemKey, $[46] = itemHeight, $[47] = renderItem, $[48] = t122) : t122 = $[48], t112 = items.slice(fromIndex, toIndex).map(t122), $[35] = fromIndex, $[36] = gapValue, $[37] = getItemKey, $[38] = itemHeight, $[39] = items, $[40] = renderItem, $[41] = toIndex, $[42] = t112;
+    } else
+      t112 = $[42];
+    t10 = t112;
+  }
+  const children = t10;
+  let t11, t12;
+  $[49] !== height ? (t12 = {
+    height
+  }, $[49] = height, $[50] = t12) : t12 = $[50], t11 = t12;
+  const wrapperStyle = t11;
+  let t13;
+  $[51] !== children || $[52] !== wrapperStyle ? (t13 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: wrapperStyle, children }), $[51] = children, $[52] = wrapperStyle, $[53] = t13) : t13 = $[53];
+  let t14;
+  return $[54] !== as || $[55] !== rest || $[56] !== t13 ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "data-ui": "VirtualList", ...rest, as, position: "relative", ref, children: t13 }), $[54] = as, $[55] = rest, $[56] = t13, $[57] = t14) : t14 = $[57], t14;
+}
+function findScrollable(parentNode) {
+  let _scrollEl = parentNode;
+  for (; _scrollEl && !_isScrollable(_scrollEl); )
+    _scrollEl = _scrollEl.parentNode;
+  return _scrollEl;
+}
 exports.Arrow = _visualEditing.Arrow;
 exports.Box = _visualEditing.Box;
 exports.Button = _visualEditing.Button;