@noya-app/noya-designsystem 0.1.14 → 0.1.16

package/dist/index.mjs

@@ -15,14 +15,14 @@ var Spinner = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  opacity: ${({ opacity }) => opacity};
+  opacity: ${({ $opacity }) => $opacity};
 `;
 var SpinnerCircle = styled.div`
-  border: 2px solid ${({ trackColor }) => trackColor};
-  border-top: 2px solid ${({ color }) => color};
+  border: 2px solid ${({ $trackColor }) => $trackColor};
+  border-top: 2px solid ${({ $color }) => $color};
   border-radius: 50%;
-  width: ${({ size: size2 }) => `${size2}px`};
-  height: ${({ size: size2 }) => `${size2}px`};
+  width: ${({ $size }) => `${$size}px`};
+  height: ${({ $size }) => `${$size}px`};
   animation: ${spin} 1s linear infinite;
 `;
 var ActivityIndicator = memo(function ActivityIndicator2({
@@ -31,7 +31,7 @@ var ActivityIndicator = memo(function ActivityIndicator2({
   color = "black",
   trackColor = "rgba(0, 0, 0, 0.1)"
 }) {
-  return /* @__PURE__ */ React.createElement(Spinner, { opacity }, /* @__PURE__ */ React.createElement(SpinnerCircle, { size: size2, color, trackColor }));
+  return /* @__PURE__ */ React.createElement(Spinner, { $opacity: opacity }, /* @__PURE__ */ React.createElement(SpinnerCircle, { $size: size2, $color: color, $trackColor: trackColor }));
 });
 
 // src/components/Avatar.tsx
@@ -85,9 +85,9 @@ function withSeparatorElements(elements2, separator) {
 }
 
 // src/components/Stack.tsx
-var Element = styled2.div(({ styleProps, breakpoints }) => ({
-  ...styleProps,
-  ...mergeBreakpoints(breakpoints || [])
+var Element = styled2.div(({ $styleProps, $breakpoints }) => ({
+  ...$styleProps,
+  ...mergeBreakpoints($breakpoints || [])
 }));
 var StackBase = forwardRef(function StackBase2({ id, as, children, separator, breakpoints, tabIndex, href, ...rest }, forwardedRef) {
   const elements2 = separator ? withSeparatorElements(Children2.toArray(children), separator) : children;
@@ -103,8 +103,8 @@ var StackBase = forwardRef(function StackBase2({ id, as, children, separator, br
       ref: forwardedRef,
       id,
       as,
-      styleProps,
-      breakpoints,
+      $styleProps: styleProps,
+      $breakpoints: breakpoints,
       tabIndex,
       ...href && { href }
     },
@@ -173,10 +173,10 @@ var Avatar = forwardRef2(function Avatar2({
 }, forwardedRef) {
   return /* @__PURE__ */ React3.createElement(AvatarRoot, { ref: forwardedRef, size: size2, overflow, ...props }, /* @__PURE__ */ React3.createElement(AvatarImage, { src: image, alt: name3 }), /* @__PURE__ */ React3.createElement(AvatarFallback, { size: size2 }, fallback));
 });
-var AvatarStackItemWrapper = styled3.div(({ size: size2, theme }) => ({
+var AvatarStackItemWrapper = styled3.div(({ $size, theme }) => ({
   position: "relative",
-  width: size2,
-  height: size2,
+  width: $size,
+  height: $size,
   marginLeft: "-8px",
   // outline: `2px solid ${theme.colors.sidebar.background}`,
   borderRadius: "50%",
@@ -193,7 +193,7 @@ function AvatarStack({
   return /* @__PURE__ */ React3.createElement(Stack.H, null, childrenArray.map((child, index) => {
     if (index === 0)
       return child;
-    return /* @__PURE__ */ React3.createElement(AvatarStackItemWrapper, { size: size2, key: index }, child);
+    return /* @__PURE__ */ React3.createElement(AvatarStackItemWrapper, { $size: size2, key: index }, child);
   }));
 }
 
@@ -234,48 +234,49 @@ var Tooltip = memo3(function Tooltip2({ children, content }) {
 var ButtonElement = styled5.button(
   ({
     theme,
-    active,
+    $active,
     disabled,
-    variant,
-    size: size2,
-    flex,
-    defaultBackground = theme.colors.inputBackground
+    $variant,
+    $size,
+    $flex,
+    $defaultBackground = theme.colors.inputBackground
   }) => ({
-    ...size2 === "large" ? theme.textStyles.heading4 : theme.textStyles.button,
+    ...$size === "large" ? theme.textStyles.heading4 : theme.textStyles.button,
     textDecoration: "none",
     lineHeight: "1",
-    flex: flex ?? "0 0 auto",
+    flex: $flex ?? "0 0 auto",
     position: "relative",
     border: "0",
     outline: "none",
     WebkitAppRegion: "no-drag",
     userSelect: "none",
-    minWidth: variant === "normal" ? "31px" : void 0,
+    minWidth: $variant === "normal" ? "31px" : void 0,
     textAlign: "left",
     borderRadius: "4px",
-    paddingTop: variant === "none" ? "0px" : "4px",
-    paddingRight: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
-    paddingBottom: variant === "none" ? "0px" : "4px",
-    paddingLeft: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
-    ...size2 === "large" && {
+    paddingTop: $variant === "none" ? "0px" : "4px",
+    paddingRight: $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+    paddingBottom: $variant === "none" ? "0px" : "4px",
+    paddingLeft: $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+    ...$size === "large" && {
       paddingTop: "12px",
       paddingRight: "16px",
       paddingBottom: "12px",
       paddingLeft: "16px"
     },
-    background: active ? theme.colors.primary : variant === "primaryGradient" ? `linear-gradient(90deg, ${theme.colors.primary}, ${theme.colors.primaryLight})` : variant === "none" || variant === "thin" ? "transparent" : defaultBackground,
-    color: active ? "white" : theme.colors.text,
+    background: $active ? theme.colors.primary : $variant === "primaryGradient" ? `linear-gradient(90deg, ${theme.colors.primary}, ${theme.colors.primaryLight})` : $variant === "none" || $variant === "thin" ? "transparent" : $defaultBackground,
+    color: $active ? "white" : theme.colors.text,
     opacity: disabled ? 0.25 : 1,
     "&:focus": {
-      boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`
+      outline: `2px solid ${theme.colors.primary}`,
+      boxShadow: `0 0 0 1px ${theme.colors.popover.background} inset`
     },
     "&:hover": {
-      background: variant === "primaryGradient" || active ? theme.colors.primaryLight : theme.colors.inputBackgroundLight
+      background: $variant === "primaryGradient" || $active ? theme.colors.primaryLight : theme.colors.inputBackgroundLight
     },
     "&:active": {
-      background: variant === "primaryGradient" || active ? theme.colors.primary : theme.colors.activeBackground
+      background: $variant === "primaryGradient" || $active ? theme.colors.primary : theme.colors.activeBackground
     },
-    ...variant === "primary" && {
+    ...$variant === "primary" && {
       background: theme.colors.primary,
       color: "white",
       "&:hover": {
@@ -285,7 +286,7 @@ var ButtonElement = styled5.button(
         background: theme.colors.primary
       }
     },
-    ...variant === "secondary" && {
+    ...$variant === "secondary" && {
       background: theme.colors.secondary,
       color: "white",
       "&:hover": {
@@ -295,7 +296,7 @@ var ButtonElement = styled5.button(
         background: theme.colors.secondary
       }
     },
-    ...variant === "secondaryBright" && {
+    ...$variant === "secondaryBright" && {
       background: "#0ab557",
       color: "white",
       "&:hover": {
@@ -305,7 +306,7 @@ var ButtonElement = styled5.button(
         opacity: 0.9
       }
     },
-    ...variant === "white" && {
+    ...$variant === "white" && {
       background: "white",
       "&:hover": {
         opacity: 0.8
@@ -314,7 +315,7 @@ var ButtonElement = styled5.button(
         opacity: 0.9
       }
     },
-    ...variant === "floating" && {
+    ...$variant === "floating" && {
       background: "white",
       color: theme.colors.text,
       boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
@@ -365,13 +366,13 @@ var Button = forwardRef3(function Button2({
       id,
       className,
       style: style3,
-      flex,
+      $flex: flex,
       tabIndex,
-      active,
+      $active: active,
       disabled,
-      variant,
-      size: size2,
-      defaultBackground,
+      $variant: variant,
+      $size: size2,
+      $defaultBackground: defaultBackground,
       onClick,
       onDoubleClick: useCallback((event) => {
         event.stopPropagation();
@@ -385,12 +386,12 @@ var Button = forwardRef3(function Button2({
 
 // src/components/Chip.tsx
 import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
-import React21, { memo as memo11 } from "react";
+import React22, { memo as memo11 } from "react";
 import styled14 from "styled-components";
 
 // src/contexts/DesignSystemConfiguration.tsx
 import { getCurrentPlatform } from "@noya-app/noya-keymap";
-import React19, {
+import React20, {
   createContext as createContext5,
   memo as memo10,
   useContext as useContext5,
@@ -714,7 +715,7 @@ var sizes = {
 };
 
 // src/contexts/DialogContext.tsx
-import React17, {
+import React18, {
   createContext as createContext3,
   useCallback as useCallback12,
   useContext as useContext3,
@@ -726,23 +727,34 @@ import styled13 from "styled-components";
 
 // src/components/Dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React8, {
-  forwardRef as forwardRef5,
+import React9, {
+  forwardRef as forwardRef6,
   useImperativeHandle,
   useRef
 } from "react";
 import styled8 from "styled-components";
 
 // src/components/Spacer.tsx
+import React8, { forwardRef as forwardRef5 } from "react";
 import styled7 from "styled-components";
-var SpacerVertical = styled7.span(({ size: size2, inline }) => ({
-  display: inline ? "inline-block" : "block",
-  ...size2 === void 0 ? { flex: 1 } : { minHeight: size2 }
+var SpacerVertical_ = styled7.span(({ $size, $inline }) => ({
+  display: $inline ? "inline-block" : "block",
+  ...$size === void 0 ? { flex: 1 } : { minHeight: $size }
 }));
-var SpacerHorizontal = styled7.span(({ size: size2, inline }) => ({
-  display: inline ? "inline-block" : "block",
-  ...size2 === void 0 ? { flex: 1 } : { minWidth: size2 }
+var SpacerVertical = forwardRef5(
+  ({ size: size2, inline, ...props }, ref) => {
+    return /* @__PURE__ */ React8.createElement(SpacerVertical_, { $size: size2, $inline: inline, ...props, ref });
+  }
+);
+var SpacerHorizontal_ = styled7.span(({ $size, $inline }) => ({
+  display: $inline ? "inline-block" : "block",
+  ...$size === void 0 ? { flex: 1 } : { minWidth: $size }
 }));
+var SpacerHorizontal = forwardRef5(
+  ({ size: size2, inline, ...props }, ref) => {
+    return /* @__PURE__ */ React8.createElement(SpacerHorizontal_, { $size: size2, $inline: inline, ...props, ref });
+  }
+);
 var Spacer;
 ((Spacer2) => {
   Spacer2.Vertical = SpacerVertical;
@@ -795,7 +807,7 @@ var CloseButtonContainer = styled8.div(({ theme }) => ({
   // boxShadow: `0 0 2px rgba(0, 0, 0, 0.2)`,
   border: `1px solid rgba(128,128,128,0.2)`
 }));
-var Dialog = forwardRef5(function Dialog2({
+var Dialog = forwardRef6(function Dialog2({
   children,
   title,
   description,
@@ -813,7 +825,7 @@ var Dialog = forwardRef5(function Dialog2({
       return contentRef.current.contains(element);
     }
   }));
-  return /* @__PURE__ */ React8.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React8.createElement(StyledOverlay, null), /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React9.createElement(StyledOverlay, null), /* @__PURE__ */ React9.createElement(
     StyledContent,
     {
       ref: contentRef,
@@ -828,14 +840,14 @@ var Dialog = forwardRef5(function Dialog2({
         }
       }
     },
-    /* @__PURE__ */ React8.createElement(CloseButtonContainer, null, /* @__PURE__ */ React8.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ React8.createElement(IconButton, { iconName: "Cross1Icon" }))),
-    title && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(StyledTitle, null, title), /* @__PURE__ */ React8.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
-    description && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ React8.createElement(StyledDescription, null, description), /* @__PURE__ */ React8.createElement(Spacer.Vertical, { size: 20 })),
+    /* @__PURE__ */ React9.createElement(CloseButtonContainer, null, /* @__PURE__ */ React9.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ React9.createElement(IconButton, { iconName: "Cross1Icon" }))),
+    title && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(StyledTitle, null, title), /* @__PURE__ */ React9.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
+    description && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ React9.createElement(StyledDescription, null, description), /* @__PURE__ */ React9.createElement(Spacer.Vertical, { size: 20 })),
     children
   ));
 });
-var FullscreenDialog = forwardRef5(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ React8.createElement(
+var FullscreenDialog = forwardRef6(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ React9.createElement(
     Dialog,
     {
       ref: forwardedRef,
@@ -859,16 +871,15 @@ var FullscreenDialog = forwardRef5(function FullscreenDialog2({ style: style3, .
 
 // src/components/InputField.tsx
 import { CaretDownIcon } from "@noya-app/noya-icons";
-import { memoize } from "@noya-app/noya-utils";
 
 // ../noya-react-utils/src/components/AutoSizer.tsx
-import React10, { memo as memo5, useRef as useRef2 } from "react";
+import React11, { memo as memo5, useRef as useRef2 } from "react";
 
 // ../noya-react-utils/src/hooks/useSize.ts
-import * as React9 from "react";
+import * as React10 from "react";
 function useSize(refToObserve, dimensions = "both") {
-  const [size2, setSize] = React9.useState(void 0);
-  React9.useEffect(() => {
+  const [size2, setSize] = React10.useState(void 0);
+  React10.useEffect(() => {
     if (refToObserve.current) {
       const elementToObserve = refToObserve.current;
       const resizeObserver = new ResizeObserver((entries) => {
@@ -921,7 +932,7 @@ var AutoSizer = memo5(function AutoSizer2({
 }) {
   const containerRef = useRef2(null);
   const containerSize = useSize(containerRef);
-  return /* @__PURE__ */ React10.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
+  return /* @__PURE__ */ React11.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
 });
 var SingleDimensionAutoSizer = memo5(function SingleDimensionAutoSizer2({
   children,
@@ -930,11 +941,11 @@ var SingleDimensionAutoSizer = memo5(function SingleDimensionAutoSizer2({
 }) {
   const containerRef = useRef2(null);
   const containerSize = useSize(containerRef, dimension);
-  return /* @__PURE__ */ React10.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
+  return /* @__PURE__ */ React11.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
 });
 
 // ../noya-react-utils/src/components/FileDropTarget.tsx
-import React11, {
+import React12, {
   memo as memo6,
   useCallback as useCallback3
 } from "react";
@@ -1009,7 +1020,7 @@ var FileDropTarget = memo6(function FileDropTarget2({
     [onDropFiles, supportedFileTypes]
   );
   const { dropTargetProps, isDropTargetActive } = useFileDropTarget(handleFile);
-  return /* @__PURE__ */ React11.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
+  return /* @__PURE__ */ React12.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
 });
 
 // ../noya-react-utils/src/hooks/useDeepArray.ts
@@ -1149,10 +1160,10 @@ function assignRef(ref, value) {
 }
 
 // src/components/InputField.tsx
-import React16, {
+import React17, {
   Children as Children3,
   createContext as createContext2,
-  forwardRef as forwardRef8,
+  forwardRef as forwardRef9,
   isValidElement as isValidElement2,
   memo as memo9,
   useCallback as useCallback11,
@@ -1192,8 +1203,8 @@ function handleNudge(e) {
 import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
-import React13, {
-  forwardRef as forwardRef6,
+import React14, {
+  forwardRef as forwardRef7,
   memo as memo8,
   useCallback as useCallback9,
   useMemo as useMemo5
@@ -1202,7 +1213,7 @@ import styled10 from "styled-components";
 
 // src/components/internal/Menu.tsx
 import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
-import React12, { memo as memo7 } from "react";
+import React13, { memo as memo7 } from "react";
 import styled9 from "styled-components";
 var SEPARATOR_ITEM = "separator";
 var CHECKBOX_WIDTH = 15;
@@ -1280,13 +1291,10 @@ function getKeyboardShortcutsForMenuItems(menuItems, onSelect) {
   );
 }
 var ShortcutElement = styled9.kbd(
-  ({
-    theme,
-    fixedWidth
-  }) => ({
+  ({ theme, $fixedWidth }) => ({
     ...theme.textStyles.small,
     color: theme.colors.textDisabled,
-    ...fixedWidth && {
+    ...$fixedWidth && {
       width: "0.9rem",
       textAlign: "center"
     }
@@ -1297,17 +1305,17 @@ var KeyboardShortcut = memo7(function KeyboardShortcut2({
 }) {
   const platform = useDesignSystemConfiguration().platform;
   const { keys, separator } = getShortcutDisplayParts(shortcut, platform);
-  const keyElements = keys.map((key) => /* @__PURE__ */ React12.createElement(
+  const keyElements = keys.map((key) => /* @__PURE__ */ React13.createElement(
     ShortcutElement,
     {
       key,
-      fixedWidth: platform === "mac" && key.length === 1
+      $fixedWidth: platform === "mac" && key.length === 1
     },
     key
   ));
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, separator ? withSeparatorElements(
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, separator ? withSeparatorElements(
     keyElements,
-    /* @__PURE__ */ React12.createElement(ShortcutElement, null, separator)
+    /* @__PURE__ */ React13.createElement(ShortcutElement, null, separator)
   ) : keyElements);
 });
 
@@ -1339,21 +1347,21 @@ var DropdownMenuItem = memo8(function ContextMenuItem({
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React14.createElement(
       CheckboxItemElement,
       {
         checked,
         disabled,
         onSelect: handleSelectItem
       },
-      /* @__PURE__ */ React13.createElement(StyledItemIndicator, null, /* @__PURE__ */ React13.createElement(CheckIcon, null)),
-      icon && /* @__PURE__ */ React13.createElement(React13.Fragment, null, icon, /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: 8 })),
+      /* @__PURE__ */ React14.createElement(StyledItemIndicator, null, /* @__PURE__ */ React14.createElement(CheckIcon, null)),
+      icon && /* @__PURE__ */ React14.createElement(React14.Fragment, null, icon, /* @__PURE__ */ React14.createElement(Spacer.Horizontal, { size: 8 })),
       children
     );
   }
-  const element = /* @__PURE__ */ React13.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ React13.createElement(React13.Fragment, null, icon, /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React13.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React13.createElement(ChevronRightIcon, null)));
+  const element = /* @__PURE__ */ React14.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ React14.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ React14.createElement(React14.Fragment, null, icon, /* @__PURE__ */ React14.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React14.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React14.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React14.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React14.createElement(ChevronRightIcon, null)));
   if (items && items.length > 0) {
-    return /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React14.createElement(
       DropdownMenuRoot,
       {
         isNested: true,
@@ -1369,7 +1377,7 @@ var DropdownMenuItem = memo8(function ContextMenuItem({
 });
 var Content5 = styled10(RadixDropdownMenu.Content)(styles.contentStyle);
 var SubContent2 = styled10(RadixDropdownMenu.SubContent)(styles.contentStyle);
-var DropdownMenuRoot = forwardRef6(function DropdownMenuRoot2({
+var DropdownMenuRoot = forwardRef7(function DropdownMenuRoot2({
   items,
   children,
   onSelect,
@@ -1396,7 +1404,7 @@ var DropdownMenuRoot = forwardRef6(function DropdownMenuRoot2({
   const TriggerComponent = isNested ? RadixDropdownMenu.SubTrigger : RadixDropdownMenu.Trigger;
   const ContentComponent = isNested ? SubContent2 : Content5;
   const contentStyle = useMemo5(() => ({ zIndex: 1e3 }), []);
-  return /* @__PURE__ */ React13.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ React13.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ React13.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ React14.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ React14.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React14.createElement(
     ContentComponent,
     {
       side,
@@ -1408,7 +1416,7 @@ var DropdownMenuRoot = forwardRef6(function DropdownMenuRoot2({
       ...{ onCloseAutoFocus }
     },
     items.map(
-      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React13.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ React13.createElement(
+      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React14.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ React14.createElement(
         DropdownMenuItem,
         {
           key: item.value ?? index,
@@ -1430,8 +1438,8 @@ var DropdownMenu = memo8(DropdownMenuRoot);
 
 // src/components/internal/TextInput.tsx
 import { composeRefs } from "@radix-ui/react-compose-refs";
-import React14, {
-  forwardRef as forwardRef7,
+import React15, {
+  forwardRef as forwardRef8,
   useCallback as useCallback10,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect3,
@@ -1480,8 +1488,8 @@ function useGlobalInputBlurTrigger() {
 }
 
 // src/components/internal/TextInput.tsx
-var ReadOnlyTextInput = forwardRef7(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ React14.createElement(
+var ReadOnlyTextInput = forwardRef8(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ React15.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -1492,7 +1500,7 @@ var ReadOnlyTextInput = forwardRef7(function ReadOnlyTextInput2({ onKeyDown, onF
     }
   );
 });
-var ControlledTextInput = forwardRef7(function ControlledTextInput2({
+var ControlledTextInput = forwardRef8(function ControlledTextInput2({
   onKeyDown,
   value,
   onChange,
@@ -1515,7 +1523,7 @@ var ControlledTextInput = forwardRef7(function ControlledTextInput2({
     },
     [onFocusCapture, onFocusChange]
   );
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -1531,7 +1539,7 @@ var ControlledTextInput = forwardRef7(function ControlledTextInput2({
     }
   );
 });
-var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
+var SubmittableTextInput = forwardRef8(function SubmittableTextInput2({
   onKeyDown,
   value,
   onSubmit,
@@ -1542,7 +1550,7 @@ var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
   submitAutomaticallyAfterDelay,
   ...rest
 }, forwardedRef) {
-  const ref = React14.useRef(null);
+  const ref = React15.useRef(null);
   const latestValue = useRef9(value);
   latestValue.current = value;
   const userDidEdit = useRef9(false);
@@ -1626,7 +1634,7 @@ var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
       }
     };
   }, [internalValue, submitAutomaticallyAfterDelay]);
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "input",
     {
       ref: composeRefs(ref, forwardedRef),
@@ -1639,7 +1647,7 @@ var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
     }
   );
 });
-var TextInput_default = forwardRef7(function TextInput(props, forwardedRef) {
+var TextInput_default = forwardRef8(function TextInput(props, forwardedRef) {
   const commonProps = {
     onPointerDown: useCallback10(
       (event) => event.stopPropagation(),
@@ -1658,17 +1666,17 @@ var TextInput_default = forwardRef7(function TextInput(props, forwardedRef) {
     ...props
   };
   if ("readOnly" in commonProps) {
-    return /* @__PURE__ */ React14.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
+    return /* @__PURE__ */ React15.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
   } else if ("onChange" in commonProps) {
-    return /* @__PURE__ */ React14.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ React15.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
   } else {
-    return /* @__PURE__ */ React14.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ React15.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
   }
 });
 
 // src/components/Popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import React15 from "react";
+import React16 from "react";
 import styled11 from "styled-components";
 var ContentElement = styled11(PopoverPrimitive.Content)(({ theme, variant }) => ({
   borderRadius: 4,
@@ -1715,7 +1723,7 @@ function Popover({
   onFocusOutside,
   onClickClose
 }) {
-  return /* @__PURE__ */ React15.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React15.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ React15.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React16.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ React16.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React16.createElement(
     ContentElement,
     {
       variant,
@@ -1737,8 +1745,8 @@ function Popover({
       }
     },
     children,
-    showArrow && /* @__PURE__ */ React15.createElement(ArrowElement, null),
-    closable && /* @__PURE__ */ React15.createElement(PopoverClose, null, /* @__PURE__ */ React15.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
+    showArrow && /* @__PURE__ */ React16.createElement(ArrowElement, null),
+    closable && /* @__PURE__ */ React16.createElement(PopoverClose, null, /* @__PURE__ */ React16.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
   )));
 }
 
@@ -1753,26 +1761,26 @@ var InputFieldContext = createContext2({
   onFocusChange: () => {
   }
 });
-var LabelContainer = styled12.label(({ theme, labelPosition, hasDropdown, pointerEvents }) => ({
+var LabelContainer = styled12.label(({ theme, $labelPosition, $hasDropdown, pointerEvents }) => ({
   ...theme.textStyles.label,
   fontWeight: "bold",
   color: theme.colors.textDisabled,
   position: "absolute",
   top: 0,
-  right: labelPosition === "end" ? 0 : void 0,
+  right: $labelPosition === "end" ? 0 : void 0,
   bottom: 0,
-  left: labelPosition === "start" ? 0 : void 0,
+  left: $labelPosition === "start" ? 0 : void 0,
   display: "flex",
   alignItems: "center",
   pointerEvents,
   userSelect: "none",
-  ...labelPosition === "start" ? { justifyContent: "flex-start", paddingLeft: "6px" } : {
+  ...$labelPosition === "start" ? { justifyContent: "flex-start", paddingLeft: "6px" } : {
     justifyContent: "flex-end",
-    paddingRight: hasDropdown ? "16px" : "6px"
+    paddingRight: $hasDropdown ? "16px" : "6px"
   }
 }));
 var InputFieldLabel = memo9(
-  forwardRef8(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
+  forwardRef9(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
     const { labelPosition, hasDropdown, setLabelWidth } = useContext2(InputFieldContext);
     const ref = useRef10(null);
     useLayoutEffect4(() => {
@@ -1783,7 +1791,7 @@ var InputFieldLabel = memo9(
         return;
       setLabelWidth(width);
     }, [setLabelWidth]);
-    return /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React17.createElement(
       LabelContainer,
       {
         ref: (element) => {
@@ -1791,8 +1799,8 @@ var InputFieldLabel = memo9(
           assignRef(forwardedRef, element);
         },
         pointerEvents,
-        labelPosition,
-        hasDropdown,
+        $labelPosition: labelPosition,
+        $hasDropdown: hasDropdown,
         style: style3
       },
       children
@@ -1816,13 +1824,13 @@ var InputFieldDropdownMenu = memo9(function InputFieldDropdownMenu2({ id, items,
     }),
     [size2]
   );
-  return /* @__PURE__ */ React16.createElement(DropdownContainer, null, /* @__PURE__ */ React16.createElement(DropdownMenu, { items, onSelect }, children || /* @__PURE__ */ React16.createElement(Button, { id, variant: "thin", flex: "1", contentStyle }, /* @__PURE__ */ React16.createElement(CaretDownIcon, null))));
+  return /* @__PURE__ */ React17.createElement(DropdownContainer, null, /* @__PURE__ */ React17.createElement(DropdownMenu, { items, onSelect }, children || /* @__PURE__ */ React17.createElement(Button, { id, variant: "thin", flex: "1", contentStyle }, /* @__PURE__ */ React17.createElement(CaretDownIcon, null))));
 });
 var ButtonContainer = styled12.span(
-  ({ theme, size: size2 }) => ({
+  ({ theme, $size }) => ({
     position: "absolute",
-    right: size2 === "large" ? "9px" : size2 === "medium" ? "4px" : "2px",
-    top: size2 === "large" ? "8px" : size2 === "medium" ? "4px" : "2px"
+    right: $size === "large" ? "9px" : $size === "medium" ? "4px" : "2px",
+    top: $size === "large" ? "8px" : $size === "medium" ? "4px" : "2px"
   })
 );
 var InputFieldButton = memo9(function InputFieldButton2({
@@ -1845,7 +1853,7 @@ var InputFieldButton = memo9(function InputFieldButton2({
     event.preventDefault();
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ React16.createElement(ButtonContainer, { size: size2 }, /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(ButtonContainer, { $size: size2 }, /* @__PURE__ */ React17.createElement(
     Button,
     {
       variant: "floating",
@@ -1856,42 +1864,26 @@ var InputFieldButton = memo9(function InputFieldButton2({
     children
   ));
 });
-var createCrossSVGString = memoize(
-  (color) => `<svg width='15' height='15' viewBox='0 0 15 15' fill='${color}' xmlns='http://www.w3.org/2000/svg'>
-      <path d='M0.877075 7.49988C0.877075 3.84219 3.84222 0.877045 7.49991 0.877045C11.1576 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1575 0.877075 7.49988ZM7.49991 1.82704C4.36689 1.82704 1.82708 4.36686 1.82708 7.49988C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49988C13.1727 4.36686 10.6329 1.82704 7.49991 1.82704ZM9.85358 5.14644C10.0488 5.3417 10.0488 5.65829 9.85358 5.85355L8.20713 7.49999L9.85358 9.14644C10.0488 9.3417 10.0488 9.65829 9.85358 9.85355C9.65832 10.0488 9.34173 10.0488 9.14647 9.85355L7.50002 8.2071L5.85358 9.85355C5.65832 10.0488 5.34173 10.0488 5.14647 9.85355C4.95121 9.65829 4.95121 9.3417 5.14647 9.14644L6.79292 7.49999L5.14647 5.85355C4.95121 5.65829 4.95121 5.3417 5.14647 5.14644C5.34173 4.95118 5.65832 4.95118 5.85358 5.14644L7.50002 6.79289L9.14647 5.14644C9.34173 4.95118 9.65832 4.95118 9.85358 5.14644Z' fill-rule='evenodd' clip-rule='evenodd'></path>
-    </svg>`
-);
-var ignoredProps = /* @__PURE__ */ new Set([
-  "labelPosition",
-  "labelSize",
-  "hasLabel",
-  "hasDropdown",
-  "textAlign",
-  "variant",
-  "onNudge"
-]);
-var InputElement = styled12(TextInput_default).withConfig({
-  shouldForwardProp: (prop) => ignoredProps.has(prop) ? false : true
-})(
-  ({
-    theme,
-    labelPosition,
-    labelSize,
-    hasDropdown,
-    textAlign,
-    disabled,
-    hasLabel,
-    readOnly,
-    variant = "normal",
-    size: size2
-  }) => ({
+var InputElement = styled12(TextInput_default)(({
+  theme,
+  $labelPosition,
+  $labelSize,
+  $hasDropdown,
+  $textAlign,
+  disabled,
+  $hasLabel,
+  readOnly,
+  $variant = "normal",
+  $size
+}) => {
+  return {
     // placeholder
     "&::placeholder": {
       color: theme.colors.textDisabled
     },
     ...theme.textStyles.small,
     color: readOnly ? theme.colors.textMuted : disabled ? theme.colors.textDisabled : theme.colors.text,
-    ...size2 === "small" && {
+    ...$size === "small" && {
       fontSize: "11px"
     },
     width: "0px",
@@ -1901,18 +1893,18 @@ var InputElement = styled12(TextInput_default).withConfig({
     border: "0",
     outline: "none",
     minWidth: "0",
-    textAlign: textAlign ?? "left",
+    textAlign: $textAlign ?? "left",
     alignSelf: "stretch",
     borderRadius: "4px",
-    paddingTop: size2 === "large" ? "10px" : size2 === "medium" ? "4px" : "1px",
-    paddingBottom: size2 === "large" ? "10px" : size2 === "medium" ? "4px" : "1px",
-    paddingLeft: (size2 === "large" ? 10 : size2 === "medium" ? 6 : 4) + (hasLabel && labelPosition === "start" ? 6 + labelSize : 0) + "px",
-    paddingRight: (size2 === "large" ? 10 : size2 === "medium" ? 6 : 4) + (hasLabel && labelPosition === "end" ? 6 + labelSize : 0) + (hasDropdown ? 11 : 0) + "px",
+    paddingTop: $size === "large" ? "10px" : $size === "medium" ? "4px" : "1px",
+    paddingBottom: $size === "large" ? "10px" : $size === "medium" ? "4px" : "1px",
+    paddingLeft: ($size === "large" ? 10 : $size === "medium" ? 6 : 4) + ($hasLabel && $labelPosition === "start" ? 6 + $labelSize : 0) + "px",
+    paddingRight: ($size === "large" ? 10 : $size === "medium" ? 6 : 4) + ($hasLabel && $labelPosition === "end" ? 6 + $labelSize : 0) + ($hasDropdown ? 11 : 0) + "px",
     background: theme.colors.inputBackground,
     "&:focus": {
       boxShadow: `0 0 0 2px ${theme.colors.primary}`
     },
-    ...variant === "bare" && {
+    ...$variant === "bare" && {
       paddingTop: "4px",
       paddingRight: "4px",
       paddingBottom: "4px",
@@ -1921,18 +1913,18 @@ var InputElement = styled12(TextInput_default).withConfig({
       marginRight: "-4px",
       marginBottom: "-4px",
       marginLeft: "-4px"
-    },
-    '&[type="search"]::-webkit-search-cancel-button': {
-      appearance: "none",
-      height: "15px",
-      width: "15px",
-      background: `url("data:image/svg+xml;utf8,${createCrossSVGString(
-        theme.colors.icon
-      )}") no-repeat`
     }
-  })
-);
-var InputFieldInput = forwardRef8(function InputFieldInput2(props, forwardedRef) {
+    // '&[type="search"]::-webkit-search-cancel-button': {
+    //   appearance: "none",
+    //   height: "15px",
+    //   width: "15px",
+    //   background: `url("data:image/svg+xml;utf8,${createCrossSVGString(
+    //     theme.colors.icon
+    //   )}") no-repeat`,
+    // },
+  };
+});
+var InputFieldInput = forwardRef9(function InputFieldInput2(props, forwardedRef) {
   const {
     labelPosition,
     labelSize,
@@ -1951,15 +1943,15 @@ var InputFieldInput = forwardRef8(function InputFieldInput2(props, forwardedRef)
   useLayoutEffect4(() => {
     setInputRef?.(forwardedRef);
   }, [forwardedRef, setInputRef]);
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(
     InputElement,
     {
       ref: forwardedRef,
-      labelPosition,
-      labelSize,
-      hasLabel,
-      hasDropdown,
-      size: size2,
+      $labelPosition: labelPosition,
+      $labelSize: labelSize,
+      $hasLabel: hasLabel,
+      $hasDropdown: hasDropdown,
+      $size: size2,
       onFocusChange: handleFocusChange,
       ...props
     }
@@ -1974,14 +1966,14 @@ var InputFieldTypeahead = (props) => {
     size: size2,
     onFocusChange
   } = useContext2(InputFieldContext);
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(
     InputElement,
     {
-      labelPosition,
-      labelSize,
-      hasLabel,
-      hasDropdown,
-      size: size2,
+      $labelPosition: labelPosition,
+      $labelSize: labelSize,
+      $hasLabel: hasLabel,
+      $hasDropdown: hasDropdown,
+      $size: size2,
       onFocusChange,
       readOnly: true,
       placeholder: props.value,
@@ -2005,7 +1997,7 @@ function parseNumber(value) {
   return value ? Number(value) : NaN;
 }
 function InputFieldNumberInput(props) {
-  const { value, placeholder, onNudge } = props;
+  const { value, placeholder, onNudge, ...rest } = props;
   const onSubmit = "onSubmit" in props ? props.onSubmit : void 0;
   const onChange = "onChange" in props ? props.onChange : void 0;
   const handleSubmit = useCallback11(
@@ -2034,10 +2026,10 @@ function InputFieldNumberInput(props) {
     },
     [onChange]
   );
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(
     InputFieldInput,
     {
-      ...props,
+      ...rest,
       value: value === void 0 ? "" : String(value),
       placeholder,
       onKeyDown: handleKeyDown,
@@ -2046,12 +2038,12 @@ function InputFieldNumberInput(props) {
   );
 }
 var RootContainer = styled12.div(
-  ({ theme, flex, width }) => ({
-    flex: flex ?? "1",
+  ({ theme, $flex, $width }) => ({
+    flex: $flex ?? "1",
     display: "flex",
     flexDirection: "row",
     position: "relative",
-    maxWidth: typeof width === "number" ? `${width}px` : void 0
+    maxWidth: typeof $width === "number" ? `${$width}px` : void 0
   })
 );
 function InputFieldRoot({
@@ -2072,9 +2064,9 @@ function InputFieldRoot({
   const hasLabel = childrenArray.some(
     (child) => isValidElement2(child) && child.type === InputFieldLabel
   );
-  const [isFocused, setIsFocused] = React16.useState(false);
-  const [measuredLabelSize, setMeasuredLabelSize] = React16.useState();
-  const [measuredWidth, setMeasuredWidth] = React16.useState();
+  const [isFocused, setIsFocused] = React17.useState(false);
+  const [measuredLabelSize, setMeasuredLabelSize] = React17.useState();
+  const [measuredWidth, setMeasuredWidth] = React17.useState();
   const handleFocusChange = useCallback11(
     (isFocused2) => {
       setIsFocused(isFocused2);
@@ -2082,7 +2074,7 @@ function InputFieldRoot({
     },
     [onFocusChange]
   );
-  const [inputRef, setInputRef] = React16.useState();
+  const [inputRef, setInputRef] = React17.useState();
   useEffect10(() => {
     if (inputRef && typeof inputRef !== "function") {
       setMeasuredWidth?.(
@@ -2115,8 +2107,8 @@ function InputFieldRoot({
       inputRef
     ]
   );
-  const rootElement = /* @__PURE__ */ React16.createElement(RootContainer, { id, width, flex }, children);
-  return /* @__PURE__ */ React16.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React16.createElement(
+  const rootElement = /* @__PURE__ */ React17.createElement(RootContainer, { id, $width: width, $flex: flex }, children);
+  return /* @__PURE__ */ React17.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React17.createElement(
     Popover,
     {
       open: true,
@@ -2132,7 +2124,7 @@ function InputFieldRoot({
         event.stopPropagation();
       }
     },
-    measuredWidth && /* @__PURE__ */ React16.createElement(Stack.V, { width: measuredWidth, overflow: "hidden" }, renderPopoverContent({ width: measuredWidth }))
+    measuredWidth && /* @__PURE__ */ React17.createElement(Stack.V, { width: measuredWidth, overflow: "hidden" }, renderPopoverContent({ width: measuredWidth }))
   ) : rootElement);
 }
 var InputField;
@@ -2213,7 +2205,7 @@ var DialogProvider = function DialogProvider2({
       return false;
     return dialogRef.current.containsElement(element);
   }, []);
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
     DialogContext.Provider,
     {
       value: useMemo7(
@@ -2222,7 +2214,7 @@ var DialogProvider = function DialogProvider2({
       )
     },
     children
-  ), /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React18.createElement(
     Dialog,
     {
       ref: dialogRef,
@@ -2243,7 +2235,7 @@ var DialogProvider = function DialogProvider2({
         inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
       }, [])
     },
-    /* @__PURE__ */ React17.createElement(InputField.Root, null, /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React18.createElement(InputField.Root, null, /* @__PURE__ */ React18.createElement(
       InputField.Input,
       {
         ref: inputRef,
@@ -2259,8 +2251,8 @@ var DialogProvider = function DialogProvider2({
         onKeyDown: handleKeyDown
       }
     )),
-    /* @__PURE__ */ React17.createElement(Spacer.Vertical, { size: 20 }),
-    /* @__PURE__ */ React17.createElement(Row, null, /* @__PURE__ */ React17.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React17.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ React17.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React17.createElement(Button, { disabled: !contents?.inputValue, onClick: submit }, "Submit"))
+    /* @__PURE__ */ React18.createElement(Spacer.Vertical, { size: 20 }),
+    /* @__PURE__ */ React18.createElement(Row, null, /* @__PURE__ */ React18.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React18.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ React18.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React18.createElement(Button, { disabled: !contents?.inputValue, onClick: submit }, "Submit"))
   ));
 };
 function useDialog() {
@@ -2279,7 +2271,7 @@ function useDialogContainsElement() {
 
 // src/contexts/FloatingWindowContext.tsx
 import { uuid } from "@noya-app/noya-utils";
-import React18, { createContext as createContext4, useContext as useContext4, useMemo as useMemo8, useState as useState12 } from "react";
+import React19, { createContext as createContext4, useContext as useContext4, useMemo as useMemo8, useState as useState12 } from "react";
 import { createPortal } from "react-dom";
 var FloatingWindowContext = createContext4(void 0);
 var CurrentWindowContext = createContext4(void 0);
@@ -2292,7 +2284,7 @@ var FloatingWindowProvider = ({
       const id = uuid();
       setWindows((windows2) => ({
         ...windows2,
-        [id]: /* @__PURE__ */ React18.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
+        [id]: /* @__PURE__ */ React19.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
       }));
       return id;
     };
@@ -2304,7 +2296,7 @@ var FloatingWindowProvider = ({
     };
     return { createWindow, closeWindow };
   }, []);
-  return /* @__PURE__ */ React18.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
+  return /* @__PURE__ */ React19.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
     ([id, element]) => createPortal(element, document.body, id)
   ));
 };
@@ -2331,13 +2323,17 @@ var DesignSystemThemeProvider = memo10(
     children,
     theme
   }) {
-    const parentTheme = useTheme2();
+    let parentTheme;
+    try {
+      parentTheme = useTheme2();
+    } catch (e) {
+    }
     if (theme) {
-      return /* @__PURE__ */ React19.createElement(ThemeProvider, { theme }, children);
+      return /* @__PURE__ */ React20.createElement(ThemeProvider, { theme }, children);
     } else if (parentTheme) {
       return children;
     } else {
-      return /* @__PURE__ */ React19.createElement(ThemeProvider, { theme: light_exports }, children);
+      return /* @__PURE__ */ React20.createElement(ThemeProvider, { theme: light_exports }, children);
     }
   }
 );
@@ -2364,7 +2360,7 @@ var DesignSystemConfigurationProvider = memo10(
       () => ({ platform: platform ?? internalPlatform }),
       [platform, internalPlatform]
     );
-    return /* @__PURE__ */ React19.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React19.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React19.createElement(DialogProvider, null, /* @__PURE__ */ React19.createElement(ToastProvider, null, /* @__PURE__ */ React19.createElement(FloatingWindowProvider, null, children)))));
+    return /* @__PURE__ */ React20.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React20.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React20.createElement(DialogProvider, null, /* @__PURE__ */ React20.createElement(ToastProvider, null, /* @__PURE__ */ React20.createElement(FloatingWindowProvider, null, children)))));
   }
 );
 function useDesignSystemConfiguration() {
@@ -2375,7 +2371,7 @@ function useDesignSystemTheme() {
 }
 
 // src/hooks/useHover.ts
-import * as React20 from "react";
+import * as React21 from "react";
 var globalIgnoreEmulatedMouseEvents = false;
 var hoverCount = 0;
 function setGlobalIgnoreEmulatedMouseEvents() {
@@ -2405,13 +2401,13 @@ function setupGlobalTouchEvents() {
 }
 function useHover(props = {}) {
   const { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
-  const [isHovered, setHovered] = React20.useState(false);
-  const state = React20.useRef({
+  const [isHovered, setHovered] = React21.useState(false);
+  const state = React21.useRef({
     isHovered: false,
     ignoreEmulatedMouseEvents: false
   }).current;
-  React20.useEffect(setupGlobalTouchEvents, []);
-  const hoverProps = React20.useMemo(
+  React21.useEffect(setupGlobalTouchEvents, []);
+  const hoverProps = React21.useMemo(
     function getHoverProps() {
       function triggerHoverStart(event, pointerType) {
         if (isDisabled || pointerType === "touch" || state.isHovered) {
@@ -2471,10 +2467,10 @@ function useHover(props = {}) {
 }
 
 // src/components/Chip.tsx
-var ChipElement = styled14.span(({ theme, colorScheme, size: size2, variant, monospace, isInteractive }) => {
-  const color = colorScheme === "primary" ? theme.colors.primary : colorScheme === "secondary" ? theme.colors.secondary : theme.colors.text;
-  const backgroundColor = colorScheme === "primary" ? "rgb(238, 229, 255)" : colorScheme === "secondary" ? "rgb(205, 238, 231)" : colorScheme === "error" ? "rgb(255, 219, 219)" : theme.colors.inputBackground;
-  const subtleColor = colorScheme === "primary" ? "rgba(238, 229, 255, 0.2)" : colorScheme === "secondary" ? "rgba(205, 238, 231, 0.2)" : colorScheme === "error" ? "rgba(255, 219, 219, 0.2)" : "rgba(0, 0, 0, 0.1)";
+var ChipElement = styled14.span(({ theme, $colorScheme, $size, $variant, $monospace, $isInteractive }) => {
+  const color = $colorScheme === "primary" ? theme.colors.primary : $colorScheme === "secondary" ? theme.colors.secondary : theme.colors.text;
+  const backgroundColor = $colorScheme === "primary" ? "rgb(238, 229, 255)" : $colorScheme === "secondary" ? "rgb(205, 238, 231)" : $colorScheme === "error" ? "rgb(255, 219, 219)" : theme.colors.inputBackground;
+  const subtleColor = $colorScheme === "primary" ? "rgba(238, 229, 255, 0.2)" : $colorScheme === "secondary" ? "rgba(205, 238, 231, 0.2)" : $colorScheme === "error" ? "rgba(255, 219, 219, 0.2)" : "rgba(0, 0, 0, 0.1)";
   return {
     textTransform: "initial",
     borderRadius: 4,
@@ -2483,7 +2479,7 @@ var ChipElement = styled14.span(({ theme, colorScheme, size: size2, variant, mon
     alignItems: "center",
     lineHeight: "1.4",
     whiteSpace: "pre",
-    ...size2 === "medium" ? {
+    ...$size === "medium" ? {
       fontSize: "11px",
       padding: "4px 8px"
     } : {
@@ -2491,24 +2487,24 @@ var ChipElement = styled14.span(({ theme, colorScheme, size: size2, variant, mon
       padding: "0px 4px",
       lineHeight: "15px"
     },
-    ...monospace && {
+    ...$monospace && {
       fontFamily: theme.fonts.monospace
     },
-    ...variant === "solid" ? {
+    ...$variant === "solid" ? {
       color,
       backgroundColor
-    } : variant === "outlined" ? {
+    } : $variant === "outlined" ? {
       color,
       backgroundColor: "transparent",
       boxShadow: `0 0 0 1px ${subtleColor} inset`
     } : {},
     "&:hover": {
-      ...variant === "outlined" && {
+      ...$variant === "outlined" && {
         backgroundColor: subtleColor,
         boxShadow: "none"
       }
     },
-    ...isInteractive && {
+    ...$isInteractive && {
       cursor: "pointer",
       "&:hover": {
         opacity: 0.85
@@ -2532,9 +2528,9 @@ var DeleteElement = styled14(Cross1Icon)(({ size: size2 }) => ({
     opacity: 0.85
   }
 }));
-var ignoredProps2 = /* @__PURE__ */ new Set(["size", "isOnlyChild"]);
+var ignoredProps = /* @__PURE__ */ new Set(["size", "isOnlyChild"]);
 var AddElement = styled14(PlusIcon).withConfig({
-  shouldForwardProp: (prop) => !ignoredProps2.has(prop)
+  shouldForwardProp: (prop) => !ignoredProps.has(prop)
 })(({ size: size2, isOnlyChild }) => ({
   position: "relative",
   marginLeft: "-2px",
@@ -2573,19 +2569,19 @@ var Chip = memo11(function Chip2({
   });
   const handleClick = !children && !deletable && addable ? onAdd : onClick;
   const color = colorScheme === "primary" ? theme.colors.primary : colorScheme === "secondary" ? theme.colors.secondary : theme.colors.text;
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     ChipElement,
     {
-      variant,
-      colorScheme,
+      $variant: variant,
+      $colorScheme: colorScheme,
       style: style3,
       onClick: handleClick,
-      size: size2,
-      monospace,
-      isInteractive: !!handleClick,
+      $size: size2,
+      $monospace: monospace,
+      $isInteractive: !!handleClick,
       tabIndex
     },
-    addable && /* @__PURE__ */ React21.createElement(
+    addable && /* @__PURE__ */ React22.createElement(
       AddElement,
       {
         size: size2,
@@ -2598,7 +2594,7 @@ var Chip = memo11(function Chip2({
       }
     ),
     children,
-    deletable && /* @__PURE__ */ React21.createElement(
+    deletable && /* @__PURE__ */ React22.createElement(
       DeleteElement,
       {
         size: size2,
@@ -2617,7 +2613,7 @@ var Chip = memo11(function Chip2({
 import { CheckIcon as CheckIcon2, ChevronRightIcon as ChevronRightIcon2 } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts as useKeyboardShortcuts2 } from "@noya-app/noya-keymap";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
-import React22, {
+import React23, {
   memo as memo12,
   useCallback as useCallback13,
   useMemo as useMemo11
@@ -2654,32 +2650,32 @@ var ContextMenuItem2 = memo12(function ContextMenuItem3({
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ React22.createElement(
+    return /* @__PURE__ */ React23.createElement(
       CheckboxItemElement2,
       {
         checked,
         disabled,
         onSelect: handleSelectItem
       },
-      /* @__PURE__ */ React22.createElement(StyledItemIndicator2, null, /* @__PURE__ */ React22.createElement(CheckIcon2, null)),
+      /* @__PURE__ */ React23.createElement(StyledItemIndicator2, null, /* @__PURE__ */ React23.createElement(CheckIcon2, null)),
       children
     );
   }
-  const element = /* @__PURE__ */ React22.createElement(
+  const element = /* @__PURE__ */ React23.createElement(
     ItemElement2,
     {
       disabled,
       onSelect: handleSelectItem,
       onPointerDown: handlePointerDown
     },
-    indented && /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
-    icon && /* @__PURE__ */ React22.createElement(React22.Fragment, null, icon, /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: 8 })),
+    indented && /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
+    icon && /* @__PURE__ */ React23.createElement(React23.Fragment, null, icon, /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 8 })),
     children,
-    shortcut && /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React22.createElement(KeyboardShortcut, { shortcut })),
-    items && items.length > 0 && /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React22.createElement(ChevronRightIcon2, null))
+    shortcut && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React23.createElement(KeyboardShortcut, { shortcut })),
+    items && items.length > 0 && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React23.createElement(ChevronRightIcon2, null))
   );
   if (items && items.length > 0) {
-    return /* @__PURE__ */ React22.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
+    return /* @__PURE__ */ React23.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
   } else {
     return element;
   }
@@ -2708,8 +2704,8 @@ function ContextMenuRoot({
   const RootComponent = isNested ? RadixContextMenu.Sub : RadixContextMenu.Root;
   const TriggerComponent = isNested ? RadixContextMenu.SubTrigger : RadixContextMenu.Trigger;
   const ContentComponent = isNested ? SubContent4 : Content8;
-  return /* @__PURE__ */ React22.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ React22.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ React22.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React22.createElement(ContentComponent, null, items.map(
-    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React22.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React23.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ React23.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ React23.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React23.createElement(ContentComponent, null, items.map(
+    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React23.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ React23.createElement(
       ContextMenuItem2,
       {
         key: item.value ?? index,
@@ -2729,23 +2725,47 @@ function ContextMenuRoot({
 var ContextMenu = memo12(ContextMenuRoot);
 
 // src/components/Divider.tsx
-import React23, { memo as memo13 } from "react";
+import React24, { memo as memo13 } from "react";
 import styled16 from "styled-components";
-var DividerContainer = styled16.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,
+var DividerContainer = styled16.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 = memo13(function Divider2(props) {
-  return /* @__PURE__ */ React23.createElement(DividerContainer, { orientation: "horizontal", ...props });
+var Divider = memo13(function Divider2({
+  variant,
+  overflow,
+  ...props
+}) {
+  return /* @__PURE__ */ React24.createElement(
+    DividerContainer,
+    {
+      $orientation: "horizontal",
+      $variant: variant,
+      $overflow: overflow,
+      ...props
+    }
+  );
 });
-var DividerVertical = memo13(function DividerVertical2(props) {
-  return /* @__PURE__ */ React23.createElement(DividerContainer, { orientation: "vertical", ...props });
+var DividerVertical = memo13(function DividerVertical2({
+  variant,
+  overflow,
+  ...props
+}) {
+  return /* @__PURE__ */ React24.createElement(
+    DividerContainer,
+    {
+      $orientation: "vertical",
+      $variant: variant,
+      $overflow: overflow,
+      ...props
+    }
+  );
 });
 
 // src/components/DraggableMenuButton.tsx
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import React24, { memo as memo14, useCallback as useCallback14, useState as useState15 } from "react";
+import React25, { memo as memo14, useCallback as useCallback14, useState as useState15 } from "react";
 import styled17 from "styled-components";
 var DotButtonElement = styled17.div(({ theme }) => ({
   cursor: "pointer",
@@ -2772,7 +2792,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
 }) {
   const color = useDesignSystemTheme().colors.icon;
   const [open, setOpen] = useState15(false);
-  const [downPosition, setDownPosition] = React24.useState(null);
+  const [downPosition, setDownPosition] = React25.useState(null);
   const handlePointerDownCapture = useCallback14(
     (event) => {
       if (open) {
@@ -2809,7 +2829,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
     },
     [setOpen]
   );
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(
     DotButtonElement,
     {
       onPointerDownCapture: handlePointerDownCapture,
@@ -2819,7 +2839,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
         event.preventDefault();
       }
     },
-    items && onSelect ? /* @__PURE__ */ React24.createElement(
+    items && onSelect ? /* @__PURE__ */ React25.createElement(
       DropdownMenu,
       {
         open,
@@ -2828,13 +2848,13 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ React24.createElement(TriggerElement, null, /* @__PURE__ */ React24.createElement(
+      /* @__PURE__ */ React25.createElement(TriggerElement, null, /* @__PURE__ */ React25.createElement(
         DragHandleDots2Icon,
         {
           color: isVisible || open ? color : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ React24.createElement(
+    ) : /* @__PURE__ */ React25.createElement(
       DragHandleDots2Icon,
       {
         color: isVisible || open ? color : "transparent"
@@ -2844,7 +2864,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
 });
 
 // src/components/FillInputField.tsx
-import React27, { forwardRef as forwardRef9, memo as memo17 } from "react";
+import React28, { forwardRef as forwardRef10, memo as memo17 } from "react";
 import styled19 from "styled-components";
 
 // ../noya-file-format/src/types.ts
@@ -3170,11 +3190,11 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 
 // src/components/FillPreviewBackground.tsx
-import React26, { memo as memo16, useMemo as useMemo14 } from "react";
+import React27, { memo as memo16, useMemo as useMemo14 } from "react";
 import styled18, { useTheme as useTheme3 } from "styled-components";
 
 // src/contexts/ImageDataContext.tsx
-import React25, {
+import React26, {
   createContext as createContext6,
   memo as memo15,
   useContext as useContext6,
@@ -3191,7 +3211,7 @@ var ImageDataProvider = memo15(function ImageDataProvider2({
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ React25.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React26.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
   const value = useContext6(ImageDataContext);
@@ -3281,7 +3301,7 @@ var HorizontalDotsBackground = memo16(function HorizontalDotsBackground2() {
     ].join(","),
     [inputBackground, placeholderDots]
   );
-  return /* @__PURE__ */ React26.createElement(Background, { background });
+  return /* @__PURE__ */ React27.createElement(Background, { background });
 });
 function getPatternSizeAndPosition(fillType, tileScale) {
   switch (fillType) {
@@ -3311,13 +3331,13 @@ var PatternPreviewBackground = memo16(function PatternPreviewBackground2({
     ].join(" "),
     [fillType, size2, url]
   );
-  return /* @__PURE__ */ React26.createElement(Background, { background });
+  return /* @__PURE__ */ React27.createElement(Background, { background });
 });
 var ColorPreviewBackground = memo16(function ColorPreviewBackground2({
   color
 }) {
   const background = useMemo14(() => sketchColorToRgbaString(color), [color]);
-  return /* @__PURE__ */ React26.createElement(Background, { background });
+  return /* @__PURE__ */ React27.createElement(Background, { background });
 });
 var GradientPreviewBackground = memo16(function GradientPreviewBackground2({
   gradient
@@ -3326,22 +3346,22 @@ var GradientPreviewBackground = memo16(function GradientPreviewBackground2({
     () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
     [gradient.gradientType, gradient.stops]
   );
-  return /* @__PURE__ */ React26.createElement(Background, { background });
+  return /* @__PURE__ */ React27.createElement(Background, { background });
 });
 var FillPreviewBackground = memo16(function FillPreviewBackground2({
   value
 }) {
   if (!value)
-    return /* @__PURE__ */ React26.createElement(HorizontalDotsBackground, null);
+    return /* @__PURE__ */ React27.createElement(HorizontalDotsBackground, null);
   switch (value._class) {
     case "color":
-      return /* @__PURE__ */ React26.createElement(ColorPreviewBackground, { color: value });
+      return /* @__PURE__ */ React27.createElement(ColorPreviewBackground, { color: value });
     case "gradient":
-      return /* @__PURE__ */ React26.createElement(GradientPreviewBackground, { gradient: value });
+      return /* @__PURE__ */ React27.createElement(GradientPreviewBackground, { gradient: value });
     case "pattern":
       if (!value.image)
         return null;
-      return /* @__PURE__ */ React26.createElement(
+      return /* @__PURE__ */ React27.createElement(
         PatternPreviewBackground,
         {
           fillType: value.patternFillType,
@@ -3354,7 +3374,7 @@ var FillPreviewBackground = memo16(function FillPreviewBackground2({
 
 // src/components/FillInputField.tsx
 var Container = styled19.button(
-  ({ theme, flex }) => ({
+  ({ theme, $flex }) => ({
     outline: "none",
     padding: 0,
     width: "50px",
@@ -3368,17 +3388,17 @@ var Container = styled19.button(
       boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`
     },
     position: "relative",
-    flex
+    flex: $flex
   })
 );
 var FillInputField = memo17(
-  forwardRef9(function FillInputField2({ id, value, ...rest }, ref) {
-    return /* @__PURE__ */ React27.createElement(Container, { ref, id, ...rest }, /* @__PURE__ */ React27.createElement(FillPreviewBackground, { value }));
+  forwardRef10(function FillInputField2({ id, value, flex, ...rest }, ref) {
+    return /* @__PURE__ */ React28.createElement(Container, { ref, id, $flex: flex, ...rest }, /* @__PURE__ */ React28.createElement(FillPreviewBackground, { value }));
   })
 );
 
 // src/components/FloatingWindow.tsx
-import React28, { useCallback as useCallback15, useRef as useRef13, useState as useState16 } from "react";
+import React29, { useCallback as useCallback15, useRef as useRef13, useState as useState16 } from "react";
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -3471,7 +3491,7 @@ function defaultRenderToolbar({
   toolbarContent,
   onClose
 }) {
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(Small, { flex: "1", fontWeight: "500", color: "text" }, title), toolbarContent, /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Small, { flex: "1", fontWeight: "500", color: "text" }, title), toolbarContent, /* @__PURE__ */ React29.createElement(
     IconButton,
     {
       iconName: "Cross3Icon",
@@ -3592,7 +3612,7 @@ var FloatingWindow = ({
     setResizeDirection(null);
     toggleGlobalTextSelection(false);
   }, []);
-  React28.useEffect(() => {
+  React29.useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -3608,7 +3628,7 @@ var FloatingWindow = ({
       onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -3622,7 +3642,7 @@ var FloatingWindow = ({
         backgroundColor: theme.colors.canvas.background
       }
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React29.createElement(
       "div",
       {
         style: {
@@ -3633,9 +3653,9 @@ var FloatingWindow = ({
       },
       renderToolbar({ title, toolbarContent, onClose: handleClose })
     ),
-    /* @__PURE__ */ React28.createElement(Divider, null),
-    /* @__PURE__ */ React28.createElement("div", { style: styles2.content }, children),
-    Object.entries(resizeHandlePositions).map(([direction, style3]) => /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React29.createElement(Divider, null),
+    /* @__PURE__ */ React29.createElement("div", { style: styles2.content }, children),
+    Object.entries(resizeHandlePositions).map(([direction, style3]) => /* @__PURE__ */ React29.createElement(
       "div",
       {
         key: direction,
@@ -3657,7 +3677,7 @@ import {
   hsvaToRgba,
   rgbaToHsva as rgbaToHsva2
 } from "@noya-app/noya-colorpicker";
-import React29, { memo as memo18, useCallback as useCallback16, useMemo as useMemo15 } from "react";
+import React30, { memo as memo18, useCallback as useCallback16, useMemo as useMemo15 } from "react";
 var GradientPicker = memo18(function GradientPicker2({
   value,
   selectedStop,
@@ -3692,14 +3712,14 @@ var GradientPicker = memo18(function GradientPicker2({
     },
     [onAdd]
   );
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     NoyaColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React30.createElement(
       Gradient,
       {
         gradients: value,
@@ -3710,12 +3730,12 @@ var GradientPicker = memo18(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ React29.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ React29.createElement(Saturation, null),
-    /* @__PURE__ */ React29.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ React29.createElement(Hue, null),
-    /* @__PURE__ */ React29.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ React29.createElement(Alpha, null)
+    /* @__PURE__ */ React30.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ React30.createElement(Saturation, null),
+    /* @__PURE__ */ React30.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ React30.createElement(Hue, null),
+    /* @__PURE__ */ React30.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ React30.createElement(Alpha, null)
   );
 });
 
@@ -3747,9 +3767,9 @@ var Grid = styled20.div((props) => ({
 }));
 
 // src/components/GridView.tsx
-import React31, {
+import React32, {
   createContext as createContext7,
-  forwardRef as forwardRef10,
+  forwardRef as forwardRef11,
   memo as memo20,
   useCallback as useCallback18,
   useContext as useContext7,
@@ -3759,7 +3779,7 @@ import styled22, { keyframes as keyframes2 } from "styled-components";
 
 // src/components/ScrollArea.tsx
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
-import React30, { memo as memo19, useCallback as useCallback17, useState as useState17 } from "react";
+import React31, { memo as memo19, useCallback as useCallback17, useState as useState17 } from "react";
 import styled21 from "styled-components";
 var SCROLLBAR_SIZE = 10;
 var StyledViewport = styled21(RadixScrollArea.Viewport)({
@@ -3789,7 +3809,7 @@ var Container2 = styled21.div({
 });
 var ScrollArea = memo19(function ScrollArea2({ children }) {
   const [scrollElementRef, setScrollElementRef] = useState17(null);
-  return /* @__PURE__ */ React30.createElement(Container2, null, /* @__PURE__ */ React30.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(Container2, null, /* @__PURE__ */ React31.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React31.createElement(
     StyledViewport,
     {
       ref: useCallback17(
@@ -3798,7 +3818,7 @@ var ScrollArea = memo19(function ScrollArea2({ children }) {
       )
     },
     typeof children === "function" ? scrollElementRef ? children(scrollElementRef) : null : children
-  ), /* @__PURE__ */ React30.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ React30.createElement(StyledThumb, { className: "scroll-component" }))));
+  ), /* @__PURE__ */ React31.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ React31.createElement(StyledThumb, { className: "scroll-component" }))));
 });
 
 // src/components/GridView.tsx
@@ -3978,7 +3998,7 @@ var Shimmer = styled22.div`
   align-items: end;
   padding: 4px;
 `;
-var GridViewItem = forwardRef10(function GridViewItem2({
+var GridViewItem = forwardRef11(function GridViewItem2({
   id,
   title,
   subtitle,
@@ -3994,7 +4014,7 @@ var GridViewItem = forwardRef10(function GridViewItem2({
   onContextMenu,
   style: style3
 }, forwardedRef) {
-  const [hovered, setHovered] = React31.useState(false);
+  const [hovered, setHovered] = React32.useState(false);
   const { hoverProps } = useHover({
     onHoverChange: (isHovering) => {
       onHoverChange?.(isHovering);
@@ -4023,7 +4043,7 @@ var GridViewItem = forwardRef10(function GridViewItem2({
     },
     [onPress]
   );
-  let element = /* @__PURE__ */ React31.createElement(
+  let element = /* @__PURE__ */ React32.createElement(
     ItemContainer,
     {
       id,
@@ -4032,7 +4052,7 @@ var GridViewItem = forwardRef10(function GridViewItem2({
       tabIndex: disabled ? void 0 : 0,
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React32.createElement(
       ContentContainer,
       {
         disabled,
@@ -4046,18 +4066,18 @@ var GridViewItem = forwardRef10(function GridViewItem2({
       },
       children
     ),
-    textPosition === "below" && /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React31.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ React31.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React31.createElement(TextOverlay, null, title && /* @__PURE__ */ React31.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React31.createElement(ItemDescription, { showBackground: true }, subtitle)),
-    loading && /* @__PURE__ */ React31.createElement(Shimmer, null, /* @__PURE__ */ React31.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
+    textPosition === "below" && /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React32.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ React32.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React32.createElement(TextOverlay, null, title && /* @__PURE__ */ React32.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React32.createElement(ItemDescription, { showBackground: true }, subtitle)),
+    loading && /* @__PURE__ */ React32.createElement(Shimmer, null, /* @__PURE__ */ React32.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
-    element = /* @__PURE__ */ React31.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
+    element = /* @__PURE__ */ React32.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
   }
   if (textPosition === "toolip") {
-    element = /* @__PURE__ */ React31.createElement(
+    element = /* @__PURE__ */ React32.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ React31.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ React31.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ React31.createElement(ItemDescription, { showBackground: false }, subtitle))
+        content: /* @__PURE__ */ React32.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ React32.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ React32.createElement(ItemDescription, { showBackground: false }, subtitle))
       },
       element
     );
@@ -4096,20 +4116,20 @@ function GridViewRoot({
     }),
     [bordered, disabled, size2, textPosition]
   );
-  return /* @__PURE__ */ React31.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React31.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ React31.createElement(ScrollArea, null, children) : children));
+  return /* @__PURE__ */ React32.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React32.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ React32.createElement(ScrollArea, null, children) : children));
 }
 function GridViewSection({
   children,
   padding = "20px"
 }) {
   const { size: size2 } = useContext7(GridViewContext);
-  return /* @__PURE__ */ React31.createElement(Grid2, { size: size2, padding }, children);
+  return /* @__PURE__ */ React32.createElement(Grid2, { size: size2, padding }, children);
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
-  return /* @__PURE__ */ React31.createElement(SectionHeaderContainer, null, /* @__PURE__ */ React31.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
-    grouped.map((title2, index) => /* @__PURE__ */ React31.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
-    /* @__PURE__ */ React31.createElement(SectionTitle, null, " / ")
+  return /* @__PURE__ */ React32.createElement(SectionHeaderContainer, null, /* @__PURE__ */ React32.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
+    grouped.map((title2, index) => /* @__PURE__ */ React32.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
+    /* @__PURE__ */ React32.createElement(SectionTitle, null, " / ")
   ));
 }
 var GridView;
@@ -4122,11 +4142,11 @@ var GridView;
 
 // src/components/InputFieldWithCompletions.tsx
 import { chunkBy, partition } from "@noya-app/noya-utils";
-import React35, {
-  forwardRef as forwardRef13,
+import React36, {
+  forwardRef as forwardRef14,
   memo as memo23,
   useCallback as useCallback21,
-  useEffect as useEffect13,
+  useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo19,
@@ -4209,10 +4229,10 @@ function mergeRanges(ranges) {
 // src/components/ListView.tsx
 import { range } from "@noya-app/noya-utils";
 import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
-import React33, {
+import React34, {
   Children as Children4,
   createContext as createContext9,
-  forwardRef as forwardRef11,
+  forwardRef as forwardRef12,
   isValidElement as isValidElement3,
   memo as memo22,
   useCallback as useCallback20,
@@ -4263,11 +4283,12 @@ import {
   useSortable,
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
-import React32, {
+import React33, {
   createContext as createContext8,
   memo as memo21,
   useCallback as useCallback19,
   useContext as useContext8,
+  useEffect as useEffect13,
   useMemo as useMemo17,
   useRef as useRef14,
   useState as useState18
@@ -4400,7 +4421,11 @@ function SortableRoot({
     },
     [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
   );
-  return /* @__PURE__ */ React32.createElement(
+  const [mounted, setMounted] = useState18(false);
+  useEffect13(() => {
+    setMounted(true);
+  }, []);
+  return /* @__PURE__ */ React33.createElement(
     SortableItemContext.Provider,
     {
       value: useMemo17(
@@ -4414,7 +4439,7 @@ function SortableRoot({
         [acceptsDrop, axis, keys, position, setActivatorEvent]
       )
     },
-    /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(
       DndContext,
       {
         sensors,
@@ -4423,9 +4448,9 @@ function SortableRoot({
         onDragMove: handleDragMove,
         onDragEnd: handleDragEnd
       },
-      /* @__PURE__ */ React32.createElement(SortableContext, { items: keys, strategy: verticalListSortingStrategy }, children),
-      renderOverlay && createPortal2(
-        /* @__PURE__ */ React32.createElement(DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
+      /* @__PURE__ */ React33.createElement(SortableContext, { items: keys, strategy: verticalListSortingStrategy }, children),
+      mounted && renderOverlay && createPortal2(
+        /* @__PURE__ */ React33.createElement(DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
         document.body
       )
     )
@@ -4483,7 +4508,7 @@ function ListViewEditableRowTitle({
       element.select();
     }, 0);
   }, [autoFocus]);
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     ListViewEditableRowTitleElement,
     {
       ref: inputRef,
@@ -4504,34 +4529,34 @@ function getPositionMargin(marginType) {
 var RowContainer = styled23.div(
   ({
     theme,
-    marginType,
-    selected,
-    selectedPosition,
-    disabled,
-    hovered,
-    variant,
-    divider,
-    isSectionHeader,
-    showsActiveState,
-    sectionHeaderVariant,
-    colorScheme,
-    gap,
-    backgroundColor
+    $marginType,
+    $selected,
+    $selectedPosition,
+    $disabled,
+    $hovered,
+    $variant,
+    $divider,
+    $isSectionHeader,
+    $showsActiveState,
+    $sectionHeaderVariant,
+    $colorScheme,
+    $gap,
+    $backgroundColor
   }) => {
-    const margin = getPositionMargin(marginType);
+    const margin = getPositionMargin($marginType);
     return {
-      ...isSectionHeader && sectionHeaderVariant === "label" ? theme.textStyles.label : theme.textStyles.small,
-      ...isSectionHeader && { fontWeight: 500 },
-      gap,
+      ...$isSectionHeader && $sectionHeaderVariant === "label" ? theme.textStyles.label : theme.textStyles.small,
+      ...$isSectionHeader && { fontWeight: 500 },
+      gap: $gap,
       flex: "0 0 auto",
       userSelect: "none",
       cursor: "default",
-      ...variant !== "bare" && {
+      ...$variant !== "bare" && {
         paddingTop: "6px",
         paddingRight: "12px",
         paddingBottom: "6px",
         paddingLeft: "12px",
-        ...variant === "padded" && {
+        ...$variant === "padded" && {
           borderRadius: "2px",
           marginLeft: "8px",
           marginRight: "8px",
@@ -4540,72 +4565,72 @@ var RowContainer = styled23.div(
         }
       },
       color: theme.colors.textMuted,
-      ...isSectionHeader && {
+      ...$isSectionHeader && {
         backgroundColor: theme.colors.listView.raisedBackground,
-        ...sectionHeaderVariant === "label" && {
+        ...$sectionHeaderVariant === "label" && {
           color: theme.colors.textDisabled
         }
       },
-      ...disabled && {
+      ...$disabled && {
         color: theme.colors.textDisabled
       },
-      ...selected && {
+      ...$selected && {
         color: "white",
-        backgroundColor: theme.colors[colorScheme]
+        backgroundColor: theme.colors[$colorScheme]
       },
       display: "flex",
       alignItems: "center",
-      ...selected && !isSectionHeader && (selectedPosition === "middle" || selectedPosition === "last") && {
+      ...$selected && !$isSectionHeader && ($selectedPosition === "middle" || $selectedPosition === "last") && {
         borderTopRightRadius: "0px",
         borderTopLeftRadius: "0px"
       },
-      ...selected && !isSectionHeader && (selectedPosition === "middle" || selectedPosition === "first") && {
+      ...$selected && !$isSectionHeader && ($selectedPosition === "middle" || $selectedPosition === "first") && {
         borderBottomRightRadius: "0px",
         borderBottomLeftRadius: "0px"
       },
       position: "relative",
-      ...hovered && {
-        boxShadow: `0 0 0 1px ${theme.colors[colorScheme]} inset`
+      ...$hovered && {
+        boxShadow: `0 0 0 1px ${theme.colors[$colorScheme]} inset`
       },
-      ...showsActiveState && {
+      ...$showsActiveState && {
         "&:active": {
-          backgroundColor: selected ? colorScheme === "secondary" ? theme.colors.secondaryLight : theme.colors.primaryLight : theme.colors.activeBackground
+          backgroundColor: $selected ? $colorScheme === "secondary" ? theme.colors.secondaryLight : theme.colors.primaryLight : theme.colors.activeBackground
         }
       },
-      ...divider && {
+      ...$divider && {
         borderBottom: `1px solid ${theme.colors.dividerSubtle}`
       },
-      ...backgroundColor && {
-        backgroundColor,
+      ...$backgroundColor && {
+        backgroundColor: $backgroundColor,
         "&:hover": {
-          backgroundColor
+          backgroundColor: $backgroundColor
         },
         "&:active": {
-          backgroundColor
+          backgroundColor: $backgroundColor
         }
       }
     };
   }
 );
-var ListViewDragIndicatorElement = styled23.div(({ theme, relativeDropPosition, offsetLeft, colorScheme, gap }) => ({
+var ListViewDragIndicatorElement = styled23.div(({ theme, $relativeDropPosition, $offsetLeft, $colorScheme, $gap }) => ({
   zIndex: 1,
   position: "absolute",
   borderRadius: "3px",
-  ...relativeDropPosition === "inside" ? {
+  ...$relativeDropPosition === "inside" ? {
     inset: 2,
-    boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${colorScheme === "secondary" ? theme.colors.secondary : theme.colors.dragOutline}`
+    boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${$colorScheme === "secondary" ? theme.colors.secondary : theme.colors.dragOutline}`
   } : {
-    top: relativeDropPosition === "above" ? -(3 + gap / 2) : void 0,
-    bottom: relativeDropPosition === "below" ? -(3 + gap / 2) : void 0,
-    left: offsetLeft,
+    top: $relativeDropPosition === "above" ? -(3 + $gap / 2) : void 0,
+    bottom: $relativeDropPosition === "below" ? -(3 + $gap / 2) : void 0,
+    left: $offsetLeft,
     right: 0,
     height: 6,
-    background: theme.colors[colorScheme],
+    background: theme.colors[$colorScheme],
     border: `2px solid white`,
     boxShadow: "0 0 2px rgba(0,0,0,0.5)"
   }
 }));
-var ListViewRow = forwardRef11(function ListViewRow2({
+var ListViewRow = forwardRef12(function ListViewRow2({
   id,
   tabIndex = 0,
   gap,
@@ -4671,28 +4696,29 @@ var ListViewRow = forwardRef11(function ListViewRow2({
     relativeDropPosition,
     ...renderProps
   }, ref) => {
-    const element = /* @__PURE__ */ React33.createElement(
-      RowContainer,
+    const Component = RowContainer;
+    const element = /* @__PURE__ */ React34.createElement(
+      Component,
       {
         ref,
-        colorScheme,
+        $colorScheme: colorScheme,
         onContextMenu,
-        isSectionHeader,
+        $isSectionHeader: isSectionHeader,
         id,
-        gap,
-        backgroundColor,
+        $gap: gap ?? 0,
+        $backgroundColor: backgroundColor,
         ...hoverProps,
         onDoubleClick: handleDoubleClick,
-        marginType,
-        disabled,
-        hovered,
-        selected,
-        variant,
-        sectionHeaderVariant,
-        selectedPosition,
-        showsActiveState: pressEventName === "onClick",
+        $marginType: marginType ?? "none",
+        $disabled: disabled,
+        $hovered: hovered,
+        $selected: selected,
+        $variant: variant,
+        $sectionHeaderVariant: sectionHeaderVariant,
+        $selectedPosition: selectedPosition,
+        $showsActiveState: pressEventName === "onClick",
         "aria-selected": selected,
-        divider: !isDragging && divider,
+        $divider: !isDragging && divider,
         onKeyDown,
         style: mergedStyle,
         ...renderProps,
@@ -4702,20 +4728,20 @@ var ListViewRow = forwardRef11(function ListViewRow2({
         ),
         tabIndex
       },
-      relativeDropPosition && /* @__PURE__ */ React33.createElement(
+      relativeDropPosition && /* @__PURE__ */ React34.createElement(
         ListViewDragIndicatorElement,
         {
-          colorScheme,
-          relativeDropPosition,
-          offsetLeft: 33 + depth * indentation,
-          gap: listGap
+          $colorScheme: colorScheme,
+          $relativeDropPosition: relativeDropPosition,
+          $offsetLeft: 33 + depth * indentation,
+          $gap: listGap
         }
       ),
-      depth > 0 && /* @__PURE__ */ React33.createElement(Spacer.Horizontal, { size: depth * indentation }),
+      depth > 0 && /* @__PURE__ */ React34.createElement(Spacer.Horizontal, { size: depth * indentation }),
       children
     );
     if (menuItems && onSelectMenuItem) {
-      return /* @__PURE__ */ React33.createElement(
+      return /* @__PURE__ */ React34.createElement(
         ContextMenu,
         {
           items: menuItems,
@@ -4728,7 +4754,10 @@ var ListViewRow = forwardRef11(function ListViewRow2({
     return element;
   };
   if (sortable && id) {
-    return /* @__PURE__ */ React33.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(sortableProps, composeRefs2(sortableRef, forwardedRef)));
+    return /* @__PURE__ */ React34.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
+      sortableProps,
+      composeRefs2(sortableRef, forwardedRef)
+    ));
   }
   return renderContent({}, forwardedRef);
 });
@@ -4740,9 +4769,9 @@ var VirtualizedListRow = memo22(function VirtualizedListRow2({
   style: style3
 }) {
   const renderItem = useContext9(RenderItemContext);
-  return /* @__PURE__ */ React33.createElement("div", { key: index, style: style3 }, renderItem(index));
+  return /* @__PURE__ */ React34.createElement("div", { key: index, style: style3 }, renderItem(index));
 });
-var VirtualizedListInner = forwardRef11(function VirtualizedListInner2({
+var VirtualizedListInner = forwardRef12(function VirtualizedListInner2({
   size: size2,
   scrollElement,
   items,
@@ -4771,7 +4800,7 @@ var VirtualizedListInner = forwardRef11(function VirtualizedListInner2({
     }),
     []
   );
-  return /* @__PURE__ */ React33.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React34.createElement(
     WindowScroller,
     {
       scrollElement,
@@ -4782,7 +4811,7 @@ var VirtualizedListInner = forwardRef11(function VirtualizedListInner2({
         registerChild,
         onChildScroll,
         scrollTop
-      }) => /* @__PURE__ */ React33.createElement("div", { ref: registerChild }, /* @__PURE__ */ React33.createElement(
+      }) => /* @__PURE__ */ React34.createElement("div", { ref: registerChild }, /* @__PURE__ */ React34.createElement(
         VariableSizeList,
         {
           ref: listRef,
@@ -4815,15 +4844,15 @@ var VirtualizedListInner = forwardRef11(function VirtualizedListInner2({
 var VirtualizedList = memo22(
   VirtualizedListInner
 );
-var RootContainer2 = styled23.div(({ theme, scrollable, gap }) => ({
-  flex: scrollable ? "1 0 0" : "0 0 auto",
+var RootContainer2 = styled23.div(({ theme, $scrollable, $gap }) => ({
+  flex: $scrollable ? "1 0 0" : "0 0 auto",
   display: "flex",
   flexDirection: "column",
   flexWrap: "nowrap",
   color: theme.colors.textMuted,
-  gap
+  gap: $gap
 }));
-var ListViewRootInner = forwardRef11(function ListViewRootInner2({
+var ListViewRootInner = forwardRef12(function ListViewRootInner2({
   onPress,
   scrollable = false,
   expandable = true,
@@ -4921,7 +4950,7 @@ var ListViewRootInner = forwardRef11(function ListViewRootInner2({
     [indentation]
   );
   const renderOverlay = useCallback20(
-    (index) => /* @__PURE__ */ React33.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React33.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
+    (index) => /* @__PURE__ */ React34.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React34.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
   const renderWrappedChild = useCallback20(
@@ -4930,12 +4959,12 @@ var ListViewRootInner = forwardRef11(function ListViewRootInner2({
       const current = renderChild(index);
       if (!contextValue || !isValidElement3(current))
         return null;
-      return /* @__PURE__ */ React33.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
+      return /* @__PURE__ */ React34.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
     },
     [getItemContextValue, renderChild]
   );
   const ids = useMemo18(() => data.map(keyExtractor), [keyExtractor, data]);
-  const withSortable = (children) => sortable ? /* @__PURE__ */ React33.createElement(
+  const withSortable = (children) => sortable ? /* @__PURE__ */ React34.createElement(
     Sortable.Root,
     {
       onMoveItem,
@@ -4945,7 +4974,7 @@ var ListViewRootInner = forwardRef11(function ListViewRootInner2({
     },
     children
   ) : children;
-  const withScrollable = (children) => scrollable ? /* @__PURE__ */ React33.createElement(ScrollArea, null, children) : children(null);
+  const withScrollable = (children) => scrollable ? /* @__PURE__ */ React34.createElement(ScrollArea, null, children) : children(null);
   const getItemHeight = useCallback20(
     (index) => {
       const child = getItemContextValue(index);
@@ -4960,18 +4989,18 @@ var ListViewRootInner = forwardRef11(function ListViewRootInner2({
     [data, keyExtractor]
   );
   const draggingContextValue = useMemo18(() => ({ indentation }), [indentation]);
-  return /* @__PURE__ */ React33.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React34.createElement(
     RootContainer2,
     {
       ...{
         [pressEventName]: handleClick
       },
-      gap,
-      scrollable
+      $gap: gap,
+      $scrollable: scrollable
     },
     withScrollable(
       (scrollElementRef) => withSortable(
-        virtualized ? /* @__PURE__ */ React33.createElement(
+        virtualized ? /* @__PURE__ */ React34.createElement(
           VirtualizedList,
           {
             ref: forwardedRef,
@@ -4988,14 +5017,14 @@ var ListViewRootInner = forwardRef11(function ListViewRootInner2({
   ));
 });
 var ListViewRoot = memo22(ListViewRootInner);
-var ChildrenListViewInner = forwardRef11(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
+var ChildrenListViewInner = forwardRef12(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
   const items = useMemo18(
     () => Children4.toArray(children).flatMap(
       (child) => isValidElement3(child) ? [child] : []
     ),
     [children]
   );
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     ListViewRoot,
     {
       ref: forwardedRef,
@@ -5010,11 +5039,11 @@ var ChildrenListViewInner = forwardRef11(function ChildrenListViewInner2({ child
   );
 });
 var ChildrenListView = memo22(ChildrenListViewInner);
-var SimpleListViewInner = forwardRef11(function SimpleListViewInner2(props, forwardedRef) {
+var SimpleListViewInner = forwardRef12(function SimpleListViewInner2(props, forwardedRef) {
   if ("children" in props) {
-    return /* @__PURE__ */ React33.createElement(ChildrenListView, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ React34.createElement(ChildrenListView, { ref: forwardedRef, ...props });
   } else {
-    return /* @__PURE__ */ React33.createElement(ListViewRoot, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ React34.createElement(ListViewRoot, { ref: forwardedRef, ...props });
   }
 });
 var SimpleListView = memo22(SimpleListViewInner);
@@ -5035,7 +5064,7 @@ var ListView;
 })(ListView || (ListView = {}));
 
 // src/components/Text.tsx
-import React34, { forwardRef as forwardRef12 } from "react";
+import React35, { forwardRef as forwardRef13 } from "react";
 import styled24 from "styled-components";
 var elements = {
   title: "h1",
@@ -5051,13 +5080,13 @@ var elements = {
   code: "code",
   label: "span"
 };
-var StyledElement = styled24.span(({ theme, variant, styleProps, breakpoints, color }) => ({
-  ...theme.textStyles[variant],
-  color: color ? theme.colors[color] : void 0,
-  ...styleProps,
-  ...mergeBreakpoints(breakpoints || [])
+var StyledElement = styled24.span(({ theme, $variant, $styleProps, $breakpoints, $color }) => ({
+  ...theme.textStyles[$variant],
+  color: $color ? theme.colors[$color] : void 0,
+  ...$styleProps,
+  ...mergeBreakpoints($breakpoints || [])
 }));
-var Text = forwardRef12(function Text2({
+var Text = forwardRef13(function Text2({
   as,
   variant,
   breakpoints,
@@ -5069,44 +5098,44 @@ var Text = forwardRef12(function Text2({
   ...rest
 }, forwardedRef) {
   const element = as ?? elements[variant] ?? "span";
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(
     StyledElement,
     {
       ref: forwardedRef,
       as: element,
       className,
-      variant,
-      breakpoints,
-      styleProps: rest,
-      color,
+      $variant: variant,
+      $breakpoints: breakpoints,
+      $styleProps: rest,
+      $color: color,
       onClick,
       ...href && { href }
     },
     children
   );
 });
-var Heading1 = forwardRef12(
-  (props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading1" })
+var Heading1 = forwardRef13(
+  (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading1" })
 );
-var Heading2 = forwardRef12(
-  (props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading2" })
+var Heading2 = forwardRef13(
+  (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading2" })
 );
-var Heading3 = forwardRef12(
-  (props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading3" })
+var Heading3 = forwardRef13(
+  (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading3" })
 );
-var Heading4 = forwardRef12(
-  (props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading4" })
+var Heading4 = forwardRef13(
+  (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading4" })
 );
-var Heading5 = forwardRef12(
-  (props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading5" })
+var Heading5 = forwardRef13(
+  (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading5" })
 );
-var Body = forwardRef12(
-  (props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "body" })
+var Body = forwardRef13(
+  (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "body" })
 );
-var Small = forwardRef12(
-  (props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "small" })
+var Small = forwardRef13(
+  (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "small" })
 );
-var Italic = ({ children }) => /* @__PURE__ */ React34.createElement(
+var Italic = ({ children }) => /* @__PURE__ */ React35.createElement(
   "span",
   {
     style: {
@@ -5143,20 +5172,20 @@ function filterWithGroupedSections(items, query) {
   });
 }
 var CompletionToken = styled25.span(
-  ({ type }) => ({
-    fontWeight: type === "match" ? "bold" : "normal",
+  ({ $type }) => ({
+    fontWeight: $type === "match" ? "bold" : "normal",
     whiteSpace: "pre"
   })
 );
 var CompletionMenu = memo23(
-  forwardRef13(function CompletionMenu2({
+  forwardRef14(function CompletionMenu2({
     items,
     selectedIndex,
     onSelectItem,
     onHoverIndex,
     listSize
   }, forwardedRef) {
-    return /* @__PURE__ */ React35.createElement(
+    return /* @__PURE__ */ React36.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -5168,13 +5197,13 @@ var CompletionMenu = memo23(
         sectionHeaderVariant: "label",
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ React35.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
+            return /* @__PURE__ */ React36.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
           }
           const tokens = fuzzyTokenize({
             item: item.name,
             itemScore: item
           });
-          return /* @__PURE__ */ React35.createElement(
+          return /* @__PURE__ */ React36.createElement(
             ListView.Row,
             {
               key: item.id,
@@ -5186,8 +5215,8 @@ var CompletionMenu = memo23(
                 }
               }
             },
-            tokens.map((token, j) => /* @__PURE__ */ React35.createElement(CompletionToken, { key: j, type: token.type }, token.text)),
-            item.icon && /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(Spacer.Horizontal, null), item.icon)
+            tokens.map((token, j) => /* @__PURE__ */ React36.createElement(CompletionToken, { key: j, $type: token.type }, token.text)),
+            item.icon && /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(Spacer.Horizontal, null), item.icon)
           );
         }
       }
@@ -5195,7 +5224,7 @@ var CompletionMenu = memo23(
   })
 );
 var InputFieldWithCompletions = memo23(
-  forwardRef13(function InputFieldWithCompletions2({
+  forwardRef14(function InputFieldWithCompletions2({
     loading,
     initialValue = "",
     placeholder,
@@ -5256,7 +5285,7 @@ var InputFieldWithCompletions = memo23(
       updateState({ filter: initialValue });
     }, [initialValue, updateState]);
     const { filter, selectedIndex } = state;
-    const listRef = React35.useRef(null);
+    const listRef = React36.useRef(null);
     const filteredItems = useMemo19(
       () => filterWithGroupedSections(items, filter),
       [items, filter]
@@ -5273,7 +5302,7 @@ var InputFieldWithCompletions = memo23(
       ),
       ListView.rowHeight * 10.5
     );
-    useEffect13(() => {
+    useEffect14(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
       }
@@ -5392,14 +5421,14 @@ var InputFieldWithCompletions = memo23(
         ref.current?.setSelectionRange(0, ref.current.value.length);
       }
     }));
-    return /* @__PURE__ */ React35.createElement(
+    return /* @__PURE__ */ React36.createElement(
       InputField.Root,
       {
         size: size2,
         labelSize: 16,
         renderPopoverContent: ({ width }) => {
           const listSize = { width, height };
-          return /* @__PURE__ */ React35.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ React35.createElement(
+          return /* @__PURE__ */ React36.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ React36.createElement(
             CompletionMenu,
             {
               ref: listRef,
@@ -5409,7 +5438,7 @@ var InputFieldWithCompletions = memo23(
               onHoverIndex: handleIndexChange,
               listSize
             }
-          ) : /* @__PURE__ */ React35.createElement(
+          ) : /* @__PURE__ */ React36.createElement(
             Stack.V,
             {
               height: "100px",
@@ -5417,11 +5446,11 @@ var InputFieldWithCompletions = memo23(
               alignItems: "center",
               justifyContent: "center"
             },
-            /* @__PURE__ */ React35.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
+            /* @__PURE__ */ React36.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
           ));
         }
       },
-      /* @__PURE__ */ React35.createElement(
+      /* @__PURE__ */ React36.createElement(
         InputField.Input,
         {
           ref,
@@ -5445,9 +5474,9 @@ var InputFieldWithCompletions = memo23(
           "aria-controls": "component-listbox"
         }
       ),
-      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ React35.createElement(InputField.Typeahead, { value: typeaheadValue }),
+      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ React36.createElement(InputField.Typeahead, { value: typeaheadValue }),
       (!isFocused || !hideChildrenWhenFocused) && children,
-      loading && isFocused && /* @__PURE__ */ React35.createElement(InputField.Label, null, /* @__PURE__ */ React35.createElement(ActivityIndicator, null))
+      loading && isFocused && /* @__PURE__ */ React36.createElement(InputField.Label, null, /* @__PURE__ */ React36.createElement(ActivityIndicator, null))
     );
   })
 );
@@ -5469,13 +5498,13 @@ function getNextIndex(items, currentIndex, direction, isDisabled) {
 }
 
 // src/components/Label.tsx
-import React36, { memo as memo24 } from "react";
+import React37, { memo as memo24 } from "react";
 import styled26 from "styled-components";
 var LabelLabel = styled26.label(
-  ({ theme, selected }) => ({
+  ({ theme, $selected }) => ({
     ...theme.textStyles.small,
     color: theme.colors.textMuted,
-    ...selected && {
+    ...$selected && {
       color: theme.colors.text
     },
     fontSize: "11px",
@@ -5498,7 +5527,7 @@ var LabelContainer2 = styled26.span(({ theme }) => ({
   alignItems: "center"
 }));
 function LabelRoot({ label, children }) {
-  return /* @__PURE__ */ React36.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ React36.createElement(LabelLabel, null, label)));
+  return /* @__PURE__ */ React37.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ React37.createElement(LabelLabel, null, label)));
 }
 var Label;
 ((_Label) => {
@@ -5508,7 +5537,7 @@ var Label;
 
 // src/components/LabeledElementView.tsx
 import * as kiwi from "kiwi.js";
-import React37, {
+import React38, {
   Children as Children5,
   createRef,
   Fragment,
@@ -5553,7 +5582,7 @@ var LabeledElementView = memo25(function LabeledElementView2({
     );
   }, [serializedIds]);
   const labelElements = useMemo20(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React37.createElement(
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React38.createElement(
       "span",
       {
         key: id,
@@ -5631,13 +5660,13 @@ var LabeledElementView = memo25(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ React37.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ React37.createElement(Tools, null, children), /* @__PURE__ */ React37.createElement(Labels, null, labelElements));
+  return /* @__PURE__ */ React38.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ React38.createElement(Tools, null, children), /* @__PURE__ */ React38.createElement(Labels, null, labelElements));
 });
 
 // src/components/Progress.tsx
 import { clamp } from "@noya-app/noya-utils";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import React38 from "react";
+import React39 from "react";
 import styled28 from "styled-components";
 function Progress({
   value,
@@ -5647,7 +5676,7 @@ function Progress({
   variant = "normal"
 }) {
   const clampedValue = clamp(value, 0, 100);
-  return /* @__PURE__ */ React38.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ React39.createElement(
     ProgressIndicator,
     {
       variant,
@@ -5672,18 +5701,18 @@ var ProgressIndicator = styled28(ProgressPrimitive.Indicator)(({ theme, variant
 
 // src/components/RadioGroup.tsx
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import React39, {
+import React40, {
   createContext as createContext10,
-  forwardRef as forwardRef14,
+  forwardRef as forwardRef15,
   memo as memo26,
   useCallback as useCallback22,
   useContext as useContext10,
   useMemo as useMemo21
 } from "react";
 import styled29 from "styled-components";
-var ignoredProps3 = /* @__PURE__ */ new Set(["colorScheme"]);
+var ignoredProps2 = /* @__PURE__ */ new Set(["colorScheme"]);
 var StyledRoot = styled29(ToggleGroupPrimitive.Root).withConfig({
-  shouldForwardProp: (prop) => !ignoredProps3.has(prop)
+  shouldForwardProp: (prop) => !ignoredProps2.has(prop)
 })(({ theme, colorScheme }) => ({
   appearance: "none",
   width: "0px",
@@ -5706,7 +5735,7 @@ var StyledRoot = styled29(ToggleGroupPrimitive.Root).withConfig({
   padding: colorScheme === void 0 ? "2px" : 0
 }));
 var StyledItem = styled29(ToggleGroupPrimitive.Item).withConfig({
-  shouldForwardProp: (prop) => !ignoredProps3.has(prop)
+  shouldForwardProp: (prop) => !ignoredProps2.has(prop)
 })(({ theme, colorScheme }) => ({
   ...theme.textStyles.small,
   position: "relative",
@@ -5732,9 +5761,9 @@ var StyledItem = styled29(ToggleGroupPrimitive.Item).withConfig({
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors[colorScheme ?? "primary"]}`
   }
 }));
-var ToggleGroupItem = forwardRef14(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
+var ToggleGroupItem = forwardRef15(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
   const { colorScheme } = useContext10(RadioGroupContext);
-  const itemElement = /* @__PURE__ */ React39.createElement(
+  const itemElement = /* @__PURE__ */ React40.createElement(
     StyledItem,
     {
       ref: forwardedRef,
@@ -5744,7 +5773,7 @@ var ToggleGroupItem = forwardRef14(function ToggleGroupItem2({ value, tooltip, c
     },
     children
   );
-  return tooltip ? /* @__PURE__ */ React39.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ React40.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
 var RadioGroupContext = createContext10({
   colorScheme: "primary"
@@ -5766,7 +5795,7 @@ function ToggleGroupRoot({
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ React39.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React40.createElement(
     StyledRoot,
     {
       id,
@@ -5785,13 +5814,13 @@ var RadioGroup;
 })(RadioGroup || (RadioGroup = {}));
 
 // src/components/Select.tsx
-import { memoize as memoize2 } from "@noya-app/noya-utils";
-import React40, {
+import { memoize } from "@noya-app/noya-utils";
+import React41, {
   createContext as createContext11,
   memo as memo27,
   useCallback as useCallback23,
   useContext as useContext11,
-  useEffect as useEffect14,
+  useEffect as useEffect15,
   useMemo as useMemo22,
   useRef as useRef18
 } from "react";
@@ -5803,38 +5832,38 @@ var SelectOption = memo27(function SelectOption2({
   onSelect
 }) {
   const { addListener, removeListener } = useContext11(SelectContext);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!onSelect)
       return;
     addListener(value, onSelect);
     return () => removeListener(value);
   }, [addListener, onSelect, removeListener, value]);
-  return /* @__PURE__ */ React40.createElement("option", { value }, title ?? value);
+  return /* @__PURE__ */ React41.createElement("option", { value }, title ?? value);
 });
-var createChevronSVGString = memoize2(
+var createChevronSVGString = memoize(
   (color) => `
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='${color}'>
     <path d='M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z'></path>
   </svg>
-`
+`.replace(/\n/g, "")
 );
 var SelectContainer = styled30.div(
-  ({ flex }) => ({
-    flex: flex ?? "1 1 0px",
+  ({ $flex }) => ({
+    flex: $flex ?? "1 1 0px",
     display: "flex",
     flexDirection: "row",
     position: "relative"
   })
 );
 var SelectElement = styled30.select(
-  ({ theme, flex }) => ({
+  ({ theme, $flex }) => ({
     appearance: "none",
     ...theme.textStyles.small,
     color: theme.colors.text,
     lineHeight: "19px",
     width: "0px",
     // Reset intrinsic width
-    flex: flex ?? "1 1 0px",
+    flex: $flex ?? "1 1 0px",
     position: "relative",
     border: "0",
     outline: "none",
@@ -5883,7 +5912,7 @@ var Select = memo27(function Select2({
   const onChange = "options" in rest ? rest.onChange : void 0;
   const children = "options" in rest ? void 0 : rest.children;
   const optionElements = useMemo22(
-    () => options ? options.map((option, index) => /* @__PURE__ */ React40.createElement(
+    () => options ? options.map((option, index) => /* @__PURE__ */ React41.createElement(
       SelectOption,
       {
         key: option,
@@ -5902,11 +5931,11 @@ var Select = memo27(function Select2({
     }),
     []
   );
-  return /* @__PURE__ */ React40.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ React40.createElement(SelectContainer, { flex }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ React41.createElement(SelectContainer, { $flex: flex }, /* @__PURE__ */ React41.createElement(
     SelectElement,
     {
       id,
-      flex,
+      $flex: flex,
       value,
       onChange: useCallback23(
         (event) => listeners.current.get(event.target.value)?.(),
@@ -5915,12 +5944,12 @@ var Select = memo27(function Select2({
       onPointerDown: (event) => event.stopPropagation()
     },
     optionElements
-  )), label && /* @__PURE__ */ React40.createElement(SelectLabel, { htmlFor: id }, label));
+  )), label && /* @__PURE__ */ React41.createElement(SelectLabel, { htmlFor: id }, label));
 });
 
 // src/components/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import React41, { useCallback as useCallback24, useMemo as useMemo23 } from "react";
+import React42, { useCallback as useCallback24, useMemo as useMemo23 } from "react";
 import styled31 from "styled-components";
 var StyledSlider = styled31(RadixSlider.Root)({
   flex: "1",
@@ -5971,7 +6000,7 @@ var Slider = function Slider2({
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React42.createElement(
     StyledSlider,
     {
       min,
@@ -5980,16 +6009,16 @@ var Slider = function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange
     },
-    /* @__PURE__ */ React41.createElement(StyledTrack, null, /* @__PURE__ */ React41.createElement(StyledRange, null)),
-    /* @__PURE__ */ React41.createElement(StyledThumb2, null)
+    /* @__PURE__ */ React42.createElement(StyledTrack, null, /* @__PURE__ */ React42.createElement(StyledRange, null)),
+    /* @__PURE__ */ React42.createElement(StyledThumb2, null)
   );
 };
 
 // src/components/Switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import React42 from "react";
+import React43 from "react";
 import styled32 from "styled-components";
-var SwitchRoot = styled32(SwitchPrimitive.Root)(({ theme, colorScheme: variant }) => ({
+var SwitchRoot = styled32(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
   all: "unset",
   width: 32,
   height: 19,
@@ -5998,13 +6027,12 @@ var SwitchRoot = styled32(SwitchPrimitive.Root)(({ theme, colorScheme: variant }
   position: "relative",
   WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
   cursor: "pointer",
-  // '&:focus': {
-  //   boxShadow: `0 0 0 1px ${
-  //     variant === 'secondary' ? theme.colors.secondary : theme.colors.primary
-  //   }`,
-  // },
+  "&:focus": {
+    outline: `2px solid ${theme.colors.primary}`,
+    outlineOffset: "1px"
+  },
   '&[data-state="checked"]': {
-    backgroundColor: variant === "primary" ? theme.colors.primary : variant === "secondary" ? theme.colors.secondary : void 0
+    backgroundColor: $colorScheme === "primary" ? theme.colors.primary : $colorScheme === "secondary" ? theme.colors.secondary : void 0
   }
 }));
 var SwitchThumb = styled32(SwitchPrimitive.Thumb)({
@@ -6023,27 +6051,27 @@ var Switch = function Switch2({
   onChange,
   colorScheme = "normal"
 }) {
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     SwitchRoot,
     {
-      colorScheme,
+      $colorScheme: colorScheme,
       checked: value,
       onCheckedChange: (newValue) => {
         onChange(newValue);
       }
     },
-    /* @__PURE__ */ React42.createElement(SwitchThumb, null)
+    /* @__PURE__ */ React43.createElement(SwitchThumb, null)
   );
 };
 
 // src/components/TreeView.tsx
-import React43, {
-  forwardRef as forwardRef15,
+import React44, {
+  forwardRef as forwardRef16,
   memo as memo28,
   useCallback as useCallback25,
   useContext as useContext12
 } from "react";
-var TreeRow = forwardRef15(function TreeRow2({
+var TreeRow = forwardRef16(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
@@ -6058,14 +6086,14 @@ var TreeRow = forwardRef15(function TreeRow2({
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ React43.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React43.createElement(React43.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React43.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React44.createElement(React44.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React44.createElement(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon" : "ChevronRightIcon",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React43.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React43.createElement(React43.Fragment, null, icon, /* @__PURE__ */ React43.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React44.createElement(React44.Fragment, null, icon, /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
@@ -6166,7 +6194,7 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/ArrayController.tsx
 import { range as range2 } from "@noya-app/noya-utils";
-import React45, { memo as memo30, useCallback as useCallback26, useMemo as useMemo24 } from "react";
+import React46, { memo as memo30, useCallback as useCallback26, useMemo as useMemo24 } from "react";
 import styled34, { useTheme as useTheme5 } from "styled-components";
 
 // src/components/InspectorPrimitives.tsx
@@ -6185,25 +6213,25 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-import React44, { memo as memo29 } from "react";
+import React45, { memo as memo29 } from "react";
 import styled33, { useTheme as useTheme4 } from "styled-components";
-var Section = styled33.div(({ theme, padding = "10px", gap }) => ({
+var Section = styled33.div(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
   display: "flex",
   flexDirection: "column",
-  padding,
-  gap
+  padding: $padding,
+  gap: $gap
 }));
 var SectionHeader = styled33.div(({ theme }) => ({
   display: "flex",
   alignItems: "center"
 }));
-var Title3 = styled33.div(({ theme, textStyle }) => ({
+var Title3 = styled33.div(({ theme, $textStyle }) => ({
   display: "flex",
   flexDirection: "row",
   userSelect: "none",
-  ...textStyle ? {
-    ...theme.textStyles[textStyle],
+  ...$textStyle ? {
+    ...theme.textStyles[$textStyle],
     color: theme.colors.text
   } : {
     ...theme.textStyles.label,
@@ -6212,12 +6240,12 @@ var Title3 = styled33.div(({ theme, textStyle }) => ({
   }
 }));
 var Row2 = styled33.div(
-  ({ theme, gap }) => ({
+  ({ theme, $gap }) => ({
     flex: "1",
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    gap
+    gap: $gap
   })
 );
 var Column = styled33.div(({ theme }) => ({
@@ -6232,18 +6260,18 @@ var Checkbox = styled33.input(({ theme }) => ({
 var Text3 = styled33.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ React44.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
+var VerticalSeparator = () => /* @__PURE__ */ React45.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
 var SliderRowLabel = styled33.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
   marginBottom: "-6px"
 }));
-var RowLabel = styled33.span(({ theme, textStyle }) => ({
+var RowLabel = styled33.span(({ theme, $textStyle }) => ({
   // marginBottom: '6px',
   display: "flex",
-  ...textStyle ? {
-    ...theme.textStyles[textStyle]
+  ...$textStyle ? {
+    ...theme.textStyles[$textStyle]
   } : {
     ...theme.textStyles.label,
     color: theme.colors.textSubtle,
@@ -6261,13 +6289,13 @@ var LabeledRow = memo29(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ React44.createElement(Row2, { id }, /* @__PURE__ */ React44.createElement(Column, null, /* @__PURE__ */ React44.createElement(RowLabel, { textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React44.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React44.createElement(Row2, { gap }, children)));
+  return /* @__PURE__ */ React45.createElement(Row2, { id }, /* @__PURE__ */ React45.createElement(Column, null, /* @__PURE__ */ React45.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React45.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React45.createElement(Row2, { $gap: gap }, children)));
 });
 var LabeledSliderRow = memo29(function LabeledRow3({
   children,
   label
 }) {
-  return /* @__PURE__ */ React44.createElement(Row2, null, /* @__PURE__ */ React44.createElement(Column, null, /* @__PURE__ */ React44.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React44.createElement(Row2, null, children)));
+  return /* @__PURE__ */ React45.createElement(Row2, null, /* @__PURE__ */ React45.createElement(Column, null, /* @__PURE__ */ React45.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React45.createElement(Row2, null, children)));
 });
 
 // src/components/ArrayController.tsx
@@ -6320,11 +6348,11 @@ var ArrayController = memo30(function ArrayController2({
     [onMoveItem, reversed]
   );
   const renderRow = (index) => {
-    return /* @__PURE__ */ React45.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
+    return /* @__PURE__ */ React46.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
   };
-  return /* @__PURE__ */ React45.createElement(Section, { id, padding, gap: "2px" }, /* @__PURE__ */ React45.createElement(SectionHeader, null, /* @__PURE__ */ React45.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ React45.createElement(Title3, null, title)), /* @__PURE__ */ React45.createElement(Spacer.Horizontal, null), withSeparatorElements(
+  return /* @__PURE__ */ React46.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ React46.createElement(SectionHeader, null, /* @__PURE__ */ React46.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ React46.createElement(Title3, null, title)), /* @__PURE__ */ React46.createElement(Spacer.Horizontal, null), withSeparatorElements(
     [
-      onClickTrash && /* @__PURE__ */ React45.createElement(
+      onClickTrash && /* @__PURE__ */ React46.createElement(
         IconButton,
         {
           id: `${id}-trash`,
@@ -6333,7 +6361,7 @@ var ArrayController = memo30(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ React45.createElement(
+      onClickExpand && /* @__PURE__ */ React46.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -6342,7 +6370,7 @@ var ArrayController = memo30(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ React45.createElement(
+      onClickPlus && /* @__PURE__ */ React46.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -6352,21 +6380,21 @@ var ArrayController = memo30(function ArrayController2({
         }
       )
     ],
-    /* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ React45.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(Spacer.Horizontal, { size: 8 })
+  )), /* @__PURE__ */ React46.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ React46.createElement(
     Sortable.Root,
     {
       keys,
       renderOverlay: renderRow,
       onMoveItem: handleMoveItem
     },
-    indexes.map((index) => /* @__PURE__ */ React45.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ React45.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ React45.createElement(
+    indexes.map((index) => /* @__PURE__ */ React46.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ React46.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ React46.createElement(
       ListView.DragIndicator,
       {
-        gap: 0,
-        colorScheme: "primary",
-        relativeDropPosition,
-        offsetLeft: 0
+        $gap: 0,
+        $colorScheme: "primary",
+        $relativeDropPosition: relativeDropPosition,
+        $offsetLeft: 0
       }
     ))))
   ) : indexes.map(renderRow)), expanded && renderExpandedContent?.());
@@ -6374,7 +6402,7 @@ var ArrayController = memo30(function ArrayController2({
 
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import React46, { memo as memo31, useCallback as useCallback27 } from "react";
+import React47, { memo as memo31, useCallback as useCallback27 } from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
@@ -6396,7 +6424,7 @@ var DimensionInput = memo31(function DimensionInput2({
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React46.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ React47.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : round(value, 2),
@@ -6405,7 +6433,7 @@ var DimensionInput = memo31(function DimensionInput2({
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ React46.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ React47.createElement(InputField.Label, null, label));
 });
 export {
   ActivityIndicator,