@noya-app/noya-designsystem 0.1.22 → 0.1.24

package/dist/index.js

@@ -386,9 +386,9 @@ var ButtonElement = import_styled_components5.default.button(
     textAlign: "left",
     borderRadius: "4px",
     paddingTop: $variant === "none" ? "0px" : "4px",
-    paddingRight: $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+    paddingRight: $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "6px",
     paddingBottom: $variant === "none" ? "0px" : "4px",
-    paddingLeft: $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+    paddingLeft: $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "6px",
     ...$size === "large" && {
       paddingTop: "12px",
       paddingRight: "16px",
@@ -518,35 +518,47 @@ var Button = (0, import_react6.forwardRef)(function Button2({
 
 // src/components/Chip.tsx
 var import_noya_icons3 = require("@noya-app/noya-icons");
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/contexts/DesignSystemConfiguration.tsx
 var import_noya_keymap3 = require("@noya-app/noya-keymap");
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var import_styled_components15 = require("styled-components");
 
 // src/components/Toast.tsx
 var ToastPrimitive = __toESM(require("@radix-ui/react-toast"));
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_styled_components7 = __toESM(require("styled-components"));
 
 // src/components/IconButton.tsx
+var import_react8 = __toESM(require("react"));
+var import_styled_components6 = require("styled-components");
+
+// src/components/Icons.tsx
 var Icons = __toESM(require("@noya-app/noya-icons"));
 var import_react7 = __toESM(require("react"));
-var import_styled_components6 = require("styled-components");
-var IconButton = (0, import_react7.memo)(
-  (0, import_react7.forwardRef)(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
+function renderIcon(iconName) {
+  if (typeof iconName === "string") {
+    const Icon = Icons[iconName];
+    return /* @__PURE__ */ import_react7.default.createElement(Icon, null);
+  }
+  return iconName;
+}
+
+// src/components/IconButton.tsx
+var IconButton = (0, import_react8.memo)(
+  (0, import_react8.forwardRef)(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
     const { icon: iconColor, iconSelected: iconSelectedColor } = (0, import_styled_components6.useTheme)().colors;
     const Icon = Icons[iconName];
-    const style3 = (0, import_react7.useMemo)(() => {
+    const style3 = (0, import_react8.useMemo)(() => {
       return {
         padding: "0 2px",
         ...size2 && { minHeight: size2 },
         ...contentStyle
       };
     }, [contentStyle, size2]);
-    return /* @__PURE__ */ import_react7.default.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style3 }, /* @__PURE__ */ import_react7.default.createElement(
+    return /* @__PURE__ */ import_react8.default.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style3 }, /* @__PURE__ */ import_react8.default.createElement(
       Icon,
       {
         color: color ?? (selected ? iconSelectedColor : iconColor),
@@ -606,9 +618,9 @@ var Toast = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ import_react8.default.createElement(ToastRoot, { ...props }, title && /* @__PURE__ */ import_react8.default.createElement(ToastTitle, null, title), /* @__PURE__ */ import_react8.default.createElement(ToastDescription, null, content), children && /* @__PURE__ */ import_react8.default.createElement(ToastAction, { asChild: true, altText: "" }, children), /* @__PURE__ */ import_react8.default.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ import_react8.default.createElement(IconButton, { iconName: "Cross1Icon" })));
+  return /* @__PURE__ */ import_react9.default.createElement(ToastRoot, { ...props }, title && /* @__PURE__ */ import_react9.default.createElement(ToastTitle, null, title), /* @__PURE__ */ import_react9.default.createElement(ToastDescription, null, content), children && /* @__PURE__ */ import_react9.default.createElement(ToastAction, { asChild: true, altText: "" }, children), /* @__PURE__ */ import_react9.default.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ import_react9.default.createElement(IconButton, { iconName: "Cross1Icon" })));
 };
-var ToastProvider = ({ children }) => /* @__PURE__ */ import_react8.default.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ import_react8.default.createElement(ToastViewport, null));
+var ToastProvider = ({ children }) => /* @__PURE__ */ import_react9.default.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ import_react9.default.createElement(ToastViewport, null));
 
 // src/theme/dark.ts
 var dark_exports = {};
@@ -891,33 +903,33 @@ var colors2 = (0, import_immer.default)(colors, (colors3) => {
 });
 
 // src/contexts/DialogContext.tsx
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/components/Dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/components/Spacer.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_styled_components8 = __toESM(require("styled-components"));
 var SpacerVertical_ = import_styled_components8.default.span(({ $size, $inline }) => ({
   display: $inline ? "inline-block" : "block",
   ...$size === void 0 ? { flex: 1 } : { minHeight: $size }
 }));
-var SpacerVertical = (0, import_react9.forwardRef)(
+var SpacerVertical = (0, import_react10.forwardRef)(
   ({ size: size2, inline, ...props }, ref) => {
-    return /* @__PURE__ */ import_react9.default.createElement(SpacerVertical_, { $size: size2, $inline: inline, ...props, ref });
+    return /* @__PURE__ */ import_react10.default.createElement(SpacerVertical_, { $size: size2, $inline: inline, ...props, ref });
   }
 );
 var SpacerHorizontal_ = import_styled_components8.default.span(({ $size, $inline }) => ({
   display: $inline ? "inline-block" : "block",
   ...$size === void 0 ? { flex: 1 } : { minWidth: $size }
 }));
-var SpacerHorizontal = (0, import_react9.forwardRef)(
+var SpacerHorizontal = (0, import_react10.forwardRef)(
   ({ size: size2, inline, ...props }, ref) => {
-    return /* @__PURE__ */ import_react9.default.createElement(SpacerHorizontal_, { $size: size2, $inline: inline, ...props, ref });
+    return /* @__PURE__ */ import_react10.default.createElement(SpacerHorizontal_, { $size: size2, $inline: inline, ...props, ref });
   }
 );
 var Spacer;
@@ -972,7 +984,7 @@ var CloseButtonContainer = import_styled_components9.default.div(({ theme }) =>
   // boxShadow: `0 0 2px rgba(0, 0, 0, 0.2)`,
   border: `1px solid rgba(128,128,128,0.2)`
 }));
-var Dialog = (0, import_react10.forwardRef)(function Dialog2({
+var Dialog = (0, import_react11.forwardRef)(function Dialog2({
   children,
   title,
   description,
@@ -982,15 +994,15 @@ var Dialog = (0, import_react10.forwardRef)(function Dialog2({
   onOpenAutoFocus,
   closeOnInteractOutside = true
 }, forwardedRef) {
-  const contentRef = (0, import_react10.useRef)(null);
-  (0, import_react10.useImperativeHandle)(forwardedRef, () => ({
+  const contentRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useImperativeHandle)(forwardedRef, () => ({
     containsElement(element) {
       if (!contentRef.current)
         return false;
       return contentRef.current.contains(element);
     }
   }));
-  return /* @__PURE__ */ import_react10.default.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react10.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react11.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react11.default.createElement(
     StyledContent,
     {
       ref: contentRef,
@@ -1005,14 +1017,14 @@ var Dialog = (0, import_react10.forwardRef)(function Dialog2({
         }
       }
     },
-    /* @__PURE__ */ import_react10.default.createElement(CloseButtonContainer, null, /* @__PURE__ */ import_react10.default.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement(IconButton, { iconName: "Cross1Icon" }))),
-    title && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(StyledTitle, null, title), /* @__PURE__ */ import_react10.default.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
-    description && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ import_react10.default.createElement(StyledDescription, null, description), /* @__PURE__ */ import_react10.default.createElement(Spacer.Vertical, { size: 20 })),
+    /* @__PURE__ */ import_react11.default.createElement(CloseButtonContainer, null, /* @__PURE__ */ import_react11.default.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ import_react11.default.createElement(IconButton, { iconName: "Cross1Icon" }))),
+    title && /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(StyledTitle, null, title), /* @__PURE__ */ import_react11.default.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
+    description && /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ import_react11.default.createElement(StyledDescription, null, description), /* @__PURE__ */ import_react11.default.createElement(Spacer.Vertical, { size: 20 })),
     children
   ));
 });
-var FullscreenDialog = (0, import_react10.forwardRef)(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ import_react10.default.createElement(
+var FullscreenDialog = (0, import_react11.forwardRef)(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ import_react11.default.createElement(
     Dialog,
     {
       ref: forwardedRef,
@@ -1038,13 +1050,13 @@ var FullscreenDialog = (0, import_react10.forwardRef)(function FullscreenDialog2
 var import_noya_icons2 = require("@noya-app/noya-icons");
 
 // ../noya-react-utils/src/components/AutoSizer.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 
 // ../noya-react-utils/src/hooks/useSize.ts
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 function useSize(refToObserve, dimensions = "both") {
-  const [size2, setSize] = React10.useState(void 0);
-  React10.useEffect(() => {
+  const [size2, setSize] = React11.useState(void 0);
+  React11.useEffect(() => {
     if (refToObserve.current) {
       const elementToObserve = refToObserve.current;
       const resizeObserver = new ResizeObserver((entries) => {
@@ -1091,37 +1103,37 @@ var style = {
   flex: "1 0 0",
   flexDirection: "column"
 };
-var AutoSizer = (0, import_react11.memo)(function AutoSizer2({
+var AutoSizer = (0, import_react12.memo)(function AutoSizer2({
   children,
   className
 }) {
-  const containerRef = (0, import_react11.useRef)(null);
+  const containerRef = (0, import_react12.useRef)(null);
   const containerSize = useSize(containerRef);
-  return /* @__PURE__ */ import_react11.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
+  return /* @__PURE__ */ import_react12.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
 });
-var SingleDimensionAutoSizer = (0, import_react11.memo)(function SingleDimensionAutoSizer2({
+var SingleDimensionAutoSizer = (0, import_react12.memo)(function SingleDimensionAutoSizer2({
   children,
   dimension,
   className
 }) {
-  const containerRef = (0, import_react11.useRef)(null);
+  const containerRef = (0, import_react12.useRef)(null);
   const containerSize = useSize(containerRef, dimension);
-  return /* @__PURE__ */ import_react11.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
+  return /* @__PURE__ */ import_react12.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
 });
 
 // ../noya-react-utils/src/components/FileDropTarget.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 
 // ../noya-react-utils/src/hooks/useFileDropTarget.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useFileDropTarget(dropEvent) {
-  const [isDropTargetActive, setIsDropTargetActive] = (0, import_react12.useState)(false);
-  const handleDragEvent = (0, import_react12.useCallback)((event, on) => {
+  const [isDropTargetActive, setIsDropTargetActive] = (0, import_react13.useState)(false);
+  const handleDragEvent = (0, import_react13.useCallback)((event, on) => {
     if (on !== void 0)
       setIsDropTargetActive(on);
     event.preventDefault();
   }, []);
-  const handleDropEvent = (0, import_react12.useCallback)(
+  const handleDropEvent = (0, import_react13.useCallback)(
     (event) => {
       dropEvent(event);
       setIsDropTargetActive(false);
@@ -1144,12 +1156,12 @@ function isSupportedFile(file, supportedFileTypes) {
   return supportedFileTypes.includes(file.type) || file.type === "" && file.name.endsWith(".sketch");
 }
 var style2 = { display: "flex", flex: 1 };
-var FileDropTarget = (0, import_react13.memo)(function FileDropTarget2({
+var FileDropTarget = (0, import_react14.memo)(function FileDropTarget2({
   children,
   onDropFiles,
   supportedFileTypes
 }) {
-  const handleFile = (0, import_react13.useCallback)(
+  const handleFile = (0, import_react14.useCallback)(
     (event) => {
       event.preventDefault();
       const offsetPoint = {
@@ -1182,51 +1194,51 @@ var FileDropTarget = (0, import_react13.memo)(function FileDropTarget2({
     [onDropFiles, supportedFileTypes]
   );
   const { dropTargetProps, isDropTargetActive } = useFileDropTarget(handleFile);
-  return /* @__PURE__ */ import_react13.default.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
+  return /* @__PURE__ */ import_react14.default.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
 });
 
 // ../noya-react-utils/src/hooks/useDeepArray.ts
 var import_noya_utils = require("@noya-app/noya-utils");
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // ../noya-react-utils/src/hooks/useDeepState.ts
 var import_noya_utils2 = require("@noya-app/noya-utils");
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // ../noya-react-utils/src/hooks/useFetch.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // ../noya-react-utils/src/hooks/useIsMounted.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // ../noya-react-utils/src/hooks/useLateReference.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // ../noya-react-utils/src/hooks/useLazyValue.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // ../noya-react-utils/src/hooks/useMutableState.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // ../noya-react-utils/src/hooks/usePersistentState.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // ../noya-react-utils/src/hooks/usePixelRatio.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // ../noya-react-utils/src/hooks/useShallowArray.ts
 var import_noya_utils3 = require("@noya-app/noya-utils");
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // ../noya-react-utils/src/hooks/useStableCallback.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // ../noya-react-utils/src/hooks/useSystemColorScheme.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // ../noya-react-utils/src/hooks/useUrlHashParameters.ts
 var import_noya_utils4 = require("@noya-app/noya-utils");
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // ../emitter/src/index.ts
 var Emitter = class {
@@ -1317,7 +1329,7 @@ function assignRef(ref, value) {
 }
 
 // src/components/InputField.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var import_styled_components13 = __toESM(require("styled-components"));
 
 // src/utils/handleNudge.ts
@@ -1348,12 +1360,12 @@ 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_react28 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var import_styled_components11 = __toESM(require("styled-components"));
 
 // src/components/internal/Menu.tsx
 var import_noya_keymap = require("@noya-app/noya-keymap");
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_styled_components10 = __toESM(require("styled-components"));
 var SEPARATOR_ITEM = "separator";
 var CHECKBOX_WIDTH = 15;
@@ -1440,12 +1452,12 @@ var ShortcutElement = import_styled_components10.default.kbd(
     }
   })
 );
-var KeyboardShortcut = (0, import_react27.memo)(function KeyboardShortcut2({
+var KeyboardShortcut = (0, import_react28.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_react27.default.createElement(
+  const keyElements = keys.map((key) => /* @__PURE__ */ import_react28.default.createElement(
     ShortcutElement,
     {
       key,
@@ -1453,9 +1465,9 @@ var KeyboardShortcut = (0, import_react27.memo)(function KeyboardShortcut2({
     },
     key
   ));
-  return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, separator ? withSeparatorElements(
+  return /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, separator ? withSeparatorElements(
     keyElements,
-    /* @__PURE__ */ import_react27.default.createElement(ShortcutElement, null, separator)
+    /* @__PURE__ */ import_react28.default.createElement(ShortcutElement, null, separator)
   ) : keyElements);
 });
 
@@ -1470,7 +1482,7 @@ var CheckboxItemElement = (0, import_styled_components11.default)(RadixDropdownM
 var StyledItemIndicator = (0, import_styled_components11.default)(RadixDropdownMenu.ItemIndicator)(
   styles.itemIndicatorStyle
 );
-var DropdownMenuItem = (0, import_react28.memo)(function ContextMenuItem({
+var DropdownMenuItem = (0, import_react29.memo)(function ContextMenuItem({
   value,
   children,
   onSelect,
@@ -1481,27 +1493,27 @@ var DropdownMenuItem = (0, import_react28.memo)(function ContextMenuItem({
   items,
   shortcut
 }) {
-  const handleSelectItem = (0, import_react28.useCallback)(() => {
+  const handleSelectItem = (0, import_react29.useCallback)(() => {
     if (!value)
       return;
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ import_react28.default.createElement(
+    return /* @__PURE__ */ import_react29.default.createElement(
       CheckboxItemElement,
       {
         checked,
         disabled,
         onSelect: handleSelectItem
       },
-      /* @__PURE__ */ import_react28.default.createElement(StyledItemIndicator, null, /* @__PURE__ */ import_react28.default.createElement(import_noya_icons.CheckIcon, null)),
-      icon && /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, icon, /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: 8 })),
+      /* @__PURE__ */ import_react29.default.createElement(StyledItemIndicator, null, /* @__PURE__ */ import_react29.default.createElement(import_noya_icons.CheckIcon, null)),
+      icon && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react29.default.createElement(Spacer.Horizontal, { size: 8 })),
       children
     );
   }
-  const element = /* @__PURE__ */ import_react28.default.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, icon, /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react28.default.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react28.default.createElement(import_noya_icons.ChevronRightIcon, null)));
+  const element = /* @__PURE__ */ import_react29.default.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ import_react29.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react29.default.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react29.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react29.default.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react29.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react29.default.createElement(import_noya_icons.ChevronRightIcon, null)));
   if (items && items.length > 0) {
-    return /* @__PURE__ */ import_react28.default.createElement(
+    return /* @__PURE__ */ import_react29.default.createElement(
       DropdownMenuRoot,
       {
         isNested: true,
@@ -1517,7 +1529,7 @@ var DropdownMenuItem = (0, import_react28.memo)(function ContextMenuItem({
 });
 var Content5 = (0, import_styled_components11.default)(RadixDropdownMenu.Content)(styles.contentStyle);
 var SubContent2 = (0, import_styled_components11.default)(RadixDropdownMenu.SubContent)(styles.contentStyle);
-var DropdownMenuRoot = (0, import_react28.forwardRef)(function DropdownMenuRoot2({
+var DropdownMenuRoot = (0, import_react29.forwardRef)(function DropdownMenuRoot2({
   items,
   children,
   onSelect,
@@ -1535,7 +1547,7 @@ var DropdownMenuRoot = (0, import_react28.forwardRef)(function DropdownMenuRoot2
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
   );
-  const keymap = (0, import_react28.useMemo)(
+  const keymap = (0, import_react29.useMemo)(
     () => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
@@ -1543,8 +1555,8 @@ var DropdownMenuRoot = (0, import_react28.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_react28.useMemo)(() => ({ zIndex: 1e3 }), []);
-  return /* @__PURE__ */ import_react28.default.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ import_react28.default.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ import_react28.default.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ import_react28.default.createElement(
+  const contentStyle = (0, import_react29.useMemo)(() => ({ zIndex: 1e3 }), []);
+  return /* @__PURE__ */ import_react29.default.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ import_react29.default.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ import_react29.default.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ import_react29.default.createElement(
     ContentComponent,
     {
       side,
@@ -1556,7 +1568,7 @@ var DropdownMenuRoot = (0, import_react28.forwardRef)(function DropdownMenuRoot2
       ...{ onCloseAutoFocus }
     },
     items.map(
-      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react28.default.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ import_react28.default.createElement(
+      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react29.default.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ import_react29.default.createElement(
         DropdownMenuItem,
         {
           key: item.value ?? index,
@@ -1574,14 +1586,14 @@ var DropdownMenuRoot = (0, import_react28.forwardRef)(function DropdownMenuRoot2
     )
   )));
 });
-var DropdownMenu = (0, import_react28.memo)(DropdownMenuRoot);
+var DropdownMenu = (0, import_react29.memo)(DropdownMenuRoot);
 
 // src/components/internal/TextInput.tsx
 var import_react_compose_refs = require("@radix-ui/react-compose-refs");
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 
 // src/contexts/GlobalInputBlurContext.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var defaultValue = /* @__PURE__ */ (() => {
   const listeners = [];
   const value = {
@@ -1602,14 +1614,14 @@ var defaultValue = /* @__PURE__ */ (() => {
   };
   return value;
 })();
-var GlobalInputBlurContext = (0, import_react29.createContext)(defaultValue);
+var GlobalInputBlurContext = (0, import_react30.createContext)(defaultValue);
 var GlobalInputBlurProvider = GlobalInputBlurContext.Provider;
 var useGlobalInputBlur = () => {
-  return (0, import_react29.useContext)(GlobalInputBlurContext);
+  return (0, import_react30.useContext)(GlobalInputBlurContext);
 };
 function useGlobalInputBlurListener(f) {
   const context = useGlobalInputBlur();
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     context.addListener(f);
     return () => {
       context.removeListener(f);
@@ -1621,8 +1633,8 @@ function useGlobalInputBlurTrigger() {
 }
 
 // src/components/internal/TextInput.tsx
-var ReadOnlyTextInput = (0, import_react30.forwardRef)(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ import_react30.default.createElement(
+var ReadOnlyTextInput = (0, import_react31.forwardRef)(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ import_react31.default.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -1633,7 +1645,7 @@ var ReadOnlyTextInput = (0, import_react30.forwardRef)(function ReadOnlyTextInpu
     }
   );
 });
-var ControlledTextInput = (0, import_react30.forwardRef)(function ControlledTextInput2({
+var ControlledTextInput = (0, import_react31.forwardRef)(function ControlledTextInput2({
   onKeyDown,
   value,
   onChange,
@@ -1642,28 +1654,28 @@ var ControlledTextInput = (0, import_react30.forwardRef)(function ControlledText
   onFocusCapture,
   ...rest
 }, forwardedRef) {
-  const handleBlur = (0, import_react30.useCallback)(
+  const handleBlur = (0, import_react31.useCallback)(
     (event) => {
       onBlur?.(event);
       onFocusChange?.(false);
     },
     [onBlur, onFocusChange]
   );
-  const handleFocusCapture = (0, import_react30.useCallback)(
+  const handleFocusCapture = (0, import_react31.useCallback)(
     (event) => {
       onFocusCapture?.(event);
       onFocusChange?.(true);
     },
     [onFocusCapture, onFocusChange]
   );
-  return /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(
     "input",
     {
       ref: forwardedRef,
       ...rest,
       value,
       onKeyDown,
-      onChange: (0, import_react30.useCallback)(
+      onChange: (0, import_react31.useCallback)(
         (event) => onChange(event.target.value),
         [onChange]
       ),
@@ -1672,7 +1684,7 @@ var ControlledTextInput = (0, import_react30.forwardRef)(function ControlledText
     }
   );
 });
-var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTextInput2({
+var SubmittableTextInput = (0, import_react31.forwardRef)(function SubmittableTextInput2({
   onKeyDown,
   value,
   onSubmit,
@@ -1683,16 +1695,16 @@ var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTe
   submitAutomaticallyAfterDelay,
   ...rest
 }, forwardedRef) {
-  const ref = import_react30.default.useRef(null);
-  const latestValue = (0, import_react30.useRef)(value);
+  const ref = import_react31.default.useRef(null);
+  const latestValue = (0, import_react31.useRef)(value);
   latestValue.current = value;
-  const userDidEdit = (0, import_react30.useRef)(false);
-  const isSubmitTriggeredByEscapeKey = (0, import_react30.useRef)(false);
-  const [internalValue, setInternalValue] = (0, import_react30.useState)("");
-  (0, import_react30.useLayoutEffect)(() => {
+  const userDidEdit = (0, import_react31.useRef)(false);
+  const isSubmitTriggeredByEscapeKey = (0, import_react31.useRef)(false);
+  const [internalValue, setInternalValue] = (0, import_react31.useState)("");
+  (0, import_react31.useLayoutEffect)(() => {
     setInternalValue(value);
   }, [value]);
-  const handleSubmit = (0, import_react30.useCallback)(() => {
+  const handleSubmit = (0, import_react31.useCallback)(() => {
     const submissionValue = isSubmitTriggeredByEscapeKey.current ? value : internalValue;
     isSubmitTriggeredByEscapeKey.current = false;
     if (submissionValue === value && !allowSubmittingWithSameValue)
@@ -1702,13 +1714,13 @@ var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTe
     setInternalValue(latestValue.current);
   }, [allowSubmittingWithSameValue, value, internalValue, onSubmit]);
   useGlobalInputBlurListener(
-    (0, import_react30.useCallback)(() => {
+    (0, import_react31.useCallback)(() => {
       if (ref.current !== document.activeElement)
         return;
       handleSubmit();
     }, [handleSubmit])
   );
-  const handleKeyDown = (0, import_react30.useCallback)(
+  const handleKeyDown = (0, import_react31.useCallback)(
     (event) => {
       if (event.key === "Enter") {
         handleSubmit();
@@ -1723,14 +1735,14 @@ var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTe
     },
     [onKeyDown, handleSubmit]
   );
-  const handleChange = (0, import_react30.useCallback)(
+  const handleChange = (0, import_react31.useCallback)(
     (event) => {
       userDidEdit.current = true;
       setInternalValue(event.target.value);
     },
     []
   );
-  const handleBlur = (0, import_react30.useCallback)(
+  const handleBlur = (0, import_react31.useCallback)(
     (event) => {
       onBlur?.(event);
       onFocusChange?.(false);
@@ -1738,19 +1750,19 @@ var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTe
     },
     [onBlur, onFocusChange, handleSubmit]
   );
-  const handleFocusCapture = (0, import_react30.useCallback)(
+  const handleFocusCapture = (0, import_react31.useCallback)(
     (event) => {
       onFocusCapture?.(event);
       onFocusChange?.(true);
     },
     [onFocusCapture, onFocusChange]
   );
-  const autoSubmitTimeoutRef = (0, import_react30.useRef)(
+  const autoSubmitTimeoutRef = (0, import_react31.useRef)(
     null
   );
-  const latestHandleSubmit = (0, import_react30.useRef)(handleSubmit);
+  const latestHandleSubmit = (0, import_react31.useRef)(handleSubmit);
   latestHandleSubmit.current = handleSubmit;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (submitAutomaticallyAfterDelay) {
       if (autoSubmitTimeoutRef.current) {
         clearTimeout(autoSubmitTimeoutRef.current);
@@ -1767,7 +1779,7 @@ var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTe
       }
     };
   }, [internalValue, submitAutomaticallyAfterDelay]);
-  return /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(
     "input",
     {
       ref: (0, import_react_compose_refs.composeRefs)(ref, forwardedRef),
@@ -1780,13 +1792,13 @@ var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTe
     }
   );
 });
-var TextInput_default = (0, import_react30.forwardRef)(function TextInput(props, forwardedRef) {
+var TextInput_default = (0, import_react31.forwardRef)(function TextInput(props, forwardedRef) {
   const commonProps = {
-    onPointerDown: (0, import_react30.useCallback)(
+    onPointerDown: (0, import_react31.useCallback)(
       (event) => event.stopPropagation(),
       []
     ),
-    onClick: (0, import_react30.useCallback)(
+    onClick: (0, import_react31.useCallback)(
       (event) => event.stopPropagation(),
       []
     ),
@@ -1799,17 +1811,17 @@ var TextInput_default = (0, import_react30.forwardRef)(function TextInput(props,
     ...props
   };
   if ("readOnly" in commonProps) {
-    return /* @__PURE__ */ import_react30.default.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
+    return /* @__PURE__ */ import_react31.default.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
   } else if ("onChange" in commonProps) {
-    return /* @__PURE__ */ import_react30.default.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ import_react31.default.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
   } else {
-    return /* @__PURE__ */ import_react30.default.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ import_react31.default.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
   }
 });
 
 // src/components/Popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
-var import_react31 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var import_styled_components12 = __toESM(require("styled-components"));
 var ContentElement = (0, import_styled_components12.default)(PopoverPrimitive.Content)(({ theme, variant }) => ({
   borderRadius: 4,
@@ -1856,7 +1868,7 @@ function Popover({
   onFocusOutside,
   onClickClose
 }) {
-  return /* @__PURE__ */ import_react31.default.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react31.default.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ import_react31.default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react32.default.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ import_react32.default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ import_react32.default.createElement(
     ContentElement,
     {
       variant,
@@ -1872,13 +1884,13 @@ function Popover({
       arrowPadding: 2
     },
     children,
-    showArrow && /* @__PURE__ */ import_react31.default.createElement(ArrowElement, null),
-    closable && /* @__PURE__ */ import_react31.default.createElement(PopoverClose, null, /* @__PURE__ */ import_react31.default.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
+    showArrow && /* @__PURE__ */ import_react32.default.createElement(ArrowElement, null),
+    closable && /* @__PURE__ */ import_react32.default.createElement(PopoverClose, null, /* @__PURE__ */ import_react32.default.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
   )));
 }
 
 // src/components/InputField.tsx
-var InputFieldContext = (0, import_react32.createContext)({
+var InputFieldContext = (0, import_react33.createContext)({
   labelPosition: "end",
   labelSize: 6,
   hasLabel: false,
@@ -1906,11 +1918,11 @@ var LabelContainer = import_styled_components13.default.label(({ theme, $labelPo
     paddingRight: $hasDropdown ? "16px" : "6px"
   }
 }));
-var InputFieldLabel = (0, import_react32.memo)(
-  (0, import_react32.forwardRef)(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
-    const { labelPosition, hasDropdown, setLabelWidth } = (0, import_react32.useContext)(InputFieldContext);
-    const ref = (0, import_react32.useRef)(null);
-    (0, import_react32.useLayoutEffect)(() => {
+var InputFieldLabel = (0, import_react33.memo)(
+  (0, import_react33.forwardRef)(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
+    const { labelPosition, hasDropdown, setLabelWidth } = (0, import_react33.useContext)(InputFieldContext);
+    const ref = (0, import_react33.useRef)(null);
+    (0, import_react33.useLayoutEffect)(() => {
       if (!setLabelWidth)
         return;
       const width = ref.current?.getBoundingClientRect().width;
@@ -1918,7 +1930,7 @@ var InputFieldLabel = (0, import_react32.memo)(
         return;
       setLabelWidth(width);
     }, [setLabelWidth]);
-    return /* @__PURE__ */ import_react32.default.createElement(
+    return /* @__PURE__ */ import_react33.default.createElement(
       LabelContainer,
       {
         ref: (element) => {
@@ -1942,16 +1954,16 @@ var DropdownContainer = import_styled_components13.default.span(({ theme }) => (
   display: "flex",
   flexDirection: "column"
 }));
-var InputFieldDropdownMenu = (0, import_react32.memo)(function InputFieldDropdownMenu2({ id, items, onSelect, children }) {
-  const { size: size2 } = (0, import_react32.useContext)(InputFieldContext);
-  const contentStyle = (0, import_react32.useMemo)(
+var InputFieldDropdownMenu = (0, import_react33.memo)(function InputFieldDropdownMenu2({ id, items, onSelect, children }) {
+  const { size: size2 } = (0, import_react33.useContext)(InputFieldContext);
+  const contentStyle = (0, import_react33.useMemo)(
     () => ({
       margin: "-4px 0",
       minHeight: size2 === "small" ? "15px" : void 0
     }),
     [size2]
   );
-  return /* @__PURE__ */ import_react32.default.createElement(DropdownContainer, null, /* @__PURE__ */ import_react32.default.createElement(DropdownMenu, { items, onSelect }, children || /* @__PURE__ */ import_react32.default.createElement(Button, { id, variant: "thin", flex: "1", contentStyle }, /* @__PURE__ */ import_react32.default.createElement(import_noya_icons2.CaretDownIcon, null))));
+  return /* @__PURE__ */ import_react33.default.createElement(DropdownContainer, null, /* @__PURE__ */ import_react33.default.createElement(DropdownMenu, { items, onSelect }, children || /* @__PURE__ */ import_react33.default.createElement(Button, { id, variant: "thin", flex: "1", contentStyle }, /* @__PURE__ */ import_react33.default.createElement(import_noya_icons2.CaretDownIcon, null))));
 });
 var ButtonContainer = import_styled_components13.default.span(
   ({ theme, $size }) => ({
@@ -1960,12 +1972,12 @@ var ButtonContainer = import_styled_components13.default.span(
     top: $size === "large" ? "8px" : $size === "medium" ? "4px" : "2px"
   })
 );
-var InputFieldButton = (0, import_react32.memo)(function InputFieldButton2({
+var InputFieldButton = (0, import_react33.memo)(function InputFieldButton2({
   children,
   onClick
 }) {
-  const { size: size2, inputRef } = (0, import_react32.useContext)(InputFieldContext);
-  const defaultHandleClick = (0, import_react32.useCallback)(
+  const { size: size2, inputRef } = (0, import_react33.useContext)(InputFieldContext);
+  const defaultHandleClick = (0, import_react33.useCallback)(
     (event) => {
       if (inputRef && typeof inputRef !== "function") {
         inputRef.current?.focus();
@@ -1976,11 +1988,11 @@ var InputFieldButton = (0, import_react32.memo)(function InputFieldButton2({
     },
     [inputRef]
   );
-  const handlePointerDown = (0, import_react32.useCallback)((event) => {
+  const handlePointerDown = (0, import_react33.useCallback)((event) => {
     event.preventDefault();
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ import_react32.default.createElement(ButtonContainer, { $size: size2 }, /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(ButtonContainer, { $size: size2 }, /* @__PURE__ */ import_react33.default.createElement(
     Button,
     {
       variant: "floating",
@@ -2051,7 +2063,7 @@ var InputElement = (0, import_styled_components13.default)(TextInput_default)(({
     // },
   };
 });
-var InputFieldInput = (0, import_react32.forwardRef)(function InputFieldInput2({
+var InputFieldInput = (0, import_react33.forwardRef)(function InputFieldInput2({
   textAlign,
   variant,
   ...rest
@@ -2064,17 +2076,17 @@ var InputFieldInput = (0, import_react32.forwardRef)(function InputFieldInput2({
     size: size2,
     onFocusChange,
     setInputRef
-  } = (0, import_react32.useContext)(InputFieldContext);
-  const handleFocusChange = (0, import_react32.useCallback)(
+  } = (0, import_react33.useContext)(InputFieldContext);
+  const handleFocusChange = (0, import_react33.useCallback)(
     (isFocused) => {
       onFocusChange(isFocused);
     },
     [onFocusChange]
   );
-  (0, import_react32.useLayoutEffect)(() => {
+  (0, import_react33.useLayoutEffect)(() => {
     setInputRef?.(forwardedRef);
   }, [forwardedRef, setInputRef]);
-  return /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(
     InputElement,
     {
       ref: forwardedRef,
@@ -2098,8 +2110,8 @@ var InputFieldTypeahead = (props) => {
     hasLabel,
     size: size2,
     onFocusChange
-  } = (0, import_react32.useContext)(InputFieldContext);
-  return /* @__PURE__ */ import_react32.default.createElement(
+  } = (0, import_react33.useContext)(InputFieldContext);
+  return /* @__PURE__ */ import_react33.default.createElement(
     InputElement,
     {
       $labelPosition: labelPosition,
@@ -2133,8 +2145,8 @@ function InputFieldNumberInput(props) {
   const { value, placeholder, onNudge, onBlur, ...rest } = props;
   const onSubmit = "onSubmit" in props ? props.onSubmit : void 0;
   const onChange = "onChange" in props ? props.onChange : void 0;
-  const [internalValue, setInternalValue] = (0, import_react32.useState)();
-  const handleSubmit = (0, import_react32.useCallback)(
+  const [internalValue, setInternalValue] = (0, import_react33.useState)();
+  const handleSubmit = (0, import_react33.useCallback)(
     (value2) => {
       const newValue = parseNumber(value2);
       if (!isNaN(newValue)) {
@@ -2143,7 +2155,7 @@ function InputFieldNumberInput(props) {
     },
     [onSubmit]
   );
-  const handleKeyDown = (0, import_react32.useCallback)(
+  const handleKeyDown = (0, import_react33.useCallback)(
     (event) => {
       const amount = handleNudge(event);
       if (!amount)
@@ -2155,7 +2167,7 @@ function InputFieldNumberInput(props) {
     },
     [onNudge]
   );
-  const handleChange = (0, import_react32.useCallback)(
+  const handleChange = (0, import_react33.useCallback)(
     (value2) => {
       if (value2 === "" || value2 === "-" || value2 === ".") {
         setInternalValue(value2);
@@ -2173,14 +2185,14 @@ function InputFieldNumberInput(props) {
     },
     [onChange]
   );
-  const handleBlur = (0, import_react32.useCallback)(
+  const handleBlur = (0, import_react33.useCallback)(
     (event) => {
       setInternalValue(void 0);
       onBlur?.(event);
     },
     [onBlur]
   );
-  return /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(
     InputFieldInput,
     {
       ...rest,
@@ -2210,34 +2222,36 @@ function InputFieldRoot({
   labelSize,
   size: size2 = "medium",
   renderPopoverContent,
-  onFocusChange
+  onFocusChange,
+  style: style3,
+  className
 }) {
-  const childrenArray = import_react32.Children.toArray(children);
+  const childrenArray = import_react33.Children.toArray(children);
   const hasDropdown = childrenArray.some(
-    (child) => (0, import_react32.isValidElement)(child) && child.type === InputFieldDropdownMenu
+    (child) => (0, import_react33.isValidElement)(child) && child.type === InputFieldDropdownMenu
   );
   const hasLabel = childrenArray.some(
-    (child) => (0, import_react32.isValidElement)(child) && child.type === InputFieldLabel
+    (child) => (0, import_react33.isValidElement)(child) && child.type === InputFieldLabel
   );
-  const [isFocused, setIsFocused] = import_react32.default.useState(false);
-  const [measuredLabelSize, setMeasuredLabelSize] = import_react32.default.useState();
-  const [measuredWidth, setMeasuredWidth] = import_react32.default.useState();
-  const handleFocusChange = (0, import_react32.useCallback)(
+  const [isFocused, setIsFocused] = import_react33.default.useState(false);
+  const [measuredLabelSize, setMeasuredLabelSize] = import_react33.default.useState();
+  const [measuredWidth, setMeasuredWidth] = import_react33.default.useState();
+  const handleFocusChange = (0, import_react33.useCallback)(
     (isFocused2) => {
       setIsFocused(isFocused2);
       onFocusChange?.(isFocused2);
     },
     [onFocusChange]
   );
-  const [inputRef, setInputRef] = import_react32.default.useState();
-  (0, import_react32.useEffect)(() => {
+  const [inputRef, setInputRef] = import_react33.default.useState();
+  (0, import_react33.useEffect)(() => {
     if (inputRef && typeof inputRef !== "function") {
       setMeasuredWidth?.(
         isFocused ? inputRef?.current?.getBoundingClientRect().width : void 0
       );
     }
   }, [inputRef, isFocused]);
-  const contextValue = (0, import_react32.useMemo)(
+  const contextValue = (0, import_react33.useMemo)(
     () => ({
       labelPosition,
       labelSize: measuredLabelSize ?? labelSize ?? 6,
@@ -2262,8 +2276,18 @@ function InputFieldRoot({
       inputRef
     ]
   );
-  const rootElement = /* @__PURE__ */ import_react32.default.createElement(RootContainer, { id, $width: width, $flex: flex }, children);
-  return /* @__PURE__ */ import_react32.default.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ import_react32.default.createElement(
+  const rootElement = /* @__PURE__ */ import_react33.default.createElement(
+    RootContainer,
+    {
+      id,
+      $width: width,
+      $flex: flex,
+      style: style3,
+      className
+    },
+    children
+  );
+  return /* @__PURE__ */ import_react33.default.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ import_react33.default.createElement(
     Popover,
     {
       open: true,
@@ -2279,15 +2303,15 @@ function InputFieldRoot({
         event.stopPropagation();
       }
     },
-    measuredWidth && /* @__PURE__ */ import_react32.default.createElement(Stack.V, { width: measuredWidth, overflow: "hidden" }, renderPopoverContent({ width: measuredWidth }))
+    measuredWidth && /* @__PURE__ */ import_react33.default.createElement(Stack.V, { width: measuredWidth, overflow: "hidden" }, renderPopoverContent({ width: measuredWidth }))
   ) : rootElement);
 }
 var InputField;
 ((InputField2) => {
-  InputField2.Root = (0, import_react32.memo)(InputFieldRoot);
-  InputField2.Input = (0, import_react32.memo)(InputFieldInput);
-  InputField2.Typeahead = (0, import_react32.memo)(InputFieldTypeahead);
-  InputField2.NumberInput = (0, import_react32.memo)(InputFieldNumberInput);
+  InputField2.Root = (0, import_react33.memo)(InputFieldRoot);
+  InputField2.Input = (0, import_react33.memo)(InputFieldInput);
+  InputField2.Typeahead = (0, import_react33.memo)(InputFieldTypeahead);
+  InputField2.NumberInput = (0, import_react33.memo)(InputFieldNumberInput);
   InputField2.DropdownMenu = InputFieldDropdownMenu;
   InputField2.Button = InputFieldButton;
   InputField2.Label = InputFieldLabel;
@@ -2311,24 +2335,24 @@ function createDeferredPromise() {
   });
   return { promise, resolve, reject };
 }
-var DialogContext = (0, import_react33.createContext)(void 0);
+var DialogContext = (0, import_react34.createContext)(void 0);
 var DialogProvider = function DialogProvider2({
   children
 }) {
-  const [contents, setContents] = (0, import_react33.useState)();
+  const [contents, setContents] = (0, import_react34.useState)();
   const isOpen = !!contents;
-  const close = (0, import_react33.useCallback)(() => {
+  const close = (0, import_react34.useCallback)(() => {
     if (!contents)
       return;
     contents.resolve(void 0);
   }, [contents]);
-  const submit = (0, import_react33.useCallback)(() => {
+  const submit = (0, import_react34.useCallback)(() => {
     if (!contents || !contents.inputValue)
       return;
     contents.resolve(contents.inputValue);
     setContents(void 0);
   }, [contents]);
-  const open = (0, import_react33.useCallback)(
+  const open = (0, import_react34.useCallback)(
     (title, inputValue = "") => {
       const { promise, resolve } = createDeferredPromise();
       setContents({
@@ -2343,7 +2367,7 @@ var DialogProvider = function DialogProvider2({
     },
     []
   );
-  const handleKeyDown = (0, import_react33.useCallback)(
+  const handleKeyDown = (0, import_react34.useCallback)(
     (event) => {
       if (event.key !== "Enter")
         return;
@@ -2353,29 +2377,29 @@ var DialogProvider = function DialogProvider2({
     },
     [submit]
   );
-  const inputRef = (0, import_react33.useRef)(null);
-  const dialogRef = (0, import_react33.useRef)(null);
-  const containsElement = (0, import_react33.useCallback)((element) => {
+  const inputRef = (0, import_react34.useRef)(null);
+  const dialogRef = (0, import_react34.useRef)(null);
+  const containsElement = (0, import_react34.useCallback)((element) => {
     if (!dialogRef.current)
       return false;
     return dialogRef.current.containsElement(element);
   }, []);
-  return /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
+  return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(
     DialogContext.Provider,
     {
-      value: (0, import_react33.useMemo)(
+      value: (0, import_react34.useMemo)(
         () => ({ openInputDialog: open, containsElement }),
         [containsElement, open]
       )
     },
     children
-  ), /* @__PURE__ */ import_react33.default.createElement(
+  ), /* @__PURE__ */ import_react34.default.createElement(
     Dialog,
     {
       ref: dialogRef,
       title: contents?.title,
       open: isOpen,
-      onOpenChange: (0, import_react33.useCallback)(
+      onOpenChange: (0, import_react34.useCallback)(
         (isOpen2) => {
           if (!isOpen2) {
             close();
@@ -2383,14 +2407,14 @@ var DialogProvider = function DialogProvider2({
         },
         [close]
       ),
-      onOpenAutoFocus: (0, import_react33.useCallback)((event) => {
+      onOpenAutoFocus: (0, import_react34.useCallback)((event) => {
         event.stopPropagation();
         event.preventDefault();
         inputRef.current?.focus();
         inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
       }, [])
     },
-    /* @__PURE__ */ import_react33.default.createElement(InputField.Root, null, /* @__PURE__ */ import_react33.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement(InputField.Root, null, /* @__PURE__ */ import_react34.default.createElement(
       InputField.Input,
       {
         ref: inputRef,
@@ -2406,12 +2430,12 @@ var DialogProvider = function DialogProvider2({
         onKeyDown: handleKeyDown
       }
     )),
-    /* @__PURE__ */ import_react33.default.createElement(Spacer.Vertical, { size: 20 }),
-    /* @__PURE__ */ import_react33.default.createElement(Row, null, /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react33.default.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react33.default.createElement(Button, { disabled: !contents?.inputValue, onClick: submit }, "Submit"))
+    /* @__PURE__ */ import_react34.default.createElement(Spacer.Vertical, { size: 20 }),
+    /* @__PURE__ */ import_react34.default.createElement(Row, null, /* @__PURE__ */ import_react34.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react34.default.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ import_react34.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react34.default.createElement(Button, { disabled: !contents?.inputValue, onClick: submit }, "Submit"))
   ));
 };
 function useDialog() {
-  const value = (0, import_react33.useContext)(DialogContext);
+  const value = (0, import_react34.useContext)(DialogContext);
   if (!value) {
     throw new Error("Missing DialogProvider");
   }
@@ -2426,20 +2450,20 @@ function useDialogContainsElement() {
 
 // src/contexts/FloatingWindowContext.tsx
 var import_noya_utils5 = require("@noya-app/noya-utils");
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
-var FloatingWindowContext = (0, import_react34.createContext)(void 0);
-var CurrentWindowContext = (0, import_react34.createContext)(void 0);
+var FloatingWindowContext = (0, import_react35.createContext)(void 0);
+var CurrentWindowContext = (0, import_react35.createContext)(void 0);
 var FloatingWindowProvider = ({
   children
 }) => {
-  const [windows, setWindows] = (0, import_react34.useState)({});
-  const contextValue = (0, import_react34.useMemo)(() => {
+  const [windows, setWindows] = (0, import_react35.useState)({});
+  const contextValue = (0, import_react35.useMemo)(() => {
     const createWindow = (element) => {
       const id = (0, import_noya_utils5.uuid)();
       setWindows((windows2) => ({
         ...windows2,
-        [id]: /* @__PURE__ */ import_react34.default.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
+        [id]: /* @__PURE__ */ import_react35.default.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
       }));
       return id;
     };
@@ -2451,12 +2475,12 @@ var FloatingWindowProvider = ({
     };
     return { createWindow, closeWindow };
   }, []);
-  return /* @__PURE__ */ import_react34.default.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
+  return /* @__PURE__ */ import_react35.default.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
     ([id, element]) => (0, import_react_dom.createPortal)(element, document.body, id)
   ));
 };
 var useFloatingWindowManager = () => {
-  const context = (0, import_react34.useContext)(FloatingWindowContext);
+  const context = (0, import_react35.useContext)(FloatingWindowContext);
   if (!context) {
     throw new Error(
       "useFloatingWindow must be used within a FloatingWindowProvider"
@@ -2465,7 +2489,7 @@ var useFloatingWindowManager = () => {
   return context;
 };
 var useCurrentFloatingWindowInternal = () => {
-  const context = (0, import_react34.useContext)(CurrentWindowContext);
+  const context = (0, import_react35.useContext)(CurrentWindowContext);
   if (!context) {
     throw new Error("useCurrentWindow must be used within a FloatingWindow");
   }
@@ -2473,7 +2497,7 @@ var useCurrentFloatingWindowInternal = () => {
 };
 
 // src/contexts/DesignSystemConfiguration.tsx
-var DesignSystemThemeProvider = (0, import_react35.memo)(
+var DesignSystemThemeProvider = (0, import_react36.memo)(
   function DesignSystemThemeProvider2({
     children,
     theme
@@ -2484,50 +2508,50 @@ var DesignSystemThemeProvider = (0, import_react35.memo)(
     } catch (e) {
     }
     if (theme) {
-      return /* @__PURE__ */ import_react35.default.createElement(import_styled_components15.ThemeProvider, { theme }, children);
+      return /* @__PURE__ */ import_react36.default.createElement(import_styled_components15.ThemeProvider, { theme }, children);
     } else if (parentTheme) {
       return children;
     } else {
-      return /* @__PURE__ */ import_react35.default.createElement(import_styled_components15.ThemeProvider, { theme: light_exports }, children);
+      return /* @__PURE__ */ import_react36.default.createElement(import_styled_components15.ThemeProvider, { theme: light_exports }, children);
     }
   }
 );
-var DesignSystemConfigurationContext = (0, import_react35.createContext)({
+var DesignSystemConfigurationContext = (0, import_react36.createContext)({
   platform: "key"
 });
-var DesignSystemConfigurationProvider = (0, import_react35.memo)(
+var DesignSystemConfigurationProvider = (0, import_react36.memo)(
   function DesignSystemConfigurationProvider2({
     children,
     theme,
     platform
   }) {
-    const [internalPlatform, setInternalPlatform] = (0, import_react35.useState)(
+    const [internalPlatform, setInternalPlatform] = (0, import_react36.useState)(
       platform ?? "key"
     );
-    (0, import_react35.useEffect)(() => {
+    (0, import_react36.useEffect)(() => {
       if (platform !== void 0)
         return;
       if (typeof navigator !== "undefined") {
         setInternalPlatform((0, import_noya_keymap3.getCurrentPlatform)(navigator));
       }
     }, [platform]);
-    const contextValue = (0, import_react35.useMemo)(
+    const contextValue = (0, import_react36.useMemo)(
       () => ({ platform: platform ?? internalPlatform }),
       [platform, internalPlatform]
     );
     const resolvedTheme = theme === "light" ? light_exports : theme === "dark" ? dark_exports : theme ?? light_exports;
-    return /* @__PURE__ */ import_react35.default.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react35.default.createElement(import_styled_components15.ThemeProvider, { theme: resolvedTheme }, /* @__PURE__ */ import_react35.default.createElement(DialogProvider, null, /* @__PURE__ */ import_react35.default.createElement(ToastProvider, null, /* @__PURE__ */ import_react35.default.createElement(FloatingWindowProvider, null, children)))));
+    return /* @__PURE__ */ import_react36.default.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react36.default.createElement(import_styled_components15.ThemeProvider, { theme: resolvedTheme }, /* @__PURE__ */ import_react36.default.createElement(DialogProvider, null, /* @__PURE__ */ import_react36.default.createElement(ToastProvider, null, /* @__PURE__ */ import_react36.default.createElement(FloatingWindowProvider, null, children)))));
   }
 );
 function useDesignSystemConfiguration() {
-  return (0, import_react35.useContext)(DesignSystemConfigurationContext);
+  return (0, import_react36.useContext)(DesignSystemConfigurationContext);
 }
 function useDesignSystemTheme() {
   return (0, import_styled_components15.useTheme)();
 }
 
 // src/hooks/useHover.ts
-var React21 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var globalIgnoreEmulatedMouseEvents = false;
 var hoverCount = 0;
 function setGlobalIgnoreEmulatedMouseEvents() {
@@ -2557,13 +2581,13 @@ function setupGlobalTouchEvents() {
 }
 function useHover(props = {}) {
   const { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
-  const [isHovered, setHovered] = React21.useState(false);
-  const state = React21.useRef({
+  const [isHovered, setHovered] = React22.useState(false);
+  const state = React22.useRef({
     isHovered: false,
     ignoreEmulatedMouseEvents: false
   }).current;
-  React21.useEffect(setupGlobalTouchEvents, []);
-  const hoverProps = React21.useMemo(
+  React22.useEffect(setupGlobalTouchEvents, []);
+  const hoverProps = React22.useMemo(
     function getHoverProps() {
       function triggerHoverStart(event, pointerType) {
         if (isDisabled || pointerType === "touch" || state.isHovered) {
@@ -2704,8 +2728,8 @@ var AddElement = (0, import_styled_components16.default)(import_noya_icons3.Plus
     opacity: 0.85
   }
 }));
-var Chip = (0, import_react36.memo)(
-  (0, import_react36.forwardRef)(function Chip2({
+var Chip = (0, import_react37.memo)(
+  (0, import_react37.forwardRef)(function Chip2({
     colorScheme,
     children,
     deletable,
@@ -2728,7 +2752,7 @@ var Chip = (0, import_react36.memo)(
     });
     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_react36.default.createElement(
+    return /* @__PURE__ */ import_react37.default.createElement(
       ChipElement,
       {
         ref: forwardedRef,
@@ -2742,7 +2766,7 @@ var Chip = (0, import_react36.memo)(
         tabIndex,
         ...rest
       },
-      addable && /* @__PURE__ */ import_react36.default.createElement(
+      addable && /* @__PURE__ */ import_react37.default.createElement(
         AddElement,
         {
           size: size2,
@@ -2755,7 +2779,7 @@ var Chip = (0, import_react36.memo)(
         }
       ),
       children,
-      deletable && /* @__PURE__ */ import_react36.default.createElement(
+      deletable && /* @__PURE__ */ import_react37.default.createElement(
         DeleteElement,
         {
           size: size2,
@@ -2775,7 +2799,7 @@ var Chip = (0, import_react36.memo)(
 var import_noya_icons4 = require("@noya-app/noya-icons");
 var import_noya_keymap4 = require("@noya-app/noya-keymap");
 var RadixContextMenu = __toESM(require("@radix-ui/react-context-menu"));
-var import_react37 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var import_styled_components17 = __toESM(require("styled-components"));
 var SeparatorElement2 = (0, import_styled_components17.default)(RadixContextMenu.Separator)(
   styles.separatorStyle
@@ -2787,7 +2811,7 @@ var CheckboxItemElement2 = (0, import_styled_components17.default)(RadixContextM
 var StyledItemIndicator2 = (0, import_styled_components17.default)(RadixContextMenu.ItemIndicator)(
   styles.itemIndicatorStyle
 );
-var ContextMenuItem2 = (0, import_react37.memo)(function ContextMenuItem3({
+var ContextMenuItem2 = (0, import_react38.memo)(function ContextMenuItem3({
   value,
   children,
   onSelect,
@@ -2798,42 +2822,42 @@ var ContextMenuItem2 = (0, import_react37.memo)(function ContextMenuItem3({
   items,
   shortcut
 }) {
-  const handlePointerDown = (0, import_react37.useCallback)(
+  const handlePointerDown = (0, import_react38.useCallback)(
     (event) => event.stopPropagation(),
     []
   );
-  const handleSelectItem = (0, import_react37.useCallback)(() => {
+  const handleSelectItem = (0, import_react38.useCallback)(() => {
     if (!value)
       return;
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ import_react37.default.createElement(
+    return /* @__PURE__ */ import_react38.default.createElement(
       CheckboxItemElement2,
       {
         checked,
         disabled,
         onSelect: handleSelectItem
       },
-      /* @__PURE__ */ import_react37.default.createElement(StyledItemIndicator2, null, /* @__PURE__ */ import_react37.default.createElement(import_noya_icons4.CheckIcon, null)),
+      /* @__PURE__ */ import_react38.default.createElement(StyledItemIndicator2, null, /* @__PURE__ */ import_react38.default.createElement(import_noya_icons4.CheckIcon, null)),
       children
     );
   }
-  const element = /* @__PURE__ */ import_react37.default.createElement(
+  const element = /* @__PURE__ */ import_react38.default.createElement(
     ItemElement2,
     {
       disabled,
       onSelect: handleSelectItem,
       onPointerDown: handlePointerDown
     },
-    indented && /* @__PURE__ */ import_react37.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
-    icon && /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, icon, /* @__PURE__ */ import_react37.default.createElement(Spacer.Horizontal, { size: 8 })),
+    indented && /* @__PURE__ */ import_react38.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
+    icon && /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react38.default.createElement(Spacer.Horizontal, { size: 8 })),
     children,
-    shortcut && /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react37.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react37.default.createElement(KeyboardShortcut, { shortcut })),
-    items && items.length > 0 && /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react37.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react37.default.createElement(import_noya_icons4.ChevronRightIcon, null))
+    shortcut && /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react38.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react38.default.createElement(KeyboardShortcut, { shortcut })),
+    items && items.length > 0 && /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react38.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react38.default.createElement(import_noya_icons4.ChevronRightIcon, null))
   );
   if (items && items.length > 0) {
-    return /* @__PURE__ */ import_react37.default.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
+    return /* @__PURE__ */ import_react38.default.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
   } else {
     return element;
   }
@@ -2851,19 +2875,19 @@ function ContextMenuRoot({
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
   );
-  const keymap = (0, import_react37.useMemo)(
+  const keymap = (0, import_react38.useMemo)(
     () => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
   (0, import_noya_keymap4.useKeyboardShortcuts)(keymap);
-  const onPointerDown = (0, import_react37.useCallback)((event) => {
+  const onPointerDown = (0, import_react38.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_react37.default.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ import_react37.default.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ import_react37.default.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ import_react37.default.createElement(ContentComponent, null, items.map(
-    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react37.default.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ import_react38.default.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ import_react38.default.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ import_react38.default.createElement(ContentComponent, null, items.map(
+    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react38.default.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ import_react38.default.createElement(
       ContextMenuItem2,
       {
         key: item.value ?? index,
@@ -2880,22 +2904,22 @@ function ContextMenuRoot({
     )
   ))));
 }
-var ContextMenu = (0, import_react37.memo)(ContextMenuRoot);
+var ContextMenu = (0, import_react38.memo)(ContextMenuRoot);
 
 // src/components/Divider.tsx
-var import_react38 = __toESM(require("react"));
+var import_react39 = __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_react38.memo)(function Divider2({
+var Divider = (0, import_react39.memo)(function Divider2({
   variant,
   overflow,
   ...props
 }) {
-  return /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(
     DividerContainer,
     {
       $orientation: "horizontal",
@@ -2905,12 +2929,12 @@ var Divider = (0, import_react38.memo)(function Divider2({
     }
   );
 });
-var DividerVertical = (0, import_react38.memo)(function DividerVertical2({
+var DividerVertical = (0, import_react39.memo)(function DividerVertical2({
   variant,
   overflow,
   ...props
 }) {
-  return /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(
     DividerContainer,
     {
       $orientation: "vertical",
@@ -2923,7 +2947,7 @@ var DividerVertical = (0, import_react38.memo)(function DividerVertical2({
 
 // src/components/DraggableMenuButton.tsx
 var import_noya_icons5 = require("@noya-app/noya-icons");
-var import_react39 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var import_styled_components19 = __toESM(require("styled-components"));
 var DotButtonElement = import_styled_components19.default.div(({ theme }) => ({
   cursor: "pointer",
@@ -2943,15 +2967,15 @@ var TriggerElement = import_styled_components19.default.div({
   pointerEvents: "none",
   height: "15px"
 });
-var DraggableMenuButton = (0, import_react39.memo)(function DraggableMenuButton2({
+var DraggableMenuButton = (0, import_react40.memo)(function DraggableMenuButton2({
   items,
   onSelect,
   isVisible = true
 }) {
   const color = useDesignSystemTheme().colors.icon;
-  const [open, setOpen] = (0, import_react39.useState)(false);
-  const [downPosition, setDownPosition] = import_react39.default.useState(null);
-  const handlePointerDownCapture = (0, import_react39.useCallback)(
+  const [open, setOpen] = (0, import_react40.useState)(false);
+  const [downPosition, setDownPosition] = import_react40.default.useState(null);
+  const handlePointerDownCapture = (0, import_react40.useCallback)(
     (event) => {
       if (open) {
         setDownPosition(null);
@@ -2964,7 +2988,7 @@ var DraggableMenuButton = (0, import_react39.memo)(function DraggableMenuButton2
     },
     [open]
   );
-  const handlePointerUp = (0, import_react39.useCallback)(
+  const handlePointerUp = (0, import_react40.useCallback)(
     (event) => {
       if (open || !downPosition) {
         setDownPosition(null);
@@ -2980,14 +3004,14 @@ var DraggableMenuButton = (0, import_react39.memo)(function DraggableMenuButton2
     },
     [downPosition, open]
   );
-  const handleOpenChange = (0, import_react39.useCallback)(
+  const handleOpenChange = (0, import_react40.useCallback)(
     (isOpen) => {
       if (!isOpen)
         setOpen(false);
     },
     [setOpen]
   );
-  return /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react40.default.createElement(
     DotButtonElement,
     {
       onPointerDownCapture: handlePointerDownCapture,
@@ -2997,7 +3021,7 @@ var DraggableMenuButton = (0, import_react39.memo)(function DraggableMenuButton2
         event.preventDefault();
       }
     },
-    items && onSelect ? /* @__PURE__ */ import_react39.default.createElement(
+    items && onSelect ? /* @__PURE__ */ import_react40.default.createElement(
       DropdownMenu,
       {
         open,
@@ -3006,13 +3030,13 @@ var DraggableMenuButton = (0, import_react39.memo)(function DraggableMenuButton2
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ import_react39.default.createElement(TriggerElement, null, /* @__PURE__ */ import_react39.default.createElement(
+      /* @__PURE__ */ import_react40.default.createElement(TriggerElement, null, /* @__PURE__ */ import_react40.default.createElement(
         import_noya_icons5.DragHandleDots2Icon,
         {
           color: isVisible || open ? color : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ import_react39.default.createElement(
+    ) : /* @__PURE__ */ import_react40.default.createElement(
       import_noya_icons5.DragHandleDots2Icon,
       {
         color: isVisible || open ? color : "transparent"
@@ -3022,7 +3046,7 @@ var DraggableMenuButton = (0, import_react39.memo)(function DraggableMenuButton2
 });
 
 // src/components/FillInputField.tsx
-var import_react43 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 var import_styled_components21 = __toESM(require("styled-components"));
 
 // ../noya-file-format/src/types.ts
@@ -3348,26 +3372,26 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 
 // src/components/FillPreviewBackground.tsx
-var import_react42 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 var import_styled_components20 = __toESM(require("styled-components"));
 
 // src/contexts/ImageDataContext.tsx
-var import_react40 = __toESM(require("react"));
-var ImageDataContext = (0, import_react40.createContext)(
+var import_react41 = __toESM(require("react"));
+var ImageDataContext = (0, import_react41.createContext)(
   void 0
 );
-var ImageDataProvider = (0, import_react40.memo)(function ImageDataProvider2({
+var ImageDataProvider = (0, import_react41.memo)(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = (0, import_react40.useMemo)(
+  const contextValue = (0, import_react41.useMemo)(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ import_react40.default.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ import_react41.default.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = (0, import_react40.useContext)(ImageDataContext);
+  const value = (0, import_react41.useContext)(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -3375,15 +3399,15 @@ function useImageData(ref) {
 }
 
 // src/hooks/useObjectURL.ts
-var import_react41 = require("react");
+var import_react42 = require("react");
 function useObjectURL(object) {
-  const objectURL = (0, import_react41.useMemo)(() => {
+  const objectURL = (0, import_react42.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_react41.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     return () => URL.revokeObjectURL(objectURL);
   }, [objectURL]);
   return objectURL;
@@ -3439,9 +3463,9 @@ var Background = import_styled_components20.default.span(({ background }) => ({
   position: "absolute",
   inset: 0
 }));
-var HorizontalDotsBackground = (0, import_react42.memo)(function HorizontalDotsBackground2() {
+var HorizontalDotsBackground = (0, import_react43.memo)(function HorizontalDotsBackground2() {
   const { inputBackground, placeholderDots } = (0, import_styled_components20.useTheme)().colors;
-  const background = (0, import_react42.useMemo)(
+  const background = (0, import_react43.useMemo)(
     () => [
       `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
         placeholderDots
@@ -3450,7 +3474,7 @@ var HorizontalDotsBackground = (0, import_react42.memo)(function HorizontalDotsB
     ].join(","),
     [inputBackground, placeholderDots]
   );
-  return /* @__PURE__ */ import_react42.default.createElement(Background, { background });
+  return /* @__PURE__ */ import_react43.default.createElement(Background, { background });
 });
 function getPatternSizeAndPosition(fillType, tileScale) {
   switch (fillType) {
@@ -3464,7 +3488,7 @@ function getPatternSizeAndPosition(fillType, tileScale) {
       return "center / 100% 100%";
   }
 }
-var PatternPreviewBackground = (0, import_react42.memo)(function PatternPreviewBackground2({
+var PatternPreviewBackground = (0, import_react43.memo)(function PatternPreviewBackground2({
   fillType,
   tileScale,
   imageRef
@@ -3472,7 +3496,7 @@ var PatternPreviewBackground = (0, import_react42.memo)(function PatternPreviewB
   const image = useImageData(imageRef);
   const url = useObjectURL(image);
   const size2 = getPatternSizeAndPosition(fillType, tileScale);
-  const background = (0, import_react42.useMemo)(
+  const background = (0, import_react43.useMemo)(
     () => [
       size2,
       `url(${url})`,
@@ -3480,37 +3504,37 @@ var PatternPreviewBackground = (0, import_react42.memo)(function PatternPreviewB
     ].join(" "),
     [fillType, size2, url]
   );
-  return /* @__PURE__ */ import_react42.default.createElement(Background, { background });
+  return /* @__PURE__ */ import_react43.default.createElement(Background, { background });
 });
-var ColorPreviewBackground = (0, import_react42.memo)(function ColorPreviewBackground2({
+var ColorPreviewBackground = (0, import_react43.memo)(function ColorPreviewBackground2({
   color
 }) {
-  const background = (0, import_react42.useMemo)(() => sketchColorToRgbaString(color), [color]);
-  return /* @__PURE__ */ import_react42.default.createElement(Background, { background });
+  const background = (0, import_react43.useMemo)(() => sketchColorToRgbaString(color), [color]);
+  return /* @__PURE__ */ import_react43.default.createElement(Background, { background });
 });
-var GradientPreviewBackground = (0, import_react42.memo)(function GradientPreviewBackground2({
+var GradientPreviewBackground = (0, import_react43.memo)(function GradientPreviewBackground2({
   gradient
 }) {
-  const background = (0, import_react42.useMemo)(
+  const background = (0, import_react43.useMemo)(
     () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
     [gradient.gradientType, gradient.stops]
   );
-  return /* @__PURE__ */ import_react42.default.createElement(Background, { background });
+  return /* @__PURE__ */ import_react43.default.createElement(Background, { background });
 });
-var FillPreviewBackground = (0, import_react42.memo)(function FillPreviewBackground2({
+var FillPreviewBackground = (0, import_react43.memo)(function FillPreviewBackground2({
   value
 }) {
   if (!value)
-    return /* @__PURE__ */ import_react42.default.createElement(HorizontalDotsBackground, null);
+    return /* @__PURE__ */ import_react43.default.createElement(HorizontalDotsBackground, null);
   switch (value._class) {
     case "color":
-      return /* @__PURE__ */ import_react42.default.createElement(ColorPreviewBackground, { color: value });
+      return /* @__PURE__ */ import_react43.default.createElement(ColorPreviewBackground, { color: value });
     case "gradient":
-      return /* @__PURE__ */ import_react42.default.createElement(GradientPreviewBackground, { gradient: value });
+      return /* @__PURE__ */ import_react43.default.createElement(GradientPreviewBackground, { gradient: value });
     case "pattern":
       if (!value.image)
         return null;
-      return /* @__PURE__ */ import_react42.default.createElement(
+      return /* @__PURE__ */ import_react43.default.createElement(
         PatternPreviewBackground,
         {
           fillType: value.patternFillType,
@@ -3540,14 +3564,14 @@ var Container = import_styled_components21.default.button(
     flex: $flex
   })
 );
-var FillInputField = (0, import_react43.memo)(
-  (0, import_react43.forwardRef)(function FillInputField2({ id, value, flex, ...rest }, ref) {
-    return /* @__PURE__ */ import_react43.default.createElement(Container, { ref, id, $flex: flex, ...rest }, /* @__PURE__ */ import_react43.default.createElement(FillPreviewBackground, { value }));
+var FillInputField = (0, import_react44.memo)(
+  (0, import_react44.forwardRef)(function FillInputField2({ id, value, flex, ...rest }, ref) {
+    return /* @__PURE__ */ import_react44.default.createElement(Container, { ref, id, $flex: flex, ...rest }, /* @__PURE__ */ import_react44.default.createElement(FillPreviewBackground, { value }));
   })
 );
 
 // src/components/FloatingWindow.tsx
-var import_react44 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -3640,7 +3664,7 @@ function defaultRenderToolbar({
   toolbarContent,
   onClose
 }) {
-  return /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, /* @__PURE__ */ import_react44.default.createElement(Small, { flex: "1", fontWeight: "500", color: "text" }, title), toolbarContent, /* @__PURE__ */ import_react44.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null, /* @__PURE__ */ import_react45.default.createElement(Small, { flex: "1", fontWeight: "500", color: "text" }, title), toolbarContent, /* @__PURE__ */ import_react45.default.createElement(
     IconButton,
     {
       iconName: "Cross3Icon",
@@ -3665,16 +3689,16 @@ var FloatingWindow = ({
   toolbarContent,
   renderToolbar = defaultRenderToolbar
 }) => {
-  const [position, setPosition] = (0, import_react44.useState)({ x: initialX, y: initialY });
-  const [size2, setSize] = (0, import_react44.useState)({
+  const [position, setPosition] = (0, import_react45.useState)({ x: initialX, y: initialY });
+  const [size2, setSize] = (0, import_react45.useState)({
     width: initialWidth,
     height: initialHeight
   });
-  const [isDragging, setIsDragging] = (0, import_react44.useState)(false);
-  const [isResizing, setIsResizing] = (0, import_react44.useState)(false);
-  const [dragOffset, setDragOffset] = (0, import_react44.useState)({ x: 0, y: 0 });
-  const [resizeDirection, setResizeDirection] = (0, import_react44.useState)(null);
-  const wrapperRef = (0, import_react44.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react45.useState)(false);
+  const [isResizing, setIsResizing] = (0, import_react45.useState)(false);
+  const [dragOffset, setDragOffset] = (0, import_react45.useState)({ x: 0, y: 0 });
+  const [resizeDirection, setResizeDirection] = (0, import_react45.useState)(null);
+  const wrapperRef = (0, import_react45.useRef)(null);
   const toggleGlobalTextSelection = (disable) => {
     if (disable) {
       document.body.style.userSelect = "none";
@@ -3682,7 +3706,7 @@ var FloatingWindow = ({
       document.body.style.userSelect = "";
     }
   };
-  const handleMouseDown = (0, import_react44.useCallback)((e) => {
+  const handleMouseDown = (0, import_react45.useCallback)((e) => {
     if (!wrapperRef.current)
       return;
     const rect = wrapperRef.current.getBoundingClientRect();
@@ -3692,7 +3716,7 @@ var FloatingWindow = ({
     });
     setIsDragging(true);
   }, []);
-  const handleResizeStart = (0, import_react44.useCallback)(
+  const handleResizeStart = (0, import_react45.useCallback)(
     (direction) => (e) => {
       e.stopPropagation();
       setIsResizing(true);
@@ -3701,7 +3725,7 @@ var FloatingWindow = ({
     },
     []
   );
-  const handleMouseMove = (0, import_react44.useCallback)(
+  const handleMouseMove = (0, import_react45.useCallback)(
     (e) => {
       if (isDragging) {
         setPosition({
@@ -3755,13 +3779,13 @@ var FloatingWindow = ({
       minHeight
     ]
   );
-  const handleMouseUp = (0, import_react44.useCallback)((e) => {
+  const handleMouseUp = (0, import_react45.useCallback)((e) => {
     setIsDragging(false);
     setIsResizing(false);
     setResizeDirection(null);
     toggleGlobalTextSelection(false);
   }, []);
-  import_react44.default.useEffect(() => {
+  import_react45.default.useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -3772,12 +3796,12 @@ var FloatingWindow = ({
   const theme = useDesignSystemTheme();
   const floatingWindowManager = useFloatingWindowManager();
   const currentFloatingWindow = useCurrentFloatingWindowInternal();
-  const handleClose = (0, import_react44.useCallback)(() => {
+  const handleClose = (0, import_react45.useCallback)(() => {
     if (onClose)
       onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
-  return /* @__PURE__ */ import_react44.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -3791,7 +3815,7 @@ var FloatingWindow = ({
         backgroundColor: theme.colors.canvas.background
       }
     },
-    /* @__PURE__ */ import_react44.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement(
       "div",
       {
         style: {
@@ -3802,9 +3826,9 @@ var FloatingWindow = ({
       },
       renderToolbar({ title, toolbarContent, onClose: handleClose })
     ),
-    /* @__PURE__ */ import_react44.default.createElement(Divider, null),
-    /* @__PURE__ */ import_react44.default.createElement("div", { style: styles2.content }, children),
-    Object.entries(resizeHandlePositions).map(([direction, style3]) => /* @__PURE__ */ import_react44.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement(Divider, null),
+    /* @__PURE__ */ import_react45.default.createElement("div", { style: styles2.content }, children),
+    Object.entries(resizeHandlePositions).map(([direction, style3]) => /* @__PURE__ */ import_react45.default.createElement(
       "div",
       {
         key: direction,
@@ -3817,8 +3841,8 @@ var FloatingWindow = ({
 
 // src/components/GradientPicker.tsx
 var import_noya_colorpicker2 = require("@noya-app/noya-colorpicker");
-var import_react45 = __toESM(require("react"));
-var GradientPicker = (0, import_react45.memo)(function GradientPicker2({
+var import_react46 = __toESM(require("react"));
+var GradientPicker = (0, import_react46.memo)(function GradientPicker2({
   value,
   selectedStop,
   onChangeColor,
@@ -3827,7 +3851,7 @@ var GradientPicker = (0, import_react45.memo)(function GradientPicker2({
   onDelete,
   onSelectStop
 }) {
-  const colorModel = (0, import_react45.useMemo)(
+  const colorModel = (0, import_react46.useMemo)(
     () => ({
       defaultColor: { r: 0, g: 0, b: 0, a: 1 },
       toHsva: import_noya_colorpicker2.rgbaToHsva,
@@ -3836,30 +3860,30 @@ var GradientPicker = (0, import_react45.memo)(function GradientPicker2({
     }),
     []
   );
-  const rgbaColor = (0, import_react45.useMemo)(
+  const rgbaColor = (0, import_react46.useMemo)(
     () => sketchColorToRgba(value[selectedStop].color),
     [value, selectedStop]
   );
-  const handleChangeColor = (0, import_react45.useCallback)(
+  const handleChangeColor = (0, import_react46.useCallback)(
     (value2) => {
       onChangeColor(rgbaToSketchColor(value2));
     },
     [onChangeColor]
   );
-  const handleAddGradientStop = (0, import_react45.useCallback)(
+  const handleAddGradientStop = (0, import_react46.useCallback)(
     (value2, position) => {
       onAdd(rgbaToSketchColor(value2), position);
     },
     [onAdd]
   );
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     import_noya_colorpicker2.ColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ import_react45.default.createElement(
+    /* @__PURE__ */ import_react46.default.createElement(
       import_noya_colorpicker2.Gradient,
       {
         gradients: value,
@@ -3870,12 +3894,12 @@ var GradientPicker = (0, import_react45.memo)(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ import_react45.default.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ import_react45.default.createElement(import_noya_colorpicker2.Saturation, null),
-    /* @__PURE__ */ import_react45.default.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ import_react45.default.createElement(import_noya_colorpicker2.Hue, null),
-    /* @__PURE__ */ import_react45.default.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ import_react45.default.createElement(import_noya_colorpicker2.Alpha, null)
+    /* @__PURE__ */ import_react46.default.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ import_react46.default.createElement(import_noya_colorpicker2.Saturation, null),
+    /* @__PURE__ */ import_react46.default.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ import_react46.default.createElement(import_noya_colorpicker2.Hue, null),
+    /* @__PURE__ */ import_react46.default.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ import_react46.default.createElement(import_noya_colorpicker2.Alpha, null)
   );
 });
 
@@ -3907,12 +3931,12 @@ var Grid = import_styled_components22.default.div((props) => ({
 }));
 
 // src/components/GridView.tsx
-var import_react47 = __toESM(require("react"));
+var import_react48 = __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_react46 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 var import_styled_components23 = __toESM(require("styled-components"));
 var SCROLLBAR_SIZE = 10;
 var StyledViewport = (0, import_styled_components23.default)(RadixScrollArea.Viewport)({
@@ -3940,18 +3964,18 @@ var Container2 = import_styled_components23.default.div({
   flex: "1 1 0px",
   minHeight: 0
 });
-var ScrollArea = (0, import_react46.memo)(function ScrollArea2({ children }) {
-  const [scrollElementRef, setScrollElementRef] = (0, import_react46.useState)(null);
-  return /* @__PURE__ */ import_react46.default.createElement(Container2, null, /* @__PURE__ */ import_react46.default.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ import_react46.default.createElement(
+var ScrollArea = (0, import_react47.memo)(function ScrollArea2({ children }) {
+  const [scrollElementRef, setScrollElementRef] = (0, import_react47.useState)(null);
+  return /* @__PURE__ */ import_react47.default.createElement(Container2, null, /* @__PURE__ */ import_react47.default.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ import_react47.default.createElement(
     StyledViewport,
     {
-      ref: (0, import_react46.useCallback)(
+      ref: (0, import_react47.useCallback)(
         (ref) => setScrollElementRef(ref),
         []
       )
     },
     typeof children === "function" ? scrollElementRef ? children(scrollElementRef) : null : children
-  ), /* @__PURE__ */ import_react46.default.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ import_react46.default.createElement(StyledThumb, { className: "scroll-component" }))));
+  ), /* @__PURE__ */ import_react47.default.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ import_react47.default.createElement(StyledThumb, { className: "scroll-component" }))));
 });
 
 // src/components/GridView.tsx
@@ -4131,7 +4155,7 @@ var Shimmer = import_styled_components24.default.div`
   align-items: end;
   padding: 4px;
 `;
-var GridViewItem = (0, import_react47.forwardRef)(function GridViewItem2({
+var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
   id,
   title,
   subtitle,
@@ -4147,15 +4171,15 @@ var GridViewItem = (0, import_react47.forwardRef)(function GridViewItem2({
   onContextMenu,
   style: style3
 }, forwardedRef) {
-  const [hovered, setHovered] = import_react47.default.useState(false);
+  const [hovered, setHovered] = import_react48.default.useState(false);
   const { hoverProps } = useHover({
     onHoverChange: (isHovering) => {
       onHoverChange?.(isHovering);
       setHovered(isHovering);
     }
   });
-  const { textPosition, bordered, disabled } = (0, import_react47.useContext)(GridViewContext);
-  const handleClick = (0, import_react47.useCallback)(
+  const { textPosition, bordered, disabled } = (0, import_react48.useContext)(GridViewContext);
+  const handleClick = (0, import_react48.useCallback)(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -4164,7 +4188,7 @@ var GridViewItem = (0, import_react47.forwardRef)(function GridViewItem2({
     },
     [onClick, onPress]
   );
-  const handleKeyDown = (0, import_react47.useCallback)(
+  const handleKeyDown = (0, import_react48.useCallback)(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.stopPropagation();
@@ -4176,7 +4200,7 @@ var GridViewItem = (0, import_react47.forwardRef)(function GridViewItem2({
     },
     [onPress]
   );
-  let element = /* @__PURE__ */ import_react47.default.createElement(
+  let element = /* @__PURE__ */ import_react48.default.createElement(
     ItemContainer,
     {
       id,
@@ -4185,7 +4209,7 @@ var GridViewItem = (0, import_react47.forwardRef)(function GridViewItem2({
       tabIndex: disabled ? void 0 : 0,
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ import_react47.default.createElement(
+    /* @__PURE__ */ import_react48.default.createElement(
       ContentContainer,
       {
         disabled,
@@ -4199,25 +4223,25 @@ var GridViewItem = (0, import_react47.forwardRef)(function GridViewItem2({
       },
       children
     ),
-    textPosition === "below" && /* @__PURE__ */ import_react47.default.createElement(import_react47.default.Fragment, null, /* @__PURE__ */ import_react47.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react47.default.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ import_react47.default.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react47.default.createElement(TextOverlay, null, title && /* @__PURE__ */ import_react47.default.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ import_react47.default.createElement(ItemDescription, { showBackground: true }, subtitle)),
-    loading && /* @__PURE__ */ import_react47.default.createElement(Shimmer, null, /* @__PURE__ */ import_react47.default.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
+    textPosition === "below" && /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react48.default.createElement(TextOverlay, null, title && /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { showBackground: true }, subtitle)),
+    loading && /* @__PURE__ */ import_react48.default.createElement(Shimmer, null, /* @__PURE__ */ import_react48.default.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
-    element = /* @__PURE__ */ import_react47.default.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
+    element = /* @__PURE__ */ import_react48.default.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
   }
   if (textPosition === "toolip") {
-    element = /* @__PURE__ */ import_react47.default.createElement(
+    element = /* @__PURE__ */ import_react48.default.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ import_react47.default.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ import_react47.default.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ import_react47.default.createElement(ItemDescription, { showBackground: false }, subtitle))
+        content: /* @__PURE__ */ import_react48.default.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { showBackground: false }, subtitle))
       },
       element
     );
   }
   return element;
 });
-var GridViewContext = (0, import_react47.createContext)({
+var GridViewContext = (0, import_react48.createContext)({
   size: "small",
   textPosition: "below",
   bordered: false,
@@ -4232,7 +4256,7 @@ function GridViewRoot({
   bordered = false,
   disabled = false
 }) {
-  const handleClick = (0, import_react47.useCallback)(
+  const handleClick = (0, import_react48.useCallback)(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -4240,7 +4264,7 @@ function GridViewRoot({
     },
     [onClick]
   );
-  const contextValue = (0, import_react47.useMemo)(
+  const contextValue = (0, import_react48.useMemo)(
     () => ({
       size: size2,
       textPosition,
@@ -4249,33 +4273,33 @@ function GridViewRoot({
     }),
     [bordered, disabled, size2, textPosition]
   );
-  return /* @__PURE__ */ import_react47.default.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react47.default.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ import_react47.default.createElement(ScrollArea, null, children) : children));
+  return /* @__PURE__ */ import_react48.default.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react48.default.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ import_react48.default.createElement(ScrollArea, null, children) : children));
 }
 function GridViewSection({
   children,
   padding = "20px"
 }) {
-  const { size: size2 } = (0, import_react47.useContext)(GridViewContext);
-  return /* @__PURE__ */ import_react47.default.createElement(Grid2, { size: size2, padding }, children);
+  const { size: size2 } = (0, import_react48.useContext)(GridViewContext);
+  return /* @__PURE__ */ import_react48.default.createElement(Grid2, { size: size2, padding }, children);
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
-  return /* @__PURE__ */ import_react47.default.createElement(SectionHeaderContainer, null, /* @__PURE__ */ import_react47.default.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
-    grouped.map((title2, index) => /* @__PURE__ */ import_react47.default.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
-    /* @__PURE__ */ import_react47.default.createElement(SectionTitle, null, " / ")
+  return /* @__PURE__ */ import_react48.default.createElement(SectionHeaderContainer, null, /* @__PURE__ */ import_react48.default.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
+    grouped.map((title2, index) => /* @__PURE__ */ import_react48.default.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
+    /* @__PURE__ */ import_react48.default.createElement(SectionTitle, null, " / ")
   ));
 }
 var GridView;
 ((GridView2) => {
-  GridView2.Root = (0, import_react47.memo)(GridViewRoot);
-  GridView2.Item = (0, import_react47.memo)(GridViewItem);
-  GridView2.Section = (0, import_react47.memo)(GridViewSection);
-  GridView2.SectionHeader = (0, import_react47.memo)(GridViewSectionHeader);
+  GridView2.Root = (0, import_react48.memo)(GridViewRoot);
+  GridView2.Item = (0, import_react48.memo)(GridViewItem);
+  GridView2.Section = (0, import_react48.memo)(GridViewSection);
+  GridView2.SectionHeader = (0, import_react48.memo)(GridViewSectionHeader);
 })(GridView || (GridView = {}));
 
 // src/components/InputFieldWithCompletions.tsx
 var import_noya_utils8 = require("@noya-app/noya-utils");
-var import_react51 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var import_styled_components27 = __toESM(require("styled-components"));
 
 // src/utils/fuzzyScorer.ts
@@ -4352,7 +4376,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_react49 = __toESM(require("react"));
+var import_react50 = __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"));
@@ -4383,7 +4407,7 @@ function mergeEventHandlers(...handlerMaps) {
 // src/components/Sortable.tsx
 var import_core = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
-var import_react48 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 var import_react_dom2 = require("react-dom");
 var normalizeListDestinationIndex = (index, position) => {
   return position === "above" ? index : index + 1;
@@ -4397,7 +4421,7 @@ var defaultAcceptsDrop = (sourceIndex, destinationIndex, position) => {
   }
   return true;
 };
-var SortableItemContext = (0, import_react48.createContext)({
+var SortableItemContext = (0, import_react49.createContext)({
   keys: [],
   position: { x: 0, y: 0 },
   acceptsDrop: defaultAcceptsDrop,
@@ -4419,7 +4443,7 @@ function SortableItem({
   disabled,
   children
 }) {
-  const { keys, position, acceptsDrop, setActivatorEvent, axis } = (0, import_react48.useContext)(SortableItemContext);
+  const { keys, position, acceptsDrop, setActivatorEvent, axis } = (0, import_react49.useContext)(SortableItemContext);
   const sortable = (0, import_sortable.useSortable)({ id, disabled });
   const {
     active,
@@ -4439,7 +4463,7 @@ function SortableItem({
   const eventY = activatorEvent?.clientY ?? 0;
   const offsetLeft = eventX + position.x;
   const offsetTop = eventY + position.y;
-  const ref = (0, import_react48.useCallback)((node) => setNodeRef(node), [setNodeRef]);
+  const ref = (0, import_react49.useCallback)((node) => setNodeRef(node), [setNodeRef]);
   return children({
     ref,
     ...attributes,
@@ -4470,22 +4494,22 @@ function SortableRoot({
       }
     })
   );
-  const [activeIndex, setActiveIndex] = (0, import_react48.useState)();
-  const activatorEvent = (0, import_react48.useRef)(null);
-  const setActivatorEvent = (0, import_react48.useCallback)((event) => {
+  const [activeIndex, setActiveIndex] = (0, import_react49.useState)();
+  const activatorEvent = (0, import_react49.useRef)(null);
+  const setActivatorEvent = (0, import_react49.useCallback)((event) => {
     activatorEvent.current = event;
   }, []);
-  const [position, setPosition] = (0, import_react48.useState)({ x: 0, y: 0 });
-  const handleDragStart = (0, import_react48.useCallback)(
+  const [position, setPosition] = (0, import_react49.useState)({ x: 0, y: 0 });
+  const handleDragStart = (0, import_react49.useCallback)(
     (event) => {
       setActiveIndex(keys.indexOf(event.active.id));
     },
     [keys]
   );
-  const handleDragMove = (0, import_react48.useCallback)((event) => {
+  const handleDragMove = (0, import_react49.useCallback)((event) => {
     setPosition({ ...event.delta });
   }, []);
-  const handleDragEnd = (0, import_react48.useCallback)(
+  const handleDragEnd = (0, import_react49.useCallback)(
     (event) => {
       const { active, over } = event;
       setActiveIndex(void 0);
@@ -4512,14 +4536,14 @@ function SortableRoot({
     },
     [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
   );
-  const [mounted, setMounted] = (0, import_react48.useState)(false);
-  (0, import_react48.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react49.useState)(false);
+  (0, import_react49.useEffect)(() => {
     setMounted(true);
   }, []);
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     SortableItemContext.Provider,
     {
-      value: (0, import_react48.useMemo)(
+      value: (0, import_react49.useMemo)(
         () => ({
           keys,
           acceptsDrop,
@@ -4530,7 +4554,7 @@ function SortableRoot({
         [acceptsDrop, axis, keys, position, setActivatorEvent]
       )
     },
-    /* @__PURE__ */ import_react48.default.createElement(
+    /* @__PURE__ */ import_react49.default.createElement(
       import_core.DndContext,
       {
         sensors,
@@ -4539,9 +4563,9 @@ function SortableRoot({
         onDragMove: handleDragMove,
         onDragEnd: handleDragEnd
       },
-      /* @__PURE__ */ import_react48.default.createElement(import_sortable.SortableContext, { items: keys, strategy: import_sortable.verticalListSortingStrategy }, children),
+      /* @__PURE__ */ import_react49.default.createElement(import_sortable.SortableContext, { items: keys, strategy: import_sortable.verticalListSortingStrategy }, children),
       mounted && renderOverlay && (0, import_react_dom2.createPortal)(
-        /* @__PURE__ */ import_react48.default.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
+        /* @__PURE__ */ import_react49.default.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
         document.body
       )
     )
@@ -4549,17 +4573,17 @@ function SortableRoot({
 }
 var Sortable;
 ((Sortable2) => {
-  Sortable2.Item = (0, import_react48.memo)(SortableItem);
-  Sortable2.Root = (0, import_react48.memo)(SortableRoot);
+  Sortable2.Item = (0, import_react49.memo)(SortableItem);
+  Sortable2.Root = (0, import_react49.memo)(SortableRoot);
 })(Sortable || (Sortable = {}));
 
 // src/components/ListView.tsx
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = 27;
-var DraggingContext = (0, import_react49.createContext)({
+var DraggingContext = (0, import_react50.createContext)({
   indentation: 12
 });
-var ListRowContext = (0, import_react49.createContext)({
+var ListRowContext = (0, import_react50.createContext)({
   marginType: "none",
   selectedPosition: "only",
   sortable: false,
@@ -4589,8 +4613,8 @@ function ListViewEditableRowTitle({
   autoFocus,
   placeholder
 }) {
-  const inputRef = (0, import_react49.useRef)(null);
-  (0, import_react49.useLayoutEffect)(() => {
+  const inputRef = (0, import_react50.useRef)(null);
+  (0, import_react50.useLayoutEffect)(() => {
     const element = inputRef.current;
     if (!element || !autoFocus)
       return;
@@ -4599,7 +4623,7 @@ function ListViewEditableRowTitle({
       element.select();
     }, 0);
   }, [autoFocus]);
-  return /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(
     ListViewEditableRowTitleElement,
     {
       ref: inputRef,
@@ -4721,7 +4745,7 @@ var ListViewDragIndicatorElement = import_styled_components25.default.div(({ the
     boxShadow: "0 0 2px rgba(0,0,0,0.5)"
   }
 }));
-var ListViewRow = (0, import_react49.forwardRef)(function ListViewRow2({
+var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
   id,
   tabIndex = 0,
   gap,
@@ -4741,7 +4765,8 @@ var ListViewRow = (0, import_react49.forwardRef)(function ListViewRow2({
   onSelectMenuItem,
   onMenuOpenChange,
   onKeyDown,
-  style: style3
+  style: style3,
+  dragIndicatorStyle
 }, forwardedRef) {
   depth = Math.max(0, depth);
   const {
@@ -4754,12 +4779,12 @@ var ListViewRow = (0, import_react49.forwardRef)(function ListViewRow2({
     divider,
     gap: listGap,
     colorScheme
-  } = (0, import_react49.useContext)(ListRowContext);
+  } = (0, import_react50.useContext)(ListRowContext);
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { indentation, isDragging } = (0, import_react49.useContext)(DraggingContext);
-  const handlePress = (0, import_react49.useCallback)(
+  const { indentation, isDragging } = (0, import_react50.useContext)(DraggingContext);
+  const handlePress = (0, import_react50.useCallback)(
     (event) => {
       event.preventDefault();
       if (event.button !== 0)
@@ -4768,14 +4793,14 @@ var ListViewRow = (0, import_react49.forwardRef)(function ListViewRow2({
     },
     [onPress]
   );
-  const handleDoubleClick = (0, import_react49.useCallback)(
+  const handleDoubleClick = (0, import_react50.useCallback)(
     (event) => {
       event.stopPropagation();
       onDoubleClick?.();
     },
     [onDoubleClick]
   );
-  const mergedStyle = (0, import_react49.useMemo)(() => {
+  const mergedStyle = (0, import_react50.useMemo)(() => {
     return isDragging ? {
       // TODO: Where do these offsets actually come from?
       transform: `translate3d(-36px, -6px, 0)`,
@@ -4788,7 +4813,7 @@ var ListViewRow = (0, import_react49.forwardRef)(function ListViewRow2({
     ...renderProps
   }, ref) => {
     const Component = RowContainer;
-    const element = /* @__PURE__ */ import_react49.default.createElement(
+    const element = /* @__PURE__ */ import_react50.default.createElement(
       Component,
       {
         ref,
@@ -4819,20 +4844,25 @@ var ListViewRow = (0, import_react49.forwardRef)(function ListViewRow2({
         ),
         tabIndex
       },
-      relativeDropPosition && /* @__PURE__ */ import_react49.default.createElement(
+      relativeDropPosition && /* @__PURE__ */ import_react50.default.createElement(
         ListViewDragIndicatorElement,
         {
           $colorScheme: colorScheme,
           $relativeDropPosition: relativeDropPosition,
           $offsetLeft: 33 + depth * indentation,
-          $gap: listGap
+          $gap: listGap + (divider ? 1 : 0),
+          style: typeof dragIndicatorStyle === "function" ? dragIndicatorStyle({
+            depth,
+            indentation,
+            position: relativeDropPosition
+          }) : dragIndicatorStyle
         }
       ),
-      depth > 0 && /* @__PURE__ */ import_react49.default.createElement(Spacer.Horizontal, { size: depth * indentation }),
+      depth > 0 && /* @__PURE__ */ import_react50.default.createElement(Spacer.Horizontal, { size: depth * indentation }),
       children
     );
     if (menuItems && onSelectMenuItem) {
-      return /* @__PURE__ */ import_react49.default.createElement(
+      return /* @__PURE__ */ import_react50.default.createElement(
         ContextMenu,
         {
           items: menuItems,
@@ -4845,24 +4875,24 @@ var ListViewRow = (0, import_react49.forwardRef)(function ListViewRow2({
     return element;
   };
   if (sortable && id) {
-    return /* @__PURE__ */ import_react49.default.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
+    return /* @__PURE__ */ import_react50.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_react49.createContext)(
+var RenderItemContext = (0, import_react50.createContext)(
   () => null
 );
-var VirtualizedListRow = (0, import_react49.memo)(function VirtualizedListRow2({
+var VirtualizedListRow = (0, import_react50.memo)(function VirtualizedListRow2({
   index,
   style: style3
 }) {
-  const renderItem = (0, import_react49.useContext)(RenderItemContext);
-  return /* @__PURE__ */ import_react49.default.createElement("div", { key: index, style: style3 }, renderItem(index));
+  const renderItem = (0, import_react50.useContext)(RenderItemContext);
+  return /* @__PURE__ */ import_react50.default.createElement("div", { key: index, style: style3 }, renderItem(index));
 });
-var VirtualizedListInner = (0, import_react49.forwardRef)(function VirtualizedListInner2({
+var VirtualizedListInner = (0, import_react50.forwardRef)(function VirtualizedListInner2({
   size: size2,
   scrollElement,
   items,
@@ -4870,20 +4900,20 @@ var VirtualizedListInner = (0, import_react49.forwardRef)(function VirtualizedLi
   keyExtractor,
   renderItem
 }, ref) {
-  const listRef = (0, import_react49.useRef)(null);
-  (0, import_react49.useImperativeHandle)(ref, () => ({
+  const listRef = (0, import_react50.useRef)(null);
+  (0, import_react50.useImperativeHandle)(ref, () => ({
     scrollToIndex(index) {
       listRef.current?.scrollToItem(index);
     }
   }));
-  (0, import_react49.useLayoutEffect)(() => {
+  (0, import_react50.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_react49.useMemo)(
+  const listStyle = (0, import_react50.useMemo)(
     () => ({
       overflowX: "initial",
       overflowY: "initial",
@@ -4891,18 +4921,18 @@ var VirtualizedListInner = (0, import_react49.forwardRef)(function VirtualizedLi
     }),
     []
   );
-  return /* @__PURE__ */ import_react49.default.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ import_react50.default.createElement(
     import_react_virtualized.WindowScroller,
     {
       scrollElement,
-      style: (0, import_react49.useMemo)(() => ({ flex: "1 1 auto" }), [])
+      style: (0, import_react50.useMemo)(() => ({ flex: "1 1 auto" }), [])
     },
-    (0, import_react49.useCallback)(
+    (0, import_react50.useCallback)(
       ({
         registerChild,
         onChildScroll,
         scrollTop
-      }) => /* @__PURE__ */ import_react49.default.createElement("div", { ref: registerChild }, /* @__PURE__ */ import_react49.default.createElement(
+      }) => /* @__PURE__ */ import_react50.default.createElement("div", { ref: registerChild }, /* @__PURE__ */ import_react50.default.createElement(
         import_react_window.VariableSizeList,
         {
           ref: listRef,
@@ -4932,7 +4962,7 @@ var VirtualizedListInner = (0, import_react49.forwardRef)(function VirtualizedLi
     )
   ));
 });
-var VirtualizedList = (0, import_react49.memo)(
+var VirtualizedList = (0, import_react50.memo)(
   VirtualizedListInner
 );
 var RootContainer2 = import_styled_components25.default.div(({ theme, $scrollable, $gap }) => ({
@@ -4943,7 +4973,7 @@ var RootContainer2 = import_styled_components25.default.div(({ theme, $scrollabl
   color: theme.colors.textMuted,
   gap: $gap
 }));
-var ListViewRootInner = (0, import_react49.forwardRef)(function ListViewRootInner2({
+var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInner2({
   id,
   className,
   style: style3,
@@ -4965,7 +4995,7 @@ var ListViewRootInner = (0, import_react49.forwardRef)(function ListViewRootInne
   colorScheme = "primary",
   gap = 0
 }, forwardedRef) {
-  const handleClick = (0, import_react49.useCallback)(
+  const handleClick = (0, import_react50.useCallback)(
     (event) => {
       if (event.target instanceof HTMLElement && event.target.classList.contains("scroll-component"))
         return;
@@ -4975,19 +5005,19 @@ var ListViewRootInner = (0, import_react49.forwardRef)(function ListViewRootInne
     },
     [onPress]
   );
-  const renderChild = (0, import_react49.useCallback)(
+  const renderChild = (0, import_react50.useCallback)(
     (index) => renderItem(data[index], index, { isDragging: false }),
     [data, renderItem]
   );
-  const getItemContextValue = (0, import_react49.useCallback)(
+  const getItemContextValue = (0, import_react50.useCallback)(
     (i) => {
       const current = renderChild(i);
-      if (!(0, import_react49.isValidElement)(current))
+      if (!(0, import_react50.isValidElement)(current))
         return;
       const prevChild = i - 1 >= 0 && renderChild(i - 1);
       const nextChild = i + 1 < data.length && renderChild(i + 1);
-      const next = (0, import_react49.isValidElement)(nextChild) ? nextChild : void 0;
-      const prev = (0, import_react49.isValidElement)(prevChild) ? prevChild : void 0;
+      const next = (0, import_react50.isValidElement)(nextChild) ? nextChild : void 0;
+      const prev = (0, import_react50.isValidElement)(prevChild) ? prevChild : void 0;
       const hasMarginTop = !prev;
       const hasMarginBottom = !next || current.props.isSectionHeader || next && next.props.isSectionHeader;
       let marginType;
@@ -5039,26 +5069,26 @@ var ListViewRootInner = (0, import_react49.forwardRef)(function ListViewRootInne
       gap
     ]
   );
-  const draggingContextOverlayValue = (0, import_react49.useMemo)(
+  const draggingContextOverlayValue = (0, import_react50.useMemo)(
     () => ({ indentation, isDragging: true }),
     [indentation]
   );
-  const renderOverlay = (0, import_react49.useCallback)(
-    (index) => /* @__PURE__ */ import_react49.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react49.default.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
+  const renderOverlay = (0, import_react50.useCallback)(
+    (index) => /* @__PURE__ */ import_react50.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react50.default.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
-  const renderWrappedChild = (0, import_react49.useCallback)(
+  const renderWrappedChild = (0, import_react50.useCallback)(
     (index) => {
       const contextValue = getItemContextValue(index);
       const current = renderChild(index);
-      if (!contextValue || !(0, import_react49.isValidElement)(current))
+      if (!contextValue || !(0, import_react50.isValidElement)(current))
         return null;
-      return /* @__PURE__ */ import_react49.default.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
+      return /* @__PURE__ */ import_react50.default.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
     },
     [getItemContextValue, renderChild]
   );
-  const ids = (0, import_react49.useMemo)(() => data.map(keyExtractor), [keyExtractor, data]);
-  const withSortable = (children) => sortable ? /* @__PURE__ */ import_react49.default.createElement(
+  const ids = (0, import_react50.useMemo)(() => data.map(keyExtractor), [keyExtractor, data]);
+  const withSortable = (children) => sortable ? /* @__PURE__ */ import_react50.default.createElement(
     Sortable.Root,
     {
       onMoveItem,
@@ -5068,8 +5098,8 @@ var ListViewRootInner = (0, import_react49.forwardRef)(function ListViewRootInne
     },
     children
   ) : children;
-  const withScrollable = (children) => scrollable ? /* @__PURE__ */ import_react49.default.createElement(ScrollArea, null, children) : children(null);
-  const getItemHeight = (0, import_react49.useCallback)(
+  const withScrollable = (children) => scrollable ? /* @__PURE__ */ import_react50.default.createElement(ScrollArea, null, children) : children(null);
+  const getItemHeight = (0, import_react50.useCallback)(
     (index) => {
       const child = getItemContextValue(index);
       const margin = child?.marginType ? getPositionMargin(child.marginType) : { top: 0, bottom: 0 };
@@ -5078,12 +5108,12 @@ var ListViewRootInner = (0, import_react49.forwardRef)(function ListViewRootInne
     },
     [getItemContextValue, variant]
   );
-  const getKey = (0, import_react49.useCallback)(
+  const getKey = (0, import_react50.useCallback)(
     (index) => keyExtractor(data[index], index),
     [data, keyExtractor]
   );
-  const draggingContextValue = (0, import_react49.useMemo)(() => ({ indentation }), [indentation]);
-  return /* @__PURE__ */ import_react49.default.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react49.default.createElement(
+  const draggingContextValue = (0, import_react50.useMemo)(() => ({ indentation }), [indentation]);
+  return /* @__PURE__ */ import_react50.default.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react50.default.createElement(
     RootContainer2,
     {
       id,
@@ -5097,7 +5127,7 @@ var ListViewRootInner = (0, import_react49.forwardRef)(function ListViewRootInne
     },
     withScrollable(
       (scrollElementRef) => withSortable(
-        virtualized ? /* @__PURE__ */ import_react49.default.createElement(
+        virtualized ? /* @__PURE__ */ import_react50.default.createElement(
           VirtualizedList,
           {
             ref: forwardedRef,
@@ -5113,42 +5143,42 @@ var ListViewRootInner = (0, import_react49.forwardRef)(function ListViewRootInne
     )
   ));
 });
-var ListViewRoot = (0, import_react49.memo)(ListViewRootInner);
-var ChildrenListViewInner = (0, import_react49.forwardRef)(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
-  const items = (0, import_react49.useMemo)(
-    () => import_react49.Children.toArray(children).flatMap(
-      (child) => (0, import_react49.isValidElement)(child) ? [child] : []
+var ListViewRoot = (0, import_react50.memo)(ListViewRootInner);
+var ChildrenListViewInner = (0, import_react50.forwardRef)(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
+  const items = (0, import_react50.useMemo)(
+    () => import_react50.Children.toArray(children).flatMap(
+      (child) => (0, import_react50.isValidElement)(child) ? [child] : []
     ),
     [children]
   );
-  return /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(
     ListViewRoot,
     {
       ref: forwardedRef,
       ...rest,
       data: items,
-      keyExtractor: (0, import_react49.useCallback)(
+      keyExtractor: (0, import_react50.useCallback)(
         ({ key }, index) => typeof key === "string" ? key : (key ?? index).toString(),
         []
       ),
-      renderItem: (0, import_react49.useCallback)((item) => item, [])
+      renderItem: (0, import_react50.useCallback)((item) => item, [])
     }
   );
 });
-var ChildrenListView = (0, import_react49.memo)(ChildrenListViewInner);
-var SimpleListViewInner = (0, import_react49.forwardRef)(function SimpleListViewInner2(props, forwardedRef) {
+var ChildrenListView = (0, import_react50.memo)(ChildrenListViewInner);
+var SimpleListViewInner = (0, import_react50.forwardRef)(function SimpleListViewInner2(props, forwardedRef) {
   if ("children" in props) {
-    return /* @__PURE__ */ import_react49.default.createElement(ChildrenListView, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ import_react50.default.createElement(ChildrenListView, { ref: forwardedRef, ...props });
   } else {
-    return /* @__PURE__ */ import_react49.default.createElement(ListViewRoot, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ import_react50.default.createElement(ListViewRoot, { ref: forwardedRef, ...props });
   }
 });
-var SimpleListView = (0, import_react49.memo)(SimpleListViewInner);
+var SimpleListView = (0, import_react50.memo)(SimpleListViewInner);
 var ListView;
 ((ListView2) => {
-  ListView2.RowTitle = (0, import_react49.memo)(ListViewRowTitle);
-  ListView2.EditableRowTitle = (0, import_react49.memo)(ListViewEditableRowTitle);
-  ListView2.Row = (0, import_react49.memo)(ListViewRow);
+  ListView2.RowTitle = (0, import_react50.memo)(ListViewRowTitle);
+  ListView2.EditableRowTitle = (0, import_react50.memo)(ListViewEditableRowTitle);
+  ListView2.Row = (0, import_react50.memo)(ListViewRow);
   ListView2.Root = SimpleListView;
   ListView2.RowContext = ListRowContext;
   ListView2.DragIndicator = ListViewDragIndicatorElement;
@@ -5161,7 +5191,7 @@ var ListView;
 })(ListView || (ListView = {}));
 
 // src/components/Text.tsx
-var import_react50 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var import_styled_components26 = __toESM(require("styled-components"));
 var elements = {
   title: "h1",
@@ -5183,7 +5213,7 @@ var StyledElement = import_styled_components26.default.span(({ theme, $variant,
   ...$styleProps,
   ...mergeBreakpoints($breakpoints || [])
 }));
-var Text = (0, import_react50.forwardRef)(function Text2({
+var Text = (0, import_react51.forwardRef)(function Text2({
   as,
   variant,
   breakpoints,
@@ -5197,7 +5227,7 @@ var Text = (0, import_react50.forwardRef)(function Text2({
   ...rest
 }, forwardedRef) {
   const element = as ?? elements[variant] ?? "span";
-  return /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement(
     StyledElement,
     {
       ref: forwardedRef,
@@ -5215,28 +5245,28 @@ var Text = (0, import_react50.forwardRef)(function Text2({
     children
   );
 });
-var Heading1 = (0, import_react50.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react50.default.createElement(Text, { ref, ...props, variant: "heading1" })
+var Heading1 = (0, import_react51.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react51.default.createElement(Text, { ref, ...props, variant: "heading1" })
 );
-var Heading2 = (0, import_react50.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react50.default.createElement(Text, { ref, ...props, variant: "heading2" })
+var Heading2 = (0, import_react51.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react51.default.createElement(Text, { ref, ...props, variant: "heading2" })
 );
-var Heading3 = (0, import_react50.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react50.default.createElement(Text, { ref, ...props, variant: "heading3" })
+var Heading3 = (0, import_react51.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react51.default.createElement(Text, { ref, ...props, variant: "heading3" })
 );
-var Heading4 = (0, import_react50.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react50.default.createElement(Text, { ref, ...props, variant: "heading4" })
+var Heading4 = (0, import_react51.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react51.default.createElement(Text, { ref, ...props, variant: "heading4" })
 );
-var Heading5 = (0, import_react50.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react50.default.createElement(Text, { ref, ...props, variant: "heading5" })
+var Heading5 = (0, import_react51.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react51.default.createElement(Text, { ref, ...props, variant: "heading5" })
 );
-var Body = (0, import_react50.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react50.default.createElement(Text, { ref, ...props, variant: "body" })
+var Body = (0, import_react51.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react51.default.createElement(Text, { ref, ...props, variant: "body" })
 );
-var Small = (0, import_react50.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react50.default.createElement(Text, { ref, ...props, variant: "small" })
+var Small = (0, import_react51.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react51.default.createElement(Text, { ref, ...props, variant: "small" })
 );
-var Italic = ({ children }) => /* @__PURE__ */ import_react50.default.createElement(
+var Italic = ({ children }) => /* @__PURE__ */ import_react51.default.createElement(
   "span",
   {
     style: {
@@ -5278,15 +5308,15 @@ var CompletionToken = import_styled_components27.default.span(
     whiteSpace: "pre"
   })
 );
-var CompletionMenu = (0, import_react51.memo)(
-  (0, import_react51.forwardRef)(function CompletionMenu2({
+var CompletionMenu = (0, import_react52.memo)(
+  (0, import_react52.forwardRef)(function CompletionMenu2({
     items,
     selectedIndex,
     onSelectItem,
     onHoverIndex,
     listSize
   }, forwardedRef) {
-    return /* @__PURE__ */ import_react51.default.createElement(
+    return /* @__PURE__ */ import_react52.default.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -5298,13 +5328,13 @@ var CompletionMenu = (0, import_react51.memo)(
         sectionHeaderVariant: "label",
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ import_react51.default.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
+            return /* @__PURE__ */ import_react52.default.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
           }
           const tokens = fuzzyTokenize({
             item: item.name,
             itemScore: item
           });
-          return /* @__PURE__ */ import_react51.default.createElement(
+          return /* @__PURE__ */ import_react52.default.createElement(
             ListView.Row,
             {
               key: item.id,
@@ -5316,16 +5346,16 @@ var CompletionMenu = (0, import_react51.memo)(
                 }
               }
             },
-            tokens.map((token, j) => /* @__PURE__ */ import_react51.default.createElement(CompletionToken, { key: j, $type: token.type }, token.text)),
-            item.icon && /* @__PURE__ */ import_react51.default.createElement(import_react51.default.Fragment, null, /* @__PURE__ */ import_react51.default.createElement(Spacer.Horizontal, null), item.icon)
+            tokens.map((token, j) => /* @__PURE__ */ import_react52.default.createElement(CompletionToken, { key: j, $type: token.type }, token.text)),
+            item.icon && /* @__PURE__ */ import_react52.default.createElement(import_react52.default.Fragment, null, /* @__PURE__ */ import_react52.default.createElement(Spacer.Horizontal, null), item.icon)
           );
         }
       }
     );
   })
 );
-var InputFieldWithCompletions = (0, import_react51.memo)(
-  (0, import_react51.forwardRef)(function InputFieldWithCompletions2({
+var InputFieldWithCompletions = (0, import_react52.memo)(
+  (0, import_react52.forwardRef)(function InputFieldWithCompletions2({
     loading,
     initialValue = "",
     placeholder,
@@ -5343,13 +5373,13 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
     hideChildrenWhenFocused = false,
     hideMenuWhenEmptyValue = false
   }, forwardedRef) {
-    const ref = (0, import_react51.useRef)(null);
-    const [isFocused, setIsFocused] = (0, import_react51.useState)(false);
-    const [state, _setState] = (0, import_react51.useState)({
+    const ref = (0, import_react52.useRef)(null);
+    const [isFocused, setIsFocused] = (0, import_react52.useState)(false);
+    const [state, _setState] = (0, import_react52.useState)({
       filter: initialValue,
       selectedIndex: 0
     });
-    const updateState = (0, import_react51.useCallback)(
+    const updateState = (0, import_react52.useCallback)(
       (newState, hoverItem) => {
         const nextState = { ...state, ...newState };
         const nextItems = filterWithGroupedSections(items, nextState.filter);
@@ -5378,16 +5408,16 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
       },
       [items, onChange, onHoverItem, state]
     );
-    const initialValueRef = (0, import_react51.useRef)(initialValue);
-    (0, import_react51.useLayoutEffect)(() => {
+    const initialValueRef = (0, import_react52.useRef)(initialValue);
+    (0, import_react52.useLayoutEffect)(() => {
       if (initialValueRef.current === initialValue)
         return;
       initialValueRef.current = initialValue;
       updateState({ filter: initialValue });
     }, [initialValue, updateState]);
     const { filter, selectedIndex } = state;
-    const listRef = import_react51.default.useRef(null);
-    const filteredItems = (0, import_react51.useMemo)(
+    const listRef = import_react52.default.useRef(null);
+    const filteredItems = (0, import_react52.useMemo)(
       () => filterWithGroupedSections(items, filter),
       [items, filter]
     );
@@ -5403,13 +5433,13 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
       ),
       ListView.rowHeight * 10.5
     );
-    (0, import_react51.useEffect)(() => {
+    (0, import_react52.useEffect)(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
-    const lastSubmittedValueRef = (0, import_react51.useRef)(void 0);
-    const selectItem = (0, import_react51.useCallback)(
+    const lastSubmittedValueRef = (0, import_react52.useRef)(void 0);
+    const selectItem = (0, import_react52.useCallback)(
       (item) => {
         if (item.type === "sectionHeader")
           return;
@@ -5425,17 +5455,17 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
       },
       [filter, onSelectItem, onHoverItem, ref]
     );
-    const handleChange = (0, import_react51.useCallback)(
+    const handleChange = (0, import_react52.useCallback)(
       (value) => updateState({ selectedIndex: 0, filter: value }),
       [updateState]
     );
-    const handleBlur = (0, import_react51.useCallback)(() => {
+    const handleBlur = (0, import_react52.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_react51.useCallback)(
+    const handleFocus = (0, import_react52.useCallback)(
       (event) => {
         setIsFocused(true);
         updateState({ selectedIndex: 0, filter: initialValue });
@@ -5443,11 +5473,11 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
       },
       [initialValue, onFocus, updateState]
     );
-    const handleIndexChange = (0, import_react51.useCallback)(
+    const handleIndexChange = (0, import_react52.useCallback)(
       (index) => updateState({ selectedIndex: index }),
       [updateState]
     );
-    const handleKeyDown = (0, import_react51.useCallback)(
+    const handleKeyDown = (0, import_react52.useCallback)(
       (event) => {
         let handled = false;
         switch (event.key) {
@@ -5511,7 +5541,7 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
     );
     const display = !filter && hideMenuWhenEmptyValue ? "none" : "flex";
     const typeaheadValue = filteredItems[selectedIndex]?.name;
-    (0, import_react51.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react52.useImperativeHandle)(forwardedRef, () => ({
       focus: () => {
         ref.current?.focus();
       },
@@ -5522,14 +5552,14 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
         ref.current?.setSelectionRange(0, ref.current.value.length);
       }
     }));
-    return /* @__PURE__ */ import_react51.default.createElement(
+    return /* @__PURE__ */ import_react52.default.createElement(
       InputField.Root,
       {
         size: size2,
         labelSize: 16,
         renderPopoverContent: ({ width }) => {
           const listSize = { width, height };
-          return /* @__PURE__ */ import_react51.default.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ import_react51.default.createElement(
+          return /* @__PURE__ */ import_react52.default.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ import_react52.default.createElement(
             CompletionMenu,
             {
               ref: listRef,
@@ -5539,7 +5569,7 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
               onHoverIndex: handleIndexChange,
               listSize
             }
-          ) : /* @__PURE__ */ import_react51.default.createElement(
+          ) : /* @__PURE__ */ import_react52.default.createElement(
             Stack.V,
             {
               height: "100px",
@@ -5547,11 +5577,11 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
               alignItems: "center",
               justifyContent: "center"
             },
-            /* @__PURE__ */ import_react51.default.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
+            /* @__PURE__ */ import_react52.default.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
           ));
         }
       },
-      /* @__PURE__ */ import_react51.default.createElement(
+      /* @__PURE__ */ import_react52.default.createElement(
         InputField.Input,
         {
           ref,
@@ -5575,9 +5605,9 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
           "aria-controls": "component-listbox"
         }
       ),
-      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ import_react51.default.createElement(InputField.Typeahead, { value: typeaheadValue }),
+      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ import_react52.default.createElement(InputField.Typeahead, { value: typeaheadValue }),
       (!isFocused || !hideChildrenWhenFocused) && children,
-      loading && isFocused && /* @__PURE__ */ import_react51.default.createElement(InputField.Label, null, /* @__PURE__ */ import_react51.default.createElement(ActivityIndicator, null))
+      loading && isFocused && /* @__PURE__ */ import_react52.default.createElement(InputField.Label, null, /* @__PURE__ */ import_react52.default.createElement(ActivityIndicator, null))
     );
   })
 );
@@ -5599,9 +5629,9 @@ function getNextIndex(items, currentIndex, direction, isDisabled) {
 }
 
 // src/components/InspectorContainer.tsx
-var import_react52 = __toESM(require("react"));
-var InspectorContainer = (0, import_react52.memo)(
-  (0, import_react52.forwardRef)(function InspectorContainer2({
+var import_react53 = __toESM(require("react"));
+var InspectorContainer = (0, import_react53.memo)(
+  (0, import_react53.forwardRef)(function InspectorContainer2({
     header,
     children,
     fallback,
@@ -5611,7 +5641,7 @@ var InspectorContainer = (0, import_react52.memo)(
     style: style3
   }, forwardedRef) {
     const theme = useDesignSystemTheme();
-    return /* @__PURE__ */ import_react52.default.createElement(
+    return /* @__PURE__ */ import_react53.default.createElement(
       "div",
       {
         ref: forwardedRef,
@@ -5626,13 +5656,13 @@ var InspectorContainer = (0, import_react52.memo)(
         }
       },
       header,
-      children ? /* @__PURE__ */ import_react52.default.createElement(ScrollArea, null, /* @__PURE__ */ import_react52.default.createElement(Stack.V, { position: "relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ import_react52.default.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ import_react52.default.createElement(Stack.V, { position: "relative", height: "100%" }, fallback) : null
+      children ? /* @__PURE__ */ import_react53.default.createElement(ScrollArea, null, /* @__PURE__ */ import_react53.default.createElement(Stack.V, { position: "relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ import_react53.default.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ import_react53.default.createElement(Stack.V, { position: "relative", height: "100%" }, fallback) : null
     );
   })
 );
 
 // src/components/Label.tsx
-var import_react53 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 var import_styled_components28 = __toESM(require("styled-components"));
 var LabelLabel = import_styled_components28.default.label(
   ({ theme, $selected }) => ({
@@ -5661,17 +5691,17 @@ var LabelContainer2 = import_styled_components28.default.span(({ theme }) => ({
   alignItems: "center"
 }));
 function LabelRoot({ label, children }) {
-  return /* @__PURE__ */ import_react53.default.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, /* @__PURE__ */ import_react53.default.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ import_react53.default.createElement(LabelLabel, null, label)));
+  return /* @__PURE__ */ import_react54.default.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ import_react54.default.createElement(LabelLabel, null, label)));
 }
 var Label;
 ((_Label) => {
-  _Label.Label = (0, import_react53.memo)(LabelLabel);
-  _Label.Root = (0, import_react53.memo)(LabelRoot);
+  _Label.Label = (0, import_react54.memo)(LabelLabel);
+  _Label.Root = (0, import_react54.memo)(LabelRoot);
 })(Label || (Label = {}));
 
 // src/components/LabeledElementView.tsx
 var kiwi = __toESM(require("kiwi.js"));
-var import_react54 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 var import_styled_components29 = __toESM(require("styled-components"));
 var Container4 = import_styled_components29.default.div(({ theme }) => ({
   display: "flex",
@@ -5690,24 +5720,24 @@ var Labels = import_styled_components29.default.div(({ theme }) => ({
   overflow: "hidden",
   userSelect: "none"
 }));
-var LabeledElementView = (0, import_react54.memo)(function LabeledElementView2({
+var LabeledElementView = (0, import_react55.memo)(function LabeledElementView2({
   children,
   renderLabel
 }) {
-  const elementIds = import_react54.Children.toArray(children).flatMap(
-    (child) => (0, import_react54.isValidElement)(child) && child.type === import_react54.Fragment ? child.props.children : [child]
+  const elementIds = import_react55.Children.toArray(children).flatMap(
+    (child) => (0, import_react55.isValidElement)(child) && child.type === import_react55.Fragment ? child.props.children : [child]
   ).map(
-    (child) => (0, import_react54.isValidElement)(child) && "id" in child.props ? child.props.id : null
+    (child) => (0, import_react55.isValidElement)(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = (0, import_react54.useRef)(null);
-  const refs = (0, import_react54.useMemo)(() => {
+  const containerRef = (0, import_react55.useRef)(null);
+  const refs = (0, import_react55.useMemo)(() => {
     return Object.fromEntries(
-      serializedIds.split(",").map((id) => [id, (0, import_react54.createRef)()])
+      serializedIds.split(",").map((id) => [id, (0, import_react55.createRef)()])
     );
   }, [serializedIds]);
-  const labelElements = (0, import_react54.useMemo)(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ import_react54.default.createElement(
+  const labelElements = (0, import_react55.useMemo)(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ import_react55.default.createElement(
       "span",
       {
         key: id,
@@ -5720,7 +5750,7 @@ var LabeledElementView = (0, import_react54.memo)(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  (0, import_react54.useLayoutEffect)(() => {
+  (0, import_react55.useLayoutEffect)(() => {
     if (!containerRef.current)
       return;
     const containerRect = containerRef.current.getBoundingClientRect();
@@ -5785,13 +5815,13 @@ var LabeledElementView = (0, import_react54.memo)(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ import_react54.default.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ import_react54.default.createElement(Tools, null, children), /* @__PURE__ */ import_react54.default.createElement(Labels, null, labelElements));
+  return /* @__PURE__ */ import_react55.default.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ import_react55.default.createElement(Tools, null, children), /* @__PURE__ */ import_react55.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_react55 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 var import_styled_components30 = __toESM(require("styled-components"));
 function Progress({
   value,
@@ -5801,7 +5831,7 @@ function Progress({
   variant = "normal"
 }) {
   const clampedValue = (0, import_noya_utils9.clamp)(value, 0, 100);
-  return /* @__PURE__ */ import_react55.default.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ import_react56.default.createElement(
     ProgressIndicator,
     {
       variant,
@@ -5826,7 +5856,7 @@ var ProgressIndicator = (0, import_styled_components30.default)(ProgressPrimitiv
 
 // src/components/RadioGroup.tsx
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"));
-var import_react56 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 var import_styled_components31 = __toESM(require("styled-components"));
 var ignoredProps2 = /* @__PURE__ */ new Set(["colorScheme"]);
 var StyledRoot = (0, import_styled_components31.default)(ToggleGroupPrimitive.Root).withConfig({
@@ -5879,9 +5909,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_react56.forwardRef)(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
-  const { colorScheme } = (0, import_react56.useContext)(RadioGroupContext);
-  const itemElement = /* @__PURE__ */ import_react56.default.createElement(
+var ToggleGroupItem = (0, import_react57.forwardRef)(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
+  const { colorScheme } = (0, import_react57.useContext)(RadioGroupContext);
+  const itemElement = /* @__PURE__ */ import_react57.default.createElement(
     StyledItem,
     {
       ref: forwardedRef,
@@ -5891,9 +5921,9 @@ var ToggleGroupItem = (0, import_react56.forwardRef)(function ToggleGroupItem2({
     },
     children
   );
-  return tooltip ? /* @__PURE__ */ import_react56.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ import_react57.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
-var RadioGroupContext = (0, import_react56.createContext)({
+var RadioGroupContext = (0, import_react57.createContext)({
   colorScheme: "primary"
 });
 function ToggleGroupRoot({
@@ -5904,8 +5934,8 @@ function ToggleGroupRoot({
   allowEmpty,
   children
 }) {
-  const contextValue = (0, import_react56.useMemo)(() => ({ colorScheme }), [colorScheme]);
-  const handleValueChange = (0, import_react56.useCallback)(
+  const contextValue = (0, import_react57.useMemo)(() => ({ colorScheme }), [colorScheme]);
+  const handleValueChange = (0, import_react57.useCallback)(
     (value2) => {
       if (!allowEmpty && !value2)
         return;
@@ -5913,7 +5943,7 @@ function ToggleGroupRoot({
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ import_react56.default.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react56.default.createElement(
+  return /* @__PURE__ */ import_react57.default.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react57.default.createElement(
     StyledRoot,
     {
       id,
@@ -5927,28 +5957,28 @@ function ToggleGroupRoot({
 }
 var RadioGroup;
 ((RadioGroup2) => {
-  RadioGroup2.Root = (0, import_react56.memo)(ToggleGroupRoot);
-  RadioGroup2.Item = (0, import_react56.memo)(ToggleGroupItem);
+  RadioGroup2.Root = (0, import_react57.memo)(ToggleGroupRoot);
+  RadioGroup2.Item = (0, import_react57.memo)(ToggleGroupItem);
 })(RadioGroup || (RadioGroup = {}));
 
 // src/components/Select.tsx
 var import_noya_utils10 = require("@noya-app/noya-utils");
-var import_react57 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var import_styled_components32 = __toESM(require("styled-components"));
-var SelectContext = (0, import_react57.createContext)(void 0);
-var SelectOption = (0, import_react57.memo)(function SelectOption2({
+var SelectContext = (0, import_react58.createContext)(void 0);
+var SelectOption = (0, import_react58.memo)(function SelectOption2({
   value,
   title,
   onSelect
 }) {
-  const { addListener, removeListener } = (0, import_react57.useContext)(SelectContext);
-  (0, import_react57.useEffect)(() => {
+  const { addListener, removeListener } = (0, import_react58.useContext)(SelectContext);
+  (0, import_react58.useEffect)(() => {
     if (!onSelect)
       return;
     addListener(value, onSelect);
     return () => removeListener(value);
   }, [addListener, onSelect, removeListener, value]);
-  return /* @__PURE__ */ import_react57.default.createElement("option", { value }, title ?? value);
+  return /* @__PURE__ */ import_react58.default.createElement("option", { value }, title ?? value);
 });
 var createChevronSVGString = (0, import_noya_utils10.memoize)(
   (color) => `
@@ -5983,7 +6013,7 @@ var SelectElement = import_styled_components32.default.select(
     borderRadius: "4px",
     paddingTop: "4px",
     paddingBottom: "4px",
-    paddingLeft: "8px",
+    paddingLeft: "6px",
     paddingRight: "23px",
     background: [
       `calc(100% - 6px) / 15px url("data:image/svg+xml;utf8,${createChevronSVGString(
@@ -6010,7 +6040,7 @@ var SelectLabel = import_styled_components32.default.label(({ theme }) => ({
   justifyContent: "end",
   paddingRight: "24px"
 }));
-var Select = (0, import_react57.memo)(function Select2({
+var Select = (0, import_react58.memo)(function Select2({
   id,
   flex,
   value,
@@ -6021,8 +6051,8 @@ var Select = (0, import_react57.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_react57.useMemo)(
-    () => options ? options.map((option, index) => /* @__PURE__ */ import_react57.default.createElement(
+  const optionElements = (0, import_react58.useMemo)(
+    () => options ? options.map((option, index) => /* @__PURE__ */ import_react58.default.createElement(
       SelectOption,
       {
         key: option,
@@ -6033,36 +6063,36 @@ var Select = (0, import_react57.memo)(function Select2({
     )) : children,
     [children, getTitle, onChange, options]
   );
-  const listeners = (0, import_react57.useRef)(/* @__PURE__ */ new Map());
-  const contextValue = (0, import_react57.useMemo)(
+  const listeners = (0, import_react58.useRef)(/* @__PURE__ */ new Map());
+  const contextValue = (0, import_react58.useMemo)(
     () => ({
       addListener: (value2, listener) => listeners.current.set(value2, listener),
       removeListener: (value2) => listeners.current.delete(value2)
     }),
     []
   );
-  return /* @__PURE__ */ import_react57.default.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react57.default.createElement(SelectContainer, { $flex: flex }, /* @__PURE__ */ import_react57.default.createElement(
+  return /* @__PURE__ */ import_react58.default.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react58.default.createElement(SelectContainer, { $flex: flex }, /* @__PURE__ */ import_react58.default.createElement(
     SelectElement,
     {
       id,
       $flex: flex,
       value,
-      onChange: (0, import_react57.useCallback)(
+      onChange: (0, import_react58.useCallback)(
         (event) => listeners.current.get(event.target.value)?.(),
         [listeners]
       ),
       onPointerDown: (event) => event.stopPropagation()
     },
     optionElements
-  )), label && /* @__PURE__ */ import_react57.default.createElement(SelectLabel, { htmlFor: id }, label));
+  )), label && /* @__PURE__ */ import_react58.default.createElement(SelectLabel, { htmlFor: id }, label));
 });
 
 // src/components/SelectMenu.tsx
 var import_noya_icons6 = require("@noya-app/noya-icons");
 var Select3 = __toESM(require("@radix-ui/react-select"));
-var import_react58 = __toESM(require("react"));
+var import_react59 = __toESM(require("react"));
 var import_styled_components33 = require("styled-components");
-var SelectMenu = (0, import_react58.memo)(function SelectMenu2({
+var SelectMenu = (0, import_react59.memo)(function SelectMenu2({
   id,
   style: style3,
   className,
@@ -6075,23 +6105,23 @@ var SelectMenu = (0, import_react58.memo)(function SelectMenu2({
     (item) => typeof item !== "string" && item.value === value
   );
   const icon = selectedItem?.icon;
-  return /* @__PURE__ */ import_react58.default.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ import_react58.default.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ import_react58.default.createElement(Button, { id, style: style3, className }, icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, icon, /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react58.default.createElement(Select3.Value, { placeholder }), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react58.default.createElement(import_noya_icons6.DropdownChevronIcon, null))), /* @__PURE__ */ import_react58.default.createElement(Select3.Portal, null, /* @__PURE__ */ import_react58.default.createElement(SelectContent, null, /* @__PURE__ */ import_react58.default.createElement(SelectViewport, null, menuItems.map((menuItem) => {
+  return /* @__PURE__ */ import_react59.default.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ import_react59.default.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ import_react59.default.createElement(Button, { id, style: style3, className }, icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react59.default.createElement(Select3.Value, { placeholder }), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react59.default.createElement(import_noya_icons6.DropdownChevronIcon, null))), /* @__PURE__ */ import_react59.default.createElement(Select3.Portal, null, /* @__PURE__ */ import_react59.default.createElement(SelectContent, null, /* @__PURE__ */ import_react59.default.createElement(SelectViewport, null, menuItems.map((menuItem) => {
     if (typeof menuItem === "string") {
-      return /* @__PURE__ */ import_react58.default.createElement(StyledSeparator, null);
+      return /* @__PURE__ */ import_react59.default.createElement(StyledSeparator, null);
     }
     const value2 = menuItem.value ?? "";
-    return /* @__PURE__ */ import_react58.default.createElement(SelectItem, { key: value2, value: value2, icon: menuItem.icon }, menuItem.title ?? value2);
+    return /* @__PURE__ */ import_react59.default.createElement(SelectItem, { key: value2, value: value2, icon: menuItem.icon }, menuItem.title ?? value2);
   })))));
 });
 var SelectContent = (0, import_styled_components33.styled)(Select3.Content)(styles.contentStyle);
 var SelectViewport = (0, import_styled_components33.styled)(Select3.Viewport)({});
-var SelectItem = import_react58.default.forwardRef(
+var SelectItem = import_react59.default.forwardRef(
   ({
     children,
     icon,
     ...props
   }, forwardedRef) => {
-    return /* @__PURE__ */ import_react58.default.createElement(StyledItem2, { ...props, ref: forwardedRef }, icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, icon, /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react58.default.createElement(Select3.ItemText, null, children));
+    return /* @__PURE__ */ import_react59.default.createElement(StyledItem2, { ...props, ref: forwardedRef }, icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react59.default.createElement(Select3.ItemText, null, children));
   }
 );
 var StyledItem2 = (0, import_styled_components33.styled)(Select3.Item)(styles.itemStyle);
@@ -6099,7 +6129,7 @@ var StyledSeparator = (0, import_styled_components33.styled)(Select3.Separator)(
 
 // src/components/Slider.tsx
 var RadixSlider = __toESM(require("@radix-ui/react-slider"));
-var import_react59 = __toESM(require("react"));
+var import_react60 = __toESM(require("react"));
 var import_styled_components34 = __toESM(require("styled-components"));
 var StyledSlider = (0, import_styled_components34.default)(RadixSlider.Root)({
   flex: "1",
@@ -6140,17 +6170,17 @@ var Slider = function Slider2({
   min,
   max
 }) {
-  const arrayValue = (0, import_react59.useMemo)(
+  const arrayValue = (0, import_react60.useMemo)(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
-  const handleValueChange = (0, import_react59.useCallback)(
+  const handleValueChange = (0, import_react60.useCallback)(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ import_react59.default.createElement(
+  return /* @__PURE__ */ import_react60.default.createElement(
     StyledSlider,
     {
       min,
@@ -6159,14 +6189,14 @@ var Slider = function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange
     },
-    /* @__PURE__ */ import_react59.default.createElement(StyledTrack, null, /* @__PURE__ */ import_react59.default.createElement(StyledRange, null)),
-    /* @__PURE__ */ import_react59.default.createElement(StyledThumb2, null)
+    /* @__PURE__ */ import_react60.default.createElement(StyledTrack, null, /* @__PURE__ */ import_react60.default.createElement(StyledRange, null)),
+    /* @__PURE__ */ import_react60.default.createElement(StyledThumb2, null)
   );
 };
 
 // src/components/Switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var import_react60 = __toESM(require("react"));
+var import_react61 = __toESM(require("react"));
 var import_styled_components35 = __toESM(require("styled-components"));
 var SwitchRoot = (0, import_styled_components35.default)(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
   all: "unset",
@@ -6201,7 +6231,7 @@ var Switch = function Switch2({
   onChange,
   colorScheme = "normal"
 }) {
-  return /* @__PURE__ */ import_react60.default.createElement(
+  return /* @__PURE__ */ import_react61.default.createElement(
     SwitchRoot,
     {
       $colorScheme: colorScheme,
@@ -6210,62 +6240,62 @@ var Switch = function Switch2({
         onChange(newValue);
       }
     },
-    /* @__PURE__ */ import_react60.default.createElement(SwitchThumb, null)
+    /* @__PURE__ */ import_react61.default.createElement(SwitchThumb, null)
   );
 };
 
 // src/components/TreeView.tsx
-var import_react61 = __toESM(require("react"));
-var TreeRow = (0, import_react61.forwardRef)(function TreeRow2({
+var import_react62 = __toESM(require("react"));
+var TreeRow = (0, import_react62.forwardRef)(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
   children,
   ...rest
 }, forwardedRef) {
-  const { expandable } = (0, import_react61.useContext)(ListView.RowContext);
-  const handleClickChevron = (0, import_react61.useCallback)(
+  const { expandable } = (0, import_react62.useContext)(ListView.RowContext);
+  const handleClickChevron = (0, import_react62.useCallback)(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ import_react61.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react61.default.createElement(import_react61.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react61.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react61.default.createElement(
+  return /* @__PURE__ */ import_react62.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react62.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react62.default.createElement(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react61.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react61.default.createElement(import_react61.default.Fragment, null, icon, /* @__PURE__ */ import_react61.default.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ import_react62.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react62.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_react61.memo)(TreeRow);
+  TreeView2.Row = (0, import_react62.memo)(TreeRow);
 })(TreeView || (TreeView = {}));
 
 // src/components/WorkspaceLayout.tsx
 var import_noya_keymap5 = require("@noya-app/noya-keymap");
-var import_react64 = __toESM(require("react"));
+var import_react65 = __toESM(require("react"));
 var import_react_resizable_panels = require("react-resizable-panels");
 
 // src/hooks/usePreservePanelSize.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 
 // src/hooks/useWindowSize.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 function useWindowSize() {
-  const [size2, setSize] = (0, import_react62.useState)(
+  const [size2, setSize] = (0, import_react63.useState)(
     typeof window === "undefined" ? { width: 0, height: 0 } : {
       width: window.innerWidth,
       height: window.innerHeight
     }
   );
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     const handleResize = () => setSize({
       width: window.innerWidth,
       height: window.innerHeight
@@ -6283,8 +6313,8 @@ var RIGHT_SIDEBAR_ID = "editor-right-sidebar";
 var CONTENT_AREA_ID = "editor-content-area";
 function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
   const windowSize = useWindowSize();
-  const layoutRef = (0, import_react63.useRef)();
-  (0, import_react63.useLayoutEffect)(() => {
+  const layoutRef = (0, import_react64.useRef)();
+  (0, import_react64.useLayoutEffect)(() => {
     const panelGroup = document.querySelector(
       `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
     );
@@ -6327,7 +6357,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
       panelGroupObserver.disconnect();
     };
   }, [panelGroupRef, setPanelLayoutState]);
-  (0, import_react63.useLayoutEffect)(() => {
+  (0, import_react64.useLayoutEffect)(() => {
     if (!layoutRef.current)
       return;
     const {
@@ -6387,7 +6417,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/WorkspaceLayout.tsx
-var WorkspaceLayout = (0, import_react64.forwardRef)(function WorkspaceLayout2({
+var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
   autoSavePrefix,
   leftSidebarContent: leftPanelContent,
   children: centerPanelContent,
@@ -6412,12 +6442,12 @@ var WorkspaceLayout = (0, import_react64.forwardRef)(function WorkspaceLayout2({
   const rightSidebarPercentage = getPercentage(rightSidebarInitialSize);
   const leftSidebarMinPercentage = leftSidebarMinSize !== void 0 ? getPercentage(leftSidebarMinSize) : void 0;
   const rightSidebarMinPercentage = rightSidebarMinSize !== void 0 ? getPercentage(rightSidebarMinSize) : void 0;
-  const panelGroupRef = (0, import_react64.useRef)(null);
-  const leftSidebarRef = (0, import_react64.useRef)(null);
-  const rightSidebarRef = (0, import_react64.useRef)(null);
+  const panelGroupRef = (0, import_react65.useRef)(null);
+  const leftSidebarRef = (0, import_react65.useRef)(null);
+  const rightSidebarRef = (0, import_react65.useRef)(null);
   usePreservePanelSize(panelGroupRef, onChangeLayoutState);
   const theme = useDesignSystemTheme();
-  (0, import_react64.useImperativeHandle)(forwardedRef, () => ({
+  (0, import_react65.useImperativeHandle)(forwardedRef, () => ({
     setLeftSidebarExpanded: (expanded) => {
       if (expanded) {
         leftSidebarRef.current?.expand();
@@ -6474,7 +6504,7 @@ var WorkspaceLayout = (0, import_react64.forwardRef)(function WorkspaceLayout2({
     }
   });
   const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
-  return /* @__PURE__ */ import_react64.default.createElement(
+  return /* @__PURE__ */ import_react65.default.createElement(
     "div",
     {
       id,
@@ -6486,7 +6516,7 @@ var WorkspaceLayout = (0, import_react64.forwardRef)(function WorkspaceLayout2({
         ...style3
       }
     },
-    /* @__PURE__ */ import_react64.default.createElement(
+    /* @__PURE__ */ import_react65.default.createElement(
       import_react_resizable_panels.PanelGroup,
       {
         ref: panelGroupRef,
@@ -6495,7 +6525,7 @@ var WorkspaceLayout = (0, import_react64.forwardRef)(function WorkspaceLayout2({
         autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
         style: { flex: "1" }
       },
-      hasLeftSidebar && /* @__PURE__ */ import_react64.default.createElement(import_react64.default.Fragment, null, /* @__PURE__ */ import_react64.default.createElement(
+      hasLeftSidebar && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: LEFT_SIDEBAR_ID,
@@ -6512,7 +6542,7 @@ var WorkspaceLayout = (0, import_react64.forwardRef)(function WorkspaceLayout2({
           }
         },
         leftPanelContent
-      ), /* @__PURE__ */ import_react64.default.createElement(
+      ), /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.PanelResizeHandle,
         {
           style: {
@@ -6523,7 +6553,7 @@ var WorkspaceLayout = (0, import_react64.forwardRef)(function WorkspaceLayout2({
           }
         }
       )),
-      /* @__PURE__ */ import_react64.default.createElement(
+      /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: CONTENT_AREA_ID,
@@ -6538,7 +6568,7 @@ var WorkspaceLayout = (0, import_react64.forwardRef)(function WorkspaceLayout2({
         },
         centerPanelContent
       ),
-      hasRightSidebar && /* @__PURE__ */ import_react64.default.createElement(import_react64.default.Fragment, null, /* @__PURE__ */ import_react64.default.createElement(
+      hasRightSidebar && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.PanelResizeHandle,
         {
           style: {
@@ -6548,7 +6578,7 @@ var WorkspaceLayout = (0, import_react64.forwardRef)(function WorkspaceLayout2({
             backgroundColor: theme.colors.divider
           }
         }
-      ), /* @__PURE__ */ import_react64.default.createElement(
+      ), /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: RIGHT_SIDEBAR_ID,
@@ -6611,7 +6641,7 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/ArrayController.tsx
 var import_noya_utils11 = require("@noya-app/noya-utils");
-var import_react66 = __toESM(require("react"));
+var import_react67 = __toESM(require("react"));
 var import_styled_components37 = __toESM(require("styled-components"));
 
 // src/components/InspectorPrimitives.tsx
@@ -6630,7 +6660,7 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react65 = __toESM(require("react"));
+var import_react66 = __toESM(require("react"));
 var import_styled_components36 = __toESM(require("styled-components"));
 var Section = import_styled_components36.default.div(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
@@ -6677,8 +6707,8 @@ var Checkbox = import_styled_components36.default.input(({ theme }) => ({
 var Text3 = import_styled_components36.default.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ import_react65.default.createElement(Spacer.Vertical, { size: (0, import_styled_components36.useTheme)().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components36.useTheme)().sizes.inspector.horizontalSeparator });
+var VerticalSeparator = () => /* @__PURE__ */ import_react66.default.createElement(Spacer.Vertical, { size: (0, import_styled_components36.useTheme)().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components36.useTheme)().sizes.inspector.horizontalSeparator });
 var SliderRowLabel = import_styled_components36.default.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
@@ -6698,7 +6728,7 @@ var RowLabel = import_styled_components36.default.span(({ theme, $textStyle }) =
   // Button height
   alignItems: "center"
 }));
-var LabeledRow = (0, import_react65.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react66.memo)(function LabeledRow2({
   id,
   children,
   label,
@@ -6706,13 +6736,13 @@ var LabeledRow = (0, import_react65.memo)(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ import_react65.default.createElement(Row2, { id }, /* @__PURE__ */ import_react65.default.createElement(Column, null, /* @__PURE__ */ import_react65.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react65.default.createElement(Row2, { $gap: gap }, children)));
+  return /* @__PURE__ */ import_react66.default.createElement(Row2, { id }, /* @__PURE__ */ import_react66.default.createElement(Column, null, /* @__PURE__ */ import_react66.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react66.default.createElement(Row2, { $gap: gap }, children)));
 });
-var LabeledSliderRow = (0, import_react65.memo)(function LabeledRow3({
+var LabeledSliderRow = (0, import_react66.memo)(function LabeledRow3({
   children,
   label
 }) {
-  return /* @__PURE__ */ import_react65.default.createElement(Row2, null, /* @__PURE__ */ import_react65.default.createElement(Column, null, /* @__PURE__ */ import_react65.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react65.default.createElement(Row2, null, children)));
+  return /* @__PURE__ */ import_react66.default.createElement(Row2, null, /* @__PURE__ */ import_react66.default.createElement(Column, null, /* @__PURE__ */ import_react66.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react66.default.createElement(Row2, null, children)));
 });
 
 // src/components/ArrayController.tsx
@@ -6725,7 +6755,7 @@ var ElementRow = import_styled_components37.default.div({
 var ItemContainer2 = import_styled_components37.default.div({
   position: "relative"
 });
-var ArrayController = (0, import_react66.memo)(function ArrayController2({
+var ArrayController = (0, import_react67.memo)(function ArrayController2({
   id,
   items,
   title,
@@ -6743,12 +6773,12 @@ var ArrayController = (0, import_react66.memo)(function ArrayController2({
 }) {
   const iconColor = (0, import_styled_components37.useTheme)().colors.icon;
   const primaryLightColor = (0, import_styled_components37.useTheme)().colors.primaryLight;
-  const keys = (0, import_react66.useMemo)(
+  const keys = (0, import_react67.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_react66.useCallback)(
+  const handleMoveItem = (0, import_react67.useCallback)(
     (sourceIndex, destinationIndex, position) => {
       if (reversed) {
         if (position === "above") {
@@ -6765,11 +6795,11 @@ var ArrayController = (0, import_react66.memo)(function ArrayController2({
     [onMoveItem, reversed]
   );
   const renderRow = (index) => {
-    return /* @__PURE__ */ import_react66.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
+    return /* @__PURE__ */ import_react67.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
   };
-  return /* @__PURE__ */ import_react66.default.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ import_react66.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react66.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react66.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
+  return /* @__PURE__ */ import_react67.default.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ import_react67.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react67.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react67.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
     [
-      onClickTrash && /* @__PURE__ */ import_react66.default.createElement(
+      onClickTrash && /* @__PURE__ */ import_react67.default.createElement(
         IconButton,
         {
           id: `${id}-trash`,
@@ -6778,7 +6808,7 @@ var ArrayController = (0, import_react66.memo)(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ import_react66.default.createElement(
+      onClickExpand && /* @__PURE__ */ import_react67.default.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -6787,7 +6817,7 @@ var ArrayController = (0, import_react66.memo)(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ import_react66.default.createElement(
+      onClickPlus && /* @__PURE__ */ import_react67.default.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -6797,15 +6827,15 @@ var ArrayController = (0, import_react66.memo)(function ArrayController2({
         }
       )
     ],
-    /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ import_react66.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react66.default.createElement(
+    /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, { size: 8 })
+  )), /* @__PURE__ */ import_react67.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react67.default.createElement(
     Sortable.Root,
     {
       keys,
       renderOverlay: renderRow,
       onMoveItem: handleMoveItem
     },
-    indexes.map((index) => /* @__PURE__ */ import_react66.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react66.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react66.default.createElement(
+    indexes.map((index) => /* @__PURE__ */ import_react67.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react67.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react67.default.createElement(
       ListView.DragIndicator,
       {
         $gap: 0,
@@ -6819,11 +6849,11 @@ var ArrayController = (0, import_react66.memo)(function ArrayController2({
 
 // src/components/DimensionInput.tsx
 var import_noya_utils12 = require("@noya-app/noya-utils");
-var import_react67 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = (0, import_react67.memo)(function DimensionInput2({
+var DimensionInput = (0, import_react68.memo)(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -6833,15 +6863,15 @@ var DimensionInput = (0, import_react67.memo)(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = (0, import_react67.useCallback)(
+  const handleNudgeValue = (0, import_react68.useCallback)(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = (0, import_react67.useCallback)(
+  const handleSetValue = (0, import_react68.useCallback)(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ import_react67.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react67.default.createElement(
+  return /* @__PURE__ */ import_react68.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react68.default.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : (0, import_noya_utils12.round)(value, 2),
@@ -6850,7 +6880,7 @@ var DimensionInput = (0, import_react67.memo)(function DimensionInput2({
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ import_react67.default.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ import_react68.default.createElement(InputField.Label, null, label));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {