@noya-app/noya-designsystem 0.1.6 → 0.1.8

package/dist/index.mjs

@@ -144,7 +144,7 @@ var ButtonElement = styled4.button(({ theme, active, disabled, variant, size: si
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`
   },
   "&:hover": {
-    background: variant === "primaryGradient" ? theme.colors.primaryLight : theme.colors.inputBackgroundLight
+    background: variant === "primaryGradient" || active ? theme.colors.primaryLight : theme.colors.inputBackgroundLight
   },
   "&:active": {
     background: variant === "primaryGradient" ? theme.colors.primary : theme.colors.activeBackground
@@ -264,7 +264,7 @@ import React18, {
   createContext as createContext4,
   memo as memo10,
   useContext as useContext4,
-  useMemo as useMemo7
+  useMemo as useMemo8
 } from "react";
 import { ThemeProvider, useTheme as useTheme2 } from "styled-components";
 
@@ -359,11 +359,11 @@ var ToastProvider = ({ children }) => /* @__PURE__ */ React6.createElement(Toast
 // src/contexts/DialogContext.tsx
 import React17, {
   createContext as createContext3,
-  useCallback as useCallback11,
+  useCallback as useCallback12,
   useContext as useContext3,
-  useMemo as useMemo6,
+  useMemo as useMemo7,
   useRef as useRef11,
-  useState as useState10
+  useState as useState11
 } from "react";
 import styled13 from "styled-components";
 
@@ -678,22 +678,30 @@ import { useRef as useRef6 } from "react";
 // ../noya-react-utils/src/hooks/useMutableState.ts
 import { useCallback as useCallback6, useMemo as useMemo3, useState as useState5 } from "react";
 
+// ../noya-react-utils/src/hooks/usePersistentState.ts
+import {
+  useCallback as useCallback7,
+  useEffect as useEffect4,
+  useMemo as useMemo4,
+  useState as useState6
+} from "react";
+
 // ../noya-react-utils/src/hooks/usePixelRatio.ts
-import { useEffect as useEffect4, useState as useState6 } from "react";
+import { useEffect as useEffect5, useState as useState7 } from "react";
 
 // ../noya-react-utils/src/hooks/useShallowArray.ts
 import { isShallowEqual } from "@noya-app/noya-utils";
 import { useRef as useRef7 } from "react";
 
 // ../noya-react-utils/src/hooks/useStableCallback.ts
-import { useCallback as useCallback7, useLayoutEffect as useLayoutEffect2, useRef as useRef8 } from "react";
+import { useCallback as useCallback8, useLayoutEffect as useLayoutEffect2, useRef as useRef8 } from "react";
 
 // ../noya-react-utils/src/hooks/useSystemColorScheme.ts
-import { useEffect as useEffect5, useState as useState7 } from "react";
+import { useEffect as useEffect6, useState as useState8 } from "react";
 
 // ../noya-react-utils/src/hooks/useUrlHashParameters.ts
 import { decodeQueryParameters } from "@noya-app/noya-utils";
-import { useEffect as useEffect6, useState as useState8 } from "react";
+import { useEffect as useEffect7, useState as useState9 } from "react";
 
 // ../noya-react-utils/src/utils/assignRef.ts
 function assignRef(ref, value) {
@@ -711,11 +719,11 @@ import React16, {
   forwardRef as forwardRef7,
   isValidElement as isValidElement2,
   memo as memo9,
-  useCallback as useCallback10,
+  useCallback as useCallback11,
   useContext as useContext2,
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo5,
+  useMemo as useMemo6,
   useRef as useRef10
 } from "react";
 import styled12 from "styled-components";
@@ -751,8 +759,8 @@ import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
 import React12, {
   forwardRef as forwardRef4,
   memo as memo7,
-  useCallback as useCallback8,
-  useMemo as useMemo4
+  useCallback as useCallback9,
+  useMemo as useMemo5
 } from "react";
 import styled9 from "styled-components";
 
@@ -912,7 +920,7 @@ var DropdownMenuItem = memo7(function ContextMenuItem({
   items,
   shortcut
 }) {
-  const handleSelectItem = useCallback8(() => {
+  const handleSelectItem = useCallback9(() => {
     if (!value)
       return;
     onSelect(value);
@@ -952,7 +960,7 @@ var DropdownMenuRoot = forwardRef4(function DropdownMenuRoot2({
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
   );
-  const keymap = useMemo4(
+  const keymap = useMemo5(
     () => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
@@ -960,7 +968,7 @@ var DropdownMenuRoot = forwardRef4(function DropdownMenuRoot2({
   const RootComponent = isNested ? RadixDropdownMenu.Sub : RadixDropdownMenu.Root;
   const TriggerComponent = isNested ? RadixDropdownMenu.SubTrigger : RadixDropdownMenu.Trigger;
   const ContentComponent = isNested ? SubContent2 : Content5;
-  const contentStyle = useMemo4(() => ({ zIndex: 1e3 }), []);
+  const contentStyle = useMemo5(() => ({ zIndex: 1e3 }), []);
   return /* @__PURE__ */ React12.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ React12.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ React12.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React12.createElement(
     ContentComponent,
     {
@@ -994,15 +1002,15 @@ var DropdownMenu = memo7(DropdownMenuRoot);
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import React13, {
   forwardRef as forwardRef5,
-  useCallback as useCallback9,
-  useEffect as useEffect8,
+  useCallback as useCallback10,
+  useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect3,
   useRef as useRef9,
-  useState as useState9
+  useState as useState10
 } from "react";
 
 // src/contexts/GlobalInputBlurContext.tsx
-import { createContext, useContext, useEffect as useEffect7 } from "react";
+import { createContext, useContext, useEffect as useEffect8 } from "react";
 var defaultValue = /* @__PURE__ */ (() => {
   const listeners = [];
   const value = {
@@ -1030,7 +1038,7 @@ var useGlobalInputBlur = () => {
 };
 function useGlobalInputBlurListener(f) {
   const context = useGlobalInputBlur();
-  useEffect7(() => {
+  useEffect8(() => {
     context.addListener(f);
     return () => {
       context.removeListener(f);
@@ -1063,14 +1071,14 @@ var ControlledTextInput = forwardRef5(function ControlledTextInput2({
   onFocusCapture,
   ...rest
 }, forwardedRef) {
-  const handleBlur = useCallback9(
+  const handleBlur = useCallback10(
     (event) => {
       onBlur?.(event);
       onFocusChange?.(false);
     },
     [onBlur, onFocusChange]
   );
-  const handleFocusCapture = useCallback9(
+  const handleFocusCapture = useCallback10(
     (event) => {
       onFocusCapture?.(event);
       onFocusChange?.(true);
@@ -1084,7 +1092,7 @@ var ControlledTextInput = forwardRef5(function ControlledTextInput2({
       ...rest,
       value,
       onKeyDown,
-      onChange: useCallback9(
+      onChange: useCallback10(
         (event) => onChange(event.target.value),
         [onChange]
       ),
@@ -1109,11 +1117,11 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
   latestValue.current = value;
   const userDidEdit = useRef9(false);
   const isSubmitTriggeredByEscapeKey = useRef9(false);
-  const [internalValue, setInternalValue] = useState9("");
+  const [internalValue, setInternalValue] = useState10("");
   useLayoutEffect3(() => {
     setInternalValue(value);
   }, [value]);
-  const handleSubmit = useCallback9(() => {
+  const handleSubmit = useCallback10(() => {
     const submissionValue = isSubmitTriggeredByEscapeKey.current ? value : internalValue;
     isSubmitTriggeredByEscapeKey.current = false;
     if (submissionValue === value && !allowSubmittingWithSameValue)
@@ -1123,13 +1131,13 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
     setInternalValue(latestValue.current);
   }, [allowSubmittingWithSameValue, value, internalValue, onSubmit]);
   useGlobalInputBlurListener(
-    useCallback9(() => {
+    useCallback10(() => {
       if (ref.current !== document.activeElement)
         return;
       handleSubmit();
     }, [handleSubmit])
   );
-  const handleKeyDown = useCallback9(
+  const handleKeyDown = useCallback10(
     (event) => {
       if (event.key === "Enter") {
         handleSubmit();
@@ -1144,14 +1152,14 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
     },
     [onKeyDown, handleSubmit]
   );
-  const handleChange = useCallback9(
+  const handleChange = useCallback10(
     (event) => {
       userDidEdit.current = true;
       setInternalValue(event.target.value);
     },
     []
   );
-  const handleBlur = useCallback9(
+  const handleBlur = useCallback10(
     (event) => {
       onBlur?.(event);
       onFocusChange?.(false);
@@ -1159,7 +1167,7 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
     },
     [onBlur, onFocusChange, handleSubmit]
   );
-  const handleFocusCapture = useCallback9(
+  const handleFocusCapture = useCallback10(
     (event) => {
       onFocusCapture?.(event);
       onFocusChange?.(true);
@@ -1171,7 +1179,7 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
   );
   const latestHandleSubmit = useRef9(handleSubmit);
   latestHandleSubmit.current = handleSubmit;
-  useEffect8(() => {
+  useEffect9(() => {
     if (submitAutomaticallyAfterDelay) {
       if (autoSubmitTimeoutRef.current) {
         clearTimeout(autoSubmitTimeoutRef.current);
@@ -1203,11 +1211,11 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
 });
 var TextInput_default = forwardRef5(function TextInput(props, forwardedRef) {
   const commonProps = {
-    onPointerDown: useCallback9(
+    onPointerDown: useCallback10(
       (event) => event.stopPropagation(),
       []
     ),
-    onClick: useCallback9(
+    onClick: useCallback10(
       (event) => event.stopPropagation(),
       []
     ),
@@ -1438,7 +1446,7 @@ var DropdownContainer = styled12.span(({ theme }) => ({
 }));
 var InputFieldDropdownMenu = memo9(function InputFieldDropdownMenu2({ id, items, onSelect, children }) {
   const { size: size2 } = useContext2(InputFieldContext);
-  const contentStyle = useMemo5(
+  const contentStyle = useMemo6(
     () => ({
       margin: "-4px 0",
       minHeight: size2 === "small" ? "15px" : void 0
@@ -1459,7 +1467,7 @@ var InputFieldButton = memo9(function InputFieldButton2({
   onClick
 }) {
   const { size: size2, inputRef } = useContext2(InputFieldContext);
-  const defaultHandleClick = useCallback10(
+  const defaultHandleClick = useCallback11(
     (event) => {
       if (inputRef && typeof inputRef !== "function") {
         inputRef.current?.focus();
@@ -1470,7 +1478,7 @@ var InputFieldButton = memo9(function InputFieldButton2({
     },
     [inputRef]
   );
-  const handlePointerDown = useCallback10((event) => {
+  const handlePointerDown = useCallback11((event) => {
     event.preventDefault();
     event.stopPropagation();
   }, []);
@@ -1571,7 +1579,7 @@ var InputFieldInput = forwardRef7(function InputFieldInput2(props, forwardedRef)
     onFocusChange,
     setInputRef
   } = useContext2(InputFieldContext);
-  const handleFocusChange = useCallback10(
+  const handleFocusChange = useCallback11(
     (isFocused) => {
       onFocusChange(isFocused);
     },
@@ -1637,7 +1645,7 @@ function InputFieldNumberInput(props) {
   const { value, placeholder, onNudge } = props;
   const onSubmit = "onSubmit" in props ? props.onSubmit : void 0;
   const onChange = "onChange" in props ? props.onChange : void 0;
-  const handleSubmit = useCallback10(
+  const handleSubmit = useCallback11(
     (value2) => {
       const newValue = parseNumber(value2);
       if (!isNaN(newValue)) {
@@ -1646,7 +1654,7 @@ function InputFieldNumberInput(props) {
     },
     [onSubmit]
   );
-  const handleKeyDown = useCallback10(
+  const handleKeyDown = useCallback11(
     (event) => {
       const amount = handleNudge(event);
       if (!amount)
@@ -1657,7 +1665,7 @@ function InputFieldNumberInput(props) {
     },
     [onNudge]
   );
-  const handleChange = useCallback10(
+  const handleChange = useCallback11(
     (value2) => {
       onChange?.(parseNumber(value2));
     },
@@ -1704,7 +1712,7 @@ function InputFieldRoot({
   const [isFocused, setIsFocused] = React16.useState(false);
   const [measuredLabelSize, setMeasuredLabelSize] = React16.useState();
   const [measuredWidth, setMeasuredWidth] = React16.useState();
-  const handleFocusChange = useCallback10(
+  const handleFocusChange = useCallback11(
     (isFocused2) => {
       setIsFocused(isFocused2);
       onFocusChange?.(isFocused2);
@@ -1712,14 +1720,14 @@ function InputFieldRoot({
     [onFocusChange]
   );
   const [inputRef, setInputRef] = React16.useState();
-  useEffect9(() => {
+  useEffect10(() => {
     if (inputRef && typeof inputRef !== "function") {
       setMeasuredWidth?.(
         isFocused ? inputRef?.current?.getBoundingClientRect().width : void 0
       );
     }
   }, [inputRef, isFocused]);
-  const contextValue = useMemo5(
+  const contextValue = useMemo6(
     () => ({
       labelPosition,
       labelSize: measuredLabelSize ?? labelSize ?? 6,
@@ -1797,20 +1805,20 @@ var DialogContext = createContext3(void 0);
 var DialogProvider = function DialogProvider2({
   children
 }) {
-  const [contents, setContents] = useState10();
+  const [contents, setContents] = useState11();
   const isOpen = !!contents;
-  const close = useCallback11(() => {
+  const close = useCallback12(() => {
     if (!contents)
       return;
     contents.resolve(void 0);
   }, [contents]);
-  const submit = useCallback11(() => {
+  const submit = useCallback12(() => {
     if (!contents || !contents.inputValue)
       return;
     contents.resolve(contents.inputValue);
     setContents(void 0);
   }, [contents]);
-  const open = useCallback11(
+  const open = useCallback12(
     (title, inputValue = "") => {
       const { promise, resolve } = createDeferredPromise();
       setContents({
@@ -1825,7 +1833,7 @@ var DialogProvider = function DialogProvider2({
     },
     []
   );
-  const handleKeyDown = useCallback11(
+  const handleKeyDown = useCallback12(
     (event) => {
       if (event.key !== "Enter")
         return;
@@ -1837,7 +1845,7 @@ var DialogProvider = function DialogProvider2({
   );
   const inputRef = useRef11(null);
   const dialogRef = useRef11(null);
-  const containsElement = useCallback11((element) => {
+  const containsElement = useCallback12((element) => {
     if (!dialogRef.current)
       return false;
     return dialogRef.current.containsElement(element);
@@ -1845,7 +1853,7 @@ var DialogProvider = function DialogProvider2({
   return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
     DialogContext.Provider,
     {
-      value: useMemo6(
+      value: useMemo7(
         () => ({ openInputDialog: open, containsElement }),
         [containsElement, open]
       )
@@ -1857,7 +1865,7 @@ var DialogProvider = function DialogProvider2({
       ref: dialogRef,
       title: contents?.title,
       open: isOpen,
-      onOpenChange: useCallback11(
+      onOpenChange: useCallback12(
         (isOpen2) => {
           if (!isOpen2) {
             close();
@@ -1865,7 +1873,7 @@ var DialogProvider = function DialogProvider2({
         },
         [close]
       ),
-      onOpenAutoFocus: useCallback11((event) => {
+      onOpenAutoFocus: useCallback12((event) => {
         event.stopPropagation();
         event.preventDefault();
         inputRef.current?.focus();
@@ -1914,7 +1922,7 @@ var DesignSystemConfigurationProvider = memo10(
     theme,
     platform
   }) {
-    const contextValue = useMemo7(() => ({ platform }), [platform]);
+    const contextValue = useMemo8(() => ({ platform }), [platform]);
     return /* @__PURE__ */ React18.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React18.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React18.createElement(DialogProvider, null, /* @__PURE__ */ React18.createElement(ToastProvider, null, children))));
   }
 );
@@ -2174,8 +2182,8 @@ import { useKeyboardShortcuts as useKeyboardShortcuts2 } from "@noya-app/noya-ke
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
 import React21, {
   memo as memo12,
-  useCallback as useCallback12,
-  useMemo as useMemo9
+  useCallback as useCallback13,
+  useMemo as useMemo10
 } from "react";
 import styled15 from "styled-components";
 var SeparatorElement2 = styled15(RadixContextMenu.Separator)(
@@ -2199,11 +2207,11 @@ var ContextMenuItem2 = memo12(function ContextMenuItem3({
   items,
   shortcut
 }) {
-  const handlePointerDown = useCallback12(
+  const handlePointerDown = useCallback13(
     (event) => event.stopPropagation(),
     []
   );
-  const handleSelectItem = useCallback12(() => {
+  const handleSelectItem = useCallback13(() => {
     if (!value)
       return;
     onSelect(value);
@@ -2252,12 +2260,12 @@ function ContextMenuRoot({
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
   );
-  const keymap = useMemo9(
+  const keymap = useMemo10(
     () => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
   useKeyboardShortcuts2(keymap);
-  const onPointerDown = useCallback12((event) => {
+  const onPointerDown = useCallback13((event) => {
     event.preventDefault();
   }, []);
   const RootComponent = isNested ? RadixContextMenu.Sub : RadixContextMenu.Root;
@@ -2300,7 +2308,7 @@ var DividerVertical = memo13(function DividerVertical2(props) {
 
 // src/components/DraggableMenuButton.tsx
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import React23, { memo as memo14, useCallback as useCallback13, useState as useState12 } from "react";
+import React23, { memo as memo14, useCallback as useCallback14, useState as useState13 } from "react";
 import styled17 from "styled-components";
 var DotButtonElement = styled17.div(({ theme }) => ({
   cursor: "pointer",
@@ -2326,9 +2334,9 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
   isVisible = true
 }) {
   const color = useDesignSystemTheme().colors.icon;
-  const [open, setOpen] = useState12(false);
+  const [open, setOpen] = useState13(false);
   const [downPosition, setDownPosition] = React23.useState(null);
-  const handlePointerDownCapture = useCallback13(
+  const handlePointerDownCapture = useCallback14(
     (event) => {
       if (open) {
         setDownPosition(null);
@@ -2341,7 +2349,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
     },
     [open]
   );
-  const handlePointerUp = useCallback13(
+  const handlePointerUp = useCallback14(
     (event) => {
       if (open || !downPosition) {
         setDownPosition(null);
@@ -2357,7 +2365,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
     },
     [downPosition, open]
   );
-  const handleOpenChange = useCallback13(
+  const handleOpenChange = useCallback14(
     (isOpen) => {
       if (!isOpen)
         setOpen(false);
@@ -2374,7 +2382,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
         event.preventDefault();
       }
     },
-    /* @__PURE__ */ React23.createElement(
+    items && onSelect ? /* @__PURE__ */ React23.createElement(
       DropdownMenu,
       {
         open,
@@ -2389,6 +2397,11 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
           color: isVisible || open ? color : "transparent"
         }
       ))
+    ) : /* @__PURE__ */ React23.createElement(
+      DragHandleDots2Icon,
+      {
+        color: isVisible || open ? color : "transparent"
+      }
     )
   );
 });
@@ -2720,7 +2733,7 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 
 // src/components/FillPreviewBackground.tsx
-import React25, { memo as memo16, useMemo as useMemo12 } from "react";
+import React25, { memo as memo16, useMemo as useMemo13 } from "react";
 import styled18, { useTheme as useTheme3 } from "styled-components";
 
 // src/contexts/ImageDataContext.tsx
@@ -2728,7 +2741,7 @@ import React24, {
   createContext as createContext5,
   memo as memo15,
   useContext as useContext5,
-  useMemo as useMemo10
+  useMemo as useMemo11
 } from "react";
 var ImageDataContext = createContext5(
   void 0
@@ -2737,7 +2750,7 @@ var ImageDataProvider = memo15(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = useMemo10(
+  const contextValue = useMemo11(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
@@ -2752,9 +2765,9 @@ function useImageData(ref) {
 }
 
 // src/hooks/useObjectURL.ts
-import { useLayoutEffect as useLayoutEffect5, useMemo as useMemo11 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useMemo as useMemo12 } from "react";
 function useObjectURL(object) {
-  const objectURL = useMemo11(() => {
+  const objectURL = useMemo12(() => {
     if (object instanceof Blob)
       return URL.createObjectURL(object);
     const bytes = object instanceof Uint8Array ? object : object !== void 0 ? new Uint8Array(object) : new Uint8Array();
@@ -2822,7 +2835,7 @@ var Background = styled18.span(({ background }) => ({
 }));
 var HorizontalDotsBackground = memo16(function HorizontalDotsBackground2() {
   const { inputBackground, placeholderDots } = useTheme3().colors;
-  const background = useMemo12(
+  const background = useMemo13(
     () => [
       `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
         placeholderDots
@@ -2853,7 +2866,7 @@ var PatternPreviewBackground = memo16(function PatternPreviewBackground2({
   const image = useImageData(imageRef);
   const url = useObjectURL(image);
   const size2 = getPatternSizeAndPosition(fillType, tileScale);
-  const background = useMemo12(
+  const background = useMemo13(
     () => [
       size2,
       `url(${url})`,
@@ -2866,13 +2879,13 @@ var PatternPreviewBackground = memo16(function PatternPreviewBackground2({
 var ColorPreviewBackground = memo16(function ColorPreviewBackground2({
   color
 }) {
-  const background = useMemo12(() => sketchColorToRgbaString(color), [color]);
+  const background = useMemo13(() => sketchColorToRgbaString(color), [color]);
   return /* @__PURE__ */ React25.createElement(Background, { background });
 });
 var GradientPreviewBackground = memo16(function GradientPreviewBackground2({
   gradient
 }) {
-  const background = useMemo12(
+  const background = useMemo13(
     () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
     [gradient.gradientType, gradient.stops]
   );
@@ -2938,7 +2951,7 @@ import {
   hsvaToRgba,
   rgbaToHsva as rgbaToHsva2
 } from "@noya-app/noya-colorpicker";
-import React27, { memo as memo18, useCallback as useCallback14, useMemo as useMemo13 } from "react";
+import React27, { memo as memo18, useCallback as useCallback15, useMemo as useMemo14 } from "react";
 var GradientPicker = memo18(function GradientPicker2({
   value,
   selectedStop,
@@ -2948,7 +2961,7 @@ var GradientPicker = memo18(function GradientPicker2({
   onDelete,
   onSelectStop
 }) {
-  const colorModel = useMemo13(
+  const colorModel = useMemo14(
     () => ({
       defaultColor: { r: 0, g: 0, b: 0, a: 1 },
       toHsva: rgbaToHsva2,
@@ -2957,17 +2970,17 @@ var GradientPicker = memo18(function GradientPicker2({
     }),
     []
   );
-  const rgbaColor = useMemo13(
+  const rgbaColor = useMemo14(
     () => sketchColorToRgba(value[selectedStop].color),
     [value, selectedStop]
   );
-  const handleChangeColor = useCallback14(
+  const handleChangeColor = useCallback15(
     (value2) => {
       onChangeColor(rgbaToSketchColor(value2));
     },
     [onChangeColor]
   );
-  const handleAddGradientStop = useCallback14(
+  const handleAddGradientStop = useCallback15(
     (value2, position) => {
       onAdd(rgbaToSketchColor(value2), position);
     },
@@ -3032,15 +3045,15 @@ import React29, {
   createContext as createContext6,
   forwardRef as forwardRef9,
   memo as memo20,
-  useCallback as useCallback16,
+  useCallback as useCallback17,
   useContext as useContext6,
-  useMemo as useMemo14
+  useMemo as useMemo15
 } from "react";
 import styled22, { keyframes as keyframes2 } from "styled-components";
 
 // src/components/ScrollArea.tsx
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
-import React28, { memo as memo19, useCallback as useCallback15, useState as useState13 } from "react";
+import React28, { memo as memo19, useCallback as useCallback16, useState as useState14 } from "react";
 import styled21 from "styled-components";
 var SCROLLBAR_SIZE = 10;
 var StyledViewport = styled21(RadixScrollArea.Viewport)({
@@ -3069,11 +3082,11 @@ var Container2 = styled21.div({
   minHeight: 0
 });
 var ScrollArea = memo19(function ScrollArea2({ children }) {
-  const [scrollElementRef, setScrollElementRef] = useState13(null);
+  const [scrollElementRef, setScrollElementRef] = useState14(null);
   return /* @__PURE__ */ React28.createElement(Container2, null, /* @__PURE__ */ React28.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React28.createElement(
     StyledViewport,
     {
-      ref: useCallback15(
+      ref: useCallback16(
         (ref) => setScrollElementRef(ref),
         []
       )
@@ -3283,7 +3296,7 @@ var GridViewItem = forwardRef9(function GridViewItem2({
     }
   });
   const { textPosition, bordered, disabled } = useContext6(GridViewContext);
-  const handleClick = useCallback16(
+  const handleClick = useCallback17(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -3292,7 +3305,7 @@ var GridViewItem = forwardRef9(function GridViewItem2({
     },
     [onClick, onPress]
   );
-  const handleKeyDown = useCallback16(
+  const handleKeyDown = useCallback17(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.stopPropagation();
@@ -3360,7 +3373,7 @@ function GridViewRoot({
   bordered = false,
   disabled = false
 }) {
-  const handleClick = useCallback16(
+  const handleClick = useCallback17(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -3368,7 +3381,7 @@ function GridViewRoot({
     },
     [onClick]
   );
-  const contextValue = useMemo14(
+  const contextValue = useMemo15(
     () => ({
       size: size2,
       textPosition,
@@ -3406,13 +3419,13 @@ import { chunkBy, partition } from "@noya-app/noya-utils";
 import React33, {
   forwardRef as forwardRef12,
   memo as memo23,
-  useCallback as useCallback19,
-  useEffect as useEffect11,
+  useCallback as useCallback20,
+  useEffect as useEffect12,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect7,
-  useMemo as useMemo17,
+  useMemo as useMemo18,
   useRef as useRef15,
-  useState as useState15
+  useState as useState16
 } from "react";
 import styled25 from "styled-components";
 
@@ -3496,11 +3509,11 @@ import React31, {
   forwardRef as forwardRef10,
   isValidElement as isValidElement3,
   memo as memo22,
-  useCallback as useCallback18,
+  useCallback as useCallback19,
   useContext as useContext8,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo16,
+  useMemo as useMemo17,
   useRef as useRef14
 } from "react";
 import { WindowScroller } from "react-virtualized";
@@ -3547,11 +3560,11 @@ import {
 import React30, {
   createContext as createContext7,
   memo as memo21,
-  useCallback as useCallback17,
+  useCallback as useCallback18,
   useContext as useContext7,
-  useMemo as useMemo15,
+  useMemo as useMemo16,
   useRef as useRef13,
-  useState as useState14
+  useState as useState15
 } from "react";
 import { createPortal } from "react-dom";
 var normalizeListDestinationIndex = (index, position) => {
@@ -3608,7 +3621,7 @@ function SortableItem({
   const eventY = activatorEvent?.clientY ?? 0;
   const offsetLeft = eventX + position.x;
   const offsetTop = eventY + position.y;
-  const ref = useCallback17((node) => setNodeRef(node), [setNodeRef]);
+  const ref = useCallback18((node) => setNodeRef(node), [setNodeRef]);
   return children({
     ref,
     ...attributes,
@@ -3639,22 +3652,22 @@ function SortableRoot({
       }
     })
   );
-  const [activeIndex, setActiveIndex] = useState14();
+  const [activeIndex, setActiveIndex] = useState15();
   const activatorEvent = useRef13(null);
-  const setActivatorEvent = useCallback17((event) => {
+  const setActivatorEvent = useCallback18((event) => {
     activatorEvent.current = event;
   }, []);
-  const [position, setPosition] = useState14({ x: 0, y: 0 });
-  const handleDragStart = useCallback17(
+  const [position, setPosition] = useState15({ x: 0, y: 0 });
+  const handleDragStart = useCallback18(
     (event) => {
       setActiveIndex(keys.indexOf(event.active.id));
     },
     [keys]
   );
-  const handleDragMove = useCallback17((event) => {
+  const handleDragMove = useCallback18((event) => {
     setPosition({ ...event.delta });
   }, []);
-  const handleDragEnd = useCallback17(
+  const handleDragEnd = useCallback18(
     (event) => {
       const { active, over } = event;
       setActiveIndex(void 0);
@@ -3684,7 +3697,7 @@ function SortableRoot({
   return /* @__PURE__ */ React30.createElement(
     SortableItemContext.Provider,
     {
-      value: useMemo15(
+      value: useMemo16(
         () => ({
           keys,
           acceptsDrop,
@@ -3905,7 +3918,8 @@ var ListViewRow = forwardRef10(function ListViewRow2({
   onContextMenu,
   onSelectMenuItem,
   onMenuOpenChange,
-  onKeyDown
+  onKeyDown,
+  style: style3
 }, forwardedRef) {
   depth = Math.max(0, depth);
   const {
@@ -3923,7 +3937,7 @@ var ListViewRow = forwardRef10(function ListViewRow2({
     onHoverChange
   });
   const { indentation, isDragging } = useContext8(DraggingContext);
-  const handlePress = useCallback18(
+  const handlePress = useCallback19(
     (event) => {
       event.preventDefault();
       if (event.button !== 0)
@@ -3932,20 +3946,21 @@ var ListViewRow = forwardRef10(function ListViewRow2({
     },
     [onPress]
   );
-  const handleDoubleClick = useCallback18(
+  const handleDoubleClick = useCallback19(
     (event) => {
       event.stopPropagation();
       onDoubleClick?.();
     },
     [onDoubleClick]
   );
-  const isDraggingStyle = useMemo16(() => {
+  const mergedStyle = useMemo17(() => {
     return isDragging ? {
       // TODO: Where do these offsets actually come from?
       transform: `translate3d(-36px, -6px, 0)`,
-      width: `calc(100% + 48px)`
-    } : void 0;
-  }, [isDragging]);
+      width: `calc(100% + 48px)`,
+      ...style3
+    } : style3;
+  }, [isDragging, style3]);
   const renderContent = ({
     relativeDropPosition,
     ...renderProps
@@ -3973,7 +3988,7 @@ var ListViewRow = forwardRef10(function ListViewRow2({
         "aria-selected": selected,
         divider: !isDragging && divider,
         onKeyDown,
-        style: isDraggingStyle,
+        style: mergedStyle,
         ...renderProps,
         ...mergeEventHandlers(
           { onPointerDown: renderProps.onPointerDown },
@@ -4042,7 +4057,7 @@ var VirtualizedListInner = forwardRef10(function VirtualizedListInner2({
     // since it doesn't currently support row height changes
     items
   ]);
-  const listStyle = useMemo16(
+  const listStyle = useMemo17(
     () => ({
       overflowX: "initial",
       overflowY: "initial",
@@ -4054,9 +4069,9 @@ var VirtualizedListInner = forwardRef10(function VirtualizedListInner2({
     WindowScroller,
     {
       scrollElement,
-      style: useMemo16(() => ({ flex: "1 1 auto" }), [])
+      style: useMemo17(() => ({ flex: "1 1 auto" }), [])
     },
-    useCallback18(
+    useCallback19(
       ({
         registerChild,
         onChildScroll,
@@ -4121,7 +4136,7 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
   colorScheme = "primary",
   gap = 0
 }, forwardedRef) {
-  const handleClick = useCallback18(
+  const handleClick = useCallback19(
     (event) => {
       if (event.target instanceof HTMLElement && event.target.classList.contains("scroll-component"))
         return;
@@ -4131,11 +4146,11 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
     },
     [onPress]
   );
-  const renderChild = useCallback18(
+  const renderChild = useCallback19(
     (index) => renderItem(data[index], index, { isDragging: false }),
     [data, renderItem]
   );
-  const getItemContextValue = useCallback18(
+  const getItemContextValue = useCallback19(
     (i) => {
       const current = renderChild(i);
       if (!isValidElement3(current))
@@ -4195,15 +4210,15 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
       gap
     ]
   );
-  const draggingContextOverlayValue = useMemo16(
+  const draggingContextOverlayValue = useMemo17(
     () => ({ indentation, isDragging: true }),
     [indentation]
   );
-  const renderOverlay = useCallback18(
+  const renderOverlay = useCallback19(
     (index) => /* @__PURE__ */ React31.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React31.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
-  const renderWrappedChild = useCallback18(
+  const renderWrappedChild = useCallback19(
     (index) => {
       const contextValue = getItemContextValue(index);
       const current = renderChild(index);
@@ -4213,7 +4228,7 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
     },
     [getItemContextValue, renderChild]
   );
-  const ids = useMemo16(() => data.map(keyExtractor), [keyExtractor, data]);
+  const ids = useMemo17(() => data.map(keyExtractor), [keyExtractor, data]);
   const withSortable = (children) => sortable ? /* @__PURE__ */ React31.createElement(
     Sortable.Root,
     {
@@ -4225,7 +4240,7 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
     children
   ) : children;
   const withScrollable = (children) => scrollable ? /* @__PURE__ */ React31.createElement(ScrollArea, null, children) : children(null);
-  const getItemHeight = useCallback18(
+  const getItemHeight = useCallback19(
     (index) => {
       const child = getItemContextValue(index);
       const margin = child?.marginType ? getPositionMargin(child.marginType) : { top: 0, bottom: 0 };
@@ -4234,11 +4249,11 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
     },
     [getItemContextValue, variant]
   );
-  const getKey = useCallback18(
+  const getKey = useCallback19(
     (index) => keyExtractor(data[index], index),
     [data, keyExtractor]
   );
-  const draggingContextValue = useMemo16(() => ({ indentation }), [indentation]);
+  const draggingContextValue = useMemo17(() => ({ indentation }), [indentation]);
   return /* @__PURE__ */ React31.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React31.createElement(
     RootContainer2,
     {
@@ -4268,7 +4283,7 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
 });
 var ListViewRoot = memo22(ListViewRootInner);
 var ChildrenListViewInner = forwardRef10(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
-  const items = useMemo16(
+  const items = useMemo17(
     () => Children4.toArray(children).flatMap(
       (child) => isValidElement3(child) ? [child] : []
     ),
@@ -4280,11 +4295,11 @@ var ChildrenListViewInner = forwardRef10(function ChildrenListViewInner2({ child
       ref: forwardedRef,
       ...rest,
       data: items,
-      keyExtractor: useCallback18(
+      keyExtractor: useCallback19(
         ({ key }, index) => typeof key === "string" ? key : (key ?? index).toString(),
         []
       ),
-      renderItem: useCallback18((item) => item, [])
+      renderItem: useCallback19((item) => item, [])
     }
   );
 });
@@ -4492,12 +4507,12 @@ var InputFieldWithCompletions = memo23(
     hideMenuWhenEmptyValue = false
   }, forwardedRef) {
     const ref = useRef15(null);
-    const [isFocused, setIsFocused] = useState15(false);
-    const [state, _setState] = useState15({
+    const [isFocused, setIsFocused] = useState16(false);
+    const [state, _setState] = useState16({
       filter: initialValue,
       selectedIndex: 0
     });
-    const updateState = useCallback19(
+    const updateState = useCallback20(
       (newState, hoverItem) => {
         const nextState = { ...state, ...newState };
         const nextItems = filterWithGroupedSections(items, nextState.filter);
@@ -4535,7 +4550,7 @@ var InputFieldWithCompletions = memo23(
     }, [initialValue, updateState]);
     const { filter, selectedIndex } = state;
     const listRef = React33.useRef(null);
-    const filteredItems = useMemo17(
+    const filteredItems = useMemo18(
       () => filterWithGroupedSections(items, filter),
       [items, filter]
     );
@@ -4551,13 +4566,13 @@ var InputFieldWithCompletions = memo23(
       ),
       ListView.rowHeight * 10.5
     );
-    useEffect11(() => {
+    useEffect12(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
     const lastSubmittedValueRef = useRef15(void 0);
-    const selectItem = useCallback19(
+    const selectItem = useCallback20(
       (item) => {
         if (item.type === "sectionHeader")
           return;
@@ -4573,17 +4588,17 @@ var InputFieldWithCompletions = memo23(
       },
       [filter, onSelectItem, onHoverItem, ref]
     );
-    const handleChange = useCallback19(
+    const handleChange = useCallback20(
       (value) => updateState({ selectedIndex: 0, filter: value }),
       [updateState]
     );
-    const handleBlur = useCallback19(() => {
+    const handleBlur = useCallback20(() => {
       setIsFocused(false);
       const didSubmit = lastSubmittedValueRef.current?.filter === filter;
       updateState({ selectedIndex: 0, filter: initialValue }, "resetHover");
       onBlur?.(didSubmit, filter);
     }, [filter, initialValue, onBlur, updateState]);
-    const handleFocus = useCallback19(
+    const handleFocus = useCallback20(
       (event) => {
         setIsFocused(true);
         updateState({ selectedIndex: 0, filter: initialValue });
@@ -4591,11 +4606,11 @@ var InputFieldWithCompletions = memo23(
       },
       [initialValue, onFocus, updateState]
     );
-    const handleIndexChange = useCallback19(
+    const handleIndexChange = useCallback20(
       (index) => updateState({ selectedIndex: index }),
       [updateState]
     );
-    const handleKeyDown = useCallback19(
+    const handleKeyDown = useCallback20(
       (event) => {
         let handled = false;
         switch (event.key) {
@@ -4793,7 +4808,7 @@ import React35, {
   isValidElement as isValidElement4,
   memo as memo25,
   useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo18,
+  useMemo as useMemo19,
   useRef as useRef16
 } from "react";
 import styled27 from "styled-components";
@@ -4825,12 +4840,12 @@ var LabeledElementView = memo25(function LabeledElementView2({
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
   const containerRef = useRef16(null);
-  const refs = useMemo18(() => {
+  const refs = useMemo19(() => {
     return Object.fromEntries(
       serializedIds.split(",").map((id) => [id, createRef()])
     );
   }, [serializedIds]);
-  const labelElements = useMemo18(() => {
+  const labelElements = useMemo19(() => {
     return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React35.createElement(
       "span",
       {
@@ -4954,9 +4969,9 @@ import React37, {
   createContext as createContext9,
   forwardRef as forwardRef13,
   memo as memo26,
-  useCallback as useCallback20,
+  useCallback as useCallback21,
   useContext as useContext9,
-  useMemo as useMemo19
+  useMemo as useMemo20
 } from "react";
 import styled29 from "styled-components";
 var ignoredProps3 = /* @__PURE__ */ new Set(["colorScheme"]);
@@ -5035,8 +5050,8 @@ function ToggleGroupRoot({
   allowEmpty,
   children
 }) {
-  const contextValue = useMemo19(() => ({ colorScheme }), [colorScheme]);
-  const handleValueChange = useCallback20(
+  const contextValue = useMemo20(() => ({ colorScheme }), [colorScheme]);
+  const handleValueChange = useCallback21(
     (value2) => {
       if (!allowEmpty && !value2)
         return;
@@ -5067,10 +5082,10 @@ import { memoize as memoize2 } from "@noya-app/noya-utils";
 import React38, {
   createContext as createContext10,
   memo as memo27,
-  useCallback as useCallback21,
+  useCallback as useCallback22,
   useContext as useContext10,
-  useEffect as useEffect12,
-  useMemo as useMemo20,
+  useEffect as useEffect13,
+  useMemo as useMemo21,
   useRef as useRef17
 } from "react";
 import styled30 from "styled-components";
@@ -5081,7 +5096,7 @@ var SelectOption = memo27(function SelectOption2({
   onSelect
 }) {
   const { addListener, removeListener } = useContext10(SelectContext);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!onSelect)
       return;
     addListener(value, onSelect);
@@ -5137,7 +5152,7 @@ var Select = memo27(function Select2({
   const getTitle = "options" in rest ? rest.getTitle : void 0;
   const onChange = "options" in rest ? rest.onChange : void 0;
   const children = "options" in rest ? void 0 : rest.children;
-  const optionElements = useMemo20(
+  const optionElements = useMemo21(
     () => options ? options.map((option, index) => /* @__PURE__ */ React38.createElement(
       SelectOption,
       {
@@ -5150,7 +5165,7 @@ var Select = memo27(function Select2({
     [children, getTitle, onChange, options]
   );
   const listeners = useRef17(/* @__PURE__ */ new Map());
-  const contextValue = useMemo20(
+  const contextValue = useMemo21(
     () => ({
       addListener: (value2, listener) => listeners.current.set(value2, listener),
       removeListener: (value2) => listeners.current.delete(value2)
@@ -5163,7 +5178,7 @@ var Select = memo27(function Select2({
       id,
       flex,
       value,
-      onChange: useCallback21(
+      onChange: useCallback22(
         (event) => listeners.current.get(event.target.value)?.(),
         [listeners]
       ),
@@ -5175,7 +5190,7 @@ var Select = memo27(function Select2({
 
 // src/components/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import React39, { useCallback as useCallback22, useMemo as useMemo21 } from "react";
+import React39, { useCallback as useCallback23, useMemo as useMemo22 } from "react";
 import styled31 from "styled-components";
 var StyledSlider = styled31(RadixSlider.Root)({
   flex: "1",
@@ -5216,11 +5231,11 @@ var Slider = function Slider2({
   min,
   max
 }) {
-  const arrayValue = useMemo21(
+  const arrayValue = useMemo22(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
-  const handleValueChange = useCallback22(
+  const handleValueChange = useCallback23(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
@@ -5295,7 +5310,7 @@ var Switch = function Switch2({
 import React41, {
   forwardRef as forwardRef14,
   memo as memo28,
-  useCallback as useCallback23,
+  useCallback as useCallback24,
   useContext as useContext11
 } from "react";
 var TreeRow = forwardRef14(function TreeRow2({
@@ -5306,7 +5321,7 @@ var TreeRow = forwardRef14(function TreeRow2({
   ...rest
 }, forwardedRef) {
   const { expandable } = useContext11(ListView.RowContext);
-  const handleClickChevron = useCallback23(
+  const handleClickChevron = useCallback24(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
@@ -5635,7 +5650,7 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/ArrayController.tsx
 import { range as range2 } from "@noya-app/noya-utils";
-import React43, { memo as memo30, useCallback as useCallback24, useMemo as useMemo22 } from "react";
+import React43, { memo as memo30, useCallback as useCallback25, useMemo as useMemo23 } from "react";
 import styled34, { useTheme as useTheme5 } from "styled-components";
 
 // src/components/InspectorPrimitives.tsx
@@ -5718,8 +5733,9 @@ var RowLabel = styled33.span(({ theme, textStyle }) => ({
     color: theme.colors.textSubtle,
     fontWeight: "bold"
   },
-  lineHeight: "19px"
+  lineHeight: "19px",
   // Button height
+  alignItems: "center"
 }));
 var LabeledRow = memo29(function LabeledRow2({
   id,
@@ -5766,12 +5782,12 @@ var ArrayController = memo30(function ArrayController2({
 }) {
   const iconColor = useTheme5().colors.icon;
   const primaryLightColor = useTheme5().colors.primaryLight;
-  const keys = useMemo22(
+  const keys = useMemo23(
     () => items.map((item, index) => getKey?.(item) ?? index.toString()),
     [getKey, items]
   );
   const indexes = reversed ? range2(0, items.length).reverse() : range2(0, items.length);
-  const handleMoveItem = useCallback24(
+  const handleMoveItem = useCallback25(
     (sourceIndex, destinationIndex, position) => {
       if (reversed) {
         if (position === "above") {
@@ -5842,7 +5858,7 @@ var ArrayController = memo30(function ArrayController2({
 
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import React44, { memo as memo31, useCallback as useCallback25 } from "react";
+import React44, { memo as memo31, useCallback as useCallback26 } from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
@@ -5856,11 +5872,11 @@ var DimensionInput = memo31(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = useCallback25(
+  const handleNudgeValue = useCallback26(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = useCallback25(
+  const handleSetValue = useCallback26(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );