@noya-app/noya-designsystem 0.1.6 → 0.1.8

package/dist/index.js

@@ -260,7 +260,7 @@ var ButtonElement = import_styled_components4.default.button(({ theme, active, d
     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
@@ -372,11 +372,11 @@ var Button = (0, import_react4.forwardRef)(function Button2({
 
 // src/components/Chip.tsx
 var import_noya_icons3 = require("@noya-app/noya-icons");
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/contexts/DesignSystemConfiguration.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var import_styled_components15 = require("styled-components");
 
 // src/components/Toast.tsx
@@ -464,7 +464,7 @@ var Toast = ({
 var ToastProvider = ({ children }) => /* @__PURE__ */ import_react6.default.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ import_react6.default.createElement(ToastViewport, null));
 
 // src/contexts/DialogContext.tsx
-var import_react31 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/components/Dialog.tsx
@@ -771,22 +771,25 @@ var import_react16 = require("react");
 // ../noya-react-utils/src/hooks/useMutableState.ts
 var import_react17 = require("react");
 
-// ../noya-react-utils/src/hooks/usePixelRatio.ts
+// ../noya-react-utils/src/hooks/usePersistentState.ts
 var import_react18 = require("react");
 
+// ../noya-react-utils/src/hooks/usePixelRatio.ts
+var import_react19 = require("react");
+
 // ../noya-react-utils/src/hooks/useShallowArray.ts
 var import_noya_utils3 = require("@noya-app/noya-utils");
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // ../noya-react-utils/src/hooks/useStableCallback.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // ../noya-react-utils/src/hooks/useSystemColorScheme.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // ../noya-react-utils/src/hooks/useUrlHashParameters.ts
 var import_noya_utils4 = require("@noya-app/noya-utils");
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // ../noya-react-utils/src/utils/assignRef.ts
 function assignRef(ref, value) {
@@ -798,7 +801,7 @@ function assignRef(ref, value) {
 }
 
 // src/components/InputField.tsx
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var import_styled_components13 = __toESM(require("styled-components"));
 
 // src/utils/handleNudge.ts
@@ -829,25 +832,25 @@ function handleNudge(e) {
 var import_noya_icons = require("@noya-app/noya-icons");
 var import_noya_keymap2 = require("@noya-app/noya-keymap");
 var RadixDropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
-var import_react25 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_styled_components10 = __toESM(require("styled-components"));
 
 // src/components/internal/Menu.tsx
 var import_noya_keymap = require("@noya-app/noya-keymap");
-var import_react24 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/utils/withSeparatorElements.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 function createKey(key) {
   return `s-${key}`;
 }
 function withSeparatorElements(elements2, separator) {
-  const childrenArray = import_react23.Children.toArray(elements2);
+  const childrenArray = import_react24.Children.toArray(elements2);
   for (let i = childrenArray.length - 1; i > 0; i--) {
-    let sep = typeof separator === "function" ? separator() : (0, import_react23.isValidElement)(separator) ? (0, import_react23.cloneElement)(separator, { key: createKey(i) }) : separator;
-    if ((0, import_react23.isValidElement)(sep) && sep.key == null) {
-      sep = (0, import_react23.cloneElement)(sep, { key: createKey(i) });
+    let sep = typeof separator === "function" ? separator() : (0, import_react24.isValidElement)(separator) ? (0, import_react24.cloneElement)(separator, { key: createKey(i) }) : separator;
+    if ((0, import_react24.isValidElement)(sep) && sep.key == null) {
+      sep = (0, import_react24.cloneElement)(sep, { key: createKey(i) });
     }
     if (!sep || typeof sep === "boolean")
       continue;
@@ -947,12 +950,12 @@ var ShortcutElement = import_styled_components9.default.kbd(
     }
   })
 );
-var KeyboardShortcut = (0, import_react24.memo)(function KeyboardShortcut2({
+var KeyboardShortcut = (0, import_react25.memo)(function KeyboardShortcut2({
   shortcut
 }) {
   const platform = useDesignSystemConfiguration().platform;
   const { keys, separator } = (0, import_noya_keymap.getShortcutDisplayParts)(shortcut, platform);
-  const keyElements = keys.map((key) => /* @__PURE__ */ import_react24.default.createElement(
+  const keyElements = keys.map((key) => /* @__PURE__ */ import_react25.default.createElement(
     ShortcutElement,
     {
       key,
@@ -960,9 +963,9 @@ var KeyboardShortcut = (0, import_react24.memo)(function KeyboardShortcut2({
     },
     key
   ));
-  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, separator ? withSeparatorElements(
+  return /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, separator ? withSeparatorElements(
     keyElements,
-    /* @__PURE__ */ import_react24.default.createElement(ShortcutElement, null, separator)
+    /* @__PURE__ */ import_react25.default.createElement(ShortcutElement, null, separator)
   ) : keyElements);
 });
 
@@ -977,7 +980,7 @@ var CheckboxItemElement = (0, import_styled_components10.default)(RadixDropdownM
 var StyledItemIndicator = (0, import_styled_components10.default)(RadixDropdownMenu.ItemIndicator)(
   styles.itemIndicatorStyle
 );
-var DropdownMenuItem = (0, import_react25.memo)(function ContextMenuItem({
+var DropdownMenuItem = (0, import_react26.memo)(function ContextMenuItem({
   value,
   children,
   onSelect,
@@ -988,34 +991,34 @@ var DropdownMenuItem = (0, import_react25.memo)(function ContextMenuItem({
   items,
   shortcut
 }) {
-  const handleSelectItem = (0, import_react25.useCallback)(() => {
+  const handleSelectItem = (0, import_react26.useCallback)(() => {
     if (!value)
       return;
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ import_react25.default.createElement(
+    return /* @__PURE__ */ import_react26.default.createElement(
       CheckboxItemElement,
       {
         checked,
         disabled,
         onSelect: handleSelectItem
       },
-      /* @__PURE__ */ import_react25.default.createElement(StyledItemIndicator, null, /* @__PURE__ */ import_react25.default.createElement(import_noya_icons.CheckIcon, null)),
-      icon && /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, icon, /* @__PURE__ */ import_react25.default.createElement(Spacer.Horizontal, { size: 8 })),
+      /* @__PURE__ */ import_react26.default.createElement(StyledItemIndicator, null, /* @__PURE__ */ import_react26.default.createElement(import_noya_icons.CheckIcon, null)),
+      icon && /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, icon, /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, { size: 8 })),
       children
     );
   }
-  const element = /* @__PURE__ */ import_react25.default.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ import_react25.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, icon, /* @__PURE__ */ import_react25.default.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react25.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react25.default.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react25.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react25.default.createElement(import_noya_icons.ChevronRightIcon, null)));
+  const element = /* @__PURE__ */ import_react26.default.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, icon, /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react26.default.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react26.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react26.default.createElement(import_noya_icons.ChevronRightIcon, null)));
   if (items && items.length > 0) {
-    return /* @__PURE__ */ import_react25.default.createElement(DropdownMenuRoot, { isNested: true, items, onSelect }, element);
+    return /* @__PURE__ */ import_react26.default.createElement(DropdownMenuRoot, { isNested: true, items, onSelect }, element);
   } else {
     return element;
   }
 });
 var Content5 = (0, import_styled_components10.default)(RadixDropdownMenu.Content)(styles.contentStyle);
 var SubContent2 = (0, import_styled_components10.default)(RadixDropdownMenu.SubContent)(styles.contentStyle);
-var DropdownMenuRoot = (0, import_react25.forwardRef)(function DropdownMenuRoot2({
+var DropdownMenuRoot = (0, import_react26.forwardRef)(function DropdownMenuRoot2({
   items,
   children,
   onSelect,
@@ -1028,7 +1031,7 @@ var DropdownMenuRoot = (0, import_react25.forwardRef)(function DropdownMenuRoot2
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
   );
-  const keymap = (0, import_react25.useMemo)(
+  const keymap = (0, import_react26.useMemo)(
     () => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
@@ -1036,8 +1039,8 @@ var DropdownMenuRoot = (0, import_react25.forwardRef)(function DropdownMenuRoot2
   const RootComponent = isNested ? RadixDropdownMenu.Sub : RadixDropdownMenu.Root;
   const TriggerComponent = isNested ? RadixDropdownMenu.SubTrigger : RadixDropdownMenu.Trigger;
   const ContentComponent = isNested ? SubContent2 : Content5;
-  const contentStyle = (0, import_react25.useMemo)(() => ({ zIndex: 1e3 }), []);
-  return /* @__PURE__ */ import_react25.default.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ import_react25.default.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ import_react25.default.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ import_react25.default.createElement(
+  const contentStyle = (0, import_react26.useMemo)(() => ({ zIndex: 1e3 }), []);
+  return /* @__PURE__ */ import_react26.default.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ import_react26.default.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ import_react26.default.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ import_react26.default.createElement(
     ContentComponent,
     {
       sideOffset: 4,
@@ -1046,7 +1049,7 @@ var DropdownMenuRoot = (0, import_react25.forwardRef)(function DropdownMenuRoot2
       ...{ onCloseAutoFocus }
     },
     items.map(
-      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react25.default.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ import_react25.default.createElement(
+      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react26.default.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ import_react26.default.createElement(
         DropdownMenuItem,
         {
           key: item.value ?? index,
@@ -1064,14 +1067,14 @@ var DropdownMenuRoot = (0, import_react25.forwardRef)(function DropdownMenuRoot2
     )
   )));
 });
-var DropdownMenu = (0, import_react25.memo)(DropdownMenuRoot);
+var DropdownMenu = (0, import_react26.memo)(DropdownMenuRoot);
 
 // src/components/internal/TextInput.tsx
 var import_react_compose_refs = require("@radix-ui/react-compose-refs");
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 
 // src/contexts/GlobalInputBlurContext.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var defaultValue = /* @__PURE__ */ (() => {
   const listeners = [];
   const value = {
@@ -1092,14 +1095,14 @@ var defaultValue = /* @__PURE__ */ (() => {
   };
   return value;
 })();
-var GlobalInputBlurContext = (0, import_react26.createContext)(defaultValue);
+var GlobalInputBlurContext = (0, import_react27.createContext)(defaultValue);
 var GlobalInputBlurProvider = GlobalInputBlurContext.Provider;
 var useGlobalInputBlur = () => {
-  return (0, import_react26.useContext)(GlobalInputBlurContext);
+  return (0, import_react27.useContext)(GlobalInputBlurContext);
 };
 function useGlobalInputBlurListener(f) {
   const context = useGlobalInputBlur();
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     context.addListener(f);
     return () => {
       context.removeListener(f);
@@ -1111,8 +1114,8 @@ function useGlobalInputBlurTrigger() {
 }
 
 // src/components/internal/TextInput.tsx
-var ReadOnlyTextInput = (0, import_react27.forwardRef)(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ import_react27.default.createElement(
+var ReadOnlyTextInput = (0, import_react28.forwardRef)(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ import_react28.default.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -1123,7 +1126,7 @@ var ReadOnlyTextInput = (0, import_react27.forwardRef)(function ReadOnlyTextInpu
     }
   );
 });
-var ControlledTextInput = (0, import_react27.forwardRef)(function ControlledTextInput2({
+var ControlledTextInput = (0, import_react28.forwardRef)(function ControlledTextInput2({
   onKeyDown,
   value,
   onChange,
@@ -1132,28 +1135,28 @@ var ControlledTextInput = (0, import_react27.forwardRef)(function ControlledText
   onFocusCapture,
   ...rest
 }, forwardedRef) {
-  const handleBlur = (0, import_react27.useCallback)(
+  const handleBlur = (0, import_react28.useCallback)(
     (event) => {
       onBlur?.(event);
       onFocusChange?.(false);
     },
     [onBlur, onFocusChange]
   );
-  const handleFocusCapture = (0, import_react27.useCallback)(
+  const handleFocusCapture = (0, import_react28.useCallback)(
     (event) => {
       onFocusCapture?.(event);
       onFocusChange?.(true);
     },
     [onFocusCapture, onFocusChange]
   );
-  return /* @__PURE__ */ import_react27.default.createElement(
+  return /* @__PURE__ */ import_react28.default.createElement(
     "input",
     {
       ref: forwardedRef,
       ...rest,
       value,
       onKeyDown,
-      onChange: (0, import_react27.useCallback)(
+      onChange: (0, import_react28.useCallback)(
         (event) => onChange(event.target.value),
         [onChange]
       ),
@@ -1162,7 +1165,7 @@ var ControlledTextInput = (0, import_react27.forwardRef)(function ControlledText
     }
   );
 });
-var SubmittableTextInput = (0, import_react27.forwardRef)(function SubmittableTextInput2({
+var SubmittableTextInput = (0, import_react28.forwardRef)(function SubmittableTextInput2({
   onKeyDown,
   value,
   onSubmit,
@@ -1173,16 +1176,16 @@ var SubmittableTextInput = (0, import_react27.forwardRef)(function SubmittableTe
   submitAutomaticallyAfterDelay,
   ...rest
 }, forwardedRef) {
-  const ref = import_react27.default.useRef(null);
-  const latestValue = (0, import_react27.useRef)(value);
+  const ref = import_react28.default.useRef(null);
+  const latestValue = (0, import_react28.useRef)(value);
   latestValue.current = value;
-  const userDidEdit = (0, import_react27.useRef)(false);
-  const isSubmitTriggeredByEscapeKey = (0, import_react27.useRef)(false);
-  const [internalValue, setInternalValue] = (0, import_react27.useState)("");
-  (0, import_react27.useLayoutEffect)(() => {
+  const userDidEdit = (0, import_react28.useRef)(false);
+  const isSubmitTriggeredByEscapeKey = (0, import_react28.useRef)(false);
+  const [internalValue, setInternalValue] = (0, import_react28.useState)("");
+  (0, import_react28.useLayoutEffect)(() => {
     setInternalValue(value);
   }, [value]);
-  const handleSubmit = (0, import_react27.useCallback)(() => {
+  const handleSubmit = (0, import_react28.useCallback)(() => {
     const submissionValue = isSubmitTriggeredByEscapeKey.current ? value : internalValue;
     isSubmitTriggeredByEscapeKey.current = false;
     if (submissionValue === value && !allowSubmittingWithSameValue)
@@ -1192,13 +1195,13 @@ var SubmittableTextInput = (0, import_react27.forwardRef)(function SubmittableTe
     setInternalValue(latestValue.current);
   }, [allowSubmittingWithSameValue, value, internalValue, onSubmit]);
   useGlobalInputBlurListener(
-    (0, import_react27.useCallback)(() => {
+    (0, import_react28.useCallback)(() => {
       if (ref.current !== document.activeElement)
         return;
       handleSubmit();
     }, [handleSubmit])
   );
-  const handleKeyDown = (0, import_react27.useCallback)(
+  const handleKeyDown = (0, import_react28.useCallback)(
     (event) => {
       if (event.key === "Enter") {
         handleSubmit();
@@ -1213,14 +1216,14 @@ var SubmittableTextInput = (0, import_react27.forwardRef)(function SubmittableTe
     },
     [onKeyDown, handleSubmit]
   );
-  const handleChange = (0, import_react27.useCallback)(
+  const handleChange = (0, import_react28.useCallback)(
     (event) => {
       userDidEdit.current = true;
       setInternalValue(event.target.value);
     },
     []
   );
-  const handleBlur = (0, import_react27.useCallback)(
+  const handleBlur = (0, import_react28.useCallback)(
     (event) => {
       onBlur?.(event);
       onFocusChange?.(false);
@@ -1228,19 +1231,19 @@ var SubmittableTextInput = (0, import_react27.forwardRef)(function SubmittableTe
     },
     [onBlur, onFocusChange, handleSubmit]
   );
-  const handleFocusCapture = (0, import_react27.useCallback)(
+  const handleFocusCapture = (0, import_react28.useCallback)(
     (event) => {
       onFocusCapture?.(event);
       onFocusChange?.(true);
     },
     [onFocusCapture, onFocusChange]
   );
-  const autoSubmitTimeoutRef = (0, import_react27.useRef)(
+  const autoSubmitTimeoutRef = (0, import_react28.useRef)(
     null
   );
-  const latestHandleSubmit = (0, import_react27.useRef)(handleSubmit);
+  const latestHandleSubmit = (0, import_react28.useRef)(handleSubmit);
   latestHandleSubmit.current = handleSubmit;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (submitAutomaticallyAfterDelay) {
       if (autoSubmitTimeoutRef.current) {
         clearTimeout(autoSubmitTimeoutRef.current);
@@ -1257,7 +1260,7 @@ var SubmittableTextInput = (0, import_react27.forwardRef)(function SubmittableTe
       }
     };
   }, [internalValue, submitAutomaticallyAfterDelay]);
-  return /* @__PURE__ */ import_react27.default.createElement(
+  return /* @__PURE__ */ import_react28.default.createElement(
     "input",
     {
       ref: (0, import_react_compose_refs.composeRefs)(ref, forwardedRef),
@@ -1270,13 +1273,13 @@ var SubmittableTextInput = (0, import_react27.forwardRef)(function SubmittableTe
     }
   );
 });
-var TextInput_default = (0, import_react27.forwardRef)(function TextInput(props, forwardedRef) {
+var TextInput_default = (0, import_react28.forwardRef)(function TextInput(props, forwardedRef) {
   const commonProps = {
-    onPointerDown: (0, import_react27.useCallback)(
+    onPointerDown: (0, import_react28.useCallback)(
       (event) => event.stopPropagation(),
       []
     ),
-    onClick: (0, import_react27.useCallback)(
+    onClick: (0, import_react28.useCallback)(
       (event) => event.stopPropagation(),
       []
     ),
@@ -1289,17 +1292,17 @@ var TextInput_default = (0, import_react27.forwardRef)(function TextInput(props,
     ...props
   };
   if ("readOnly" in commonProps) {
-    return /* @__PURE__ */ import_react27.default.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
+    return /* @__PURE__ */ import_react28.default.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
   } else if ("onChange" in commonProps) {
-    return /* @__PURE__ */ import_react27.default.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ import_react28.default.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
   } else {
-    return /* @__PURE__ */ import_react27.default.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ import_react28.default.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
   }
 });
 
 // src/components/Popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
-var import_react28 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var import_styled_components11 = __toESM(require("styled-components"));
 var ContentElement = (0, import_styled_components11.default)(PopoverPrimitive.Content)(({ theme, variant }) => ({
   borderRadius: 4,
@@ -1346,7 +1349,7 @@ function Popover({
   onFocusOutside,
   onClickClose
 }) {
-  return /* @__PURE__ */ import_react28.default.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react28.default.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ import_react28.default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react29.default.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react29.default.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ import_react29.default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ import_react29.default.createElement(
     ContentElement,
     {
       variant,
@@ -1367,13 +1370,13 @@ function Popover({
       }
     },
     children,
-    showArrow && /* @__PURE__ */ import_react28.default.createElement(ArrowElement, null),
-    closable && /* @__PURE__ */ import_react28.default.createElement(PopoverClose, null, /* @__PURE__ */ import_react28.default.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
+    showArrow && /* @__PURE__ */ import_react29.default.createElement(ArrowElement, null),
+    closable && /* @__PURE__ */ import_react29.default.createElement(PopoverClose, null, /* @__PURE__ */ import_react29.default.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
   )));
 }
 
 // src/components/Stack.tsx
-var import_react29 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var import_styled_components12 = __toESM(require("styled-components"));
 
 // src/utils/breakpoints.ts
@@ -1399,15 +1402,15 @@ var Element = import_styled_components12.default.div(({ styleProps, breakpoints
   ...styleProps,
   ...mergeBreakpoints(breakpoints || [])
 }));
-var StackBase = (0, import_react29.forwardRef)(function StackBase2({ id, as, children, separator, breakpoints, tabIndex, href, ...rest }, forwardedRef) {
-  const elements2 = separator ? withSeparatorElements(import_react29.Children.toArray(children), separator) : children;
+var StackBase = (0, import_react30.forwardRef)(function StackBase2({ id, as, children, separator, breakpoints, tabIndex, href, ...rest }, forwardedRef) {
+  const elements2 = separator ? withSeparatorElements(import_react30.Children.toArray(children), separator) : children;
   const styleProps = {
     display: "flex",
     position: "relative",
     alignItems: "stretch",
     ...rest
   };
-  return /* @__PURE__ */ import_react29.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(
     Element,
     {
       ref: forwardedRef,
@@ -1421,14 +1424,14 @@ var StackBase = (0, import_react29.forwardRef)(function StackBase2({ id, as, chi
     elements2
   );
 });
-var VerticalStack = (0, import_react29.memo)(
-  (0, import_react29.forwardRef)(function VStack(props, forwardedRef) {
-    return /* @__PURE__ */ import_react29.default.createElement(StackBase, { ...props, flexDirection: "column", ref: forwardedRef });
+var VerticalStack = (0, import_react30.memo)(
+  (0, import_react30.forwardRef)(function VStack(props, forwardedRef) {
+    return /* @__PURE__ */ import_react30.default.createElement(StackBase, { ...props, flexDirection: "column", ref: forwardedRef });
   })
 );
-var HorizontalStack = (0, import_react29.memo)(
-  (0, import_react29.forwardRef)(function HStack(props, forwardedRef) {
-    return /* @__PURE__ */ import_react29.default.createElement(StackBase, { ...props, flexDirection: "row", ref: forwardedRef });
+var HorizontalStack = (0, import_react30.memo)(
+  (0, import_react30.forwardRef)(function HStack(props, forwardedRef) {
+    return /* @__PURE__ */ import_react30.default.createElement(StackBase, { ...props, flexDirection: "row", ref: forwardedRef });
   })
 );
 var Stack = {
@@ -1437,7 +1440,7 @@ var Stack = {
 };
 
 // src/components/InputField.tsx
-var InputFieldContext = (0, import_react30.createContext)({
+var InputFieldContext = (0, import_react31.createContext)({
   labelPosition: "end",
   labelSize: 6,
   hasLabel: false,
@@ -1465,11 +1468,11 @@ var LabelContainer = import_styled_components13.default.label(({ theme, labelPos
     paddingRight: hasDropdown ? "16px" : "6px"
   }
 }));
-var InputFieldLabel = (0, import_react30.memo)(
-  (0, import_react30.forwardRef)(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
-    const { labelPosition, hasDropdown, setLabelWidth } = (0, import_react30.useContext)(InputFieldContext);
-    const ref = (0, import_react30.useRef)(null);
-    (0, import_react30.useLayoutEffect)(() => {
+var InputFieldLabel = (0, import_react31.memo)(
+  (0, import_react31.forwardRef)(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
+    const { labelPosition, hasDropdown, setLabelWidth } = (0, import_react31.useContext)(InputFieldContext);
+    const ref = (0, import_react31.useRef)(null);
+    (0, import_react31.useLayoutEffect)(() => {
       if (!setLabelWidth)
         return;
       const width = ref.current?.getBoundingClientRect().width;
@@ -1477,7 +1480,7 @@ var InputFieldLabel = (0, import_react30.memo)(
         return;
       setLabelWidth(width);
     }, [setLabelWidth]);
-    return /* @__PURE__ */ import_react30.default.createElement(
+    return /* @__PURE__ */ import_react31.default.createElement(
       LabelContainer,
       {
         ref: (element) => {
@@ -1501,16 +1504,16 @@ var DropdownContainer = import_styled_components13.default.span(({ theme }) => (
   display: "flex",
   flexDirection: "column"
 }));
-var InputFieldDropdownMenu = (0, import_react30.memo)(function InputFieldDropdownMenu2({ id, items, onSelect, children }) {
-  const { size: size2 } = (0, import_react30.useContext)(InputFieldContext);
-  const contentStyle = (0, import_react30.useMemo)(
+var InputFieldDropdownMenu = (0, import_react31.memo)(function InputFieldDropdownMenu2({ id, items, onSelect, children }) {
+  const { size: size2 } = (0, import_react31.useContext)(InputFieldContext);
+  const contentStyle = (0, import_react31.useMemo)(
     () => ({
       margin: "-4px 0",
       minHeight: size2 === "small" ? "15px" : void 0
     }),
     [size2]
   );
-  return /* @__PURE__ */ import_react30.default.createElement(DropdownContainer, null, /* @__PURE__ */ import_react30.default.createElement(DropdownMenu, { items, onSelect }, children || /* @__PURE__ */ import_react30.default.createElement(Button, { id, variant: "thin", flex: "1", contentStyle }, /* @__PURE__ */ import_react30.default.createElement(import_noya_icons2.CaretDownIcon, null))));
+  return /* @__PURE__ */ import_react31.default.createElement(DropdownContainer, null, /* @__PURE__ */ import_react31.default.createElement(DropdownMenu, { items, onSelect }, children || /* @__PURE__ */ import_react31.default.createElement(Button, { id, variant: "thin", flex: "1", contentStyle }, /* @__PURE__ */ import_react31.default.createElement(import_noya_icons2.CaretDownIcon, null))));
 });
 var ButtonContainer = import_styled_components13.default.span(
   ({ theme, size: size2 }) => ({
@@ -1519,12 +1522,12 @@ var ButtonContainer = import_styled_components13.default.span(
     top: size2 === "large" ? "8px" : size2 === "medium" ? "4px" : "2px"
   })
 );
-var InputFieldButton = (0, import_react30.memo)(function InputFieldButton2({
+var InputFieldButton = (0, import_react31.memo)(function InputFieldButton2({
   children,
   onClick
 }) {
-  const { size: size2, inputRef } = (0, import_react30.useContext)(InputFieldContext);
-  const defaultHandleClick = (0, import_react30.useCallback)(
+  const { size: size2, inputRef } = (0, import_react31.useContext)(InputFieldContext);
+  const defaultHandleClick = (0, import_react31.useCallback)(
     (event) => {
       if (inputRef && typeof inputRef !== "function") {
         inputRef.current?.focus();
@@ -1535,11 +1538,11 @@ var InputFieldButton = (0, import_react30.memo)(function InputFieldButton2({
     },
     [inputRef]
   );
-  const handlePointerDown = (0, import_react30.useCallback)((event) => {
+  const handlePointerDown = (0, import_react31.useCallback)((event) => {
     event.preventDefault();
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ import_react30.default.createElement(ButtonContainer, { size: size2 }, /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(ButtonContainer, { size: size2 }, /* @__PURE__ */ import_react31.default.createElement(
     Button,
     {
       variant: "floating",
@@ -1626,7 +1629,7 @@ var InputElement = (0, import_styled_components13.default)(TextInput_default).wi
     }
   })
 );
-var InputFieldInput = (0, import_react30.forwardRef)(function InputFieldInput2(props, forwardedRef) {
+var InputFieldInput = (0, import_react31.forwardRef)(function InputFieldInput2(props, forwardedRef) {
   const {
     labelPosition,
     labelSize,
@@ -1635,17 +1638,17 @@ var InputFieldInput = (0, import_react30.forwardRef)(function InputFieldInput2(p
     size: size2,
     onFocusChange,
     setInputRef
-  } = (0, import_react30.useContext)(InputFieldContext);
-  const handleFocusChange = (0, import_react30.useCallback)(
+  } = (0, import_react31.useContext)(InputFieldContext);
+  const handleFocusChange = (0, import_react31.useCallback)(
     (isFocused) => {
       onFocusChange(isFocused);
     },
     [onFocusChange]
   );
-  (0, import_react30.useLayoutEffect)(() => {
+  (0, import_react31.useLayoutEffect)(() => {
     setInputRef?.(forwardedRef);
   }, [forwardedRef, setInputRef]);
-  return /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(
     InputElement,
     {
       ref: forwardedRef,
@@ -1667,8 +1670,8 @@ var InputFieldTypeahead = (props) => {
     hasLabel,
     size: size2,
     onFocusChange
-  } = (0, import_react30.useContext)(InputFieldContext);
-  return /* @__PURE__ */ import_react30.default.createElement(
+  } = (0, import_react31.useContext)(InputFieldContext);
+  return /* @__PURE__ */ import_react31.default.createElement(
     InputElement,
     {
       labelPosition,
@@ -1702,7 +1705,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 = (0, import_react30.useCallback)(
+  const handleSubmit = (0, import_react31.useCallback)(
     (value2) => {
       const newValue = parseNumber(value2);
       if (!isNaN(newValue)) {
@@ -1711,7 +1714,7 @@ function InputFieldNumberInput(props) {
     },
     [onSubmit]
   );
-  const handleKeyDown = (0, import_react30.useCallback)(
+  const handleKeyDown = (0, import_react31.useCallback)(
     (event) => {
       const amount = handleNudge(event);
       if (!amount)
@@ -1722,13 +1725,13 @@ function InputFieldNumberInput(props) {
     },
     [onNudge]
   );
-  const handleChange = (0, import_react30.useCallback)(
+  const handleChange = (0, import_react31.useCallback)(
     (value2) => {
       onChange?.(parseNumber(value2));
     },
     [onChange]
   );
-  return /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(
     InputFieldInput,
     {
       ...props,
@@ -1759,32 +1762,32 @@ function InputFieldRoot({
   renderPopoverContent,
   onFocusChange
 }) {
-  const childrenArray = import_react30.Children.toArray(children);
+  const childrenArray = import_react31.Children.toArray(children);
   const hasDropdown = childrenArray.some(
-    (child) => (0, import_react30.isValidElement)(child) && child.type === InputFieldDropdownMenu
+    (child) => (0, import_react31.isValidElement)(child) && child.type === InputFieldDropdownMenu
   );
   const hasLabel = childrenArray.some(
-    (child) => (0, import_react30.isValidElement)(child) && child.type === InputFieldLabel
+    (child) => (0, import_react31.isValidElement)(child) && child.type === InputFieldLabel
   );
-  const [isFocused, setIsFocused] = import_react30.default.useState(false);
-  const [measuredLabelSize, setMeasuredLabelSize] = import_react30.default.useState();
-  const [measuredWidth, setMeasuredWidth] = import_react30.default.useState();
-  const handleFocusChange = (0, import_react30.useCallback)(
+  const [isFocused, setIsFocused] = import_react31.default.useState(false);
+  const [measuredLabelSize, setMeasuredLabelSize] = import_react31.default.useState();
+  const [measuredWidth, setMeasuredWidth] = import_react31.default.useState();
+  const handleFocusChange = (0, import_react31.useCallback)(
     (isFocused2) => {
       setIsFocused(isFocused2);
       onFocusChange?.(isFocused2);
     },
     [onFocusChange]
   );
-  const [inputRef, setInputRef] = import_react30.default.useState();
-  (0, import_react30.useEffect)(() => {
+  const [inputRef, setInputRef] = import_react31.default.useState();
+  (0, import_react31.useEffect)(() => {
     if (inputRef && typeof inputRef !== "function") {
       setMeasuredWidth?.(
         isFocused ? inputRef?.current?.getBoundingClientRect().width : void 0
       );
     }
   }, [inputRef, isFocused]);
-  const contextValue = (0, import_react30.useMemo)(
+  const contextValue = (0, import_react31.useMemo)(
     () => ({
       labelPosition,
       labelSize: measuredLabelSize ?? labelSize ?? 6,
@@ -1809,8 +1812,8 @@ function InputFieldRoot({
       inputRef
     ]
   );
-  const rootElement = /* @__PURE__ */ import_react30.default.createElement(RootContainer, { id, width, flex }, children);
-  return /* @__PURE__ */ import_react30.default.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ import_react30.default.createElement(
+  const rootElement = /* @__PURE__ */ import_react31.default.createElement(RootContainer, { id, width, flex }, children);
+  return /* @__PURE__ */ import_react31.default.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ import_react31.default.createElement(
     Popover,
     {
       open: true,
@@ -1826,15 +1829,15 @@ function InputFieldRoot({
         event.stopPropagation();
       }
     },
-    measuredWidth && /* @__PURE__ */ import_react30.default.createElement(Stack.V, { width: measuredWidth, overflow: "hidden" }, renderPopoverContent({ width: measuredWidth }))
+    measuredWidth && /* @__PURE__ */ import_react31.default.createElement(Stack.V, { width: measuredWidth, overflow: "hidden" }, renderPopoverContent({ width: measuredWidth }))
   ) : rootElement);
 }
 var InputField;
 ((InputField2) => {
-  InputField2.Root = (0, import_react30.memo)(InputFieldRoot);
-  InputField2.Input = (0, import_react30.memo)(InputFieldInput);
-  InputField2.Typeahead = (0, import_react30.memo)(InputFieldTypeahead);
-  InputField2.NumberInput = (0, import_react30.memo)(InputFieldNumberInput);
+  InputField2.Root = (0, import_react31.memo)(InputFieldRoot);
+  InputField2.Input = (0, import_react31.memo)(InputFieldInput);
+  InputField2.Typeahead = (0, import_react31.memo)(InputFieldTypeahead);
+  InputField2.NumberInput = (0, import_react31.memo)(InputFieldNumberInput);
   InputField2.DropdownMenu = InputFieldDropdownMenu;
   InputField2.Button = InputFieldButton;
   InputField2.Label = InputFieldLabel;
@@ -1858,24 +1861,24 @@ function createDeferredPromise() {
   });
   return { promise, resolve, reject };
 }
-var DialogContext = (0, import_react31.createContext)(void 0);
+var DialogContext = (0, import_react32.createContext)(void 0);
 var DialogProvider = function DialogProvider2({
   children
 }) {
-  const [contents, setContents] = (0, import_react31.useState)();
+  const [contents, setContents] = (0, import_react32.useState)();
   const isOpen = !!contents;
-  const close = (0, import_react31.useCallback)(() => {
+  const close = (0, import_react32.useCallback)(() => {
     if (!contents)
       return;
     contents.resolve(void 0);
   }, [contents]);
-  const submit = (0, import_react31.useCallback)(() => {
+  const submit = (0, import_react32.useCallback)(() => {
     if (!contents || !contents.inputValue)
       return;
     contents.resolve(contents.inputValue);
     setContents(void 0);
   }, [contents]);
-  const open = (0, import_react31.useCallback)(
+  const open = (0, import_react32.useCallback)(
     (title, inputValue = "") => {
       const { promise, resolve } = createDeferredPromise();
       setContents({
@@ -1890,7 +1893,7 @@ var DialogProvider = function DialogProvider2({
     },
     []
   );
-  const handleKeyDown = (0, import_react31.useCallback)(
+  const handleKeyDown = (0, import_react32.useCallback)(
     (event) => {
       if (event.key !== "Enter")
         return;
@@ -1900,29 +1903,29 @@ var DialogProvider = function DialogProvider2({
     },
     [submit]
   );
-  const inputRef = (0, import_react31.useRef)(null);
-  const dialogRef = (0, import_react31.useRef)(null);
-  const containsElement = (0, import_react31.useCallback)((element) => {
+  const inputRef = (0, import_react32.useRef)(null);
+  const dialogRef = (0, import_react32.useRef)(null);
+  const containsElement = (0, import_react32.useCallback)((element) => {
     if (!dialogRef.current)
       return false;
     return dialogRef.current.containsElement(element);
   }, []);
-  return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(import_react32.default.Fragment, null, /* @__PURE__ */ import_react32.default.createElement(
     DialogContext.Provider,
     {
-      value: (0, import_react31.useMemo)(
+      value: (0, import_react32.useMemo)(
         () => ({ openInputDialog: open, containsElement }),
         [containsElement, open]
       )
     },
     children
-  ), /* @__PURE__ */ import_react31.default.createElement(
+  ), /* @__PURE__ */ import_react32.default.createElement(
     Dialog,
     {
       ref: dialogRef,
       title: contents?.title,
       open: isOpen,
-      onOpenChange: (0, import_react31.useCallback)(
+      onOpenChange: (0, import_react32.useCallback)(
         (isOpen2) => {
           if (!isOpen2) {
             close();
@@ -1930,14 +1933,14 @@ var DialogProvider = function DialogProvider2({
         },
         [close]
       ),
-      onOpenAutoFocus: (0, import_react31.useCallback)((event) => {
+      onOpenAutoFocus: (0, import_react32.useCallback)((event) => {
         event.stopPropagation();
         event.preventDefault();
         inputRef.current?.focus();
         inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
       }, [])
     },
-    /* @__PURE__ */ import_react31.default.createElement(InputField.Root, null, /* @__PURE__ */ import_react31.default.createElement(
+    /* @__PURE__ */ import_react32.default.createElement(InputField.Root, null, /* @__PURE__ */ import_react32.default.createElement(
       InputField.Input,
       {
         ref: inputRef,
@@ -1953,12 +1956,12 @@ var DialogProvider = function DialogProvider2({
         onKeyDown: handleKeyDown
       }
     )),
-    /* @__PURE__ */ import_react31.default.createElement(Spacer.Vertical, { size: 20 }),
-    /* @__PURE__ */ import_react31.default.createElement(Row, null, /* @__PURE__ */ import_react31.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react31.default.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ import_react31.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react31.default.createElement(Button, { disabled: !contents?.inputValue, onClick: submit }, "Submit"))
+    /* @__PURE__ */ import_react32.default.createElement(Spacer.Vertical, { size: 20 }),
+    /* @__PURE__ */ import_react32.default.createElement(Row, null, /* @__PURE__ */ import_react32.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react32.default.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ import_react32.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react32.default.createElement(Button, { disabled: !contents?.inputValue, onClick: submit }, "Submit"))
   ));
 };
 function useDialog() {
-  const value = (0, import_react31.useContext)(DialogContext);
+  const value = (0, import_react32.useContext)(DialogContext);
   if (!value) {
     throw new Error("Missing DialogProvider");
   }
@@ -1972,19 +1975,19 @@ function useDialogContainsElement() {
 }
 
 // src/contexts/DesignSystemConfiguration.tsx
-var DesignSystemConfigurationContext = (0, import_react32.createContext)(void 0);
-var DesignSystemConfigurationProvider = (0, import_react32.memo)(
+var DesignSystemConfigurationContext = (0, import_react33.createContext)(void 0);
+var DesignSystemConfigurationProvider = (0, import_react33.memo)(
   function DesignSystemConfigurationProvider2({
     children,
     theme,
     platform
   }) {
-    const contextValue = (0, import_react32.useMemo)(() => ({ platform }), [platform]);
-    return /* @__PURE__ */ import_react32.default.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react32.default.createElement(import_styled_components15.ThemeProvider, { theme }, /* @__PURE__ */ import_react32.default.createElement(DialogProvider, null, /* @__PURE__ */ import_react32.default.createElement(ToastProvider, null, children))));
+    const contextValue = (0, import_react33.useMemo)(() => ({ platform }), [platform]);
+    return /* @__PURE__ */ import_react33.default.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react33.default.createElement(import_styled_components15.ThemeProvider, { theme }, /* @__PURE__ */ import_react33.default.createElement(DialogProvider, null, /* @__PURE__ */ import_react33.default.createElement(ToastProvider, null, children))));
   }
 );
 function useDesignSystemConfiguration() {
-  const value = (0, import_react32.useContext)(DesignSystemConfigurationContext);
+  const value = (0, import_react33.useContext)(DesignSystemConfigurationContext);
   if (!value) {
     throw new Error("Missing DesignSystemConfigurationProvider");
   }
@@ -2172,7 +2175,7 @@ var AddElement = (0, import_styled_components16.default)(import_noya_icons3.Plus
     opacity: 0.85
   }
 }));
-var Chip = (0, import_react33.memo)(function Chip2({
+var Chip = (0, import_react34.memo)(function Chip2({
   colorScheme,
   children,
   deletable,
@@ -2193,7 +2196,7 @@ var Chip = (0, import_react33.memo)(function Chip2({
   });
   const handleClick = !children && !deletable && addable ? onAdd : onClick;
   const color = colorScheme === "primary" ? theme.colors.primary : colorScheme === "secondary" ? theme.colors.secondary : theme.colors.text;
-  return /* @__PURE__ */ import_react33.default.createElement(
+  return /* @__PURE__ */ import_react34.default.createElement(
     ChipElement,
     {
       variant,
@@ -2205,7 +2208,7 @@ var Chip = (0, import_react33.memo)(function Chip2({
       isInteractive: !!handleClick,
       tabIndex
     },
-    addable && /* @__PURE__ */ import_react33.default.createElement(
+    addable && /* @__PURE__ */ import_react34.default.createElement(
       AddElement,
       {
         size: size2,
@@ -2218,7 +2221,7 @@ var Chip = (0, import_react33.memo)(function Chip2({
       }
     ),
     children,
-    deletable && /* @__PURE__ */ import_react33.default.createElement(
+    deletable && /* @__PURE__ */ import_react34.default.createElement(
       DeleteElement,
       {
         size: size2,
@@ -2237,7 +2240,7 @@ var Chip = (0, import_react33.memo)(function Chip2({
 var import_noya_icons4 = require("@noya-app/noya-icons");
 var import_noya_keymap3 = require("@noya-app/noya-keymap");
 var RadixContextMenu = __toESM(require("@radix-ui/react-context-menu"));
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_styled_components17 = __toESM(require("styled-components"));
 var SeparatorElement2 = (0, import_styled_components17.default)(RadixContextMenu.Separator)(
   styles.separatorStyle
@@ -2249,7 +2252,7 @@ var CheckboxItemElement2 = (0, import_styled_components17.default)(RadixContextM
 var StyledItemIndicator2 = (0, import_styled_components17.default)(RadixContextMenu.ItemIndicator)(
   styles.itemIndicatorStyle
 );
-var ContextMenuItem2 = (0, import_react34.memo)(function ContextMenuItem3({
+var ContextMenuItem2 = (0, import_react35.memo)(function ContextMenuItem3({
   value,
   children,
   onSelect,
@@ -2260,42 +2263,42 @@ var ContextMenuItem2 = (0, import_react34.memo)(function ContextMenuItem3({
   items,
   shortcut
 }) {
-  const handlePointerDown = (0, import_react34.useCallback)(
+  const handlePointerDown = (0, import_react35.useCallback)(
     (event) => event.stopPropagation(),
     []
   );
-  const handleSelectItem = (0, import_react34.useCallback)(() => {
+  const handleSelectItem = (0, import_react35.useCallback)(() => {
     if (!value)
       return;
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ import_react34.default.createElement(
+    return /* @__PURE__ */ import_react35.default.createElement(
       CheckboxItemElement2,
       {
         checked,
         disabled,
         onSelect: handleSelectItem
       },
-      /* @__PURE__ */ import_react34.default.createElement(StyledItemIndicator2, null, /* @__PURE__ */ import_react34.default.createElement(import_noya_icons4.CheckIcon, null)),
+      /* @__PURE__ */ import_react35.default.createElement(StyledItemIndicator2, null, /* @__PURE__ */ import_react35.default.createElement(import_noya_icons4.CheckIcon, null)),
       children
     );
   }
-  const element = /* @__PURE__ */ import_react34.default.createElement(
+  const element = /* @__PURE__ */ import_react35.default.createElement(
     ItemElement2,
     {
       disabled,
       onSelect: handleSelectItem,
       onPointerDown: handlePointerDown
     },
-    indented && /* @__PURE__ */ import_react34.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
-    icon && /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, icon, /* @__PURE__ */ import_react34.default.createElement(Spacer.Horizontal, { size: 8 })),
+    indented && /* @__PURE__ */ import_react35.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
+    icon && /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, icon, /* @__PURE__ */ import_react35.default.createElement(Spacer.Horizontal, { size: 8 })),
     children,
-    shortcut && /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react34.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react34.default.createElement(KeyboardShortcut, { shortcut })),
-    items && items.length > 0 && /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react34.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react34.default.createElement(import_noya_icons4.ChevronRightIcon, null))
+    shortcut && /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, /* @__PURE__ */ import_react35.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react35.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react35.default.createElement(KeyboardShortcut, { shortcut })),
+    items && items.length > 0 && /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, /* @__PURE__ */ import_react35.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react35.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react35.default.createElement(import_noya_icons4.ChevronRightIcon, null))
   );
   if (items && items.length > 0) {
-    return /* @__PURE__ */ import_react34.default.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
+    return /* @__PURE__ */ import_react35.default.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
   } else {
     return element;
   }
@@ -2313,19 +2316,19 @@ function ContextMenuRoot({
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
   );
-  const keymap = (0, import_react34.useMemo)(
+  const keymap = (0, import_react35.useMemo)(
     () => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
   (0, import_noya_keymap3.useKeyboardShortcuts)(keymap);
-  const onPointerDown = (0, import_react34.useCallback)((event) => {
+  const onPointerDown = (0, import_react35.useCallback)((event) => {
     event.preventDefault();
   }, []);
   const RootComponent = isNested ? RadixContextMenu.Sub : RadixContextMenu.Root;
   const TriggerComponent = isNested ? RadixContextMenu.SubTrigger : RadixContextMenu.Trigger;
   const ContentComponent = isNested ? SubContent4 : Content8;
-  return /* @__PURE__ */ import_react34.default.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ import_react34.default.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ import_react34.default.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ import_react34.default.createElement(ContentComponent, null, items.map(
-    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react34.default.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ import_react35.default.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ import_react35.default.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ import_react35.default.createElement(ContentComponent, null, items.map(
+    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react35.default.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ import_react35.default.createElement(
       ContextMenuItem2,
       {
         key: item.value ?? index,
@@ -2342,26 +2345,26 @@ function ContextMenuRoot({
     )
   ))));
 }
-var ContextMenu = (0, import_react34.memo)(ContextMenuRoot);
+var ContextMenu = (0, import_react35.memo)(ContextMenuRoot);
 
 // src/components/Divider.tsx
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var import_styled_components18 = __toESM(require("styled-components"));
 var DividerContainer = import_styled_components18.default.div(({ theme, variant = "normal", orientation, overflow = 0 }) => ({
   ...orientation === "horizontal" ? { height: "1px", minHeight: "1px", margin: `0px -${overflow}px` } : { width: "1px", minWidth: "1px", margin: `-${overflow}px 0px` },
   background: variant === "strong" ? theme.colors.dividerStrong : variant === "subtle" ? theme.colors.dividerSubtle : theme.colors.divider,
   alignSelf: "stretch"
 }));
-var Divider = (0, import_react35.memo)(function Divider2(props) {
-  return /* @__PURE__ */ import_react35.default.createElement(DividerContainer, { orientation: "horizontal", ...props });
+var Divider = (0, import_react36.memo)(function Divider2(props) {
+  return /* @__PURE__ */ import_react36.default.createElement(DividerContainer, { orientation: "horizontal", ...props });
 });
-var DividerVertical = (0, import_react35.memo)(function DividerVertical2(props) {
-  return /* @__PURE__ */ import_react35.default.createElement(DividerContainer, { orientation: "vertical", ...props });
+var DividerVertical = (0, import_react36.memo)(function DividerVertical2(props) {
+  return /* @__PURE__ */ import_react36.default.createElement(DividerContainer, { orientation: "vertical", ...props });
 });
 
 // src/components/DraggableMenuButton.tsx
 var import_noya_icons5 = require("@noya-app/noya-icons");
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var import_styled_components19 = __toESM(require("styled-components"));
 var DotButtonElement = import_styled_components19.default.div(({ theme }) => ({
   cursor: "pointer",
@@ -2381,15 +2384,15 @@ var TriggerElement = import_styled_components19.default.div({
   pointerEvents: "none",
   height: "15px"
 });
-var DraggableMenuButton = (0, import_react36.memo)(function DraggableMenuButton2({
+var DraggableMenuButton = (0, import_react37.memo)(function DraggableMenuButton2({
   items,
   onSelect,
   isVisible = true
 }) {
   const color = useDesignSystemTheme().colors.icon;
-  const [open, setOpen] = (0, import_react36.useState)(false);
-  const [downPosition, setDownPosition] = import_react36.default.useState(null);
-  const handlePointerDownCapture = (0, import_react36.useCallback)(
+  const [open, setOpen] = (0, import_react37.useState)(false);
+  const [downPosition, setDownPosition] = import_react37.default.useState(null);
+  const handlePointerDownCapture = (0, import_react37.useCallback)(
     (event) => {
       if (open) {
         setDownPosition(null);
@@ -2402,7 +2405,7 @@ var DraggableMenuButton = (0, import_react36.memo)(function DraggableMenuButton2
     },
     [open]
   );
-  const handlePointerUp = (0, import_react36.useCallback)(
+  const handlePointerUp = (0, import_react37.useCallback)(
     (event) => {
       if (open || !downPosition) {
         setDownPosition(null);
@@ -2418,14 +2421,14 @@ var DraggableMenuButton = (0, import_react36.memo)(function DraggableMenuButton2
     },
     [downPosition, open]
   );
-  const handleOpenChange = (0, import_react36.useCallback)(
+  const handleOpenChange = (0, import_react37.useCallback)(
     (isOpen) => {
       if (!isOpen)
         setOpen(false);
     },
     [setOpen]
   );
-  return /* @__PURE__ */ import_react36.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement(
     DotButtonElement,
     {
       onPointerDownCapture: handlePointerDownCapture,
@@ -2435,7 +2438,7 @@ var DraggableMenuButton = (0, import_react36.memo)(function DraggableMenuButton2
         event.preventDefault();
       }
     },
-    /* @__PURE__ */ import_react36.default.createElement(
+    items && onSelect ? /* @__PURE__ */ import_react37.default.createElement(
       DropdownMenu,
       {
         open,
@@ -2444,18 +2447,23 @@ var DraggableMenuButton = (0, import_react36.memo)(function DraggableMenuButton2
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ import_react36.default.createElement(TriggerElement, null, /* @__PURE__ */ import_react36.default.createElement(
+      /* @__PURE__ */ import_react37.default.createElement(TriggerElement, null, /* @__PURE__ */ import_react37.default.createElement(
         import_noya_icons5.DragHandleDots2Icon,
         {
           color: isVisible || open ? color : "transparent"
         }
       ))
+    ) : /* @__PURE__ */ import_react37.default.createElement(
+      import_noya_icons5.DragHandleDots2Icon,
+      {
+        color: isVisible || open ? color : "transparent"
+      }
     )
   );
 });
 
 // src/components/FillInputField.tsx
-var import_react40 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var import_styled_components21 = __toESM(require("styled-components"));
 
 // ../noya-file-format/src/types.ts
@@ -2781,26 +2789,26 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 
 // src/components/FillPreviewBackground.tsx
-var import_react39 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var import_styled_components20 = __toESM(require("styled-components"));
 
 // src/contexts/ImageDataContext.tsx
-var import_react37 = __toESM(require("react"));
-var ImageDataContext = (0, import_react37.createContext)(
+var import_react38 = __toESM(require("react"));
+var ImageDataContext = (0, import_react38.createContext)(
   void 0
 );
-var ImageDataProvider = (0, import_react37.memo)(function ImageDataProvider2({
+var ImageDataProvider = (0, import_react38.memo)(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = (0, import_react37.useMemo)(
+  const contextValue = (0, import_react38.useMemo)(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ import_react37.default.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ import_react38.default.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = (0, import_react37.useContext)(ImageDataContext);
+  const value = (0, import_react38.useContext)(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -2808,15 +2816,15 @@ function useImageData(ref) {
 }
 
 // src/hooks/useObjectURL.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 function useObjectURL(object) {
-  const objectURL = (0, import_react38.useMemo)(() => {
+  const objectURL = (0, import_react39.useMemo)(() => {
     if (object instanceof Blob)
       return URL.createObjectURL(object);
     const bytes = object instanceof Uint8Array ? object : object !== void 0 ? new Uint8Array(object) : new Uint8Array();
     return URL.createObjectURL(new Blob([bytes]));
   }, [object]);
-  (0, import_react38.useLayoutEffect)(() => {
+  (0, import_react39.useLayoutEffect)(() => {
     return () => URL.revokeObjectURL(objectURL);
   }, [objectURL]);
   return objectURL;
@@ -2872,9 +2880,9 @@ var Background = import_styled_components20.default.span(({ background }) => ({
   position: "absolute",
   inset: 0
 }));
-var HorizontalDotsBackground = (0, import_react39.memo)(function HorizontalDotsBackground2() {
+var HorizontalDotsBackground = (0, import_react40.memo)(function HorizontalDotsBackground2() {
   const { inputBackground, placeholderDots } = (0, import_styled_components20.useTheme)().colors;
-  const background = (0, import_react39.useMemo)(
+  const background = (0, import_react40.useMemo)(
     () => [
       `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
         placeholderDots
@@ -2883,7 +2891,7 @@ var HorizontalDotsBackground = (0, import_react39.memo)(function HorizontalDotsB
     ].join(","),
     [inputBackground, placeholderDots]
   );
-  return /* @__PURE__ */ import_react39.default.createElement(Background, { background });
+  return /* @__PURE__ */ import_react40.default.createElement(Background, { background });
 });
 function getPatternSizeAndPosition(fillType, tileScale) {
   switch (fillType) {
@@ -2897,7 +2905,7 @@ function getPatternSizeAndPosition(fillType, tileScale) {
       return "center / 100% 100%";
   }
 }
-var PatternPreviewBackground = (0, import_react39.memo)(function PatternPreviewBackground2({
+var PatternPreviewBackground = (0, import_react40.memo)(function PatternPreviewBackground2({
   fillType,
   tileScale,
   imageRef
@@ -2905,7 +2913,7 @@ var PatternPreviewBackground = (0, import_react39.memo)(function PatternPreviewB
   const image = useImageData(imageRef);
   const url = useObjectURL(image);
   const size2 = getPatternSizeAndPosition(fillType, tileScale);
-  const background = (0, import_react39.useMemo)(
+  const background = (0, import_react40.useMemo)(
     () => [
       size2,
       `url(${url})`,
@@ -2913,37 +2921,37 @@ var PatternPreviewBackground = (0, import_react39.memo)(function PatternPreviewB
     ].join(" "),
     [fillType, size2, url]
   );
-  return /* @__PURE__ */ import_react39.default.createElement(Background, { background });
+  return /* @__PURE__ */ import_react40.default.createElement(Background, { background });
 });
-var ColorPreviewBackground = (0, import_react39.memo)(function ColorPreviewBackground2({
+var ColorPreviewBackground = (0, import_react40.memo)(function ColorPreviewBackground2({
   color
 }) {
-  const background = (0, import_react39.useMemo)(() => sketchColorToRgbaString(color), [color]);
-  return /* @__PURE__ */ import_react39.default.createElement(Background, { background });
+  const background = (0, import_react40.useMemo)(() => sketchColorToRgbaString(color), [color]);
+  return /* @__PURE__ */ import_react40.default.createElement(Background, { background });
 });
-var GradientPreviewBackground = (0, import_react39.memo)(function GradientPreviewBackground2({
+var GradientPreviewBackground = (0, import_react40.memo)(function GradientPreviewBackground2({
   gradient
 }) {
-  const background = (0, import_react39.useMemo)(
+  const background = (0, import_react40.useMemo)(
     () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
     [gradient.gradientType, gradient.stops]
   );
-  return /* @__PURE__ */ import_react39.default.createElement(Background, { background });
+  return /* @__PURE__ */ import_react40.default.createElement(Background, { background });
 });
-var FillPreviewBackground = (0, import_react39.memo)(function FillPreviewBackground2({
+var FillPreviewBackground = (0, import_react40.memo)(function FillPreviewBackground2({
   value
 }) {
   if (!value)
-    return /* @__PURE__ */ import_react39.default.createElement(HorizontalDotsBackground, null);
+    return /* @__PURE__ */ import_react40.default.createElement(HorizontalDotsBackground, null);
   switch (value._class) {
     case "color":
-      return /* @__PURE__ */ import_react39.default.createElement(ColorPreviewBackground, { color: value });
+      return /* @__PURE__ */ import_react40.default.createElement(ColorPreviewBackground, { color: value });
     case "gradient":
-      return /* @__PURE__ */ import_react39.default.createElement(GradientPreviewBackground, { gradient: value });
+      return /* @__PURE__ */ import_react40.default.createElement(GradientPreviewBackground, { gradient: value });
     case "pattern":
       if (!value.image)
         return null;
-      return /* @__PURE__ */ import_react39.default.createElement(
+      return /* @__PURE__ */ import_react40.default.createElement(
         PatternPreviewBackground,
         {
           fillType: value.patternFillType,
@@ -2973,16 +2981,16 @@ var Container = import_styled_components21.default.button(
     flex
   })
 );
-var FillInputField = (0, import_react40.memo)(
-  (0, import_react40.forwardRef)(function FillInputField2({ id, value, ...rest }, ref) {
-    return /* @__PURE__ */ import_react40.default.createElement(Container, { ref, id, ...rest }, /* @__PURE__ */ import_react40.default.createElement(FillPreviewBackground, { value }));
+var FillInputField = (0, import_react41.memo)(
+  (0, import_react41.forwardRef)(function FillInputField2({ id, value, ...rest }, ref) {
+    return /* @__PURE__ */ import_react41.default.createElement(Container, { ref, id, ...rest }, /* @__PURE__ */ import_react41.default.createElement(FillPreviewBackground, { value }));
   })
 );
 
 // src/components/GradientPicker.tsx
 var import_noya_colorpicker2 = require("@noya-app/noya-colorpicker");
-var import_react41 = __toESM(require("react"));
-var GradientPicker = (0, import_react41.memo)(function GradientPicker2({
+var import_react42 = __toESM(require("react"));
+var GradientPicker = (0, import_react42.memo)(function GradientPicker2({
   value,
   selectedStop,
   onChangeColor,
@@ -2991,7 +2999,7 @@ var GradientPicker = (0, import_react41.memo)(function GradientPicker2({
   onDelete,
   onSelectStop
 }) {
-  const colorModel = (0, import_react41.useMemo)(
+  const colorModel = (0, import_react42.useMemo)(
     () => ({
       defaultColor: { r: 0, g: 0, b: 0, a: 1 },
       toHsva: import_noya_colorpicker2.rgbaToHsva,
@@ -3000,30 +3008,30 @@ var GradientPicker = (0, import_react41.memo)(function GradientPicker2({
     }),
     []
   );
-  const rgbaColor = (0, import_react41.useMemo)(
+  const rgbaColor = (0, import_react42.useMemo)(
     () => sketchColorToRgba(value[selectedStop].color),
     [value, selectedStop]
   );
-  const handleChangeColor = (0, import_react41.useCallback)(
+  const handleChangeColor = (0, import_react42.useCallback)(
     (value2) => {
       onChangeColor(rgbaToSketchColor(value2));
     },
     [onChangeColor]
   );
-  const handleAddGradientStop = (0, import_react41.useCallback)(
+  const handleAddGradientStop = (0, import_react42.useCallback)(
     (value2, position) => {
       onAdd(rgbaToSketchColor(value2), position);
     },
     [onAdd]
   );
-  return /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(
     import_noya_colorpicker2.ColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ import_react41.default.createElement(
+    /* @__PURE__ */ import_react42.default.createElement(
       import_noya_colorpicker2.Gradient,
       {
         gradients: value,
@@ -3034,12 +3042,12 @@ var GradientPicker = (0, import_react41.memo)(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ import_react41.default.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ import_react41.default.createElement(import_noya_colorpicker2.Saturation, null),
-    /* @__PURE__ */ import_react41.default.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ import_react41.default.createElement(import_noya_colorpicker2.Hue, null),
-    /* @__PURE__ */ import_react41.default.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ import_react41.default.createElement(import_noya_colorpicker2.Alpha, null)
+    /* @__PURE__ */ import_react42.default.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ import_react42.default.createElement(import_noya_colorpicker2.Saturation, null),
+    /* @__PURE__ */ import_react42.default.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ import_react42.default.createElement(import_noya_colorpicker2.Hue, null),
+    /* @__PURE__ */ import_react42.default.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ import_react42.default.createElement(import_noya_colorpicker2.Alpha, null)
   );
 });
 
@@ -3071,12 +3079,12 @@ var Grid = import_styled_components22.default.div((props) => ({
 }));
 
 // src/components/GridView.tsx
-var import_react43 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 var import_styled_components24 = __toESM(require("styled-components"));
 
 // src/components/ScrollArea.tsx
 var RadixScrollArea = __toESM(require("@radix-ui/react-scroll-area"));
-var import_react42 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 var import_styled_components23 = __toESM(require("styled-components"));
 var SCROLLBAR_SIZE = 10;
 var StyledViewport = (0, import_styled_components23.default)(RadixScrollArea.Viewport)({
@@ -3104,18 +3112,18 @@ var Container2 = import_styled_components23.default.div({
   flex: "1 1 0px",
   minHeight: 0
 });
-var ScrollArea = (0, import_react42.memo)(function ScrollArea2({ children }) {
-  const [scrollElementRef, setScrollElementRef] = (0, import_react42.useState)(null);
-  return /* @__PURE__ */ import_react42.default.createElement(Container2, null, /* @__PURE__ */ import_react42.default.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ import_react42.default.createElement(
+var ScrollArea = (0, import_react43.memo)(function ScrollArea2({ children }) {
+  const [scrollElementRef, setScrollElementRef] = (0, import_react43.useState)(null);
+  return /* @__PURE__ */ import_react43.default.createElement(Container2, null, /* @__PURE__ */ import_react43.default.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ import_react43.default.createElement(
     StyledViewport,
     {
-      ref: (0, import_react42.useCallback)(
+      ref: (0, import_react43.useCallback)(
         (ref) => setScrollElementRef(ref),
         []
       )
     },
     typeof children === "function" ? scrollElementRef ? children(scrollElementRef) : null : children
-  ), /* @__PURE__ */ import_react42.default.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ import_react42.default.createElement(StyledThumb, { className: "scroll-component" }))));
+  ), /* @__PURE__ */ import_react43.default.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ import_react43.default.createElement(StyledThumb, { className: "scroll-component" }))));
 });
 
 // src/components/GridView.tsx
@@ -3295,7 +3303,7 @@ var Shimmer = import_styled_components24.default.div`
   align-items: end;
   padding: 4px;
 `;
-var GridViewItem = (0, import_react43.forwardRef)(function GridViewItem2({
+var GridViewItem = (0, import_react44.forwardRef)(function GridViewItem2({
   id,
   title,
   subtitle,
@@ -3311,15 +3319,15 @@ var GridViewItem = (0, import_react43.forwardRef)(function GridViewItem2({
   onContextMenu,
   style: style3
 }, forwardedRef) {
-  const [hovered, setHovered] = import_react43.default.useState(false);
+  const [hovered, setHovered] = import_react44.default.useState(false);
   const { hoverProps } = useHover({
     onHoverChange: (isHovering) => {
       onHoverChange?.(isHovering);
       setHovered(isHovering);
     }
   });
-  const { textPosition, bordered, disabled } = (0, import_react43.useContext)(GridViewContext);
-  const handleClick = (0, import_react43.useCallback)(
+  const { textPosition, bordered, disabled } = (0, import_react44.useContext)(GridViewContext);
+  const handleClick = (0, import_react44.useCallback)(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -3328,7 +3336,7 @@ var GridViewItem = (0, import_react43.forwardRef)(function GridViewItem2({
     },
     [onClick, onPress]
   );
-  const handleKeyDown = (0, import_react43.useCallback)(
+  const handleKeyDown = (0, import_react44.useCallback)(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.stopPropagation();
@@ -3340,7 +3348,7 @@ var GridViewItem = (0, import_react43.forwardRef)(function GridViewItem2({
     },
     [onPress]
   );
-  let element = /* @__PURE__ */ import_react43.default.createElement(
+  let element = /* @__PURE__ */ import_react44.default.createElement(
     ItemContainer,
     {
       id,
@@ -3349,7 +3357,7 @@ var GridViewItem = (0, import_react43.forwardRef)(function GridViewItem2({
       tabIndex: disabled ? void 0 : 0,
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ import_react43.default.createElement(
+    /* @__PURE__ */ import_react44.default.createElement(
       ContentContainer,
       {
         disabled,
@@ -3363,25 +3371,25 @@ var GridViewItem = (0, import_react43.forwardRef)(function GridViewItem2({
       },
       children
     ),
-    textPosition === "below" && /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, /* @__PURE__ */ import_react43.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react43.default.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ import_react43.default.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react43.default.createElement(TextOverlay, null, title && /* @__PURE__ */ import_react43.default.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ import_react43.default.createElement(ItemDescription, { showBackground: true }, subtitle)),
-    loading && /* @__PURE__ */ import_react43.default.createElement(Shimmer, null, /* @__PURE__ */ import_react43.default.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
+    textPosition === "below" && /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, /* @__PURE__ */ import_react44.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react44.default.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ import_react44.default.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react44.default.createElement(TextOverlay, null, title && /* @__PURE__ */ import_react44.default.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ import_react44.default.createElement(ItemDescription, { showBackground: true }, subtitle)),
+    loading && /* @__PURE__ */ import_react44.default.createElement(Shimmer, null, /* @__PURE__ */ import_react44.default.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
-    element = /* @__PURE__ */ import_react43.default.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
+    element = /* @__PURE__ */ import_react44.default.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
   }
   if (textPosition === "toolip") {
-    element = /* @__PURE__ */ import_react43.default.createElement(
+    element = /* @__PURE__ */ import_react44.default.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ import_react43.default.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ import_react43.default.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ import_react43.default.createElement(ItemDescription, { showBackground: false }, subtitle))
+        content: /* @__PURE__ */ import_react44.default.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ import_react44.default.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ import_react44.default.createElement(ItemDescription, { showBackground: false }, subtitle))
       },
       element
     );
   }
   return element;
 });
-var GridViewContext = (0, import_react43.createContext)({
+var GridViewContext = (0, import_react44.createContext)({
   size: "small",
   textPosition: "below",
   bordered: false,
@@ -3396,7 +3404,7 @@ function GridViewRoot({
   bordered = false,
   disabled = false
 }) {
-  const handleClick = (0, import_react43.useCallback)(
+  const handleClick = (0, import_react44.useCallback)(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -3404,7 +3412,7 @@ function GridViewRoot({
     },
     [onClick]
   );
-  const contextValue = (0, import_react43.useMemo)(
+  const contextValue = (0, import_react44.useMemo)(
     () => ({
       size: size2,
       textPosition,
@@ -3413,33 +3421,33 @@ function GridViewRoot({
     }),
     [bordered, disabled, size2, textPosition]
   );
-  return /* @__PURE__ */ import_react43.default.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react43.default.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ import_react43.default.createElement(ScrollArea, null, children) : children));
+  return /* @__PURE__ */ import_react44.default.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react44.default.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ import_react44.default.createElement(ScrollArea, null, children) : children));
 }
 function GridViewSection({
   children,
   padding = "20px"
 }) {
-  const { size: size2 } = (0, import_react43.useContext)(GridViewContext);
-  return /* @__PURE__ */ import_react43.default.createElement(Grid2, { size: size2, padding }, children);
+  const { size: size2 } = (0, import_react44.useContext)(GridViewContext);
+  return /* @__PURE__ */ import_react44.default.createElement(Grid2, { size: size2, padding }, children);
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
-  return /* @__PURE__ */ import_react43.default.createElement(SectionHeaderContainer, null, /* @__PURE__ */ import_react43.default.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
-    grouped.map((title2, index) => /* @__PURE__ */ import_react43.default.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
-    /* @__PURE__ */ import_react43.default.createElement(SectionTitle, null, " / ")
+  return /* @__PURE__ */ import_react44.default.createElement(SectionHeaderContainer, null, /* @__PURE__ */ import_react44.default.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
+    grouped.map((title2, index) => /* @__PURE__ */ import_react44.default.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
+    /* @__PURE__ */ import_react44.default.createElement(SectionTitle, null, " / ")
   ));
 }
 var GridView;
 ((GridView2) => {
-  GridView2.Root = (0, import_react43.memo)(GridViewRoot);
-  GridView2.Item = (0, import_react43.memo)(GridViewItem);
-  GridView2.Section = (0, import_react43.memo)(GridViewSection);
-  GridView2.SectionHeader = (0, import_react43.memo)(GridViewSectionHeader);
+  GridView2.Root = (0, import_react44.memo)(GridViewRoot);
+  GridView2.Item = (0, import_react44.memo)(GridViewItem);
+  GridView2.Section = (0, import_react44.memo)(GridViewSection);
+  GridView2.SectionHeader = (0, import_react44.memo)(GridViewSectionHeader);
 })(GridView || (GridView = {}));
 
 // src/components/InputFieldWithCompletions.tsx
 var import_noya_utils8 = require("@noya-app/noya-utils");
-var import_react47 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var import_styled_components27 = __toESM(require("styled-components"));
 
 // src/utils/fuzzyScorer.ts
@@ -3516,7 +3524,7 @@ function mergeRanges(ranges) {
 // src/components/ListView.tsx
 var import_noya_utils7 = require("@noya-app/noya-utils");
 var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react45 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var import_react_virtualized = require("react-virtualized");
 var import_react_window = require("react-window");
 var import_styled_components25 = __toESM(require("styled-components"));
@@ -3547,7 +3555,7 @@ function mergeEventHandlers(...handlerMaps) {
 // src/components/Sortable.tsx
 var import_core = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
-var import_react44 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var normalizeListDestinationIndex = (index, position) => {
   return position === "above" ? index : index + 1;
@@ -3561,7 +3569,7 @@ var defaultAcceptsDrop = (sourceIndex, destinationIndex, position) => {
   }
   return true;
 };
-var SortableItemContext = (0, import_react44.createContext)({
+var SortableItemContext = (0, import_react45.createContext)({
   keys: [],
   position: { x: 0, y: 0 },
   acceptsDrop: defaultAcceptsDrop,
@@ -3583,7 +3591,7 @@ function SortableItem({
   disabled,
   children
 }) {
-  const { keys, position, acceptsDrop, setActivatorEvent, axis } = (0, import_react44.useContext)(SortableItemContext);
+  const { keys, position, acceptsDrop, setActivatorEvent, axis } = (0, import_react45.useContext)(SortableItemContext);
   const sortable = (0, import_sortable.useSortable)({ id, disabled });
   const {
     active,
@@ -3603,7 +3611,7 @@ function SortableItem({
   const eventY = activatorEvent?.clientY ?? 0;
   const offsetLeft = eventX + position.x;
   const offsetTop = eventY + position.y;
-  const ref = (0, import_react44.useCallback)((node) => setNodeRef(node), [setNodeRef]);
+  const ref = (0, import_react45.useCallback)((node) => setNodeRef(node), [setNodeRef]);
   return children({
     ref,
     ...attributes,
@@ -3634,22 +3642,22 @@ function SortableRoot({
       }
     })
   );
-  const [activeIndex, setActiveIndex] = (0, import_react44.useState)();
-  const activatorEvent = (0, import_react44.useRef)(null);
-  const setActivatorEvent = (0, import_react44.useCallback)((event) => {
+  const [activeIndex, setActiveIndex] = (0, import_react45.useState)();
+  const activatorEvent = (0, import_react45.useRef)(null);
+  const setActivatorEvent = (0, import_react45.useCallback)((event) => {
     activatorEvent.current = event;
   }, []);
-  const [position, setPosition] = (0, import_react44.useState)({ x: 0, y: 0 });
-  const handleDragStart = (0, import_react44.useCallback)(
+  const [position, setPosition] = (0, import_react45.useState)({ x: 0, y: 0 });
+  const handleDragStart = (0, import_react45.useCallback)(
     (event) => {
       setActiveIndex(keys.indexOf(event.active.id));
     },
     [keys]
   );
-  const handleDragMove = (0, import_react44.useCallback)((event) => {
+  const handleDragMove = (0, import_react45.useCallback)((event) => {
     setPosition({ ...event.delta });
   }, []);
-  const handleDragEnd = (0, import_react44.useCallback)(
+  const handleDragEnd = (0, import_react45.useCallback)(
     (event) => {
       const { active, over } = event;
       setActiveIndex(void 0);
@@ -3676,10 +3684,10 @@ function SortableRoot({
     },
     [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
   );
-  return /* @__PURE__ */ import_react44.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     SortableItemContext.Provider,
     {
-      value: (0, import_react44.useMemo)(
+      value: (0, import_react45.useMemo)(
         () => ({
           keys,
           acceptsDrop,
@@ -3690,7 +3698,7 @@ function SortableRoot({
         [acceptsDrop, axis, keys, position, setActivatorEvent]
       )
     },
-    /* @__PURE__ */ import_react44.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement(
       import_core.DndContext,
       {
         sensors,
@@ -3699,9 +3707,9 @@ function SortableRoot({
         onDragMove: handleDragMove,
         onDragEnd: handleDragEnd
       },
-      /* @__PURE__ */ import_react44.default.createElement(import_sortable.SortableContext, { items: keys, strategy: import_sortable.verticalListSortingStrategy }, children),
+      /* @__PURE__ */ import_react45.default.createElement(import_sortable.SortableContext, { items: keys, strategy: import_sortable.verticalListSortingStrategy }, children),
       renderOverlay && (0, import_react_dom.createPortal)(
-        /* @__PURE__ */ import_react44.default.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
+        /* @__PURE__ */ import_react45.default.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
         document.body
       )
     )
@@ -3709,17 +3717,17 @@ function SortableRoot({
 }
 var Sortable;
 ((Sortable2) => {
-  Sortable2.Item = (0, import_react44.memo)(SortableItem);
-  Sortable2.Root = (0, import_react44.memo)(SortableRoot);
+  Sortable2.Item = (0, import_react45.memo)(SortableItem);
+  Sortable2.Root = (0, import_react45.memo)(SortableRoot);
 })(Sortable || (Sortable = {}));
 
 // src/components/ListView.tsx
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = 27;
-var DraggingContext = (0, import_react45.createContext)({
+var DraggingContext = (0, import_react46.createContext)({
   indentation: 12
 });
-var ListRowContext = (0, import_react45.createContext)({
+var ListRowContext = (0, import_react46.createContext)({
   marginType: "none",
   selectedPosition: "only",
   sortable: false,
@@ -3749,8 +3757,8 @@ function ListViewEditableRowTitle({
   autoFocus,
   placeholder
 }) {
-  const inputRef = (0, import_react45.useRef)(null);
-  (0, import_react45.useLayoutEffect)(() => {
+  const inputRef = (0, import_react46.useRef)(null);
+  (0, import_react46.useLayoutEffect)(() => {
     const element = inputRef.current;
     if (!element || !autoFocus)
       return;
@@ -3759,7 +3767,7 @@ function ListViewEditableRowTitle({
       element.select();
     }, 0);
   }, [autoFocus]);
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     ListViewEditableRowTitleElement,
     {
       ref: inputRef,
@@ -3881,7 +3889,7 @@ var ListViewDragIndicatorElement = import_styled_components25.default.div(({ the
     boxShadow: "0 0 2px rgba(0,0,0,0.5)"
   }
 }));
-var ListViewRow = (0, import_react45.forwardRef)(function ListViewRow2({
+var ListViewRow = (0, import_react46.forwardRef)(function ListViewRow2({
   id,
   tabIndex = 0,
   gap,
@@ -3900,7 +3908,8 @@ var ListViewRow = (0, import_react45.forwardRef)(function ListViewRow2({
   onContextMenu,
   onSelectMenuItem,
   onMenuOpenChange,
-  onKeyDown
+  onKeyDown,
+  style: style3
 }, forwardedRef) {
   depth = Math.max(0, depth);
   const {
@@ -3913,12 +3922,12 @@ var ListViewRow = (0, import_react45.forwardRef)(function ListViewRow2({
     divider,
     gap: listGap,
     colorScheme
-  } = (0, import_react45.useContext)(ListRowContext);
+  } = (0, import_react46.useContext)(ListRowContext);
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { indentation, isDragging } = (0, import_react45.useContext)(DraggingContext);
-  const handlePress = (0, import_react45.useCallback)(
+  const { indentation, isDragging } = (0, import_react46.useContext)(DraggingContext);
+  const handlePress = (0, import_react46.useCallback)(
     (event) => {
       event.preventDefault();
       if (event.button !== 0)
@@ -3927,25 +3936,26 @@ var ListViewRow = (0, import_react45.forwardRef)(function ListViewRow2({
     },
     [onPress]
   );
-  const handleDoubleClick = (0, import_react45.useCallback)(
+  const handleDoubleClick = (0, import_react46.useCallback)(
     (event) => {
       event.stopPropagation();
       onDoubleClick?.();
     },
     [onDoubleClick]
   );
-  const isDraggingStyle = (0, import_react45.useMemo)(() => {
+  const mergedStyle = (0, import_react46.useMemo)(() => {
     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
   }, ref) => {
-    const element = /* @__PURE__ */ import_react45.default.createElement(
+    const element = /* @__PURE__ */ import_react46.default.createElement(
       RowContainer,
       {
         ref,
@@ -3968,7 +3978,7 @@ var ListViewRow = (0, import_react45.forwardRef)(function ListViewRow2({
         "aria-selected": selected,
         divider: !isDragging && divider,
         onKeyDown,
-        style: isDraggingStyle,
+        style: mergedStyle,
         ...renderProps,
         ...mergeEventHandlers(
           { onPointerDown: renderProps.onPointerDown },
@@ -3976,7 +3986,7 @@ var ListViewRow = (0, import_react45.forwardRef)(function ListViewRow2({
         ),
         tabIndex
       },
-      relativeDropPosition && /* @__PURE__ */ import_react45.default.createElement(
+      relativeDropPosition && /* @__PURE__ */ import_react46.default.createElement(
         ListViewDragIndicatorElement,
         {
           colorScheme,
@@ -3985,11 +3995,11 @@ var ListViewRow = (0, import_react45.forwardRef)(function ListViewRow2({
           gap: listGap
         }
       ),
-      depth > 0 && /* @__PURE__ */ import_react45.default.createElement(Spacer.Horizontal, { size: depth * indentation }),
+      depth > 0 && /* @__PURE__ */ import_react46.default.createElement(Spacer.Horizontal, { size: depth * indentation }),
       children
     );
     if (menuItems && onSelectMenuItem) {
-      return /* @__PURE__ */ import_react45.default.createElement(
+      return /* @__PURE__ */ import_react46.default.createElement(
         ContextMenu,
         {
           items: menuItems,
@@ -4002,21 +4012,21 @@ var ListViewRow = (0, import_react45.forwardRef)(function ListViewRow2({
     return element;
   };
   if (sortable && id) {
-    return /* @__PURE__ */ import_react45.default.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(sortableProps, (0, import_react_compose_refs2.composeRefs)(sortableRef, forwardedRef)));
+    return /* @__PURE__ */ import_react46.default.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(sortableProps, (0, import_react_compose_refs2.composeRefs)(sortableRef, forwardedRef)));
   }
   return renderContent({}, forwardedRef);
 });
-var RenderItemContext = (0, import_react45.createContext)(
+var RenderItemContext = (0, import_react46.createContext)(
   () => null
 );
-var VirtualizedListRow = (0, import_react45.memo)(function VirtualizedListRow2({
+var VirtualizedListRow = (0, import_react46.memo)(function VirtualizedListRow2({
   index,
   style: style3
 }) {
-  const renderItem = (0, import_react45.useContext)(RenderItemContext);
-  return /* @__PURE__ */ import_react45.default.createElement("div", { key: index, style: style3 }, renderItem(index));
+  const renderItem = (0, import_react46.useContext)(RenderItemContext);
+  return /* @__PURE__ */ import_react46.default.createElement("div", { key: index, style: style3 }, renderItem(index));
 });
-var VirtualizedListInner = (0, import_react45.forwardRef)(function VirtualizedListInner2({
+var VirtualizedListInner = (0, import_react46.forwardRef)(function VirtualizedListInner2({
   size: size2,
   scrollElement,
   items,
@@ -4024,20 +4034,20 @@ var VirtualizedListInner = (0, import_react45.forwardRef)(function VirtualizedLi
   keyExtractor,
   renderItem
 }, ref) {
-  const listRef = (0, import_react45.useRef)(null);
-  (0, import_react45.useImperativeHandle)(ref, () => ({
+  const listRef = (0, import_react46.useRef)(null);
+  (0, import_react46.useImperativeHandle)(ref, () => ({
     scrollToIndex(index) {
       listRef.current?.scrollToItem(index);
     }
   }));
-  (0, import_react45.useLayoutEffect)(() => {
+  (0, import_react46.useLayoutEffect)(() => {
     listRef.current?.resetAfterIndex(0);
   }, [
     // When items change, we need to re-render the virtualized list,
     // since it doesn't currently support row height changes
     items
   ]);
-  const listStyle = (0, import_react45.useMemo)(
+  const listStyle = (0, import_react46.useMemo)(
     () => ({
       overflowX: "initial",
       overflowY: "initial",
@@ -4045,18 +4055,18 @@ var VirtualizedListInner = (0, import_react45.forwardRef)(function VirtualizedLi
     }),
     []
   );
-  return /* @__PURE__ */ import_react45.default.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ import_react46.default.createElement(
     import_react_virtualized.WindowScroller,
     {
       scrollElement,
-      style: (0, import_react45.useMemo)(() => ({ flex: "1 1 auto" }), [])
+      style: (0, import_react46.useMemo)(() => ({ flex: "1 1 auto" }), [])
     },
-    (0, import_react45.useCallback)(
+    (0, import_react46.useCallback)(
       ({
         registerChild,
         onChildScroll,
         scrollTop
-      }) => /* @__PURE__ */ import_react45.default.createElement("div", { ref: registerChild }, /* @__PURE__ */ import_react45.default.createElement(
+      }) => /* @__PURE__ */ import_react46.default.createElement("div", { ref: registerChild }, /* @__PURE__ */ import_react46.default.createElement(
         import_react_window.VariableSizeList,
         {
           ref: listRef,
@@ -4086,7 +4096,7 @@ var VirtualizedListInner = (0, import_react45.forwardRef)(function VirtualizedLi
     )
   ));
 });
-var VirtualizedList = (0, import_react45.memo)(
+var VirtualizedList = (0, import_react46.memo)(
   VirtualizedListInner
 );
 var RootContainer2 = import_styled_components25.default.div(({ theme, scrollable, gap }) => ({
@@ -4097,7 +4107,7 @@ var RootContainer2 = import_styled_components25.default.div(({ theme, scrollable
   color: theme.colors.textMuted,
   gap
 }));
-var ListViewRootInner = (0, import_react45.forwardRef)(function ListViewRootInner2({
+var ListViewRootInner = (0, import_react46.forwardRef)(function ListViewRootInner2({
   onPress,
   scrollable = false,
   expandable = true,
@@ -4116,7 +4126,7 @@ var ListViewRootInner = (0, import_react45.forwardRef)(function ListViewRootInne
   colorScheme = "primary",
   gap = 0
 }, forwardedRef) {
-  const handleClick = (0, import_react45.useCallback)(
+  const handleClick = (0, import_react46.useCallback)(
     (event) => {
       if (event.target instanceof HTMLElement && event.target.classList.contains("scroll-component"))
         return;
@@ -4126,19 +4136,19 @@ var ListViewRootInner = (0, import_react45.forwardRef)(function ListViewRootInne
     },
     [onPress]
   );
-  const renderChild = (0, import_react45.useCallback)(
+  const renderChild = (0, import_react46.useCallback)(
     (index) => renderItem(data[index], index, { isDragging: false }),
     [data, renderItem]
   );
-  const getItemContextValue = (0, import_react45.useCallback)(
+  const getItemContextValue = (0, import_react46.useCallback)(
     (i) => {
       const current = renderChild(i);
-      if (!(0, import_react45.isValidElement)(current))
+      if (!(0, import_react46.isValidElement)(current))
         return;
       const prevChild = i - 1 >= 0 && renderChild(i - 1);
       const nextChild = i + 1 < data.length && renderChild(i + 1);
-      const next = (0, import_react45.isValidElement)(nextChild) ? nextChild : void 0;
-      const prev = (0, import_react45.isValidElement)(prevChild) ? prevChild : void 0;
+      const next = (0, import_react46.isValidElement)(nextChild) ? nextChild : void 0;
+      const prev = (0, import_react46.isValidElement)(prevChild) ? prevChild : void 0;
       const hasMarginTop = !prev;
       const hasMarginBottom = !next || current.props.isSectionHeader || next && next.props.isSectionHeader;
       let marginType;
@@ -4190,26 +4200,26 @@ var ListViewRootInner = (0, import_react45.forwardRef)(function ListViewRootInne
       gap
     ]
   );
-  const draggingContextOverlayValue = (0, import_react45.useMemo)(
+  const draggingContextOverlayValue = (0, import_react46.useMemo)(
     () => ({ indentation, isDragging: true }),
     [indentation]
   );
-  const renderOverlay = (0, import_react45.useCallback)(
-    (index) => /* @__PURE__ */ import_react45.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react45.default.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
+  const renderOverlay = (0, import_react46.useCallback)(
+    (index) => /* @__PURE__ */ import_react46.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react46.default.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
-  const renderWrappedChild = (0, import_react45.useCallback)(
+  const renderWrappedChild = (0, import_react46.useCallback)(
     (index) => {
       const contextValue = getItemContextValue(index);
       const current = renderChild(index);
-      if (!contextValue || !(0, import_react45.isValidElement)(current))
+      if (!contextValue || !(0, import_react46.isValidElement)(current))
         return null;
-      return /* @__PURE__ */ import_react45.default.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
+      return /* @__PURE__ */ import_react46.default.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
     },
     [getItemContextValue, renderChild]
   );
-  const ids = (0, import_react45.useMemo)(() => data.map(keyExtractor), [keyExtractor, data]);
-  const withSortable = (children) => sortable ? /* @__PURE__ */ import_react45.default.createElement(
+  const ids = (0, import_react46.useMemo)(() => data.map(keyExtractor), [keyExtractor, data]);
+  const withSortable = (children) => sortable ? /* @__PURE__ */ import_react46.default.createElement(
     Sortable.Root,
     {
       onMoveItem,
@@ -4219,8 +4229,8 @@ var ListViewRootInner = (0, import_react45.forwardRef)(function ListViewRootInne
     },
     children
   ) : children;
-  const withScrollable = (children) => scrollable ? /* @__PURE__ */ import_react45.default.createElement(ScrollArea, null, children) : children(null);
-  const getItemHeight = (0, import_react45.useCallback)(
+  const withScrollable = (children) => scrollable ? /* @__PURE__ */ import_react46.default.createElement(ScrollArea, null, children) : children(null);
+  const getItemHeight = (0, import_react46.useCallback)(
     (index) => {
       const child = getItemContextValue(index);
       const margin = child?.marginType ? getPositionMargin(child.marginType) : { top: 0, bottom: 0 };
@@ -4229,12 +4239,12 @@ var ListViewRootInner = (0, import_react45.forwardRef)(function ListViewRootInne
     },
     [getItemContextValue, variant]
   );
-  const getKey = (0, import_react45.useCallback)(
+  const getKey = (0, import_react46.useCallback)(
     (index) => keyExtractor(data[index], index),
     [data, keyExtractor]
   );
-  const draggingContextValue = (0, import_react45.useMemo)(() => ({ indentation }), [indentation]);
-  return /* @__PURE__ */ import_react45.default.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react45.default.createElement(
+  const draggingContextValue = (0, import_react46.useMemo)(() => ({ indentation }), [indentation]);
+  return /* @__PURE__ */ import_react46.default.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react46.default.createElement(
     RootContainer2,
     {
       ...{
@@ -4245,7 +4255,7 @@ var ListViewRootInner = (0, import_react45.forwardRef)(function ListViewRootInne
     },
     withScrollable(
       (scrollElementRef) => withSortable(
-        virtualized ? /* @__PURE__ */ import_react45.default.createElement(
+        virtualized ? /* @__PURE__ */ import_react46.default.createElement(
           VirtualizedList,
           {
             ref: forwardedRef,
@@ -4261,42 +4271,42 @@ var ListViewRootInner = (0, import_react45.forwardRef)(function ListViewRootInne
     )
   ));
 });
-var ListViewRoot = (0, import_react45.memo)(ListViewRootInner);
-var ChildrenListViewInner = (0, import_react45.forwardRef)(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
-  const items = (0, import_react45.useMemo)(
-    () => import_react45.Children.toArray(children).flatMap(
-      (child) => (0, import_react45.isValidElement)(child) ? [child] : []
+var ListViewRoot = (0, import_react46.memo)(ListViewRootInner);
+var ChildrenListViewInner = (0, import_react46.forwardRef)(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
+  const items = (0, import_react46.useMemo)(
+    () => import_react46.Children.toArray(children).flatMap(
+      (child) => (0, import_react46.isValidElement)(child) ? [child] : []
     ),
     [children]
   );
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     ListViewRoot,
     {
       ref: forwardedRef,
       ...rest,
       data: items,
-      keyExtractor: (0, import_react45.useCallback)(
+      keyExtractor: (0, import_react46.useCallback)(
         ({ key }, index) => typeof key === "string" ? key : (key ?? index).toString(),
         []
       ),
-      renderItem: (0, import_react45.useCallback)((item) => item, [])
+      renderItem: (0, import_react46.useCallback)((item) => item, [])
     }
   );
 });
-var ChildrenListView = (0, import_react45.memo)(ChildrenListViewInner);
-var SimpleListViewInner = (0, import_react45.forwardRef)(function SimpleListViewInner2(props, forwardedRef) {
+var ChildrenListView = (0, import_react46.memo)(ChildrenListViewInner);
+var SimpleListViewInner = (0, import_react46.forwardRef)(function SimpleListViewInner2(props, forwardedRef) {
   if ("children" in props) {
-    return /* @__PURE__ */ import_react45.default.createElement(ChildrenListView, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ import_react46.default.createElement(ChildrenListView, { ref: forwardedRef, ...props });
   } else {
-    return /* @__PURE__ */ import_react45.default.createElement(ListViewRoot, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ import_react46.default.createElement(ListViewRoot, { ref: forwardedRef, ...props });
   }
 });
-var SimpleListView = (0, import_react45.memo)(SimpleListViewInner);
+var SimpleListView = (0, import_react46.memo)(SimpleListViewInner);
 var ListView;
 ((ListView2) => {
-  ListView2.RowTitle = (0, import_react45.memo)(ListViewRowTitle);
-  ListView2.EditableRowTitle = (0, import_react45.memo)(ListViewEditableRowTitle);
-  ListView2.Row = (0, import_react45.memo)(ListViewRow);
+  ListView2.RowTitle = (0, import_react46.memo)(ListViewRowTitle);
+  ListView2.EditableRowTitle = (0, import_react46.memo)(ListViewEditableRowTitle);
+  ListView2.Row = (0, import_react46.memo)(ListViewRow);
   ListView2.Root = SimpleListView;
   ListView2.RowContext = ListRowContext;
   ListView2.DragIndicator = ListViewDragIndicatorElement;
@@ -4309,7 +4319,7 @@ var ListView;
 })(ListView || (ListView = {}));
 
 // src/components/Text.tsx
-var import_react46 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 var import_styled_components26 = __toESM(require("styled-components"));
 var elements = {
   title: "h1",
@@ -4330,7 +4340,7 @@ var StyledElement = import_styled_components26.default.span(({ theme, variant, s
   ...styleProps,
   ...mergeBreakpoints(breakpoints || [])
 }));
-var Text = (0, import_react46.forwardRef)(function Text2({
+var Text = (0, import_react47.forwardRef)(function Text2({
   as,
   variant,
   breakpoints,
@@ -4342,7 +4352,7 @@ var Text = (0, import_react46.forwardRef)(function Text2({
   ...rest
 }, forwardedRef) {
   const element = as ?? elements[variant] ?? "span";
-  return /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(
     StyledElement,
     {
       ref: forwardedRef,
@@ -4358,28 +4368,28 @@ var Text = (0, import_react46.forwardRef)(function Text2({
     children
   );
 });
-var Heading1 = (0, import_react46.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react46.default.createElement(Text, { ref, ...props, variant: "heading1" })
+var Heading1 = (0, import_react47.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react47.default.createElement(Text, { ref, ...props, variant: "heading1" })
 );
-var Heading2 = (0, import_react46.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react46.default.createElement(Text, { ref, ...props, variant: "heading2" })
+var Heading2 = (0, import_react47.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react47.default.createElement(Text, { ref, ...props, variant: "heading2" })
 );
-var Heading3 = (0, import_react46.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react46.default.createElement(Text, { ref, ...props, variant: "heading3" })
+var Heading3 = (0, import_react47.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react47.default.createElement(Text, { ref, ...props, variant: "heading3" })
 );
-var Heading4 = (0, import_react46.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react46.default.createElement(Text, { ref, ...props, variant: "heading4" })
+var Heading4 = (0, import_react47.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react47.default.createElement(Text, { ref, ...props, variant: "heading4" })
 );
-var Heading5 = (0, import_react46.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react46.default.createElement(Text, { ref, ...props, variant: "heading5" })
+var Heading5 = (0, import_react47.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react47.default.createElement(Text, { ref, ...props, variant: "heading5" })
 );
-var Body = (0, import_react46.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react46.default.createElement(Text, { ref, ...props, variant: "body" })
+var Body = (0, import_react47.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react47.default.createElement(Text, { ref, ...props, variant: "body" })
 );
-var Small = (0, import_react46.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react46.default.createElement(Text, { ref, ...props, variant: "small" })
+var Small = (0, import_react47.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react47.default.createElement(Text, { ref, ...props, variant: "small" })
 );
-var Italic = ({ children }) => /* @__PURE__ */ import_react46.default.createElement(
+var Italic = ({ children }) => /* @__PURE__ */ import_react47.default.createElement(
   "span",
   {
     style: {
@@ -4421,15 +4431,15 @@ var CompletionToken = import_styled_components27.default.span(
     whiteSpace: "pre"
   })
 );
-var CompletionMenu = (0, import_react47.memo)(
-  (0, import_react47.forwardRef)(function CompletionMenu2({
+var CompletionMenu = (0, import_react48.memo)(
+  (0, import_react48.forwardRef)(function CompletionMenu2({
     items,
     selectedIndex,
     onSelectItem,
     onHoverIndex,
     listSize
   }, forwardedRef) {
-    return /* @__PURE__ */ import_react47.default.createElement(
+    return /* @__PURE__ */ import_react48.default.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -4441,13 +4451,13 @@ var CompletionMenu = (0, import_react47.memo)(
         sectionHeaderVariant: "label",
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ import_react47.default.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
+            return /* @__PURE__ */ import_react48.default.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
           }
           const tokens = fuzzyTokenize({
             item: item.name,
             itemScore: item
           });
-          return /* @__PURE__ */ import_react47.default.createElement(
+          return /* @__PURE__ */ import_react48.default.createElement(
             ListView.Row,
             {
               key: item.id,
@@ -4459,16 +4469,16 @@ var CompletionMenu = (0, import_react47.memo)(
                 }
               }
             },
-            tokens.map((token, j) => /* @__PURE__ */ import_react47.default.createElement(CompletionToken, { key: j, type: token.type }, token.text)),
-            item.icon && /* @__PURE__ */ import_react47.default.createElement(import_react47.default.Fragment, null, /* @__PURE__ */ import_react47.default.createElement(Spacer.Horizontal, null), item.icon)
+            tokens.map((token, j) => /* @__PURE__ */ import_react48.default.createElement(CompletionToken, { key: j, type: token.type }, token.text)),
+            item.icon && /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement(Spacer.Horizontal, null), item.icon)
           );
         }
       }
     );
   })
 );
-var InputFieldWithCompletions = (0, import_react47.memo)(
-  (0, import_react47.forwardRef)(function InputFieldWithCompletions2({
+var InputFieldWithCompletions = (0, import_react48.memo)(
+  (0, import_react48.forwardRef)(function InputFieldWithCompletions2({
     loading,
     initialValue = "",
     placeholder,
@@ -4486,13 +4496,13 @@ var InputFieldWithCompletions = (0, import_react47.memo)(
     hideChildrenWhenFocused = false,
     hideMenuWhenEmptyValue = false
   }, forwardedRef) {
-    const ref = (0, import_react47.useRef)(null);
-    const [isFocused, setIsFocused] = (0, import_react47.useState)(false);
-    const [state, _setState] = (0, import_react47.useState)({
+    const ref = (0, import_react48.useRef)(null);
+    const [isFocused, setIsFocused] = (0, import_react48.useState)(false);
+    const [state, _setState] = (0, import_react48.useState)({
       filter: initialValue,
       selectedIndex: 0
     });
-    const updateState = (0, import_react47.useCallback)(
+    const updateState = (0, import_react48.useCallback)(
       (newState, hoverItem) => {
         const nextState = { ...state, ...newState };
         const nextItems = filterWithGroupedSections(items, nextState.filter);
@@ -4521,16 +4531,16 @@ var InputFieldWithCompletions = (0, import_react47.memo)(
       },
       [items, onChange, onHoverItem, state]
     );
-    const initialValueRef = (0, import_react47.useRef)(initialValue);
-    (0, import_react47.useLayoutEffect)(() => {
+    const initialValueRef = (0, import_react48.useRef)(initialValue);
+    (0, import_react48.useLayoutEffect)(() => {
       if (initialValueRef.current === initialValue)
         return;
       initialValueRef.current = initialValue;
       updateState({ filter: initialValue });
     }, [initialValue, updateState]);
     const { filter, selectedIndex } = state;
-    const listRef = import_react47.default.useRef(null);
-    const filteredItems = (0, import_react47.useMemo)(
+    const listRef = import_react48.default.useRef(null);
+    const filteredItems = (0, import_react48.useMemo)(
       () => filterWithGroupedSections(items, filter),
       [items, filter]
     );
@@ -4546,13 +4556,13 @@ var InputFieldWithCompletions = (0, import_react47.memo)(
       ),
       ListView.rowHeight * 10.5
     );
-    (0, import_react47.useEffect)(() => {
+    (0, import_react48.useEffect)(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
-    const lastSubmittedValueRef = (0, import_react47.useRef)(void 0);
-    const selectItem = (0, import_react47.useCallback)(
+    const lastSubmittedValueRef = (0, import_react48.useRef)(void 0);
+    const selectItem = (0, import_react48.useCallback)(
       (item) => {
         if (item.type === "sectionHeader")
           return;
@@ -4568,17 +4578,17 @@ var InputFieldWithCompletions = (0, import_react47.memo)(
       },
       [filter, onSelectItem, onHoverItem, ref]
     );
-    const handleChange = (0, import_react47.useCallback)(
+    const handleChange = (0, import_react48.useCallback)(
       (value) => updateState({ selectedIndex: 0, filter: value }),
       [updateState]
     );
-    const handleBlur = (0, import_react47.useCallback)(() => {
+    const handleBlur = (0, import_react48.useCallback)(() => {
       setIsFocused(false);
       const didSubmit = lastSubmittedValueRef.current?.filter === filter;
       updateState({ selectedIndex: 0, filter: initialValue }, "resetHover");
       onBlur?.(didSubmit, filter);
     }, [filter, initialValue, onBlur, updateState]);
-    const handleFocus = (0, import_react47.useCallback)(
+    const handleFocus = (0, import_react48.useCallback)(
       (event) => {
         setIsFocused(true);
         updateState({ selectedIndex: 0, filter: initialValue });
@@ -4586,11 +4596,11 @@ var InputFieldWithCompletions = (0, import_react47.memo)(
       },
       [initialValue, onFocus, updateState]
     );
-    const handleIndexChange = (0, import_react47.useCallback)(
+    const handleIndexChange = (0, import_react48.useCallback)(
       (index) => updateState({ selectedIndex: index }),
       [updateState]
     );
-    const handleKeyDown = (0, import_react47.useCallback)(
+    const handleKeyDown = (0, import_react48.useCallback)(
       (event) => {
         let handled = false;
         switch (event.key) {
@@ -4654,7 +4664,7 @@ var InputFieldWithCompletions = (0, import_react47.memo)(
     );
     const display = !filter && hideMenuWhenEmptyValue ? "none" : "flex";
     const typeaheadValue = filteredItems[selectedIndex]?.name;
-    (0, import_react47.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react48.useImperativeHandle)(forwardedRef, () => ({
       focus: () => {
         ref.current?.focus();
       },
@@ -4665,14 +4675,14 @@ var InputFieldWithCompletions = (0, import_react47.memo)(
         ref.current?.setSelectionRange(0, ref.current.value.length);
       }
     }));
-    return /* @__PURE__ */ import_react47.default.createElement(
+    return /* @__PURE__ */ import_react48.default.createElement(
       InputField.Root,
       {
         size: size2,
         labelSize: 16,
         renderPopoverContent: ({ width }) => {
           const listSize = { width, height };
-          return /* @__PURE__ */ import_react47.default.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ import_react47.default.createElement(
+          return /* @__PURE__ */ import_react48.default.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ import_react48.default.createElement(
             CompletionMenu,
             {
               ref: listRef,
@@ -4682,7 +4692,7 @@ var InputFieldWithCompletions = (0, import_react47.memo)(
               onHoverIndex: handleIndexChange,
               listSize
             }
-          ) : /* @__PURE__ */ import_react47.default.createElement(
+          ) : /* @__PURE__ */ import_react48.default.createElement(
             Stack.V,
             {
               height: "100px",
@@ -4690,11 +4700,11 @@ var InputFieldWithCompletions = (0, import_react47.memo)(
               alignItems: "center",
               justifyContent: "center"
             },
-            /* @__PURE__ */ import_react47.default.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
+            /* @__PURE__ */ import_react48.default.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
           ));
         }
       },
-      /* @__PURE__ */ import_react47.default.createElement(
+      /* @__PURE__ */ import_react48.default.createElement(
         InputField.Input,
         {
           ref,
@@ -4718,9 +4728,9 @@ var InputFieldWithCompletions = (0, import_react47.memo)(
           "aria-controls": "component-listbox"
         }
       ),
-      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ import_react47.default.createElement(InputField.Typeahead, { value: typeaheadValue }),
+      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ import_react48.default.createElement(InputField.Typeahead, { value: typeaheadValue }),
       (!isFocused || !hideChildrenWhenFocused) && children,
-      loading && isFocused && /* @__PURE__ */ import_react47.default.createElement(InputField.Label, null, /* @__PURE__ */ import_react47.default.createElement(ActivityIndicator, null))
+      loading && isFocused && /* @__PURE__ */ import_react48.default.createElement(InputField.Label, null, /* @__PURE__ */ import_react48.default.createElement(ActivityIndicator, null))
     );
   })
 );
@@ -4742,7 +4752,7 @@ function getNextIndex(items, currentIndex, direction, isDisabled) {
 }
 
 // src/components/Label.tsx
-var import_react48 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 var import_styled_components28 = __toESM(require("styled-components"));
 var LabelLabel = import_styled_components28.default.label(
   ({ theme, selected }) => ({
@@ -4771,17 +4781,17 @@ var LabelContainer2 = import_styled_components28.default.span(({ theme }) => ({
   alignItems: "center"
 }));
 function LabelRoot({ label, children }) {
-  return /* @__PURE__ */ import_react48.default.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ import_react48.default.createElement(LabelLabel, null, label)));
+  return /* @__PURE__ */ import_react49.default.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ import_react49.default.createElement(import_react49.default.Fragment, null, /* @__PURE__ */ import_react49.default.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ import_react49.default.createElement(LabelLabel, null, label)));
 }
 var Label;
 ((_Label) => {
-  _Label.Label = (0, import_react48.memo)(LabelLabel);
-  _Label.Root = (0, import_react48.memo)(LabelRoot);
+  _Label.Label = (0, import_react49.memo)(LabelLabel);
+  _Label.Root = (0, import_react49.memo)(LabelRoot);
 })(Label || (Label = {}));
 
 // src/components/LabeledElementView.tsx
 var kiwi = __toESM(require("kiwi.js"));
-var import_react49 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var import_styled_components29 = __toESM(require("styled-components"));
 var Container4 = import_styled_components29.default.div(({ theme }) => ({
   display: "flex",
@@ -4800,24 +4810,24 @@ var Labels = import_styled_components29.default.div(({ theme }) => ({
   overflow: "hidden",
   userSelect: "none"
 }));
-var LabeledElementView = (0, import_react49.memo)(function LabeledElementView2({
+var LabeledElementView = (0, import_react50.memo)(function LabeledElementView2({
   children,
   renderLabel
 }) {
-  const elementIds = import_react49.Children.toArray(children).flatMap(
-    (child) => (0, import_react49.isValidElement)(child) && child.type === import_react49.Fragment ? child.props.children : [child]
+  const elementIds = import_react50.Children.toArray(children).flatMap(
+    (child) => (0, import_react50.isValidElement)(child) && child.type === import_react50.Fragment ? child.props.children : [child]
   ).map(
-    (child) => (0, import_react49.isValidElement)(child) && "id" in child.props ? child.props.id : null
+    (child) => (0, import_react50.isValidElement)(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = (0, import_react49.useRef)(null);
-  const refs = (0, import_react49.useMemo)(() => {
+  const containerRef = (0, import_react50.useRef)(null);
+  const refs = (0, import_react50.useMemo)(() => {
     return Object.fromEntries(
-      serializedIds.split(",").map((id) => [id, (0, import_react49.createRef)()])
+      serializedIds.split(",").map((id) => [id, (0, import_react50.createRef)()])
     );
   }, [serializedIds]);
-  const labelElements = (0, import_react49.useMemo)(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ import_react49.default.createElement(
+  const labelElements = (0, import_react50.useMemo)(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ import_react50.default.createElement(
       "span",
       {
         key: id,
@@ -4830,7 +4840,7 @@ var LabeledElementView = (0, import_react49.memo)(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  (0, import_react49.useLayoutEffect)(() => {
+  (0, import_react50.useLayoutEffect)(() => {
     if (!containerRef.current)
       return;
     const containerRect = containerRef.current.getBoundingClientRect();
@@ -4895,13 +4905,13 @@ var LabeledElementView = (0, import_react49.memo)(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ import_react49.default.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ import_react49.default.createElement(Tools, null, children), /* @__PURE__ */ import_react49.default.createElement(Labels, null, labelElements));
+  return /* @__PURE__ */ import_react50.default.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ import_react50.default.createElement(Tools, null, children), /* @__PURE__ */ import_react50.default.createElement(Labels, null, labelElements));
 });
 
 // src/components/Progress.tsx
 var import_noya_utils9 = require("@noya-app/noya-utils");
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var import_react50 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var import_styled_components30 = __toESM(require("styled-components"));
 function Progress({
   value,
@@ -4911,7 +4921,7 @@ function Progress({
   variant = "normal"
 }) {
   const clampedValue = (0, import_noya_utils9.clamp)(value, 0, 100);
-  return /* @__PURE__ */ import_react50.default.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ import_react51.default.createElement(
     ProgressIndicator,
     {
       variant,
@@ -4936,7 +4946,7 @@ var ProgressIndicator = (0, import_styled_components30.default)(ProgressPrimitiv
 
 // src/components/RadioGroup.tsx
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"));
-var import_react51 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var import_styled_components31 = __toESM(require("styled-components"));
 var ignoredProps3 = /* @__PURE__ */ new Set(["colorScheme"]);
 var StyledRoot = (0, import_styled_components31.default)(ToggleGroupPrimitive.Root).withConfig({
@@ -4989,9 +4999,9 @@ var StyledItem = (0, import_styled_components31.default)(ToggleGroupPrimitive.It
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors[colorScheme ?? "primary"]}`
   }
 }));
-var ToggleGroupItem = (0, import_react51.forwardRef)(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
-  const { colorScheme } = (0, import_react51.useContext)(RadioGroupContext);
-  const itemElement = /* @__PURE__ */ import_react51.default.createElement(
+var ToggleGroupItem = (0, import_react52.forwardRef)(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
+  const { colorScheme } = (0, import_react52.useContext)(RadioGroupContext);
+  const itemElement = /* @__PURE__ */ import_react52.default.createElement(
     StyledItem,
     {
       ref: forwardedRef,
@@ -5001,9 +5011,9 @@ var ToggleGroupItem = (0, import_react51.forwardRef)(function ToggleGroupItem2({
     },
     children
   );
-  return tooltip ? /* @__PURE__ */ import_react51.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ import_react52.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
-var RadioGroupContext = (0, import_react51.createContext)({
+var RadioGroupContext = (0, import_react52.createContext)({
   colorScheme: "primary"
 });
 function ToggleGroupRoot({
@@ -5014,8 +5024,8 @@ function ToggleGroupRoot({
   allowEmpty,
   children
 }) {
-  const contextValue = (0, import_react51.useMemo)(() => ({ colorScheme }), [colorScheme]);
-  const handleValueChange = (0, import_react51.useCallback)(
+  const contextValue = (0, import_react52.useMemo)(() => ({ colorScheme }), [colorScheme]);
+  const handleValueChange = (0, import_react52.useCallback)(
     (value2) => {
       if (!allowEmpty && !value2)
         return;
@@ -5023,7 +5033,7 @@ function ToggleGroupRoot({
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ import_react51.default.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react51.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react52.default.createElement(
     StyledRoot,
     {
       id,
@@ -5037,28 +5047,28 @@ function ToggleGroupRoot({
 }
 var RadioGroup;
 ((RadioGroup2) => {
-  RadioGroup2.Root = (0, import_react51.memo)(ToggleGroupRoot);
-  RadioGroup2.Item = (0, import_react51.memo)(ToggleGroupItem);
+  RadioGroup2.Root = (0, import_react52.memo)(ToggleGroupRoot);
+  RadioGroup2.Item = (0, import_react52.memo)(ToggleGroupItem);
 })(RadioGroup || (RadioGroup = {}));
 
 // src/components/Select.tsx
 var import_noya_utils10 = require("@noya-app/noya-utils");
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var import_styled_components32 = __toESM(require("styled-components"));
-var SelectContext = (0, import_react52.createContext)(void 0);
-var SelectOption = (0, import_react52.memo)(function SelectOption2({
+var SelectContext = (0, import_react53.createContext)(void 0);
+var SelectOption = (0, import_react53.memo)(function SelectOption2({
   value,
   title,
   onSelect
 }) {
-  const { addListener, removeListener } = (0, import_react52.useContext)(SelectContext);
-  (0, import_react52.useEffect)(() => {
+  const { addListener, removeListener } = (0, import_react53.useContext)(SelectContext);
+  (0, import_react53.useEffect)(() => {
     if (!onSelect)
       return;
     addListener(value, onSelect);
     return () => removeListener(value);
   }, [addListener, onSelect, removeListener, value]);
-  return /* @__PURE__ */ import_react52.default.createElement("option", { value }, title ?? value);
+  return /* @__PURE__ */ import_react53.default.createElement("option", { value }, title ?? value);
 });
 var createChevronSVGString = (0, import_noya_utils10.memoize)(
   (color) => `
@@ -5098,7 +5108,7 @@ var SelectElement = import_styled_components32.default.select(
     }
   })
 );
-var Select = (0, import_react52.memo)(function Select2({
+var Select = (0, import_react53.memo)(function Select2({
   id,
   flex,
   value,
@@ -5108,8 +5118,8 @@ var Select = (0, import_react52.memo)(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 = (0, import_react52.useMemo)(
-    () => options ? options.map((option, index) => /* @__PURE__ */ import_react52.default.createElement(
+  const optionElements = (0, import_react53.useMemo)(
+    () => options ? options.map((option, index) => /* @__PURE__ */ import_react53.default.createElement(
       SelectOption,
       {
         key: option,
@@ -5120,21 +5130,21 @@ var Select = (0, import_react52.memo)(function Select2({
     )) : children,
     [children, getTitle, onChange, options]
   );
-  const listeners = (0, import_react52.useRef)(/* @__PURE__ */ new Map());
-  const contextValue = (0, import_react52.useMemo)(
+  const listeners = (0, import_react53.useRef)(/* @__PURE__ */ new Map());
+  const contextValue = (0, import_react53.useMemo)(
     () => ({
       addListener: (value2, listener) => listeners.current.set(value2, listener),
       removeListener: (value2) => listeners.current.delete(value2)
     }),
     []
   );
-  return /* @__PURE__ */ import_react52.default.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react52.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react53.default.createElement(
     SelectElement,
     {
       id,
       flex,
       value,
-      onChange: (0, import_react52.useCallback)(
+      onChange: (0, import_react53.useCallback)(
         (event) => listeners.current.get(event.target.value)?.(),
         [listeners]
       ),
@@ -5146,7 +5156,7 @@ var Select = (0, import_react52.memo)(function Select2({
 
 // src/components/Slider.tsx
 var RadixSlider = __toESM(require("@radix-ui/react-slider"));
-var import_react53 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 var import_styled_components33 = __toESM(require("styled-components"));
 var StyledSlider = (0, import_styled_components33.default)(RadixSlider.Root)({
   flex: "1",
@@ -5187,17 +5197,17 @@ var Slider = function Slider2({
   min,
   max
 }) {
-  const arrayValue = (0, import_react53.useMemo)(
+  const arrayValue = (0, import_react54.useMemo)(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
-  const handleValueChange = (0, import_react53.useCallback)(
+  const handleValueChange = (0, import_react54.useCallback)(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ import_react53.default.createElement(
+  return /* @__PURE__ */ import_react54.default.createElement(
     StyledSlider,
     {
       min,
@@ -5206,14 +5216,14 @@ var Slider = function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange
     },
-    /* @__PURE__ */ import_react53.default.createElement(StyledTrack, null, /* @__PURE__ */ import_react53.default.createElement(StyledRange, null)),
-    /* @__PURE__ */ import_react53.default.createElement(StyledThumb2, null)
+    /* @__PURE__ */ import_react54.default.createElement(StyledTrack, null, /* @__PURE__ */ import_react54.default.createElement(StyledRange, null)),
+    /* @__PURE__ */ import_react54.default.createElement(StyledThumb2, null)
   );
 };
 
 // src/components/Switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var import_react54 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 var import_styled_components34 = __toESM(require("styled-components"));
 var SwitchRoot = (0, import_styled_components34.default)(SwitchPrimitive.Root)(({ theme, colorScheme: variant }) => ({
   all: "unset",
@@ -5249,7 +5259,7 @@ var Switch = function Switch2({
   onChange,
   colorScheme = "normal"
 }) {
-  return /* @__PURE__ */ import_react54.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(
     SwitchRoot,
     {
       colorScheme,
@@ -5258,42 +5268,42 @@ var Switch = function Switch2({
         onChange(newValue);
       }
     },
-    /* @__PURE__ */ import_react54.default.createElement(SwitchThumb, null)
+    /* @__PURE__ */ import_react55.default.createElement(SwitchThumb, null)
   );
 };
 
 // src/components/TreeView.tsx
-var import_react55 = __toESM(require("react"));
-var TreeRow = (0, import_react55.forwardRef)(function TreeRow2({
+var import_react56 = __toESM(require("react"));
+var TreeRow = (0, import_react56.forwardRef)(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
   children,
   ...rest
 }, forwardedRef) {
-  const { expandable } = (0, import_react55.useContext)(ListView.RowContext);
-  const handleClickChevron = (0, import_react55.useCallback)(
+  const { expandable } = (0, import_react56.useContext)(ListView.RowContext);
+  const handleClickChevron = (0, import_react56.useCallback)(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ import_react55.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react55.default.createElement(import_react55.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react55.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react56.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react56.default.createElement(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon" : "ChevronRightIcon",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react55.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react55.default.createElement(import_react55.default.Fragment, null, icon, /* @__PURE__ */ import_react55.default.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ import_react56.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, icon, /* @__PURE__ */ import_react56.default.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
   TreeView2.Root = ListView.Root;
   TreeView2.RowTitle = ListView.RowTitle;
   TreeView2.EditableRowTitle = ListView.EditableRowTitle;
-  TreeView2.Row = (0, import_react55.memo)(TreeRow);
+  TreeView2.Row = (0, import_react56.memo)(TreeRow);
 })(TreeView || (TreeView = {}));
 
 // src/hooks/usePlatform.ts
@@ -5601,7 +5611,7 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/ArrayController.tsx
 var import_noya_utils11 = require("@noya-app/noya-utils");
-var import_react57 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var import_styled_components36 = __toESM(require("styled-components"));
 
 // src/components/InspectorPrimitives.tsx
@@ -5620,7 +5630,7 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react56 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 var import_styled_components35 = __toESM(require("styled-components"));
 var Section = import_styled_components35.default.div(({ theme, padding = "10px", gap }) => ({
   flex: "0 0 auto",
@@ -5667,8 +5677,8 @@ var Checkbox = import_styled_components35.default.input(({ theme }) => ({
 var Text3 = import_styled_components35.default.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ import_react56.default.createElement(Spacer.Vertical, { size: (0, import_styled_components35.useTheme)().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react56.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components35.useTheme)().sizes.inspector.horizontalSeparator });
+var VerticalSeparator = () => /* @__PURE__ */ import_react57.default.createElement(Spacer.Vertical, { size: (0, import_styled_components35.useTheme)().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react57.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components35.useTheme)().sizes.inspector.horizontalSeparator });
 var SliderRowLabel = import_styled_components35.default.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
@@ -5684,10 +5694,11 @@ var RowLabel = import_styled_components35.default.span(({ theme, textStyle }) =>
     color: theme.colors.textSubtle,
     fontWeight: "bold"
   },
-  lineHeight: "19px"
+  lineHeight: "19px",
   // Button height
+  alignItems: "center"
 }));
-var LabeledRow = (0, import_react56.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react57.memo)(function LabeledRow2({
   id,
   children,
   label,
@@ -5695,13 +5706,13 @@ var LabeledRow = (0, import_react56.memo)(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ import_react56.default.createElement(Row2, { id }, /* @__PURE__ */ import_react56.default.createElement(Column, null, /* @__PURE__ */ import_react56.default.createElement(RowLabel, { textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react56.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react56.default.createElement(Row2, { gap }, children)));
+  return /* @__PURE__ */ import_react57.default.createElement(Row2, { id }, /* @__PURE__ */ import_react57.default.createElement(Column, null, /* @__PURE__ */ import_react57.default.createElement(RowLabel, { textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react57.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react57.default.createElement(Row2, { gap }, children)));
 });
-var LabeledSliderRow = (0, import_react56.memo)(function LabeledRow3({
+var LabeledSliderRow = (0, import_react57.memo)(function LabeledRow3({
   children,
   label
 }) {
-  return /* @__PURE__ */ import_react56.default.createElement(Row2, null, /* @__PURE__ */ import_react56.default.createElement(Column, null, /* @__PURE__ */ import_react56.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react56.default.createElement(Row2, null, children)));
+  return /* @__PURE__ */ import_react57.default.createElement(Row2, null, /* @__PURE__ */ import_react57.default.createElement(Column, null, /* @__PURE__ */ import_react57.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react57.default.createElement(Row2, null, children)));
 });
 
 // src/components/ArrayController.tsx
@@ -5714,7 +5725,7 @@ var ElementRow = import_styled_components36.default.div({
 var ItemContainer2 = import_styled_components36.default.div({
   position: "relative"
 });
-var ArrayController = (0, import_react57.memo)(function ArrayController2({
+var ArrayController = (0, import_react58.memo)(function ArrayController2({
   id,
   items,
   title,
@@ -5732,12 +5743,12 @@ var ArrayController = (0, import_react57.memo)(function ArrayController2({
 }) {
   const iconColor = (0, import_styled_components36.useTheme)().colors.icon;
   const primaryLightColor = (0, import_styled_components36.useTheme)().colors.primaryLight;
-  const keys = (0, import_react57.useMemo)(
+  const keys = (0, import_react58.useMemo)(
     () => items.map((item, index) => getKey?.(item) ?? index.toString()),
     [getKey, items]
   );
   const indexes = reversed ? (0, import_noya_utils11.range)(0, items.length).reverse() : (0, import_noya_utils11.range)(0, items.length);
-  const handleMoveItem = (0, import_react57.useCallback)(
+  const handleMoveItem = (0, import_react58.useCallback)(
     (sourceIndex, destinationIndex, position) => {
       if (reversed) {
         if (position === "above") {
@@ -5754,11 +5765,11 @@ var ArrayController = (0, import_react57.memo)(function ArrayController2({
     [onMoveItem, reversed]
   );
   const renderRow = (index) => {
-    return /* @__PURE__ */ import_react57.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
+    return /* @__PURE__ */ import_react58.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
   };
-  return /* @__PURE__ */ import_react57.default.createElement(Section, { id, padding, gap: "2px" }, /* @__PURE__ */ import_react57.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react57.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react57.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react57.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
+  return /* @__PURE__ */ import_react58.default.createElement(Section, { id, padding, gap: "2px" }, /* @__PURE__ */ import_react58.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react58.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react58.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
     [
-      onClickTrash && /* @__PURE__ */ import_react57.default.createElement(
+      onClickTrash && /* @__PURE__ */ import_react58.default.createElement(
         IconButton,
         {
           id: `${id}-trash`,
@@ -5767,7 +5778,7 @@ var ArrayController = (0, import_react57.memo)(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ import_react57.default.createElement(
+      onClickExpand && /* @__PURE__ */ import_react58.default.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -5776,7 +5787,7 @@ var ArrayController = (0, import_react57.memo)(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ import_react57.default.createElement(
+      onClickPlus && /* @__PURE__ */ import_react58.default.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -5786,15 +5797,15 @@ var ArrayController = (0, import_react57.memo)(function ArrayController2({
         }
       )
     ],
-    /* @__PURE__ */ import_react57.default.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ import_react57.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react57.default.createElement(
+    /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 8 })
+  )), /* @__PURE__ */ import_react58.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react58.default.createElement(
     Sortable.Root,
     {
       keys,
       renderOverlay: renderRow,
       onMoveItem: handleMoveItem
     },
-    indexes.map((index) => /* @__PURE__ */ import_react57.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react57.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react57.default.createElement(
+    indexes.map((index) => /* @__PURE__ */ import_react58.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react58.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react58.default.createElement(
       ListView.DragIndicator,
       {
         gap: 0,
@@ -5808,11 +5819,11 @@ var ArrayController = (0, import_react57.memo)(function ArrayController2({
 
 // src/components/DimensionInput.tsx
 var import_noya_utils12 = require("@noya-app/noya-utils");
-var import_react58 = __toESM(require("react"));
+var import_react59 = __toESM(require("react"));
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = (0, import_react58.memo)(function DimensionInput2({
+var DimensionInput = (0, import_react59.memo)(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -5822,15 +5833,15 @@ var DimensionInput = (0, import_react58.memo)(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = (0, import_react58.useCallback)(
+  const handleNudgeValue = (0, import_react59.useCallback)(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = (0, import_react58.useCallback)(
+  const handleSetValue = (0, import_react59.useCallback)(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ import_react58.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react58.default.createElement(
+  return /* @__PURE__ */ import_react59.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react59.default.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : (0, import_noya_utils12.round)(value, 2),
@@ -5839,7 +5850,7 @@ var DimensionInput = (0, import_react58.memo)(function DimensionInput2({
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ import_react58.default.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ import_react59.default.createElement(InputField.Label, null, label));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {