@noya-app/noya-designsystem 0.1.15 → 0.1.17

package/dist/index.js

@@ -140,14 +140,14 @@ var Spinner = import_styled_components.default.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  opacity: ${({ opacity }) => opacity};
+  opacity: ${({ $opacity }) => $opacity};
 `;
 var SpinnerCircle = import_styled_components.default.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 = (0, import_react.memo)(function ActivityIndicator2({
@@ -156,7 +156,7 @@ var ActivityIndicator = (0, import_react.memo)(function ActivityIndicator2({
   color = "black",
   trackColor = "rgba(0, 0, 0, 0.1)"
 }) {
-  return /* @__PURE__ */ import_react.default.createElement(Spinner, { opacity }, /* @__PURE__ */ import_react.default.createElement(SpinnerCircle, { size: size2, color, trackColor }));
+  return /* @__PURE__ */ import_react.default.createElement(Spinner, { $opacity: opacity }, /* @__PURE__ */ import_react.default.createElement(SpinnerCircle, { $size: size2, $color: color, $trackColor: trackColor }));
 });
 
 // src/components/Avatar.tsx
@@ -206,9 +206,9 @@ function withSeparatorElements(elements2, separator) {
 }
 
 // src/components/Stack.tsx
-var Element = import_styled_components2.default.div(({ styleProps, breakpoints }) => ({
-  ...styleProps,
-  ...mergeBreakpoints(breakpoints || [])
+var Element = import_styled_components2.default.div(({ $styleProps, $breakpoints }) => ({
+  ...$styleProps,
+  ...mergeBreakpoints($breakpoints || [])
 }));
 var StackBase = (0, import_react3.forwardRef)(function StackBase2({ id, as, children, separator, breakpoints, tabIndex, href, ...rest }, forwardedRef) {
   const elements2 = separator ? withSeparatorElements(import_react3.Children.toArray(children), separator) : children;
@@ -224,8 +224,8 @@ var StackBase = (0, import_react3.forwardRef)(function StackBase2({ id, as, chil
       ref: forwardedRef,
       id,
       as,
-      styleProps,
-      breakpoints,
+      $styleProps: styleProps,
+      $breakpoints: breakpoints,
       tabIndex,
       ...href && { href }
     },
@@ -294,10 +294,10 @@ var Avatar = (0, import_react4.forwardRef)(function Avatar2({
 }, forwardedRef) {
   return /* @__PURE__ */ import_react4.default.createElement(AvatarRoot, { ref: forwardedRef, size: size2, overflow, ...props }, /* @__PURE__ */ import_react4.default.createElement(AvatarImage, { src: image, alt: name3 }), /* @__PURE__ */ import_react4.default.createElement(AvatarFallback, { size: size2 }, fallback));
 });
-var AvatarStackItemWrapper = import_styled_components3.default.div(({ size: size2, theme }) => ({
+var AvatarStackItemWrapper = import_styled_components3.default.div(({ $size, theme }) => ({
   position: "relative",
-  width: size2,
-  height: size2,
+  width: $size,
+  height: $size,
   marginLeft: "-8px",
   // outline: `2px solid ${theme.colors.sidebar.background}`,
   borderRadius: "50%",
@@ -314,7 +314,7 @@ function AvatarStack({
   return /* @__PURE__ */ import_react4.default.createElement(Stack.H, null, childrenArray.map((child, index) => {
     if (index === 0)
       return child;
-    return /* @__PURE__ */ import_react4.default.createElement(AvatarStackItemWrapper, { size: size2, key: index }, child);
+    return /* @__PURE__ */ import_react4.default.createElement(AvatarStackItemWrapper, { $size: size2, key: index }, child);
   }));
 }
 
@@ -352,48 +352,49 @@ var Tooltip = (0, import_react5.memo)(function Tooltip2({ children, content }) {
 var ButtonElement = import_styled_components5.default.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": {
@@ -403,7 +404,7 @@ var ButtonElement = import_styled_components5.default.button(
         background: theme.colors.primary
       }
     },
-    ...variant === "secondary" && {
+    ...$variant === "secondary" && {
       background: theme.colors.secondary,
       color: "white",
       "&:hover": {
@@ -413,7 +414,7 @@ var ButtonElement = import_styled_components5.default.button(
         background: theme.colors.secondary
       }
     },
-    ...variant === "secondaryBright" && {
+    ...$variant === "secondaryBright" && {
       background: "#0ab557",
       color: "white",
       "&:hover": {
@@ -423,7 +424,7 @@ var ButtonElement = import_styled_components5.default.button(
         opacity: 0.9
       }
     },
-    ...variant === "white" && {
+    ...$variant === "white" && {
       background: "white",
       "&:hover": {
         opacity: 0.8
@@ -432,7 +433,7 @@ var ButtonElement = import_styled_components5.default.button(
         opacity: 0.9
       }
     },
-    ...variant === "floating" && {
+    ...$variant === "floating" && {
       background: "white",
       color: theme.colors.text,
       boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
@@ -483,13 +484,13 @@ var Button = (0, import_react6.forwardRef)(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: (0, import_react6.useCallback)((event) => {
         event.stopPropagation();
@@ -503,12 +504,12 @@ var Button = (0, import_react6.forwardRef)(function Button2({
 
 // src/components/Chip.tsx
 var import_noya_icons3 = require("@noya-app/noya-icons");
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/contexts/DesignSystemConfiguration.tsx
 var import_noya_keymap3 = require("@noya-app/noya-keymap");
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_styled_components15 = require("styled-components");
 
 // src/components/Toast.tsx
@@ -680,7 +681,8 @@ var colors = {
     grid: "rgba(0,0,0,0.05)"
   },
   sidebar: {
-    background: "rgba(252,252,252,0.85)"
+    background: "rgb(252,252,252)",
+    backgroundTransparent: "rgba(252,252,252,0.85)"
   },
   popover: {
     background: "rgb(252,252,252)",
@@ -821,24 +823,35 @@ var sizes = {
 };
 
 // src/contexts/DialogContext.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/components/Dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/components/Spacer.tsx
+var import_react9 = __toESM(require("react"));
 var import_styled_components8 = __toESM(require("styled-components"));
-var SpacerVertical = import_styled_components8.default.span(({ size: size2, inline }) => ({
-  display: inline ? "inline-block" : "block",
-  ...size2 === void 0 ? { flex: 1 } : { minHeight: size2 }
+var SpacerVertical_ = import_styled_components8.default.span(({ $size, $inline }) => ({
+  display: $inline ? "inline-block" : "block",
+  ...$size === void 0 ? { flex: 1 } : { minHeight: $size }
 }));
-var SpacerHorizontal = import_styled_components8.default.span(({ size: size2, inline }) => ({
-  display: inline ? "inline-block" : "block",
-  ...size2 === void 0 ? { flex: 1 } : { minWidth: size2 }
+var SpacerVertical = (0, import_react9.forwardRef)(
+  ({ size: size2, inline, ...props }, ref) => {
+    return /* @__PURE__ */ import_react9.default.createElement(SpacerVertical_, { $size: size2, $inline: inline, ...props, ref });
+  }
+);
+var SpacerHorizontal_ = import_styled_components8.default.span(({ $size, $inline }) => ({
+  display: $inline ? "inline-block" : "block",
+  ...$size === void 0 ? { flex: 1 } : { minWidth: $size }
 }));
+var SpacerHorizontal = (0, import_react9.forwardRef)(
+  ({ size: size2, inline, ...props }, ref) => {
+    return /* @__PURE__ */ import_react9.default.createElement(SpacerHorizontal_, { $size: size2, $inline: inline, ...props, ref });
+  }
+);
 var Spacer;
 ((Spacer2) => {
   Spacer2.Vertical = SpacerVertical;
@@ -891,7 +904,7 @@ var CloseButtonContainer = import_styled_components9.default.div(({ theme }) =>
   // boxShadow: `0 0 2px rgba(0, 0, 0, 0.2)`,
   border: `1px solid rgba(128,128,128,0.2)`
 }));
-var Dialog = (0, import_react9.forwardRef)(function Dialog2({
+var Dialog = (0, import_react10.forwardRef)(function Dialog2({
   children,
   title,
   description,
@@ -901,15 +914,15 @@ var Dialog = (0, import_react9.forwardRef)(function Dialog2({
   onOpenAutoFocus,
   closeOnInteractOutside = true
 }, forwardedRef) {
-  const contentRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useImperativeHandle)(forwardedRef, () => ({
+  const contentRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useImperativeHandle)(forwardedRef, () => ({
     containsElement(element) {
       if (!contentRef.current)
         return false;
       return contentRef.current.contains(element);
     }
   }));
-  return /* @__PURE__ */ import_react9.default.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react9.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react10.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react10.default.createElement(
     StyledContent,
     {
       ref: contentRef,
@@ -924,14 +937,14 @@ var Dialog = (0, import_react9.forwardRef)(function Dialog2({
         }
       }
     },
-    /* @__PURE__ */ import_react9.default.createElement(CloseButtonContainer, null, /* @__PURE__ */ import_react9.default.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ import_react9.default.createElement(IconButton, { iconName: "Cross1Icon" }))),
-    title && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(StyledTitle, null, title), /* @__PURE__ */ import_react9.default.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
-    description && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ import_react9.default.createElement(StyledDescription, null, description), /* @__PURE__ */ import_react9.default.createElement(Spacer.Vertical, { size: 20 })),
+    /* @__PURE__ */ import_react10.default.createElement(CloseButtonContainer, null, /* @__PURE__ */ import_react10.default.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement(IconButton, { iconName: "Cross1Icon" }))),
+    title && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(StyledTitle, null, title), /* @__PURE__ */ import_react10.default.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
+    description && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ import_react10.default.createElement(StyledDescription, null, description), /* @__PURE__ */ import_react10.default.createElement(Spacer.Vertical, { size: 20 })),
     children
   ));
 });
-var FullscreenDialog = (0, import_react9.forwardRef)(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ import_react9.default.createElement(
+var FullscreenDialog = (0, import_react10.forwardRef)(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ import_react10.default.createElement(
     Dialog,
     {
       ref: forwardedRef,
@@ -955,16 +968,15 @@ var FullscreenDialog = (0, import_react9.forwardRef)(function FullscreenDialog2(
 
 // src/components/InputField.tsx
 var import_noya_icons2 = require("@noya-app/noya-icons");
-var import_noya_utils5 = require("@noya-app/noya-utils");
 
 // ../noya-react-utils/src/components/AutoSizer.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 
 // ../noya-react-utils/src/hooks/useSize.ts
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("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) => {
@@ -1011,37 +1023,37 @@ var style = {
   flex: "1 0 0",
   flexDirection: "column"
 };
-var AutoSizer = (0, import_react10.memo)(function AutoSizer2({
+var AutoSizer = (0, import_react11.memo)(function AutoSizer2({
   children,
   className
 }) {
-  const containerRef = (0, import_react10.useRef)(null);
+  const containerRef = (0, import_react11.useRef)(null);
   const containerSize = useSize(containerRef);
-  return /* @__PURE__ */ import_react10.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
+  return /* @__PURE__ */ import_react11.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
 });
-var SingleDimensionAutoSizer = (0, import_react10.memo)(function SingleDimensionAutoSizer2({
+var SingleDimensionAutoSizer = (0, import_react11.memo)(function SingleDimensionAutoSizer2({
   children,
   dimension,
   className
 }) {
-  const containerRef = (0, import_react10.useRef)(null);
+  const containerRef = (0, import_react11.useRef)(null);
   const containerSize = useSize(containerRef, dimension);
-  return /* @__PURE__ */ import_react10.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
+  return /* @__PURE__ */ import_react11.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
 });
 
 // ../noya-react-utils/src/components/FileDropTarget.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // ../noya-react-utils/src/hooks/useFileDropTarget.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useFileDropTarget(dropEvent) {
-  const [isDropTargetActive, setIsDropTargetActive] = (0, import_react11.useState)(false);
-  const handleDragEvent = (0, import_react11.useCallback)((event, on) => {
+  const [isDropTargetActive, setIsDropTargetActive] = (0, import_react12.useState)(false);
+  const handleDragEvent = (0, import_react12.useCallback)((event, on) => {
     if (on !== void 0)
       setIsDropTargetActive(on);
     event.preventDefault();
   }, []);
-  const handleDropEvent = (0, import_react11.useCallback)(
+  const handleDropEvent = (0, import_react12.useCallback)(
     (event) => {
       dropEvent(event);
       setIsDropTargetActive(false);
@@ -1064,12 +1076,12 @@ function isSupportedFile(file, supportedFileTypes) {
   return supportedFileTypes.includes(file.type) || file.type === "" && file.name.endsWith(".sketch");
 }
 var style2 = { display: "flex", flex: 1 };
-var FileDropTarget = (0, import_react12.memo)(function FileDropTarget2({
+var FileDropTarget = (0, import_react13.memo)(function FileDropTarget2({
   children,
   onDropFiles,
   supportedFileTypes
 }) {
-  const handleFile = (0, import_react12.useCallback)(
+  const handleFile = (0, import_react13.useCallback)(
     (event) => {
       event.preventDefault();
       const offsetPoint = {
@@ -1102,51 +1114,51 @@ var FileDropTarget = (0, import_react12.memo)(function FileDropTarget2({
     [onDropFiles, supportedFileTypes]
   );
   const { dropTargetProps, isDropTargetActive } = useFileDropTarget(handleFile);
-  return /* @__PURE__ */ import_react12.default.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
+  return /* @__PURE__ */ import_react13.default.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
 });
 
 // ../noya-react-utils/src/hooks/useDeepArray.ts
 var import_noya_utils = require("@noya-app/noya-utils");
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // ../noya-react-utils/src/hooks/useDeepState.ts
 var import_noya_utils2 = require("@noya-app/noya-utils");
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // ../noya-react-utils/src/hooks/useFetch.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // ../noya-react-utils/src/hooks/useIsMounted.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // ../noya-react-utils/src/hooks/useLateReference.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // ../noya-react-utils/src/hooks/useLazyValue.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // ../noya-react-utils/src/hooks/useMutableState.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // ../noya-react-utils/src/hooks/usePersistentState.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // ../noya-react-utils/src/hooks/usePixelRatio.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // ../noya-react-utils/src/hooks/useShallowArray.ts
 var import_noya_utils3 = require("@noya-app/noya-utils");
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // ../noya-react-utils/src/hooks/useStableCallback.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // ../noya-react-utils/src/hooks/useSystemColorScheme.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // ../noya-react-utils/src/hooks/useUrlHashParameters.ts
 var import_noya_utils4 = require("@noya-app/noya-utils");
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // ../emitter/src/index.ts
 var Emitter = class {
@@ -1237,7 +1249,7 @@ function assignRef(ref, value) {
 }
 
 // src/components/InputField.tsx
-var import_react31 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var import_styled_components13 = __toESM(require("styled-components"));
 
 // src/utils/handleNudge.ts
@@ -1268,12 +1280,12 @@ function handleNudge(e) {
 var import_noya_icons = require("@noya-app/noya-icons");
 var import_noya_keymap2 = require("@noya-app/noya-keymap");
 var RadixDropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_styled_components11 = __toESM(require("styled-components"));
 
 // src/components/internal/Menu.tsx
 var import_noya_keymap = require("@noya-app/noya-keymap");
-var import_react26 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var import_styled_components10 = __toESM(require("styled-components"));
 var SEPARATOR_ITEM = "separator";
 var CHECKBOX_WIDTH = 15;
@@ -1351,34 +1363,31 @@ function getKeyboardShortcutsForMenuItems(menuItems, onSelect) {
   );
 }
 var ShortcutElement = import_styled_components10.default.kbd(
-  ({
-    theme,
-    fixedWidth
-  }) => ({
+  ({ theme, $fixedWidth }) => ({
     ...theme.textStyles.small,
     color: theme.colors.textDisabled,
-    ...fixedWidth && {
+    ...$fixedWidth && {
       width: "0.9rem",
       textAlign: "center"
     }
   })
 );
-var KeyboardShortcut = (0, import_react26.memo)(function KeyboardShortcut2({
+var KeyboardShortcut = (0, import_react27.memo)(function KeyboardShortcut2({
   shortcut
 }) {
   const platform = useDesignSystemConfiguration().platform;
   const { keys, separator } = (0, import_noya_keymap.getShortcutDisplayParts)(shortcut, platform);
-  const keyElements = keys.map((key) => /* @__PURE__ */ import_react26.default.createElement(
+  const keyElements = keys.map((key) => /* @__PURE__ */ import_react27.default.createElement(
     ShortcutElement,
     {
       key,
-      fixedWidth: platform === "mac" && key.length === 1
+      $fixedWidth: platform === "mac" && key.length === 1
     },
     key
   ));
-  return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, separator ? withSeparatorElements(
+  return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, separator ? withSeparatorElements(
     keyElements,
-    /* @__PURE__ */ import_react26.default.createElement(ShortcutElement, null, separator)
+    /* @__PURE__ */ import_react27.default.createElement(ShortcutElement, null, separator)
   ) : keyElements);
 });
 
@@ -1393,7 +1402,7 @@ var CheckboxItemElement = (0, import_styled_components11.default)(RadixDropdownM
 var StyledItemIndicator = (0, import_styled_components11.default)(RadixDropdownMenu.ItemIndicator)(
   styles.itemIndicatorStyle
 );
-var DropdownMenuItem = (0, import_react27.memo)(function ContextMenuItem({
+var DropdownMenuItem = (0, import_react28.memo)(function ContextMenuItem({
   value,
   children,
   onSelect,
@@ -1404,27 +1413,27 @@ var DropdownMenuItem = (0, import_react27.memo)(function ContextMenuItem({
   items,
   shortcut
 }) {
-  const handleSelectItem = (0, import_react27.useCallback)(() => {
+  const handleSelectItem = (0, import_react28.useCallback)(() => {
     if (!value)
       return;
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ import_react27.default.createElement(
+    return /* @__PURE__ */ import_react28.default.createElement(
       CheckboxItemElement,
       {
         checked,
         disabled,
         onSelect: handleSelectItem
       },
-      /* @__PURE__ */ import_react27.default.createElement(StyledItemIndicator, null, /* @__PURE__ */ import_react27.default.createElement(import_noya_icons.CheckIcon, null)),
-      icon && /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, icon, /* @__PURE__ */ import_react27.default.createElement(Spacer.Horizontal, { size: 8 })),
+      /* @__PURE__ */ import_react28.default.createElement(StyledItemIndicator, null, /* @__PURE__ */ import_react28.default.createElement(import_noya_icons.CheckIcon, null)),
+      icon && /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, icon, /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: 8 })),
       children
     );
   }
-  const element = /* @__PURE__ */ import_react27.default.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ import_react27.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, icon, /* @__PURE__ */ import_react27.default.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react27.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react27.default.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react27.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react27.default.createElement(import_noya_icons.ChevronRightIcon, null)));
+  const element = /* @__PURE__ */ import_react28.default.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, icon, /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react28.default.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react28.default.createElement(import_noya_icons.ChevronRightIcon, null)));
   if (items && items.length > 0) {
-    return /* @__PURE__ */ import_react27.default.createElement(
+    return /* @__PURE__ */ import_react28.default.createElement(
       DropdownMenuRoot,
       {
         isNested: true,
@@ -1440,7 +1449,7 @@ var DropdownMenuItem = (0, import_react27.memo)(function ContextMenuItem({
 });
 var Content5 = (0, import_styled_components11.default)(RadixDropdownMenu.Content)(styles.contentStyle);
 var SubContent2 = (0, import_styled_components11.default)(RadixDropdownMenu.SubContent)(styles.contentStyle);
-var DropdownMenuRoot = (0, import_react27.forwardRef)(function DropdownMenuRoot2({
+var DropdownMenuRoot = (0, import_react28.forwardRef)(function DropdownMenuRoot2({
   items,
   children,
   onSelect,
@@ -1458,7 +1467,7 @@ var DropdownMenuRoot = (0, import_react27.forwardRef)(function DropdownMenuRoot2
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
   );
-  const keymap = (0, import_react27.useMemo)(
+  const keymap = (0, import_react28.useMemo)(
     () => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
@@ -1466,8 +1475,8 @@ var DropdownMenuRoot = (0, import_react27.forwardRef)(function DropdownMenuRoot2
   const RootComponent = isNested ? RadixDropdownMenu.Sub : RadixDropdownMenu.Root;
   const TriggerComponent = isNested ? RadixDropdownMenu.SubTrigger : RadixDropdownMenu.Trigger;
   const ContentComponent = isNested ? SubContent2 : Content5;
-  const contentStyle = (0, import_react27.useMemo)(() => ({ zIndex: 1e3 }), []);
-  return /* @__PURE__ */ import_react27.default.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ import_react27.default.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ import_react27.default.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ import_react27.default.createElement(
+  const contentStyle = (0, import_react28.useMemo)(() => ({ zIndex: 1e3 }), []);
+  return /* @__PURE__ */ import_react28.default.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ import_react28.default.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ import_react28.default.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ import_react28.default.createElement(
     ContentComponent,
     {
       side,
@@ -1479,7 +1488,7 @@ var DropdownMenuRoot = (0, import_react27.forwardRef)(function DropdownMenuRoot2
       ...{ onCloseAutoFocus }
     },
     items.map(
-      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react27.default.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ import_react27.default.createElement(
+      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react28.default.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ import_react28.default.createElement(
         DropdownMenuItem,
         {
           key: item.value ?? index,
@@ -1497,14 +1506,14 @@ var DropdownMenuRoot = (0, import_react27.forwardRef)(function DropdownMenuRoot2
     )
   )));
 });
-var DropdownMenu = (0, import_react27.memo)(DropdownMenuRoot);
+var DropdownMenu = (0, import_react28.memo)(DropdownMenuRoot);
 
 // src/components/internal/TextInput.tsx
 var import_react_compose_refs = require("@radix-ui/react-compose-refs");
-var import_react29 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 
 // src/contexts/GlobalInputBlurContext.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var defaultValue = /* @__PURE__ */ (() => {
   const listeners = [];
   const value = {
@@ -1525,14 +1534,14 @@ var defaultValue = /* @__PURE__ */ (() => {
   };
   return value;
 })();
-var GlobalInputBlurContext = (0, import_react28.createContext)(defaultValue);
+var GlobalInputBlurContext = (0, import_react29.createContext)(defaultValue);
 var GlobalInputBlurProvider = GlobalInputBlurContext.Provider;
 var useGlobalInputBlur = () => {
-  return (0, import_react28.useContext)(GlobalInputBlurContext);
+  return (0, import_react29.useContext)(GlobalInputBlurContext);
 };
 function useGlobalInputBlurListener(f) {
   const context = useGlobalInputBlur();
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     context.addListener(f);
     return () => {
       context.removeListener(f);
@@ -1544,8 +1553,8 @@ function useGlobalInputBlurTrigger() {
 }
 
 // src/components/internal/TextInput.tsx
-var ReadOnlyTextInput = (0, import_react29.forwardRef)(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ import_react29.default.createElement(
+var ReadOnlyTextInput = (0, import_react30.forwardRef)(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ import_react30.default.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -1556,7 +1565,7 @@ var ReadOnlyTextInput = (0, import_react29.forwardRef)(function ReadOnlyTextInpu
     }
   );
 });
-var ControlledTextInput = (0, import_react29.forwardRef)(function ControlledTextInput2({
+var ControlledTextInput = (0, import_react30.forwardRef)(function ControlledTextInput2({
   onKeyDown,
   value,
   onChange,
@@ -1565,28 +1574,28 @@ var ControlledTextInput = (0, import_react29.forwardRef)(function ControlledText
   onFocusCapture,
   ...rest
 }, forwardedRef) {
-  const handleBlur = (0, import_react29.useCallback)(
+  const handleBlur = (0, import_react30.useCallback)(
     (event) => {
       onBlur?.(event);
       onFocusChange?.(false);
     },
     [onBlur, onFocusChange]
   );
-  const handleFocusCapture = (0, import_react29.useCallback)(
+  const handleFocusCapture = (0, import_react30.useCallback)(
     (event) => {
       onFocusCapture?.(event);
       onFocusChange?.(true);
     },
     [onFocusCapture, onFocusChange]
   );
-  return /* @__PURE__ */ import_react29.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(
     "input",
     {
       ref: forwardedRef,
       ...rest,
       value,
       onKeyDown,
-      onChange: (0, import_react29.useCallback)(
+      onChange: (0, import_react30.useCallback)(
         (event) => onChange(event.target.value),
         [onChange]
       ),
@@ -1595,7 +1604,7 @@ var ControlledTextInput = (0, import_react29.forwardRef)(function ControlledText
     }
   );
 });
-var SubmittableTextInput = (0, import_react29.forwardRef)(function SubmittableTextInput2({
+var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTextInput2({
   onKeyDown,
   value,
   onSubmit,
@@ -1606,16 +1615,16 @@ var SubmittableTextInput = (0, import_react29.forwardRef)(function SubmittableTe
   submitAutomaticallyAfterDelay,
   ...rest
 }, forwardedRef) {
-  const ref = import_react29.default.useRef(null);
-  const latestValue = (0, import_react29.useRef)(value);
+  const ref = import_react30.default.useRef(null);
+  const latestValue = (0, import_react30.useRef)(value);
   latestValue.current = value;
-  const userDidEdit = (0, import_react29.useRef)(false);
-  const isSubmitTriggeredByEscapeKey = (0, import_react29.useRef)(false);
-  const [internalValue, setInternalValue] = (0, import_react29.useState)("");
-  (0, import_react29.useLayoutEffect)(() => {
+  const userDidEdit = (0, import_react30.useRef)(false);
+  const isSubmitTriggeredByEscapeKey = (0, import_react30.useRef)(false);
+  const [internalValue, setInternalValue] = (0, import_react30.useState)("");
+  (0, import_react30.useLayoutEffect)(() => {
     setInternalValue(value);
   }, [value]);
-  const handleSubmit = (0, import_react29.useCallback)(() => {
+  const handleSubmit = (0, import_react30.useCallback)(() => {
     const submissionValue = isSubmitTriggeredByEscapeKey.current ? value : internalValue;
     isSubmitTriggeredByEscapeKey.current = false;
     if (submissionValue === value && !allowSubmittingWithSameValue)
@@ -1625,13 +1634,13 @@ var SubmittableTextInput = (0, import_react29.forwardRef)(function SubmittableTe
     setInternalValue(latestValue.current);
   }, [allowSubmittingWithSameValue, value, internalValue, onSubmit]);
   useGlobalInputBlurListener(
-    (0, import_react29.useCallback)(() => {
+    (0, import_react30.useCallback)(() => {
       if (ref.current !== document.activeElement)
         return;
       handleSubmit();
     }, [handleSubmit])
   );
-  const handleKeyDown = (0, import_react29.useCallback)(
+  const handleKeyDown = (0, import_react30.useCallback)(
     (event) => {
       if (event.key === "Enter") {
         handleSubmit();
@@ -1646,14 +1655,14 @@ var SubmittableTextInput = (0, import_react29.forwardRef)(function SubmittableTe
     },
     [onKeyDown, handleSubmit]
   );
-  const handleChange = (0, import_react29.useCallback)(
+  const handleChange = (0, import_react30.useCallback)(
     (event) => {
       userDidEdit.current = true;
       setInternalValue(event.target.value);
     },
     []
   );
-  const handleBlur = (0, import_react29.useCallback)(
+  const handleBlur = (0, import_react30.useCallback)(
     (event) => {
       onBlur?.(event);
       onFocusChange?.(false);
@@ -1661,19 +1670,19 @@ var SubmittableTextInput = (0, import_react29.forwardRef)(function SubmittableTe
     },
     [onBlur, onFocusChange, handleSubmit]
   );
-  const handleFocusCapture = (0, import_react29.useCallback)(
+  const handleFocusCapture = (0, import_react30.useCallback)(
     (event) => {
       onFocusCapture?.(event);
       onFocusChange?.(true);
     },
     [onFocusCapture, onFocusChange]
   );
-  const autoSubmitTimeoutRef = (0, import_react29.useRef)(
+  const autoSubmitTimeoutRef = (0, import_react30.useRef)(
     null
   );
-  const latestHandleSubmit = (0, import_react29.useRef)(handleSubmit);
+  const latestHandleSubmit = (0, import_react30.useRef)(handleSubmit);
   latestHandleSubmit.current = handleSubmit;
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (submitAutomaticallyAfterDelay) {
       if (autoSubmitTimeoutRef.current) {
         clearTimeout(autoSubmitTimeoutRef.current);
@@ -1690,7 +1699,7 @@ var SubmittableTextInput = (0, import_react29.forwardRef)(function SubmittableTe
       }
     };
   }, [internalValue, submitAutomaticallyAfterDelay]);
-  return /* @__PURE__ */ import_react29.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(
     "input",
     {
       ref: (0, import_react_compose_refs.composeRefs)(ref, forwardedRef),
@@ -1703,13 +1712,13 @@ var SubmittableTextInput = (0, import_react29.forwardRef)(function SubmittableTe
     }
   );
 });
-var TextInput_default = (0, import_react29.forwardRef)(function TextInput(props, forwardedRef) {
+var TextInput_default = (0, import_react30.forwardRef)(function TextInput(props, forwardedRef) {
   const commonProps = {
-    onPointerDown: (0, import_react29.useCallback)(
+    onPointerDown: (0, import_react30.useCallback)(
       (event) => event.stopPropagation(),
       []
     ),
-    onClick: (0, import_react29.useCallback)(
+    onClick: (0, import_react30.useCallback)(
       (event) => event.stopPropagation(),
       []
     ),
@@ -1722,17 +1731,17 @@ var TextInput_default = (0, import_react29.forwardRef)(function TextInput(props,
     ...props
   };
   if ("readOnly" in commonProps) {
-    return /* @__PURE__ */ import_react29.default.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
+    return /* @__PURE__ */ import_react30.default.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
   } else if ("onChange" in commonProps) {
-    return /* @__PURE__ */ import_react29.default.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ import_react30.default.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
   } else {
-    return /* @__PURE__ */ import_react29.default.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ import_react30.default.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
   }
 });
 
 // src/components/Popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var import_styled_components12 = __toESM(require("styled-components"));
 var ContentElement = (0, import_styled_components12.default)(PopoverPrimitive.Content)(({ theme, variant }) => ({
   borderRadius: 4,
@@ -1779,7 +1788,7 @@ function Popover({
   onFocusOutside,
   onClickClose
 }) {
-  return /* @__PURE__ */ import_react30.default.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react30.default.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ import_react30.default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react31.default.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ import_react31.default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ import_react31.default.createElement(
     ContentElement,
     {
       variant,
@@ -1801,13 +1810,13 @@ function Popover({
       }
     },
     children,
-    showArrow && /* @__PURE__ */ import_react30.default.createElement(ArrowElement, null),
-    closable && /* @__PURE__ */ import_react30.default.createElement(PopoverClose, null, /* @__PURE__ */ import_react30.default.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
+    showArrow && /* @__PURE__ */ import_react31.default.createElement(ArrowElement, null),
+    closable && /* @__PURE__ */ import_react31.default.createElement(PopoverClose, null, /* @__PURE__ */ import_react31.default.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
   )));
 }
 
 // src/components/InputField.tsx
-var InputFieldContext = (0, import_react31.createContext)({
+var InputFieldContext = (0, import_react32.createContext)({
   labelPosition: "end",
   labelSize: 6,
   hasLabel: false,
@@ -1817,29 +1826,29 @@ var InputFieldContext = (0, import_react31.createContext)({
   onFocusChange: () => {
   }
 });
-var LabelContainer = import_styled_components13.default.label(({ theme, labelPosition, hasDropdown, pointerEvents }) => ({
+var LabelContainer = import_styled_components13.default.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 = (0, import_react31.memo)(
-  (0, import_react31.forwardRef)(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
-    const { labelPosition, hasDropdown, setLabelWidth } = (0, import_react31.useContext)(InputFieldContext);
-    const ref = (0, import_react31.useRef)(null);
-    (0, import_react31.useLayoutEffect)(() => {
+var InputFieldLabel = (0, import_react32.memo)(
+  (0, import_react32.forwardRef)(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
+    const { labelPosition, hasDropdown, setLabelWidth } = (0, import_react32.useContext)(InputFieldContext);
+    const ref = (0, import_react32.useRef)(null);
+    (0, import_react32.useLayoutEffect)(() => {
       if (!setLabelWidth)
         return;
       const width = ref.current?.getBoundingClientRect().width;
@@ -1847,7 +1856,7 @@ var InputFieldLabel = (0, import_react31.memo)(
         return;
       setLabelWidth(width);
     }, [setLabelWidth]);
-    return /* @__PURE__ */ import_react31.default.createElement(
+    return /* @__PURE__ */ import_react32.default.createElement(
       LabelContainer,
       {
         ref: (element) => {
@@ -1855,8 +1864,8 @@ var InputFieldLabel = (0, import_react31.memo)(
           assignRef(forwardedRef, element);
         },
         pointerEvents,
-        labelPosition,
-        hasDropdown,
+        $labelPosition: labelPosition,
+        $hasDropdown: hasDropdown,
         style: style3
       },
       children
@@ -1871,30 +1880,30 @@ var DropdownContainer = import_styled_components13.default.span(({ theme }) => (
   display: "flex",
   flexDirection: "column"
 }));
-var InputFieldDropdownMenu = (0, import_react31.memo)(function InputFieldDropdownMenu2({ id, items, onSelect, children }) {
-  const { size: size2 } = (0, import_react31.useContext)(InputFieldContext);
-  const contentStyle = (0, import_react31.useMemo)(
+var InputFieldDropdownMenu = (0, import_react32.memo)(function InputFieldDropdownMenu2({ id, items, onSelect, children }) {
+  const { size: size2 } = (0, import_react32.useContext)(InputFieldContext);
+  const contentStyle = (0, import_react32.useMemo)(
     () => ({
       margin: "-4px 0",
       minHeight: size2 === "small" ? "15px" : void 0
     }),
     [size2]
   );
-  return /* @__PURE__ */ import_react31.default.createElement(DropdownContainer, null, /* @__PURE__ */ import_react31.default.createElement(DropdownMenu, { items, onSelect }, children || /* @__PURE__ */ import_react31.default.createElement(Button, { id, variant: "thin", flex: "1", contentStyle }, /* @__PURE__ */ import_react31.default.createElement(import_noya_icons2.CaretDownIcon, null))));
+  return /* @__PURE__ */ import_react32.default.createElement(DropdownContainer, null, /* @__PURE__ */ import_react32.default.createElement(DropdownMenu, { items, onSelect }, children || /* @__PURE__ */ import_react32.default.createElement(Button, { id, variant: "thin", flex: "1", contentStyle }, /* @__PURE__ */ import_react32.default.createElement(import_noya_icons2.CaretDownIcon, null))));
 });
 var ButtonContainer = import_styled_components13.default.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 = (0, import_react31.memo)(function InputFieldButton2({
+var InputFieldButton = (0, import_react32.memo)(function InputFieldButton2({
   children,
   onClick
 }) {
-  const { size: size2, inputRef } = (0, import_react31.useContext)(InputFieldContext);
-  const defaultHandleClick = (0, import_react31.useCallback)(
+  const { size: size2, inputRef } = (0, import_react32.useContext)(InputFieldContext);
+  const defaultHandleClick = (0, import_react32.useCallback)(
     (event) => {
       if (inputRef && typeof inputRef !== "function") {
         inputRef.current?.focus();
@@ -1905,11 +1914,11 @@ var InputFieldButton = (0, import_react31.memo)(function InputFieldButton2({
     },
     [inputRef]
   );
-  const handlePointerDown = (0, import_react31.useCallback)((event) => {
+  const handlePointerDown = (0, import_react32.useCallback)((event) => {
     event.preventDefault();
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ import_react31.default.createElement(ButtonContainer, { size: size2 }, /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(ButtonContainer, { $size: size2 }, /* @__PURE__ */ import_react32.default.createElement(
     Button,
     {
       variant: "floating",
@@ -1920,42 +1929,26 @@ var InputFieldButton = (0, import_react31.memo)(function InputFieldButton2({
     children
   ));
 });
-var createCrossSVGString = (0, import_noya_utils5.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 = (0, import_styled_components13.default)(TextInput_default).withConfig({
-  shouldForwardProp: (prop) => ignoredProps.has(prop) ? false : true
-})(
-  ({
-    theme,
-    labelPosition,
-    labelSize,
-    hasDropdown,
-    textAlign,
-    disabled,
-    hasLabel,
-    readOnly,
-    variant = "normal",
-    size: size2
-  }) => ({
+var InputElement = (0, import_styled_components13.default)(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",
@@ -1965,18 +1958,18 @@ var InputElement = (0, import_styled_components13.default)(TextInput_default).wi
     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",
@@ -1985,18 +1978,18 @@ var InputElement = (0, import_styled_components13.default)(TextInput_default).wi
       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 = (0, import_react31.forwardRef)(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 = (0, import_react32.forwardRef)(function InputFieldInput2(props, forwardedRef) {
   const {
     labelPosition,
     labelSize,
@@ -2005,25 +1998,25 @@ var InputFieldInput = (0, import_react31.forwardRef)(function InputFieldInput2(p
     size: size2,
     onFocusChange,
     setInputRef
-  } = (0, import_react31.useContext)(InputFieldContext);
-  const handleFocusChange = (0, import_react31.useCallback)(
+  } = (0, import_react32.useContext)(InputFieldContext);
+  const handleFocusChange = (0, import_react32.useCallback)(
     (isFocused) => {
       onFocusChange(isFocused);
     },
     [onFocusChange]
   );
-  (0, import_react31.useLayoutEffect)(() => {
+  (0, import_react32.useLayoutEffect)(() => {
     setInputRef?.(forwardedRef);
   }, [forwardedRef, setInputRef]);
-  return /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(
     InputElement,
     {
       ref: forwardedRef,
-      labelPosition,
-      labelSize,
-      hasLabel,
-      hasDropdown,
-      size: size2,
+      $labelPosition: labelPosition,
+      $labelSize: labelSize,
+      $hasLabel: hasLabel,
+      $hasDropdown: hasDropdown,
+      $size: size2,
       onFocusChange: handleFocusChange,
       ...props
     }
@@ -2037,15 +2030,15 @@ var InputFieldTypeahead = (props) => {
     hasLabel,
     size: size2,
     onFocusChange
-  } = (0, import_react31.useContext)(InputFieldContext);
-  return /* @__PURE__ */ import_react31.default.createElement(
+  } = (0, import_react32.useContext)(InputFieldContext);
+  return /* @__PURE__ */ import_react32.default.createElement(
     InputElement,
     {
-      labelPosition,
-      labelSize,
-      hasLabel,
-      hasDropdown,
-      size: size2,
+      $labelPosition: labelPosition,
+      $labelSize: labelSize,
+      $hasLabel: hasLabel,
+      $hasDropdown: hasDropdown,
+      $size: size2,
       onFocusChange,
       readOnly: true,
       placeholder: props.value,
@@ -2069,10 +2062,10 @@ 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 = (0, import_react31.useCallback)(
+  const handleSubmit = (0, import_react32.useCallback)(
     (value2) => {
       const newValue = parseNumber(value2);
       if (!isNaN(newValue)) {
@@ -2081,7 +2074,7 @@ function InputFieldNumberInput(props) {
     },
     [onSubmit]
   );
-  const handleKeyDown = (0, import_react31.useCallback)(
+  const handleKeyDown = (0, import_react32.useCallback)(
     (event) => {
       const amount = handleNudge(event);
       if (!amount)
@@ -2092,16 +2085,16 @@ function InputFieldNumberInput(props) {
     },
     [onNudge]
   );
-  const handleChange = (0, import_react31.useCallback)(
+  const handleChange = (0, import_react32.useCallback)(
     (value2) => {
       onChange?.(parseNumber(value2));
     },
     [onChange]
   );
-  return /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(
     InputFieldInput,
     {
-      ...props,
+      ...rest,
       value: value === void 0 ? "" : String(value),
       placeholder,
       onKeyDown: handleKeyDown,
@@ -2110,12 +2103,12 @@ function InputFieldNumberInput(props) {
   );
 }
 var RootContainer = import_styled_components13.default.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({
@@ -2129,32 +2122,32 @@ function InputFieldRoot({
   renderPopoverContent,
   onFocusChange
 }) {
-  const childrenArray = import_react31.Children.toArray(children);
+  const childrenArray = import_react32.Children.toArray(children);
   const hasDropdown = childrenArray.some(
-    (child) => (0, import_react31.isValidElement)(child) && child.type === InputFieldDropdownMenu
+    (child) => (0, import_react32.isValidElement)(child) && child.type === InputFieldDropdownMenu
   );
   const hasLabel = childrenArray.some(
-    (child) => (0, import_react31.isValidElement)(child) && child.type === InputFieldLabel
+    (child) => (0, import_react32.isValidElement)(child) && child.type === InputFieldLabel
   );
-  const [isFocused, setIsFocused] = import_react31.default.useState(false);
-  const [measuredLabelSize, setMeasuredLabelSize] = import_react31.default.useState();
-  const [measuredWidth, setMeasuredWidth] = import_react31.default.useState();
-  const handleFocusChange = (0, import_react31.useCallback)(
+  const [isFocused, setIsFocused] = import_react32.default.useState(false);
+  const [measuredLabelSize, setMeasuredLabelSize] = import_react32.default.useState();
+  const [measuredWidth, setMeasuredWidth] = import_react32.default.useState();
+  const handleFocusChange = (0, import_react32.useCallback)(
     (isFocused2) => {
       setIsFocused(isFocused2);
       onFocusChange?.(isFocused2);
     },
     [onFocusChange]
   );
-  const [inputRef, setInputRef] = import_react31.default.useState();
-  (0, import_react31.useEffect)(() => {
+  const [inputRef, setInputRef] = import_react32.default.useState();
+  (0, import_react32.useEffect)(() => {
     if (inputRef && typeof inputRef !== "function") {
       setMeasuredWidth?.(
         isFocused ? inputRef?.current?.getBoundingClientRect().width : void 0
       );
     }
   }, [inputRef, isFocused]);
-  const contextValue = (0, import_react31.useMemo)(
+  const contextValue = (0, import_react32.useMemo)(
     () => ({
       labelPosition,
       labelSize: measuredLabelSize ?? labelSize ?? 6,
@@ -2179,8 +2172,8 @@ function InputFieldRoot({
       inputRef
     ]
   );
-  const rootElement = /* @__PURE__ */ import_react31.default.createElement(RootContainer, { id, width, flex }, children);
-  return /* @__PURE__ */ import_react31.default.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ import_react31.default.createElement(
+  const rootElement = /* @__PURE__ */ import_react32.default.createElement(RootContainer, { id, $width: width, $flex: flex }, children);
+  return /* @__PURE__ */ import_react32.default.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ import_react32.default.createElement(
     Popover,
     {
       open: true,
@@ -2196,15 +2189,15 @@ function InputFieldRoot({
         event.stopPropagation();
       }
     },
-    measuredWidth && /* @__PURE__ */ import_react31.default.createElement(Stack.V, { width: measuredWidth, overflow: "hidden" }, renderPopoverContent({ width: measuredWidth }))
+    measuredWidth && /* @__PURE__ */ import_react32.default.createElement(Stack.V, { width: measuredWidth, overflow: "hidden" }, renderPopoverContent({ width: measuredWidth }))
   ) : rootElement);
 }
 var InputField;
 ((InputField2) => {
-  InputField2.Root = (0, import_react31.memo)(InputFieldRoot);
-  InputField2.Input = (0, import_react31.memo)(InputFieldInput);
-  InputField2.Typeahead = (0, import_react31.memo)(InputFieldTypeahead);
-  InputField2.NumberInput = (0, import_react31.memo)(InputFieldNumberInput);
+  InputField2.Root = (0, import_react32.memo)(InputFieldRoot);
+  InputField2.Input = (0, import_react32.memo)(InputFieldInput);
+  InputField2.Typeahead = (0, import_react32.memo)(InputFieldTypeahead);
+  InputField2.NumberInput = (0, import_react32.memo)(InputFieldNumberInput);
   InputField2.DropdownMenu = InputFieldDropdownMenu;
   InputField2.Button = InputFieldButton;
   InputField2.Label = InputFieldLabel;
@@ -2228,24 +2221,24 @@ function createDeferredPromise() {
   });
   return { promise, resolve, reject };
 }
-var DialogContext = (0, import_react32.createContext)(void 0);
+var DialogContext = (0, import_react33.createContext)(void 0);
 var DialogProvider = function DialogProvider2({
   children
 }) {
-  const [contents, setContents] = (0, import_react32.useState)();
+  const [contents, setContents] = (0, import_react33.useState)();
   const isOpen = !!contents;
-  const close = (0, import_react32.useCallback)(() => {
+  const close = (0, import_react33.useCallback)(() => {
     if (!contents)
       return;
     contents.resolve(void 0);
   }, [contents]);
-  const submit = (0, import_react32.useCallback)(() => {
+  const submit = (0, import_react33.useCallback)(() => {
     if (!contents || !contents.inputValue)
       return;
     contents.resolve(contents.inputValue);
     setContents(void 0);
   }, [contents]);
-  const open = (0, import_react32.useCallback)(
+  const open = (0, import_react33.useCallback)(
     (title, inputValue = "") => {
       const { promise, resolve } = createDeferredPromise();
       setContents({
@@ -2260,7 +2253,7 @@ var DialogProvider = function DialogProvider2({
     },
     []
   );
-  const handleKeyDown = (0, import_react32.useCallback)(
+  const handleKeyDown = (0, import_react33.useCallback)(
     (event) => {
       if (event.key !== "Enter")
         return;
@@ -2270,29 +2263,29 @@ var DialogProvider = function DialogProvider2({
     },
     [submit]
   );
-  const inputRef = (0, import_react32.useRef)(null);
-  const dialogRef = (0, import_react32.useRef)(null);
-  const containsElement = (0, import_react32.useCallback)((element) => {
+  const inputRef = (0, import_react33.useRef)(null);
+  const dialogRef = (0, import_react33.useRef)(null);
+  const containsElement = (0, import_react33.useCallback)((element) => {
     if (!dialogRef.current)
       return false;
     return dialogRef.current.containsElement(element);
   }, []);
-  return /* @__PURE__ */ import_react32.default.createElement(import_react32.default.Fragment, null, /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
     DialogContext.Provider,
     {
-      value: (0, import_react32.useMemo)(
+      value: (0, import_react33.useMemo)(
         () => ({ openInputDialog: open, containsElement }),
         [containsElement, open]
       )
     },
     children
-  ), /* @__PURE__ */ import_react32.default.createElement(
+  ), /* @__PURE__ */ import_react33.default.createElement(
     Dialog,
     {
       ref: dialogRef,
       title: contents?.title,
       open: isOpen,
-      onOpenChange: (0, import_react32.useCallback)(
+      onOpenChange: (0, import_react33.useCallback)(
         (isOpen2) => {
           if (!isOpen2) {
             close();
@@ -2300,14 +2293,14 @@ var DialogProvider = function DialogProvider2({
         },
         [close]
       ),
-      onOpenAutoFocus: (0, import_react32.useCallback)((event) => {
+      onOpenAutoFocus: (0, import_react33.useCallback)((event) => {
         event.stopPropagation();
         event.preventDefault();
         inputRef.current?.focus();
         inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
       }, [])
     },
-    /* @__PURE__ */ import_react32.default.createElement(InputField.Root, null, /* @__PURE__ */ import_react32.default.createElement(
+    /* @__PURE__ */ import_react33.default.createElement(InputField.Root, null, /* @__PURE__ */ import_react33.default.createElement(
       InputField.Input,
       {
         ref: inputRef,
@@ -2323,12 +2316,12 @@ var DialogProvider = function DialogProvider2({
         onKeyDown: handleKeyDown
       }
     )),
-    /* @__PURE__ */ import_react32.default.createElement(Spacer.Vertical, { size: 20 }),
-    /* @__PURE__ */ import_react32.default.createElement(Row, null, /* @__PURE__ */ import_react32.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react32.default.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ import_react32.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react32.default.createElement(Button, { disabled: !contents?.inputValue, onClick: submit }, "Submit"))
+    /* @__PURE__ */ import_react33.default.createElement(Spacer.Vertical, { size: 20 }),
+    /* @__PURE__ */ import_react33.default.createElement(Row, null, /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react33.default.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react33.default.createElement(Button, { disabled: !contents?.inputValue, onClick: submit }, "Submit"))
   ));
 };
 function useDialog() {
-  const value = (0, import_react32.useContext)(DialogContext);
+  const value = (0, import_react33.useContext)(DialogContext);
   if (!value) {
     throw new Error("Missing DialogProvider");
   }
@@ -2342,21 +2335,21 @@ function useDialogContainsElement() {
 }
 
 // src/contexts/FloatingWindowContext.tsx
-var import_noya_utils6 = require("@noya-app/noya-utils");
-var import_react33 = __toESM(require("react"));
+var import_noya_utils5 = require("@noya-app/noya-utils");
+var import_react34 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
-var FloatingWindowContext = (0, import_react33.createContext)(void 0);
-var CurrentWindowContext = (0, import_react33.createContext)(void 0);
+var FloatingWindowContext = (0, import_react34.createContext)(void 0);
+var CurrentWindowContext = (0, import_react34.createContext)(void 0);
 var FloatingWindowProvider = ({
   children
 }) => {
-  const [windows, setWindows] = (0, import_react33.useState)({});
-  const contextValue = (0, import_react33.useMemo)(() => {
+  const [windows, setWindows] = (0, import_react34.useState)({});
+  const contextValue = (0, import_react34.useMemo)(() => {
     const createWindow = (element) => {
-      const id = (0, import_noya_utils6.uuid)();
+      const id = (0, import_noya_utils5.uuid)();
       setWindows((windows2) => ({
         ...windows2,
-        [id]: /* @__PURE__ */ import_react33.default.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
+        [id]: /* @__PURE__ */ import_react34.default.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
       }));
       return id;
     };
@@ -2368,12 +2361,12 @@ var FloatingWindowProvider = ({
     };
     return { createWindow, closeWindow };
   }, []);
-  return /* @__PURE__ */ import_react33.default.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
+  return /* @__PURE__ */ import_react34.default.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
     ([id, element]) => (0, import_react_dom.createPortal)(element, document.body, id)
   ));
 };
 var useFloatingWindowManager = () => {
-  const context = (0, import_react33.useContext)(FloatingWindowContext);
+  const context = (0, import_react34.useContext)(FloatingWindowContext);
   if (!context) {
     throw new Error(
       "useFloatingWindow must be used within a FloatingWindowProvider"
@@ -2382,7 +2375,7 @@ var useFloatingWindowManager = () => {
   return context;
 };
 var useCurrentFloatingWindowInternal = () => {
-  const context = (0, import_react33.useContext)(CurrentWindowContext);
+  const context = (0, import_react34.useContext)(CurrentWindowContext);
   if (!context) {
     throw new Error("useCurrentWindow must be used within a FloatingWindow");
   }
@@ -2390,56 +2383,60 @@ var useCurrentFloatingWindowInternal = () => {
 };
 
 // src/contexts/DesignSystemConfiguration.tsx
-var DesignSystemThemeProvider = (0, import_react34.memo)(
+var DesignSystemThemeProvider = (0, import_react35.memo)(
   function DesignSystemThemeProvider2({
     children,
     theme
   }) {
-    const parentTheme = (0, import_styled_components15.useTheme)();
+    let parentTheme;
+    try {
+      parentTheme = (0, import_styled_components15.useTheme)();
+    } catch (e) {
+    }
     if (theme) {
-      return /* @__PURE__ */ import_react34.default.createElement(import_styled_components15.ThemeProvider, { theme }, children);
+      return /* @__PURE__ */ import_react35.default.createElement(import_styled_components15.ThemeProvider, { theme }, children);
     } else if (parentTheme) {
       return children;
     } else {
-      return /* @__PURE__ */ import_react34.default.createElement(import_styled_components15.ThemeProvider, { theme: light_exports }, children);
+      return /* @__PURE__ */ import_react35.default.createElement(import_styled_components15.ThemeProvider, { theme: light_exports }, children);
     }
   }
 );
-var DesignSystemConfigurationContext = (0, import_react34.createContext)({
+var DesignSystemConfigurationContext = (0, import_react35.createContext)({
   platform: "key"
 });
-var DesignSystemConfigurationProvider = (0, import_react34.memo)(
+var DesignSystemConfigurationProvider = (0, import_react35.memo)(
   function DesignSystemConfigurationProvider2({
     children,
     theme = light_exports,
     platform
   }) {
-    const [internalPlatform, setInternalPlatform] = (0, import_react34.useState)(
+    const [internalPlatform, setInternalPlatform] = (0, import_react35.useState)(
       platform ?? "key"
     );
-    (0, import_react34.useEffect)(() => {
+    (0, import_react35.useEffect)(() => {
       if (platform !== void 0)
         return;
       if (typeof navigator !== "undefined") {
         setInternalPlatform((0, import_noya_keymap3.getCurrentPlatform)(navigator));
       }
     }, [platform]);
-    const contextValue = (0, import_react34.useMemo)(
+    const contextValue = (0, import_react35.useMemo)(
       () => ({ platform: platform ?? internalPlatform }),
       [platform, internalPlatform]
     );
-    return /* @__PURE__ */ import_react34.default.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react34.default.createElement(import_styled_components15.ThemeProvider, { theme }, /* @__PURE__ */ import_react34.default.createElement(DialogProvider, null, /* @__PURE__ */ import_react34.default.createElement(ToastProvider, null, /* @__PURE__ */ import_react34.default.createElement(FloatingWindowProvider, null, children)))));
+    return /* @__PURE__ */ import_react35.default.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react35.default.createElement(import_styled_components15.ThemeProvider, { theme }, /* @__PURE__ */ import_react35.default.createElement(DialogProvider, null, /* @__PURE__ */ import_react35.default.createElement(ToastProvider, null, /* @__PURE__ */ import_react35.default.createElement(FloatingWindowProvider, null, children)))));
   }
 );
 function useDesignSystemConfiguration() {
-  return (0, import_react34.useContext)(DesignSystemConfigurationContext);
+  return (0, import_react35.useContext)(DesignSystemConfigurationContext);
 }
 function useDesignSystemTheme() {
   return (0, import_styled_components15.useTheme)();
 }
 
 // src/hooks/useHover.ts
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var globalIgnoreEmulatedMouseEvents = false;
 var hoverCount = 0;
 function setGlobalIgnoreEmulatedMouseEvents() {
@@ -2469,13 +2466,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) {
@@ -2535,10 +2532,10 @@ function useHover(props = {}) {
 }
 
 // src/components/Chip.tsx
-var ChipElement = import_styled_components16.default.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 = import_styled_components16.default.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,
@@ -2547,7 +2544,7 @@ var ChipElement = import_styled_components16.default.span(({ theme, colorScheme,
     alignItems: "center",
     lineHeight: "1.4",
     whiteSpace: "pre",
-    ...size2 === "medium" ? {
+    ...$size === "medium" ? {
       fontSize: "11px",
       padding: "4px 8px"
     } : {
@@ -2555,24 +2552,24 @@ var ChipElement = import_styled_components16.default.span(({ theme, colorScheme,
       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
@@ -2596,9 +2593,9 @@ var DeleteElement = (0, import_styled_components16.default)(import_noya_icons3.C
     opacity: 0.85
   }
 }));
-var ignoredProps2 = /* @__PURE__ */ new Set(["size", "isOnlyChild"]);
+var ignoredProps = /* @__PURE__ */ new Set(["size", "isOnlyChild"]);
 var AddElement = (0, import_styled_components16.default)(import_noya_icons3.PlusIcon).withConfig({
-  shouldForwardProp: (prop) => !ignoredProps2.has(prop)
+  shouldForwardProp: (prop) => !ignoredProps.has(prop)
 })(({ size: size2, isOnlyChild }) => ({
   position: "relative",
   marginLeft: "-2px",
@@ -2616,7 +2613,7 @@ var AddElement = (0, import_styled_components16.default)(import_noya_icons3.Plus
     opacity: 0.85
   }
 }));
-var Chip = (0, import_react35.memo)(function Chip2({
+var Chip = (0, import_react36.memo)(function Chip2({
   colorScheme,
   children,
   deletable,
@@ -2637,19 +2634,19 @@ var Chip = (0, import_react35.memo)(function Chip2({
   });
   const handleClick = !children && !deletable && addable ? onAdd : onClick;
   const color = colorScheme === "primary" ? theme.colors.primary : colorScheme === "secondary" ? theme.colors.secondary : theme.colors.text;
-  return /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react36.default.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__ */ import_react35.default.createElement(
+    addable && /* @__PURE__ */ import_react36.default.createElement(
       AddElement,
       {
         size: size2,
@@ -2662,7 +2659,7 @@ var Chip = (0, import_react35.memo)(function Chip2({
       }
     ),
     children,
-    deletable && /* @__PURE__ */ import_react35.default.createElement(
+    deletable && /* @__PURE__ */ import_react36.default.createElement(
       DeleteElement,
       {
         size: size2,
@@ -2681,7 +2678,7 @@ var Chip = (0, import_react35.memo)(function Chip2({
 var import_noya_icons4 = require("@noya-app/noya-icons");
 var import_noya_keymap4 = require("@noya-app/noya-keymap");
 var RadixContextMenu = __toESM(require("@radix-ui/react-context-menu"));
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var import_styled_components17 = __toESM(require("styled-components"));
 var SeparatorElement2 = (0, import_styled_components17.default)(RadixContextMenu.Separator)(
   styles.separatorStyle
@@ -2693,7 +2690,7 @@ var CheckboxItemElement2 = (0, import_styled_components17.default)(RadixContextM
 var StyledItemIndicator2 = (0, import_styled_components17.default)(RadixContextMenu.ItemIndicator)(
   styles.itemIndicatorStyle
 );
-var ContextMenuItem2 = (0, import_react36.memo)(function ContextMenuItem3({
+var ContextMenuItem2 = (0, import_react37.memo)(function ContextMenuItem3({
   value,
   children,
   onSelect,
@@ -2704,42 +2701,42 @@ var ContextMenuItem2 = (0, import_react36.memo)(function ContextMenuItem3({
   items,
   shortcut
 }) {
-  const handlePointerDown = (0, import_react36.useCallback)(
+  const handlePointerDown = (0, import_react37.useCallback)(
     (event) => event.stopPropagation(),
     []
   );
-  const handleSelectItem = (0, import_react36.useCallback)(() => {
+  const handleSelectItem = (0, import_react37.useCallback)(() => {
     if (!value)
       return;
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ import_react36.default.createElement(
+    return /* @__PURE__ */ import_react37.default.createElement(
       CheckboxItemElement2,
       {
         checked,
         disabled,
         onSelect: handleSelectItem
       },
-      /* @__PURE__ */ import_react36.default.createElement(StyledItemIndicator2, null, /* @__PURE__ */ import_react36.default.createElement(import_noya_icons4.CheckIcon, null)),
+      /* @__PURE__ */ import_react37.default.createElement(StyledItemIndicator2, null, /* @__PURE__ */ import_react37.default.createElement(import_noya_icons4.CheckIcon, null)),
       children
     );
   }
-  const element = /* @__PURE__ */ import_react36.default.createElement(
+  const element = /* @__PURE__ */ import_react37.default.createElement(
     ItemElement2,
     {
       disabled,
       onSelect: handleSelectItem,
       onPointerDown: handlePointerDown
     },
-    indented && /* @__PURE__ */ import_react36.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
-    icon && /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, icon, /* @__PURE__ */ import_react36.default.createElement(Spacer.Horizontal, { size: 8 })),
+    indented && /* @__PURE__ */ import_react37.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
+    icon && /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, icon, /* @__PURE__ */ import_react37.default.createElement(Spacer.Horizontal, { size: 8 })),
     children,
-    shortcut && /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, /* @__PURE__ */ import_react36.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react36.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react36.default.createElement(KeyboardShortcut, { shortcut })),
-    items && items.length > 0 && /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, /* @__PURE__ */ import_react36.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react36.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react36.default.createElement(import_noya_icons4.ChevronRightIcon, null))
+    shortcut && /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react37.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react37.default.createElement(KeyboardShortcut, { shortcut })),
+    items && items.length > 0 && /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react37.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react37.default.createElement(import_noya_icons4.ChevronRightIcon, null))
   );
   if (items && items.length > 0) {
-    return /* @__PURE__ */ import_react36.default.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
+    return /* @__PURE__ */ import_react37.default.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
   } else {
     return element;
   }
@@ -2757,19 +2754,19 @@ function ContextMenuRoot({
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
   );
-  const keymap = (0, import_react36.useMemo)(
+  const keymap = (0, import_react37.useMemo)(
     () => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
   (0, import_noya_keymap4.useKeyboardShortcuts)(keymap);
-  const onPointerDown = (0, import_react36.useCallback)((event) => {
+  const onPointerDown = (0, import_react37.useCallback)((event) => {
     event.preventDefault();
   }, []);
   const RootComponent = isNested ? RadixContextMenu.Sub : RadixContextMenu.Root;
   const TriggerComponent = isNested ? RadixContextMenu.SubTrigger : RadixContextMenu.Trigger;
   const ContentComponent = isNested ? SubContent4 : Content8;
-  return /* @__PURE__ */ import_react36.default.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ import_react36.default.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ import_react36.default.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ import_react36.default.createElement(ContentComponent, null, items.map(
-    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react36.default.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ import_react36.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ import_react37.default.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ import_react37.default.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ import_react37.default.createElement(ContentComponent, null, items.map(
+    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react37.default.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ import_react37.default.createElement(
       ContextMenuItem2,
       {
         key: item.value ?? index,
@@ -2786,26 +2783,50 @@ function ContextMenuRoot({
     )
   ))));
 }
-var ContextMenu = (0, import_react36.memo)(ContextMenuRoot);
+var ContextMenu = (0, import_react37.memo)(ContextMenuRoot);
 
 // src/components/Divider.tsx
-var import_react37 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var import_styled_components18 = __toESM(require("styled-components"));
-var DividerContainer = import_styled_components18.default.div(({ theme, variant = "normal", orientation, overflow = 0 }) => ({
-  ...orientation === "horizontal" ? { height: "1px", minHeight: "1px", margin: `0px -${overflow}px` } : { width: "1px", minWidth: "1px", margin: `-${overflow}px 0px` },
-  background: variant === "strong" ? theme.colors.dividerStrong : variant === "subtle" ? theme.colors.dividerSubtle : theme.colors.divider,
+var DividerContainer = import_styled_components18.default.div(({ theme, $variant = "normal", $orientation, $overflow = 0 }) => ({
+  ...$orientation === "horizontal" ? { height: "1px", minHeight: "1px", margin: `0px -${$overflow}px` } : { width: "1px", minWidth: "1px", margin: `-${$overflow}px 0px` },
+  background: $variant === "strong" ? theme.colors.dividerStrong : $variant === "subtle" ? theme.colors.dividerSubtle : theme.colors.divider,
   alignSelf: "stretch"
 }));
-var Divider = (0, import_react37.memo)(function Divider2(props) {
-  return /* @__PURE__ */ import_react37.default.createElement(DividerContainer, { orientation: "horizontal", ...props });
+var Divider = (0, import_react38.memo)(function Divider2({
+  variant,
+  overflow,
+  ...props
+}) {
+  return /* @__PURE__ */ import_react38.default.createElement(
+    DividerContainer,
+    {
+      $orientation: "horizontal",
+      $variant: variant,
+      $overflow: overflow,
+      ...props
+    }
+  );
 });
-var DividerVertical = (0, import_react37.memo)(function DividerVertical2(props) {
-  return /* @__PURE__ */ import_react37.default.createElement(DividerContainer, { orientation: "vertical", ...props });
+var DividerVertical = (0, import_react38.memo)(function DividerVertical2({
+  variant,
+  overflow,
+  ...props
+}) {
+  return /* @__PURE__ */ import_react38.default.createElement(
+    DividerContainer,
+    {
+      $orientation: "vertical",
+      $variant: variant,
+      $overflow: overflow,
+      ...props
+    }
+  );
 });
 
 // src/components/DraggableMenuButton.tsx
 var import_noya_icons5 = require("@noya-app/noya-icons");
-var import_react38 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var import_styled_components19 = __toESM(require("styled-components"));
 var DotButtonElement = import_styled_components19.default.div(({ theme }) => ({
   cursor: "pointer",
@@ -2825,15 +2846,15 @@ var TriggerElement = import_styled_components19.default.div({
   pointerEvents: "none",
   height: "15px"
 });
-var DraggableMenuButton = (0, import_react38.memo)(function DraggableMenuButton2({
+var DraggableMenuButton = (0, import_react39.memo)(function DraggableMenuButton2({
   items,
   onSelect,
   isVisible = true
 }) {
   const color = useDesignSystemTheme().colors.icon;
-  const [open, setOpen] = (0, import_react38.useState)(false);
-  const [downPosition, setDownPosition] = import_react38.default.useState(null);
-  const handlePointerDownCapture = (0, import_react38.useCallback)(
+  const [open, setOpen] = (0, import_react39.useState)(false);
+  const [downPosition, setDownPosition] = import_react39.default.useState(null);
+  const handlePointerDownCapture = (0, import_react39.useCallback)(
     (event) => {
       if (open) {
         setDownPosition(null);
@@ -2846,7 +2867,7 @@ var DraggableMenuButton = (0, import_react38.memo)(function DraggableMenuButton2
     },
     [open]
   );
-  const handlePointerUp = (0, import_react38.useCallback)(
+  const handlePointerUp = (0, import_react39.useCallback)(
     (event) => {
       if (open || !downPosition) {
         setDownPosition(null);
@@ -2862,14 +2883,14 @@ var DraggableMenuButton = (0, import_react38.memo)(function DraggableMenuButton2
     },
     [downPosition, open]
   );
-  const handleOpenChange = (0, import_react38.useCallback)(
+  const handleOpenChange = (0, import_react39.useCallback)(
     (isOpen) => {
       if (!isOpen)
         setOpen(false);
     },
     [setOpen]
   );
-  return /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(
     DotButtonElement,
     {
       onPointerDownCapture: handlePointerDownCapture,
@@ -2879,7 +2900,7 @@ var DraggableMenuButton = (0, import_react38.memo)(function DraggableMenuButton2
         event.preventDefault();
       }
     },
-    items && onSelect ? /* @__PURE__ */ import_react38.default.createElement(
+    items && onSelect ? /* @__PURE__ */ import_react39.default.createElement(
       DropdownMenu,
       {
         open,
@@ -2888,13 +2909,13 @@ var DraggableMenuButton = (0, import_react38.memo)(function DraggableMenuButton2
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ import_react38.default.createElement(TriggerElement, null, /* @__PURE__ */ import_react38.default.createElement(
+      /* @__PURE__ */ import_react39.default.createElement(TriggerElement, null, /* @__PURE__ */ import_react39.default.createElement(
         import_noya_icons5.DragHandleDots2Icon,
         {
           color: isVisible || open ? color : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ import_react38.default.createElement(
+    ) : /* @__PURE__ */ import_react39.default.createElement(
       import_noya_icons5.DragHandleDots2Icon,
       {
         color: isVisible || open ? color : "transparent"
@@ -2904,7 +2925,7 @@ var DraggableMenuButton = (0, import_react38.memo)(function DraggableMenuButton2
 });
 
 // src/components/FillInputField.tsx
-var import_react42 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 var import_styled_components21 = __toESM(require("styled-components"));
 
 // ../noya-file-format/src/types.ts
@@ -3230,26 +3251,26 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 
 // src/components/FillPreviewBackground.tsx
-var import_react41 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 var import_styled_components20 = __toESM(require("styled-components"));
 
 // src/contexts/ImageDataContext.tsx
-var import_react39 = __toESM(require("react"));
-var ImageDataContext = (0, import_react39.createContext)(
+var import_react40 = __toESM(require("react"));
+var ImageDataContext = (0, import_react40.createContext)(
   void 0
 );
-var ImageDataProvider = (0, import_react39.memo)(function ImageDataProvider2({
+var ImageDataProvider = (0, import_react40.memo)(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = (0, import_react39.useMemo)(
+  const contextValue = (0, import_react40.useMemo)(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ import_react39.default.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ import_react40.default.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = (0, import_react39.useContext)(ImageDataContext);
+  const value = (0, import_react40.useContext)(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -3257,15 +3278,15 @@ function useImageData(ref) {
 }
 
 // src/hooks/useObjectURL.ts
-var import_react40 = require("react");
+var import_react41 = require("react");
 function useObjectURL(object) {
-  const objectURL = (0, import_react40.useMemo)(() => {
+  const objectURL = (0, import_react41.useMemo)(() => {
     if (object instanceof Blob)
       return URL.createObjectURL(object);
     const bytes = object instanceof Uint8Array ? object : object !== void 0 ? new Uint8Array(object) : new Uint8Array();
     return URL.createObjectURL(new Blob([bytes]));
   }, [object]);
-  (0, import_react40.useLayoutEffect)(() => {
+  (0, import_react41.useLayoutEffect)(() => {
     return () => URL.revokeObjectURL(objectURL);
   }, [objectURL]);
   return objectURL;
@@ -3321,9 +3342,9 @@ var Background = import_styled_components20.default.span(({ background }) => ({
   position: "absolute",
   inset: 0
 }));
-var HorizontalDotsBackground = (0, import_react41.memo)(function HorizontalDotsBackground2() {
+var HorizontalDotsBackground = (0, import_react42.memo)(function HorizontalDotsBackground2() {
   const { inputBackground, placeholderDots } = (0, import_styled_components20.useTheme)().colors;
-  const background = (0, import_react41.useMemo)(
+  const background = (0, import_react42.useMemo)(
     () => [
       `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
         placeholderDots
@@ -3332,7 +3353,7 @@ var HorizontalDotsBackground = (0, import_react41.memo)(function HorizontalDotsB
     ].join(","),
     [inputBackground, placeholderDots]
   );
-  return /* @__PURE__ */ import_react41.default.createElement(Background, { background });
+  return /* @__PURE__ */ import_react42.default.createElement(Background, { background });
 });
 function getPatternSizeAndPosition(fillType, tileScale) {
   switch (fillType) {
@@ -3346,7 +3367,7 @@ function getPatternSizeAndPosition(fillType, tileScale) {
       return "center / 100% 100%";
   }
 }
-var PatternPreviewBackground = (0, import_react41.memo)(function PatternPreviewBackground2({
+var PatternPreviewBackground = (0, import_react42.memo)(function PatternPreviewBackground2({
   fillType,
   tileScale,
   imageRef
@@ -3354,7 +3375,7 @@ var PatternPreviewBackground = (0, import_react41.memo)(function PatternPreviewB
   const image = useImageData(imageRef);
   const url = useObjectURL(image);
   const size2 = getPatternSizeAndPosition(fillType, tileScale);
-  const background = (0, import_react41.useMemo)(
+  const background = (0, import_react42.useMemo)(
     () => [
       size2,
       `url(${url})`,
@@ -3362,37 +3383,37 @@ var PatternPreviewBackground = (0, import_react41.memo)(function PatternPreviewB
     ].join(" "),
     [fillType, size2, url]
   );
-  return /* @__PURE__ */ import_react41.default.createElement(Background, { background });
+  return /* @__PURE__ */ import_react42.default.createElement(Background, { background });
 });
-var ColorPreviewBackground = (0, import_react41.memo)(function ColorPreviewBackground2({
+var ColorPreviewBackground = (0, import_react42.memo)(function ColorPreviewBackground2({
   color
 }) {
-  const background = (0, import_react41.useMemo)(() => sketchColorToRgbaString(color), [color]);
-  return /* @__PURE__ */ import_react41.default.createElement(Background, { background });
+  const background = (0, import_react42.useMemo)(() => sketchColorToRgbaString(color), [color]);
+  return /* @__PURE__ */ import_react42.default.createElement(Background, { background });
 });
-var GradientPreviewBackground = (0, import_react41.memo)(function GradientPreviewBackground2({
+var GradientPreviewBackground = (0, import_react42.memo)(function GradientPreviewBackground2({
   gradient
 }) {
-  const background = (0, import_react41.useMemo)(
+  const background = (0, import_react42.useMemo)(
     () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
     [gradient.gradientType, gradient.stops]
   );
-  return /* @__PURE__ */ import_react41.default.createElement(Background, { background });
+  return /* @__PURE__ */ import_react42.default.createElement(Background, { background });
 });
-var FillPreviewBackground = (0, import_react41.memo)(function FillPreviewBackground2({
+var FillPreviewBackground = (0, import_react42.memo)(function FillPreviewBackground2({
   value
 }) {
   if (!value)
-    return /* @__PURE__ */ import_react41.default.createElement(HorizontalDotsBackground, null);
+    return /* @__PURE__ */ import_react42.default.createElement(HorizontalDotsBackground, null);
   switch (value._class) {
     case "color":
-      return /* @__PURE__ */ import_react41.default.createElement(ColorPreviewBackground, { color: value });
+      return /* @__PURE__ */ import_react42.default.createElement(ColorPreviewBackground, { color: value });
     case "gradient":
-      return /* @__PURE__ */ import_react41.default.createElement(GradientPreviewBackground, { gradient: value });
+      return /* @__PURE__ */ import_react42.default.createElement(GradientPreviewBackground, { gradient: value });
     case "pattern":
       if (!value.image)
         return null;
-      return /* @__PURE__ */ import_react41.default.createElement(
+      return /* @__PURE__ */ import_react42.default.createElement(
         PatternPreviewBackground,
         {
           fillType: value.patternFillType,
@@ -3405,7 +3426,7 @@ var FillPreviewBackground = (0, import_react41.memo)(function FillPreviewBackgro
 
 // src/components/FillInputField.tsx
 var Container = import_styled_components21.default.button(
-  ({ theme, flex }) => ({
+  ({ theme, $flex }) => ({
     outline: "none",
     padding: 0,
     width: "50px",
@@ -3419,17 +3440,17 @@ var Container = import_styled_components21.default.button(
       boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`
     },
     position: "relative",
-    flex
+    flex: $flex
   })
 );
-var FillInputField = (0, import_react42.memo)(
-  (0, import_react42.forwardRef)(function FillInputField2({ id, value, ...rest }, ref) {
-    return /* @__PURE__ */ import_react42.default.createElement(Container, { ref, id, ...rest }, /* @__PURE__ */ import_react42.default.createElement(FillPreviewBackground, { value }));
+var FillInputField = (0, import_react43.memo)(
+  (0, import_react43.forwardRef)(function FillInputField2({ id, value, flex, ...rest }, ref) {
+    return /* @__PURE__ */ import_react43.default.createElement(Container, { ref, id, $flex: flex, ...rest }, /* @__PURE__ */ import_react43.default.createElement(FillPreviewBackground, { value }));
   })
 );
 
 // src/components/FloatingWindow.tsx
-var import_react43 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -3522,7 +3543,7 @@ function defaultRenderToolbar({
   toolbarContent,
   onClose
 }) {
-  return /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, /* @__PURE__ */ import_react43.default.createElement(Small, { flex: "1", fontWeight: "500", color: "text" }, title), toolbarContent, /* @__PURE__ */ import_react43.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, /* @__PURE__ */ import_react44.default.createElement(Small, { flex: "1", fontWeight: "500", color: "text" }, title), toolbarContent, /* @__PURE__ */ import_react44.default.createElement(
     IconButton,
     {
       iconName: "Cross3Icon",
@@ -3547,16 +3568,16 @@ var FloatingWindow = ({
   toolbarContent,
   renderToolbar = defaultRenderToolbar
 }) => {
-  const [position, setPosition] = (0, import_react43.useState)({ x: initialX, y: initialY });
-  const [size2, setSize] = (0, import_react43.useState)({
+  const [position, setPosition] = (0, import_react44.useState)({ x: initialX, y: initialY });
+  const [size2, setSize] = (0, import_react44.useState)({
     width: initialWidth,
     height: initialHeight
   });
-  const [isDragging, setIsDragging] = (0, import_react43.useState)(false);
-  const [isResizing, setIsResizing] = (0, import_react43.useState)(false);
-  const [dragOffset, setDragOffset] = (0, import_react43.useState)({ x: 0, y: 0 });
-  const [resizeDirection, setResizeDirection] = (0, import_react43.useState)(null);
-  const wrapperRef = (0, import_react43.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react44.useState)(false);
+  const [isResizing, setIsResizing] = (0, import_react44.useState)(false);
+  const [dragOffset, setDragOffset] = (0, import_react44.useState)({ x: 0, y: 0 });
+  const [resizeDirection, setResizeDirection] = (0, import_react44.useState)(null);
+  const wrapperRef = (0, import_react44.useRef)(null);
   const toggleGlobalTextSelection = (disable) => {
     if (disable) {
       document.body.style.userSelect = "none";
@@ -3564,7 +3585,7 @@ var FloatingWindow = ({
       document.body.style.userSelect = "";
     }
   };
-  const handleMouseDown = (0, import_react43.useCallback)((e) => {
+  const handleMouseDown = (0, import_react44.useCallback)((e) => {
     if (!wrapperRef.current)
       return;
     const rect = wrapperRef.current.getBoundingClientRect();
@@ -3574,7 +3595,7 @@ var FloatingWindow = ({
     });
     setIsDragging(true);
   }, []);
-  const handleResizeStart = (0, import_react43.useCallback)(
+  const handleResizeStart = (0, import_react44.useCallback)(
     (direction) => (e) => {
       e.stopPropagation();
       setIsResizing(true);
@@ -3583,7 +3604,7 @@ var FloatingWindow = ({
     },
     []
   );
-  const handleMouseMove = (0, import_react43.useCallback)(
+  const handleMouseMove = (0, import_react44.useCallback)(
     (e) => {
       if (isDragging) {
         setPosition({
@@ -3637,13 +3658,13 @@ var FloatingWindow = ({
       minHeight
     ]
   );
-  const handleMouseUp = (0, import_react43.useCallback)((e) => {
+  const handleMouseUp = (0, import_react44.useCallback)((e) => {
     setIsDragging(false);
     setIsResizing(false);
     setResizeDirection(null);
     toggleGlobalTextSelection(false);
   }, []);
-  import_react43.default.useEffect(() => {
+  import_react44.default.useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -3654,12 +3675,12 @@ var FloatingWindow = ({
   const theme = useDesignSystemTheme();
   const floatingWindowManager = useFloatingWindowManager();
   const currentFloatingWindow = useCurrentFloatingWindowInternal();
-  const handleClose = (0, import_react43.useCallback)(() => {
+  const handleClose = (0, import_react44.useCallback)(() => {
     if (onClose)
       onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
-  return /* @__PURE__ */ import_react43.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -3673,7 +3694,7 @@ var FloatingWindow = ({
         backgroundColor: theme.colors.canvas.background
       }
     },
-    /* @__PURE__ */ import_react43.default.createElement(
+    /* @__PURE__ */ import_react44.default.createElement(
       "div",
       {
         style: {
@@ -3684,9 +3705,9 @@ var FloatingWindow = ({
       },
       renderToolbar({ title, toolbarContent, onClose: handleClose })
     ),
-    /* @__PURE__ */ import_react43.default.createElement(Divider, null),
-    /* @__PURE__ */ import_react43.default.createElement("div", { style: styles2.content }, children),
-    Object.entries(resizeHandlePositions).map(([direction, style3]) => /* @__PURE__ */ import_react43.default.createElement(
+    /* @__PURE__ */ import_react44.default.createElement(Divider, null),
+    /* @__PURE__ */ import_react44.default.createElement("div", { style: styles2.content }, children),
+    Object.entries(resizeHandlePositions).map(([direction, style3]) => /* @__PURE__ */ import_react44.default.createElement(
       "div",
       {
         key: direction,
@@ -3699,8 +3720,8 @@ var FloatingWindow = ({
 
 // src/components/GradientPicker.tsx
 var import_noya_colorpicker2 = require("@noya-app/noya-colorpicker");
-var import_react44 = __toESM(require("react"));
-var GradientPicker = (0, import_react44.memo)(function GradientPicker2({
+var import_react45 = __toESM(require("react"));
+var GradientPicker = (0, import_react45.memo)(function GradientPicker2({
   value,
   selectedStop,
   onChangeColor,
@@ -3709,7 +3730,7 @@ var GradientPicker = (0, import_react44.memo)(function GradientPicker2({
   onDelete,
   onSelectStop
 }) {
-  const colorModel = (0, import_react44.useMemo)(
+  const colorModel = (0, import_react45.useMemo)(
     () => ({
       defaultColor: { r: 0, g: 0, b: 0, a: 1 },
       toHsva: import_noya_colorpicker2.rgbaToHsva,
@@ -3718,30 +3739,30 @@ var GradientPicker = (0, import_react44.memo)(function GradientPicker2({
     }),
     []
   );
-  const rgbaColor = (0, import_react44.useMemo)(
+  const rgbaColor = (0, import_react45.useMemo)(
     () => sketchColorToRgba(value[selectedStop].color),
     [value, selectedStop]
   );
-  const handleChangeColor = (0, import_react44.useCallback)(
+  const handleChangeColor = (0, import_react45.useCallback)(
     (value2) => {
       onChangeColor(rgbaToSketchColor(value2));
     },
     [onChangeColor]
   );
-  const handleAddGradientStop = (0, import_react44.useCallback)(
+  const handleAddGradientStop = (0, import_react45.useCallback)(
     (value2, position) => {
       onAdd(rgbaToSketchColor(value2), position);
     },
     [onAdd]
   );
-  return /* @__PURE__ */ import_react44.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     import_noya_colorpicker2.ColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ import_react44.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement(
       import_noya_colorpicker2.Gradient,
       {
         gradients: value,
@@ -3752,12 +3773,12 @@ var GradientPicker = (0, import_react44.memo)(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ import_react44.default.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ import_react44.default.createElement(import_noya_colorpicker2.Saturation, null),
-    /* @__PURE__ */ import_react44.default.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ import_react44.default.createElement(import_noya_colorpicker2.Hue, null),
-    /* @__PURE__ */ import_react44.default.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ import_react44.default.createElement(import_noya_colorpicker2.Alpha, null)
+    /* @__PURE__ */ import_react45.default.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ import_react45.default.createElement(import_noya_colorpicker2.Saturation, null),
+    /* @__PURE__ */ import_react45.default.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ import_react45.default.createElement(import_noya_colorpicker2.Hue, null),
+    /* @__PURE__ */ import_react45.default.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ import_react45.default.createElement(import_noya_colorpicker2.Alpha, null)
   );
 });
 
@@ -3789,12 +3810,12 @@ var Grid = import_styled_components22.default.div((props) => ({
 }));
 
 // src/components/GridView.tsx
-var import_react46 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 var import_styled_components24 = __toESM(require("styled-components"));
 
 // src/components/ScrollArea.tsx
 var RadixScrollArea = __toESM(require("@radix-ui/react-scroll-area"));
-var import_react45 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var import_styled_components23 = __toESM(require("styled-components"));
 var SCROLLBAR_SIZE = 10;
 var StyledViewport = (0, import_styled_components23.default)(RadixScrollArea.Viewport)({
@@ -3822,18 +3843,18 @@ var Container2 = import_styled_components23.default.div({
   flex: "1 1 0px",
   minHeight: 0
 });
-var ScrollArea = (0, import_react45.memo)(function ScrollArea2({ children }) {
-  const [scrollElementRef, setScrollElementRef] = (0, import_react45.useState)(null);
-  return /* @__PURE__ */ import_react45.default.createElement(Container2, null, /* @__PURE__ */ import_react45.default.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ import_react45.default.createElement(
+var ScrollArea = (0, import_react46.memo)(function ScrollArea2({ children }) {
+  const [scrollElementRef, setScrollElementRef] = (0, import_react46.useState)(null);
+  return /* @__PURE__ */ import_react46.default.createElement(Container2, null, /* @__PURE__ */ import_react46.default.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ import_react46.default.createElement(
     StyledViewport,
     {
-      ref: (0, import_react45.useCallback)(
+      ref: (0, import_react46.useCallback)(
         (ref) => setScrollElementRef(ref),
         []
       )
     },
     typeof children === "function" ? scrollElementRef ? children(scrollElementRef) : null : children
-  ), /* @__PURE__ */ import_react45.default.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ import_react45.default.createElement(StyledThumb, { className: "scroll-component" }))));
+  ), /* @__PURE__ */ import_react46.default.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ import_react46.default.createElement(StyledThumb, { className: "scroll-component" }))));
 });
 
 // src/components/GridView.tsx
@@ -4013,7 +4034,7 @@ var Shimmer = import_styled_components24.default.div`
   align-items: end;
   padding: 4px;
 `;
-var GridViewItem = (0, import_react46.forwardRef)(function GridViewItem2({
+var GridViewItem = (0, import_react47.forwardRef)(function GridViewItem2({
   id,
   title,
   subtitle,
@@ -4029,15 +4050,15 @@ var GridViewItem = (0, import_react46.forwardRef)(function GridViewItem2({
   onContextMenu,
   style: style3
 }, forwardedRef) {
-  const [hovered, setHovered] = import_react46.default.useState(false);
+  const [hovered, setHovered] = import_react47.default.useState(false);
   const { hoverProps } = useHover({
     onHoverChange: (isHovering) => {
       onHoverChange?.(isHovering);
       setHovered(isHovering);
     }
   });
-  const { textPosition, bordered, disabled } = (0, import_react46.useContext)(GridViewContext);
-  const handleClick = (0, import_react46.useCallback)(
+  const { textPosition, bordered, disabled } = (0, import_react47.useContext)(GridViewContext);
+  const handleClick = (0, import_react47.useCallback)(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -4046,7 +4067,7 @@ var GridViewItem = (0, import_react46.forwardRef)(function GridViewItem2({
     },
     [onClick, onPress]
   );
-  const handleKeyDown = (0, import_react46.useCallback)(
+  const handleKeyDown = (0, import_react47.useCallback)(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.stopPropagation();
@@ -4058,7 +4079,7 @@ var GridViewItem = (0, import_react46.forwardRef)(function GridViewItem2({
     },
     [onPress]
   );
-  let element = /* @__PURE__ */ import_react46.default.createElement(
+  let element = /* @__PURE__ */ import_react47.default.createElement(
     ItemContainer,
     {
       id,
@@ -4067,7 +4088,7 @@ var GridViewItem = (0, import_react46.forwardRef)(function GridViewItem2({
       tabIndex: disabled ? void 0 : 0,
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ import_react46.default.createElement(
+    /* @__PURE__ */ import_react47.default.createElement(
       ContentContainer,
       {
         disabled,
@@ -4081,25 +4102,25 @@ var GridViewItem = (0, import_react46.forwardRef)(function GridViewItem2({
       },
       children
     ),
-    textPosition === "below" && /* @__PURE__ */ import_react46.default.createElement(import_react46.default.Fragment, null, /* @__PURE__ */ import_react46.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react46.default.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ import_react46.default.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react46.default.createElement(TextOverlay, null, title && /* @__PURE__ */ import_react46.default.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ import_react46.default.createElement(ItemDescription, { showBackground: true }, subtitle)),
-    loading && /* @__PURE__ */ import_react46.default.createElement(Shimmer, null, /* @__PURE__ */ import_react46.default.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
+    textPosition === "below" && /* @__PURE__ */ import_react47.default.createElement(import_react47.default.Fragment, null, /* @__PURE__ */ import_react47.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react47.default.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ import_react47.default.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react47.default.createElement(TextOverlay, null, title && /* @__PURE__ */ import_react47.default.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ import_react47.default.createElement(ItemDescription, { showBackground: true }, subtitle)),
+    loading && /* @__PURE__ */ import_react47.default.createElement(Shimmer, null, /* @__PURE__ */ import_react47.default.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
-    element = /* @__PURE__ */ import_react46.default.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
+    element = /* @__PURE__ */ import_react47.default.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
   }
   if (textPosition === "toolip") {
-    element = /* @__PURE__ */ import_react46.default.createElement(
+    element = /* @__PURE__ */ import_react47.default.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ import_react46.default.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ import_react46.default.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ import_react46.default.createElement(ItemDescription, { showBackground: false }, subtitle))
+        content: /* @__PURE__ */ import_react47.default.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ import_react47.default.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ import_react47.default.createElement(ItemDescription, { showBackground: false }, subtitle))
       },
       element
     );
   }
   return element;
 });
-var GridViewContext = (0, import_react46.createContext)({
+var GridViewContext = (0, import_react47.createContext)({
   size: "small",
   textPosition: "below",
   bordered: false,
@@ -4114,7 +4135,7 @@ function GridViewRoot({
   bordered = false,
   disabled = false
 }) {
-  const handleClick = (0, import_react46.useCallback)(
+  const handleClick = (0, import_react47.useCallback)(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -4122,7 +4143,7 @@ function GridViewRoot({
     },
     [onClick]
   );
-  const contextValue = (0, import_react46.useMemo)(
+  const contextValue = (0, import_react47.useMemo)(
     () => ({
       size: size2,
       textPosition,
@@ -4131,33 +4152,33 @@ function GridViewRoot({
     }),
     [bordered, disabled, size2, textPosition]
   );
-  return /* @__PURE__ */ import_react46.default.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react46.default.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ import_react46.default.createElement(ScrollArea, null, children) : children));
+  return /* @__PURE__ */ import_react47.default.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react47.default.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ import_react47.default.createElement(ScrollArea, null, children) : children));
 }
 function GridViewSection({
   children,
   padding = "20px"
 }) {
-  const { size: size2 } = (0, import_react46.useContext)(GridViewContext);
-  return /* @__PURE__ */ import_react46.default.createElement(Grid2, { size: size2, padding }, children);
+  const { size: size2 } = (0, import_react47.useContext)(GridViewContext);
+  return /* @__PURE__ */ import_react47.default.createElement(Grid2, { size: size2, padding }, children);
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
-  return /* @__PURE__ */ import_react46.default.createElement(SectionHeaderContainer, null, /* @__PURE__ */ import_react46.default.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
-    grouped.map((title2, index) => /* @__PURE__ */ import_react46.default.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
-    /* @__PURE__ */ import_react46.default.createElement(SectionTitle, null, " / ")
+  return /* @__PURE__ */ import_react47.default.createElement(SectionHeaderContainer, null, /* @__PURE__ */ import_react47.default.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
+    grouped.map((title2, index) => /* @__PURE__ */ import_react47.default.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
+    /* @__PURE__ */ import_react47.default.createElement(SectionTitle, null, " / ")
   ));
 }
 var GridView;
 ((GridView2) => {
-  GridView2.Root = (0, import_react46.memo)(GridViewRoot);
-  GridView2.Item = (0, import_react46.memo)(GridViewItem);
-  GridView2.Section = (0, import_react46.memo)(GridViewSection);
-  GridView2.SectionHeader = (0, import_react46.memo)(GridViewSectionHeader);
+  GridView2.Root = (0, import_react47.memo)(GridViewRoot);
+  GridView2.Item = (0, import_react47.memo)(GridViewItem);
+  GridView2.Section = (0, import_react47.memo)(GridViewSection);
+  GridView2.SectionHeader = (0, import_react47.memo)(GridViewSectionHeader);
 })(GridView || (GridView = {}));
 
 // src/components/InputFieldWithCompletions.tsx
-var import_noya_utils9 = require("@noya-app/noya-utils");
-var import_react50 = __toESM(require("react"));
+var import_noya_utils8 = require("@noya-app/noya-utils");
+var import_react51 = __toESM(require("react"));
 var import_styled_components27 = __toESM(require("styled-components"));
 
 // src/utils/fuzzyScorer.ts
@@ -4232,15 +4253,15 @@ function mergeRanges(ranges) {
 }
 
 // src/components/ListView.tsx
-var import_noya_utils8 = require("@noya-app/noya-utils");
+var import_noya_utils7 = require("@noya-app/noya-utils");
 var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react48 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 var import_react_virtualized = require("react-virtualized");
 var import_react_window = require("react-window");
 var import_styled_components25 = __toESM(require("styled-components"));
 
 // src/hooks/mergeEventHandlers.ts
-var import_noya_utils7 = require("@noya-app/noya-utils");
+var import_noya_utils6 = require("@noya-app/noya-utils");
 var import_primitive = require("@radix-ui/primitive");
 function composeAllEventHandlers(...handlers) {
   const [first, ...rest] = handlers;
@@ -4250,7 +4271,7 @@ function composeAllEventHandlers(...handlers) {
   );
 }
 function mergeEventHandlers(...handlerMaps) {
-  const eventNames = (0, import_noya_utils7.unique)(handlerMaps.map(Object.keys).flat());
+  const eventNames = (0, import_noya_utils6.unique)(handlerMaps.map(Object.keys).flat());
   return Object.fromEntries(
     eventNames.map((eventName) => {
       const handlers = handlerMaps.flatMap((handlerMap) => {
@@ -4265,7 +4286,7 @@ function mergeEventHandlers(...handlerMaps) {
 // src/components/Sortable.tsx
 var import_core = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
-var import_react47 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var import_react_dom2 = require("react-dom");
 var normalizeListDestinationIndex = (index, position) => {
   return position === "above" ? index : index + 1;
@@ -4279,7 +4300,7 @@ var defaultAcceptsDrop = (sourceIndex, destinationIndex, position) => {
   }
   return true;
 };
-var SortableItemContext = (0, import_react47.createContext)({
+var SortableItemContext = (0, import_react48.createContext)({
   keys: [],
   position: { x: 0, y: 0 },
   acceptsDrop: defaultAcceptsDrop,
@@ -4301,7 +4322,7 @@ function SortableItem({
   disabled,
   children
 }) {
-  const { keys, position, acceptsDrop, setActivatorEvent, axis } = (0, import_react47.useContext)(SortableItemContext);
+  const { keys, position, acceptsDrop, setActivatorEvent, axis } = (0, import_react48.useContext)(SortableItemContext);
   const sortable = (0, import_sortable.useSortable)({ id, disabled });
   const {
     active,
@@ -4321,7 +4342,7 @@ function SortableItem({
   const eventY = activatorEvent?.clientY ?? 0;
   const offsetLeft = eventX + position.x;
   const offsetTop = eventY + position.y;
-  const ref = (0, import_react47.useCallback)((node) => setNodeRef(node), [setNodeRef]);
+  const ref = (0, import_react48.useCallback)((node) => setNodeRef(node), [setNodeRef]);
   return children({
     ref,
     ...attributes,
@@ -4352,22 +4373,22 @@ function SortableRoot({
       }
     })
   );
-  const [activeIndex, setActiveIndex] = (0, import_react47.useState)();
-  const activatorEvent = (0, import_react47.useRef)(null);
-  const setActivatorEvent = (0, import_react47.useCallback)((event) => {
+  const [activeIndex, setActiveIndex] = (0, import_react48.useState)();
+  const activatorEvent = (0, import_react48.useRef)(null);
+  const setActivatorEvent = (0, import_react48.useCallback)((event) => {
     activatorEvent.current = event;
   }, []);
-  const [position, setPosition] = (0, import_react47.useState)({ x: 0, y: 0 });
-  const handleDragStart = (0, import_react47.useCallback)(
+  const [position, setPosition] = (0, import_react48.useState)({ x: 0, y: 0 });
+  const handleDragStart = (0, import_react48.useCallback)(
     (event) => {
       setActiveIndex(keys.indexOf(event.active.id));
     },
     [keys]
   );
-  const handleDragMove = (0, import_react47.useCallback)((event) => {
+  const handleDragMove = (0, import_react48.useCallback)((event) => {
     setPosition({ ...event.delta });
   }, []);
-  const handleDragEnd = (0, import_react47.useCallback)(
+  const handleDragEnd = (0, import_react48.useCallback)(
     (event) => {
       const { active, over } = event;
       setActiveIndex(void 0);
@@ -4394,14 +4415,14 @@ function SortableRoot({
     },
     [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
   );
-  const [mounted, setMounted] = (0, import_react47.useState)(false);
-  (0, import_react47.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react48.useState)(false);
+  (0, import_react48.useEffect)(() => {
     setMounted(true);
   }, []);
-  return /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     SortableItemContext.Provider,
     {
-      value: (0, import_react47.useMemo)(
+      value: (0, import_react48.useMemo)(
         () => ({
           keys,
           acceptsDrop,
@@ -4412,7 +4433,7 @@ function SortableRoot({
         [acceptsDrop, axis, keys, position, setActivatorEvent]
       )
     },
-    /* @__PURE__ */ import_react47.default.createElement(
+    /* @__PURE__ */ import_react48.default.createElement(
       import_core.DndContext,
       {
         sensors,
@@ -4421,9 +4442,9 @@ function SortableRoot({
         onDragMove: handleDragMove,
         onDragEnd: handleDragEnd
       },
-      /* @__PURE__ */ import_react47.default.createElement(import_sortable.SortableContext, { items: keys, strategy: import_sortable.verticalListSortingStrategy }, children),
+      /* @__PURE__ */ import_react48.default.createElement(import_sortable.SortableContext, { items: keys, strategy: import_sortable.verticalListSortingStrategy }, children),
       mounted && renderOverlay && (0, import_react_dom2.createPortal)(
-        /* @__PURE__ */ import_react47.default.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
+        /* @__PURE__ */ import_react48.default.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
         document.body
       )
     )
@@ -4431,17 +4452,17 @@ function SortableRoot({
 }
 var Sortable;
 ((Sortable2) => {
-  Sortable2.Item = (0, import_react47.memo)(SortableItem);
-  Sortable2.Root = (0, import_react47.memo)(SortableRoot);
+  Sortable2.Item = (0, import_react48.memo)(SortableItem);
+  Sortable2.Root = (0, import_react48.memo)(SortableRoot);
 })(Sortable || (Sortable = {}));
 
 // src/components/ListView.tsx
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = 27;
-var DraggingContext = (0, import_react48.createContext)({
+var DraggingContext = (0, import_react49.createContext)({
   indentation: 12
 });
-var ListRowContext = (0, import_react48.createContext)({
+var ListRowContext = (0, import_react49.createContext)({
   marginType: "none",
   selectedPosition: "only",
   sortable: false,
@@ -4471,8 +4492,8 @@ function ListViewEditableRowTitle({
   autoFocus,
   placeholder
 }) {
-  const inputRef = (0, import_react48.useRef)(null);
-  (0, import_react48.useLayoutEffect)(() => {
+  const inputRef = (0, import_react49.useRef)(null);
+  (0, import_react49.useLayoutEffect)(() => {
     const element = inputRef.current;
     if (!element || !autoFocus)
       return;
@@ -4481,7 +4502,7 @@ function ListViewEditableRowTitle({
       element.select();
     }, 0);
   }, [autoFocus]);
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     ListViewEditableRowTitleElement,
     {
       ref: inputRef,
@@ -4502,34 +4523,34 @@ function getPositionMargin(marginType) {
 var RowContainer = import_styled_components25.default.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",
@@ -4538,72 +4559,72 @@ var RowContainer = import_styled_components25.default.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 = import_styled_components25.default.div(({ theme, relativeDropPosition, offsetLeft, colorScheme, gap }) => ({
+var ListViewDragIndicatorElement = import_styled_components25.default.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 = (0, import_react48.forwardRef)(function ListViewRow2({
+var ListViewRow = (0, import_react49.forwardRef)(function ListViewRow2({
   id,
   tabIndex = 0,
   gap,
@@ -4636,12 +4657,12 @@ var ListViewRow = (0, import_react48.forwardRef)(function ListViewRow2({
     divider,
     gap: listGap,
     colorScheme
-  } = (0, import_react48.useContext)(ListRowContext);
+  } = (0, import_react49.useContext)(ListRowContext);
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { indentation, isDragging } = (0, import_react48.useContext)(DraggingContext);
-  const handlePress = (0, import_react48.useCallback)(
+  const { indentation, isDragging } = (0, import_react49.useContext)(DraggingContext);
+  const handlePress = (0, import_react49.useCallback)(
     (event) => {
       event.preventDefault();
       if (event.button !== 0)
@@ -4650,14 +4671,14 @@ var ListViewRow = (0, import_react48.forwardRef)(function ListViewRow2({
     },
     [onPress]
   );
-  const handleDoubleClick = (0, import_react48.useCallback)(
+  const handleDoubleClick = (0, import_react49.useCallback)(
     (event) => {
       event.stopPropagation();
       onDoubleClick?.();
     },
     [onDoubleClick]
   );
-  const mergedStyle = (0, import_react48.useMemo)(() => {
+  const mergedStyle = (0, import_react49.useMemo)(() => {
     return isDragging ? {
       // TODO: Where do these offsets actually come from?
       transform: `translate3d(-36px, -6px, 0)`,
@@ -4669,28 +4690,29 @@ var ListViewRow = (0, import_react48.forwardRef)(function ListViewRow2({
     relativeDropPosition,
     ...renderProps
   }, ref) => {
-    const element = /* @__PURE__ */ import_react48.default.createElement(
-      RowContainer,
+    const Component = RowContainer;
+    const element = /* @__PURE__ */ import_react49.default.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,
@@ -4700,20 +4722,20 @@ var ListViewRow = (0, import_react48.forwardRef)(function ListViewRow2({
         ),
         tabIndex
       },
-      relativeDropPosition && /* @__PURE__ */ import_react48.default.createElement(
+      relativeDropPosition && /* @__PURE__ */ import_react49.default.createElement(
         ListViewDragIndicatorElement,
         {
-          colorScheme,
-          relativeDropPosition,
-          offsetLeft: 33 + depth * indentation,
-          gap: listGap
+          $colorScheme: colorScheme,
+          $relativeDropPosition: relativeDropPosition,
+          $offsetLeft: 33 + depth * indentation,
+          $gap: listGap
         }
       ),
-      depth > 0 && /* @__PURE__ */ import_react48.default.createElement(Spacer.Horizontal, { size: depth * indentation }),
+      depth > 0 && /* @__PURE__ */ import_react49.default.createElement(Spacer.Horizontal, { size: depth * indentation }),
       children
     );
     if (menuItems && onSelectMenuItem) {
-      return /* @__PURE__ */ import_react48.default.createElement(
+      return /* @__PURE__ */ import_react49.default.createElement(
         ContextMenu,
         {
           items: menuItems,
@@ -4726,21 +4748,24 @@ var ListViewRow = (0, import_react48.forwardRef)(function ListViewRow2({
     return element;
   };
   if (sortable && id) {
-    return /* @__PURE__ */ import_react48.default.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(sortableProps, (0, import_react_compose_refs2.composeRefs)(sortableRef, forwardedRef)));
+    return /* @__PURE__ */ import_react49.default.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
+      sortableProps,
+      (0, import_react_compose_refs2.composeRefs)(sortableRef, forwardedRef)
+    ));
   }
   return renderContent({}, forwardedRef);
 });
-var RenderItemContext = (0, import_react48.createContext)(
+var RenderItemContext = (0, import_react49.createContext)(
   () => null
 );
-var VirtualizedListRow = (0, import_react48.memo)(function VirtualizedListRow2({
+var VirtualizedListRow = (0, import_react49.memo)(function VirtualizedListRow2({
   index,
   style: style3
 }) {
-  const renderItem = (0, import_react48.useContext)(RenderItemContext);
-  return /* @__PURE__ */ import_react48.default.createElement("div", { key: index, style: style3 }, renderItem(index));
+  const renderItem = (0, import_react49.useContext)(RenderItemContext);
+  return /* @__PURE__ */ import_react49.default.createElement("div", { key: index, style: style3 }, renderItem(index));
 });
-var VirtualizedListInner = (0, import_react48.forwardRef)(function VirtualizedListInner2({
+var VirtualizedListInner = (0, import_react49.forwardRef)(function VirtualizedListInner2({
   size: size2,
   scrollElement,
   items,
@@ -4748,20 +4773,20 @@ var VirtualizedListInner = (0, import_react48.forwardRef)(function VirtualizedLi
   keyExtractor,
   renderItem
 }, ref) {
-  const listRef = (0, import_react48.useRef)(null);
-  (0, import_react48.useImperativeHandle)(ref, () => ({
+  const listRef = (0, import_react49.useRef)(null);
+  (0, import_react49.useImperativeHandle)(ref, () => ({
     scrollToIndex(index) {
       listRef.current?.scrollToItem(index);
     }
   }));
-  (0, import_react48.useLayoutEffect)(() => {
+  (0, import_react49.useLayoutEffect)(() => {
     listRef.current?.resetAfterIndex(0);
   }, [
     // When items change, we need to re-render the virtualized list,
     // since it doesn't currently support row height changes
     items
   ]);
-  const listStyle = (0, import_react48.useMemo)(
+  const listStyle = (0, import_react49.useMemo)(
     () => ({
       overflowX: "initial",
       overflowY: "initial",
@@ -4769,18 +4794,18 @@ var VirtualizedListInner = (0, import_react48.forwardRef)(function VirtualizedLi
     }),
     []
   );
-  return /* @__PURE__ */ import_react48.default.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ import_react49.default.createElement(
     import_react_virtualized.WindowScroller,
     {
       scrollElement,
-      style: (0, import_react48.useMemo)(() => ({ flex: "1 1 auto" }), [])
+      style: (0, import_react49.useMemo)(() => ({ flex: "1 1 auto" }), [])
     },
-    (0, import_react48.useCallback)(
+    (0, import_react49.useCallback)(
       ({
         registerChild,
         onChildScroll,
         scrollTop
-      }) => /* @__PURE__ */ import_react48.default.createElement("div", { ref: registerChild }, /* @__PURE__ */ import_react48.default.createElement(
+      }) => /* @__PURE__ */ import_react49.default.createElement("div", { ref: registerChild }, /* @__PURE__ */ import_react49.default.createElement(
         import_react_window.VariableSizeList,
         {
           ref: listRef,
@@ -4810,18 +4835,18 @@ var VirtualizedListInner = (0, import_react48.forwardRef)(function VirtualizedLi
     )
   ));
 });
-var VirtualizedList = (0, import_react48.memo)(
+var VirtualizedList = (0, import_react49.memo)(
   VirtualizedListInner
 );
-var RootContainer2 = import_styled_components25.default.div(({ theme, scrollable, gap }) => ({
-  flex: scrollable ? "1 0 0" : "0 0 auto",
+var RootContainer2 = import_styled_components25.default.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 = (0, import_react48.forwardRef)(function ListViewRootInner2({
+var ListViewRootInner = (0, import_react49.forwardRef)(function ListViewRootInner2({
   onPress,
   scrollable = false,
   expandable = true,
@@ -4840,7 +4865,7 @@ var ListViewRootInner = (0, import_react48.forwardRef)(function ListViewRootInne
   colorScheme = "primary",
   gap = 0
 }, forwardedRef) {
-  const handleClick = (0, import_react48.useCallback)(
+  const handleClick = (0, import_react49.useCallback)(
     (event) => {
       if (event.target instanceof HTMLElement && event.target.classList.contains("scroll-component"))
         return;
@@ -4850,19 +4875,19 @@ var ListViewRootInner = (0, import_react48.forwardRef)(function ListViewRootInne
     },
     [onPress]
   );
-  const renderChild = (0, import_react48.useCallback)(
+  const renderChild = (0, import_react49.useCallback)(
     (index) => renderItem(data[index], index, { isDragging: false }),
     [data, renderItem]
   );
-  const getItemContextValue = (0, import_react48.useCallback)(
+  const getItemContextValue = (0, import_react49.useCallback)(
     (i) => {
       const current = renderChild(i);
-      if (!(0, import_react48.isValidElement)(current))
+      if (!(0, import_react49.isValidElement)(current))
         return;
       const prevChild = i - 1 >= 0 && renderChild(i - 1);
       const nextChild = i + 1 < data.length && renderChild(i + 1);
-      const next = (0, import_react48.isValidElement)(nextChild) ? nextChild : void 0;
-      const prev = (0, import_react48.isValidElement)(prevChild) ? prevChild : void 0;
+      const next = (0, import_react49.isValidElement)(nextChild) ? nextChild : void 0;
+      const prev = (0, import_react49.isValidElement)(prevChild) ? prevChild : void 0;
       const hasMarginTop = !prev;
       const hasMarginBottom = !next || current.props.isSectionHeader || next && next.props.isSectionHeader;
       let marginType;
@@ -4914,26 +4939,26 @@ var ListViewRootInner = (0, import_react48.forwardRef)(function ListViewRootInne
       gap
     ]
   );
-  const draggingContextOverlayValue = (0, import_react48.useMemo)(
+  const draggingContextOverlayValue = (0, import_react49.useMemo)(
     () => ({ indentation, isDragging: true }),
     [indentation]
   );
-  const renderOverlay = (0, import_react48.useCallback)(
-    (index) => /* @__PURE__ */ import_react48.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react48.default.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
+  const renderOverlay = (0, import_react49.useCallback)(
+    (index) => /* @__PURE__ */ import_react49.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react49.default.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
-  const renderWrappedChild = (0, import_react48.useCallback)(
+  const renderWrappedChild = (0, import_react49.useCallback)(
     (index) => {
       const contextValue = getItemContextValue(index);
       const current = renderChild(index);
-      if (!contextValue || !(0, import_react48.isValidElement)(current))
+      if (!contextValue || !(0, import_react49.isValidElement)(current))
         return null;
-      return /* @__PURE__ */ import_react48.default.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
+      return /* @__PURE__ */ import_react49.default.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
     },
     [getItemContextValue, renderChild]
   );
-  const ids = (0, import_react48.useMemo)(() => data.map(keyExtractor), [keyExtractor, data]);
-  const withSortable = (children) => sortable ? /* @__PURE__ */ import_react48.default.createElement(
+  const ids = (0, import_react49.useMemo)(() => data.map(keyExtractor), [keyExtractor, data]);
+  const withSortable = (children) => sortable ? /* @__PURE__ */ import_react49.default.createElement(
     Sortable.Root,
     {
       onMoveItem,
@@ -4943,8 +4968,8 @@ var ListViewRootInner = (0, import_react48.forwardRef)(function ListViewRootInne
     },
     children
   ) : children;
-  const withScrollable = (children) => scrollable ? /* @__PURE__ */ import_react48.default.createElement(ScrollArea, null, children) : children(null);
-  const getItemHeight = (0, import_react48.useCallback)(
+  const withScrollable = (children) => scrollable ? /* @__PURE__ */ import_react49.default.createElement(ScrollArea, null, children) : children(null);
+  const getItemHeight = (0, import_react49.useCallback)(
     (index) => {
       const child = getItemContextValue(index);
       const margin = child?.marginType ? getPositionMargin(child.marginType) : { top: 0, bottom: 0 };
@@ -4953,23 +4978,23 @@ var ListViewRootInner = (0, import_react48.forwardRef)(function ListViewRootInne
     },
     [getItemContextValue, variant]
   );
-  const getKey = (0, import_react48.useCallback)(
+  const getKey = (0, import_react49.useCallback)(
     (index) => keyExtractor(data[index], index),
     [data, keyExtractor]
   );
-  const draggingContextValue = (0, import_react48.useMemo)(() => ({ indentation }), [indentation]);
-  return /* @__PURE__ */ import_react48.default.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react48.default.createElement(
+  const draggingContextValue = (0, import_react49.useMemo)(() => ({ indentation }), [indentation]);
+  return /* @__PURE__ */ import_react49.default.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react49.default.createElement(
     RootContainer2,
     {
       ...{
         [pressEventName]: handleClick
       },
-      gap,
-      scrollable
+      $gap: gap,
+      $scrollable: scrollable
     },
     withScrollable(
       (scrollElementRef) => withSortable(
-        virtualized ? /* @__PURE__ */ import_react48.default.createElement(
+        virtualized ? /* @__PURE__ */ import_react49.default.createElement(
           VirtualizedList,
           {
             ref: forwardedRef,
@@ -4980,47 +5005,47 @@ var ListViewRootInner = (0, import_react48.forwardRef)(function ListViewRootInne
             keyExtractor: getKey,
             renderItem: renderWrappedChild
           }
-        ) : (0, import_noya_utils8.range)(0, data.length).map(renderWrappedChild)
+        ) : (0, import_noya_utils7.range)(0, data.length).map(renderWrappedChild)
       )
     )
   ));
 });
-var ListViewRoot = (0, import_react48.memo)(ListViewRootInner);
-var ChildrenListViewInner = (0, import_react48.forwardRef)(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
-  const items = (0, import_react48.useMemo)(
-    () => import_react48.Children.toArray(children).flatMap(
-      (child) => (0, import_react48.isValidElement)(child) ? [child] : []
+var ListViewRoot = (0, import_react49.memo)(ListViewRootInner);
+var ChildrenListViewInner = (0, import_react49.forwardRef)(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
+  const items = (0, import_react49.useMemo)(
+    () => import_react49.Children.toArray(children).flatMap(
+      (child) => (0, import_react49.isValidElement)(child) ? [child] : []
     ),
     [children]
   );
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     ListViewRoot,
     {
       ref: forwardedRef,
       ...rest,
       data: items,
-      keyExtractor: (0, import_react48.useCallback)(
+      keyExtractor: (0, import_react49.useCallback)(
         ({ key }, index) => typeof key === "string" ? key : (key ?? index).toString(),
         []
       ),
-      renderItem: (0, import_react48.useCallback)((item) => item, [])
+      renderItem: (0, import_react49.useCallback)((item) => item, [])
     }
   );
 });
-var ChildrenListView = (0, import_react48.memo)(ChildrenListViewInner);
-var SimpleListViewInner = (0, import_react48.forwardRef)(function SimpleListViewInner2(props, forwardedRef) {
+var ChildrenListView = (0, import_react49.memo)(ChildrenListViewInner);
+var SimpleListViewInner = (0, import_react49.forwardRef)(function SimpleListViewInner2(props, forwardedRef) {
   if ("children" in props) {
-    return /* @__PURE__ */ import_react48.default.createElement(ChildrenListView, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ import_react49.default.createElement(ChildrenListView, { ref: forwardedRef, ...props });
   } else {
-    return /* @__PURE__ */ import_react48.default.createElement(ListViewRoot, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ import_react49.default.createElement(ListViewRoot, { ref: forwardedRef, ...props });
   }
 });
-var SimpleListView = (0, import_react48.memo)(SimpleListViewInner);
+var SimpleListView = (0, import_react49.memo)(SimpleListViewInner);
 var ListView;
 ((ListView2) => {
-  ListView2.RowTitle = (0, import_react48.memo)(ListViewRowTitle);
-  ListView2.EditableRowTitle = (0, import_react48.memo)(ListViewEditableRowTitle);
-  ListView2.Row = (0, import_react48.memo)(ListViewRow);
+  ListView2.RowTitle = (0, import_react49.memo)(ListViewRowTitle);
+  ListView2.EditableRowTitle = (0, import_react49.memo)(ListViewEditableRowTitle);
+  ListView2.Row = (0, import_react49.memo)(ListViewRow);
   ListView2.Root = SimpleListView;
   ListView2.RowContext = ListRowContext;
   ListView2.DragIndicator = ListViewDragIndicatorElement;
@@ -5033,7 +5058,7 @@ var ListView;
 })(ListView || (ListView = {}));
 
 // src/components/Text.tsx
-var import_react49 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var import_styled_components26 = __toESM(require("styled-components"));
 var elements = {
   title: "h1",
@@ -5049,13 +5074,13 @@ var elements = {
   code: "code",
   label: "span"
 };
-var StyledElement = import_styled_components26.default.span(({ theme, variant, styleProps, breakpoints, color }) => ({
-  ...theme.textStyles[variant],
-  color: color ? theme.colors[color] : void 0,
-  ...styleProps,
-  ...mergeBreakpoints(breakpoints || [])
+var StyledElement = import_styled_components26.default.span(({ theme, $variant, $styleProps, $breakpoints, $color }) => ({
+  ...theme.textStyles[$variant],
+  color: $color ? theme.colors[$color] : void 0,
+  ...$styleProps,
+  ...mergeBreakpoints($breakpoints || [])
 }));
-var Text = (0, import_react49.forwardRef)(function Text2({
+var Text = (0, import_react50.forwardRef)(function Text2({
   as,
   variant,
   breakpoints,
@@ -5067,44 +5092,44 @@ var Text = (0, import_react49.forwardRef)(function Text2({
   ...rest
 }, forwardedRef) {
   const element = as ?? elements[variant] ?? "span";
-  return /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react50.default.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 = (0, import_react49.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react49.default.createElement(Text, { ref, ...props, variant: "heading1" })
+var Heading1 = (0, import_react50.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react50.default.createElement(Text, { ref, ...props, variant: "heading1" })
 );
-var Heading2 = (0, import_react49.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react49.default.createElement(Text, { ref, ...props, variant: "heading2" })
+var Heading2 = (0, import_react50.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react50.default.createElement(Text, { ref, ...props, variant: "heading2" })
 );
-var Heading3 = (0, import_react49.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react49.default.createElement(Text, { ref, ...props, variant: "heading3" })
+var Heading3 = (0, import_react50.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react50.default.createElement(Text, { ref, ...props, variant: "heading3" })
 );
-var Heading4 = (0, import_react49.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react49.default.createElement(Text, { ref, ...props, variant: "heading4" })
+var Heading4 = (0, import_react50.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react50.default.createElement(Text, { ref, ...props, variant: "heading4" })
 );
-var Heading5 = (0, import_react49.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react49.default.createElement(Text, { ref, ...props, variant: "heading5" })
+var Heading5 = (0, import_react50.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react50.default.createElement(Text, { ref, ...props, variant: "heading5" })
 );
-var Body = (0, import_react49.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react49.default.createElement(Text, { ref, ...props, variant: "body" })
+var Body = (0, import_react50.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react50.default.createElement(Text, { ref, ...props, variant: "body" })
 );
-var Small = (0, import_react49.forwardRef)(
-  (props, ref) => /* @__PURE__ */ import_react49.default.createElement(Text, { ref, ...props, variant: "small" })
+var Small = (0, import_react50.forwardRef)(
+  (props, ref) => /* @__PURE__ */ import_react50.default.createElement(Text, { ref, ...props, variant: "small" })
 );
-var Italic = ({ children }) => /* @__PURE__ */ import_react49.default.createElement(
+var Italic = ({ children }) => /* @__PURE__ */ import_react50.default.createElement(
   "span",
   {
     style: {
@@ -5116,9 +5141,9 @@ var Italic = ({ children }) => /* @__PURE__ */ import_react49.default.createElem
 
 // src/components/InputFieldWithCompletions.tsx
 function filterWithGroupedSections(items, query) {
-  const sections = (0, import_noya_utils9.chunkBy)(items, (a, b) => b.type !== "sectionHeader");
+  const sections = (0, import_noya_utils8.chunkBy)(items, (a, b) => b.type !== "sectionHeader");
   return sections.flatMap((section) => {
-    const [headers, regular] = (0, import_noya_utils9.partition)(
+    const [headers, regular] = (0, import_noya_utils8.partition)(
       section,
       (item) => item.type === "sectionHeader"
     );
@@ -5141,20 +5166,20 @@ function filterWithGroupedSections(items, query) {
   });
 }
 var CompletionToken = import_styled_components27.default.span(
-  ({ type }) => ({
-    fontWeight: type === "match" ? "bold" : "normal",
+  ({ $type }) => ({
+    fontWeight: $type === "match" ? "bold" : "normal",
     whiteSpace: "pre"
   })
 );
-var CompletionMenu = (0, import_react50.memo)(
-  (0, import_react50.forwardRef)(function CompletionMenu2({
+var CompletionMenu = (0, import_react51.memo)(
+  (0, import_react51.forwardRef)(function CompletionMenu2({
     items,
     selectedIndex,
     onSelectItem,
     onHoverIndex,
     listSize
   }, forwardedRef) {
-    return /* @__PURE__ */ import_react50.default.createElement(
+    return /* @__PURE__ */ import_react51.default.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -5166,13 +5191,13 @@ var CompletionMenu = (0, import_react50.memo)(
         sectionHeaderVariant: "label",
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ import_react50.default.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
+            return /* @__PURE__ */ import_react51.default.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
           }
           const tokens = fuzzyTokenize({
             item: item.name,
             itemScore: item
           });
-          return /* @__PURE__ */ import_react50.default.createElement(
+          return /* @__PURE__ */ import_react51.default.createElement(
             ListView.Row,
             {
               key: item.id,
@@ -5184,16 +5209,16 @@ var CompletionMenu = (0, import_react50.memo)(
                 }
               }
             },
-            tokens.map((token, j) => /* @__PURE__ */ import_react50.default.createElement(CompletionToken, { key: j, type: token.type }, token.text)),
-            item.icon && /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(Spacer.Horizontal, null), item.icon)
+            tokens.map((token, j) => /* @__PURE__ */ import_react51.default.createElement(CompletionToken, { key: j, $type: token.type }, token.text)),
+            item.icon && /* @__PURE__ */ import_react51.default.createElement(import_react51.default.Fragment, null, /* @__PURE__ */ import_react51.default.createElement(Spacer.Horizontal, null), item.icon)
           );
         }
       }
     );
   })
 );
-var InputFieldWithCompletions = (0, import_react50.memo)(
-  (0, import_react50.forwardRef)(function InputFieldWithCompletions2({
+var InputFieldWithCompletions = (0, import_react51.memo)(
+  (0, import_react51.forwardRef)(function InputFieldWithCompletions2({
     loading,
     initialValue = "",
     placeholder,
@@ -5211,13 +5236,13 @@ var InputFieldWithCompletions = (0, import_react50.memo)(
     hideChildrenWhenFocused = false,
     hideMenuWhenEmptyValue = false
   }, forwardedRef) {
-    const ref = (0, import_react50.useRef)(null);
-    const [isFocused, setIsFocused] = (0, import_react50.useState)(false);
-    const [state, _setState] = (0, import_react50.useState)({
+    const ref = (0, import_react51.useRef)(null);
+    const [isFocused, setIsFocused] = (0, import_react51.useState)(false);
+    const [state, _setState] = (0, import_react51.useState)({
       filter: initialValue,
       selectedIndex: 0
     });
-    const updateState = (0, import_react50.useCallback)(
+    const updateState = (0, import_react51.useCallback)(
       (newState, hoverItem) => {
         const nextState = { ...state, ...newState };
         const nextItems = filterWithGroupedSections(items, nextState.filter);
@@ -5246,20 +5271,20 @@ var InputFieldWithCompletions = (0, import_react50.memo)(
       },
       [items, onChange, onHoverItem, state]
     );
-    const initialValueRef = (0, import_react50.useRef)(initialValue);
-    (0, import_react50.useLayoutEffect)(() => {
+    const initialValueRef = (0, import_react51.useRef)(initialValue);
+    (0, import_react51.useLayoutEffect)(() => {
       if (initialValueRef.current === initialValue)
         return;
       initialValueRef.current = initialValue;
       updateState({ filter: initialValue });
     }, [initialValue, updateState]);
     const { filter, selectedIndex } = state;
-    const listRef = import_react50.default.useRef(null);
-    const filteredItems = (0, import_react50.useMemo)(
+    const listRef = import_react51.default.useRef(null);
+    const filteredItems = (0, import_react51.useMemo)(
       () => filterWithGroupedSections(items, filter),
       [items, filter]
     );
-    const [normalItems, sectionHeaderItems] = (0, import_noya_utils9.partition)(
+    const [normalItems, sectionHeaderItems] = (0, import_noya_utils8.partition)(
       filteredItems,
       (item) => item.type !== "sectionHeader"
     );
@@ -5271,13 +5296,13 @@ var InputFieldWithCompletions = (0, import_react50.memo)(
       ),
       ListView.rowHeight * 10.5
     );
-    (0, import_react50.useEffect)(() => {
+    (0, import_react51.useEffect)(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
-    const lastSubmittedValueRef = (0, import_react50.useRef)(void 0);
-    const selectItem = (0, import_react50.useCallback)(
+    const lastSubmittedValueRef = (0, import_react51.useRef)(void 0);
+    const selectItem = (0, import_react51.useCallback)(
       (item) => {
         if (item.type === "sectionHeader")
           return;
@@ -5293,17 +5318,17 @@ var InputFieldWithCompletions = (0, import_react50.memo)(
       },
       [filter, onSelectItem, onHoverItem, ref]
     );
-    const handleChange = (0, import_react50.useCallback)(
+    const handleChange = (0, import_react51.useCallback)(
       (value) => updateState({ selectedIndex: 0, filter: value }),
       [updateState]
     );
-    const handleBlur = (0, import_react50.useCallback)(() => {
+    const handleBlur = (0, import_react51.useCallback)(() => {
       setIsFocused(false);
       const didSubmit = lastSubmittedValueRef.current?.filter === filter;
       updateState({ selectedIndex: 0, filter: initialValue }, "resetHover");
       onBlur?.(didSubmit, filter);
     }, [filter, initialValue, onBlur, updateState]);
-    const handleFocus = (0, import_react50.useCallback)(
+    const handleFocus = (0, import_react51.useCallback)(
       (event) => {
         setIsFocused(true);
         updateState({ selectedIndex: 0, filter: initialValue });
@@ -5311,11 +5336,11 @@ var InputFieldWithCompletions = (0, import_react50.memo)(
       },
       [initialValue, onFocus, updateState]
     );
-    const handleIndexChange = (0, import_react50.useCallback)(
+    const handleIndexChange = (0, import_react51.useCallback)(
       (index) => updateState({ selectedIndex: index }),
       [updateState]
     );
-    const handleKeyDown = (0, import_react50.useCallback)(
+    const handleKeyDown = (0, import_react51.useCallback)(
       (event) => {
         let handled = false;
         switch (event.key) {
@@ -5379,7 +5404,7 @@ var InputFieldWithCompletions = (0, import_react50.memo)(
     );
     const display = !filter && hideMenuWhenEmptyValue ? "none" : "flex";
     const typeaheadValue = filteredItems[selectedIndex]?.name;
-    (0, import_react50.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react51.useImperativeHandle)(forwardedRef, () => ({
       focus: () => {
         ref.current?.focus();
       },
@@ -5390,14 +5415,14 @@ var InputFieldWithCompletions = (0, import_react50.memo)(
         ref.current?.setSelectionRange(0, ref.current.value.length);
       }
     }));
-    return /* @__PURE__ */ import_react50.default.createElement(
+    return /* @__PURE__ */ import_react51.default.createElement(
       InputField.Root,
       {
         size: size2,
         labelSize: 16,
         renderPopoverContent: ({ width }) => {
           const listSize = { width, height };
-          return /* @__PURE__ */ import_react50.default.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ import_react50.default.createElement(
+          return /* @__PURE__ */ import_react51.default.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ import_react51.default.createElement(
             CompletionMenu,
             {
               ref: listRef,
@@ -5407,7 +5432,7 @@ var InputFieldWithCompletions = (0, import_react50.memo)(
               onHoverIndex: handleIndexChange,
               listSize
             }
-          ) : /* @__PURE__ */ import_react50.default.createElement(
+          ) : /* @__PURE__ */ import_react51.default.createElement(
             Stack.V,
             {
               height: "100px",
@@ -5415,11 +5440,11 @@ var InputFieldWithCompletions = (0, import_react50.memo)(
               alignItems: "center",
               justifyContent: "center"
             },
-            /* @__PURE__ */ import_react50.default.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
+            /* @__PURE__ */ import_react51.default.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
           ));
         }
       },
-      /* @__PURE__ */ import_react50.default.createElement(
+      /* @__PURE__ */ import_react51.default.createElement(
         InputField.Input,
         {
           ref,
@@ -5443,9 +5468,9 @@ var InputFieldWithCompletions = (0, import_react50.memo)(
           "aria-controls": "component-listbox"
         }
       ),
-      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ import_react50.default.createElement(InputField.Typeahead, { value: typeaheadValue }),
+      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ import_react51.default.createElement(InputField.Typeahead, { value: typeaheadValue }),
       (!isFocused || !hideChildrenWhenFocused) && children,
-      loading && isFocused && /* @__PURE__ */ import_react50.default.createElement(InputField.Label, null, /* @__PURE__ */ import_react50.default.createElement(ActivityIndicator, null))
+      loading && isFocused && /* @__PURE__ */ import_react51.default.createElement(InputField.Label, null, /* @__PURE__ */ import_react51.default.createElement(ActivityIndicator, null))
     );
   })
 );
@@ -5467,13 +5492,13 @@ function getNextIndex(items, currentIndex, direction, isDisabled) {
 }
 
 // src/components/Label.tsx
-var import_react51 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var import_styled_components28 = __toESM(require("styled-components"));
 var LabelLabel = import_styled_components28.default.label(
-  ({ theme, selected }) => ({
+  ({ theme, $selected }) => ({
     ...theme.textStyles.small,
     color: theme.colors.textMuted,
-    ...selected && {
+    ...$selected && {
       color: theme.colors.text
     },
     fontSize: "11px",
@@ -5496,17 +5521,17 @@ var LabelContainer2 = import_styled_components28.default.span(({ theme }) => ({
   alignItems: "center"
 }));
 function LabelRoot({ label, children }) {
-  return /* @__PURE__ */ import_react51.default.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ import_react51.default.createElement(import_react51.default.Fragment, null, /* @__PURE__ */ import_react51.default.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ import_react51.default.createElement(LabelLabel, null, label)));
+  return /* @__PURE__ */ import_react52.default.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ import_react52.default.createElement(import_react52.default.Fragment, null, /* @__PURE__ */ import_react52.default.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ import_react52.default.createElement(LabelLabel, null, label)));
 }
 var Label;
 ((_Label) => {
-  _Label.Label = (0, import_react51.memo)(LabelLabel);
-  _Label.Root = (0, import_react51.memo)(LabelRoot);
+  _Label.Label = (0, import_react52.memo)(LabelLabel);
+  _Label.Root = (0, import_react52.memo)(LabelRoot);
 })(Label || (Label = {}));
 
 // src/components/LabeledElementView.tsx
 var kiwi = __toESM(require("kiwi.js"));
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var import_styled_components29 = __toESM(require("styled-components"));
 var Container4 = import_styled_components29.default.div(({ theme }) => ({
   display: "flex",
@@ -5525,24 +5550,24 @@ var Labels = import_styled_components29.default.div(({ theme }) => ({
   overflow: "hidden",
   userSelect: "none"
 }));
-var LabeledElementView = (0, import_react52.memo)(function LabeledElementView2({
+var LabeledElementView = (0, import_react53.memo)(function LabeledElementView2({
   children,
   renderLabel
 }) {
-  const elementIds = import_react52.Children.toArray(children).flatMap(
-    (child) => (0, import_react52.isValidElement)(child) && child.type === import_react52.Fragment ? child.props.children : [child]
+  const elementIds = import_react53.Children.toArray(children).flatMap(
+    (child) => (0, import_react53.isValidElement)(child) && child.type === import_react53.Fragment ? child.props.children : [child]
   ).map(
-    (child) => (0, import_react52.isValidElement)(child) && "id" in child.props ? child.props.id : null
+    (child) => (0, import_react53.isValidElement)(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = (0, import_react52.useRef)(null);
-  const refs = (0, import_react52.useMemo)(() => {
+  const containerRef = (0, import_react53.useRef)(null);
+  const refs = (0, import_react53.useMemo)(() => {
     return Object.fromEntries(
-      serializedIds.split(",").map((id) => [id, (0, import_react52.createRef)()])
+      serializedIds.split(",").map((id) => [id, (0, import_react53.createRef)()])
     );
   }, [serializedIds]);
-  const labelElements = (0, import_react52.useMemo)(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ import_react52.default.createElement(
+  const labelElements = (0, import_react53.useMemo)(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ import_react53.default.createElement(
       "span",
       {
         key: id,
@@ -5555,7 +5580,7 @@ var LabeledElementView = (0, import_react52.memo)(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  (0, import_react52.useLayoutEffect)(() => {
+  (0, import_react53.useLayoutEffect)(() => {
     if (!containerRef.current)
       return;
     const containerRect = containerRef.current.getBoundingClientRect();
@@ -5620,13 +5645,13 @@ var LabeledElementView = (0, import_react52.memo)(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ import_react52.default.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ import_react52.default.createElement(Tools, null, children), /* @__PURE__ */ import_react52.default.createElement(Labels, null, labelElements));
+  return /* @__PURE__ */ import_react53.default.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ import_react53.default.createElement(Tools, null, children), /* @__PURE__ */ import_react53.default.createElement(Labels, null, labelElements));
 });
 
 // src/components/Progress.tsx
-var import_noya_utils10 = require("@noya-app/noya-utils");
+var import_noya_utils9 = require("@noya-app/noya-utils");
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var import_react53 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 var import_styled_components30 = __toESM(require("styled-components"));
 function Progress({
   value,
@@ -5635,8 +5660,8 @@ function Progress({
   flex,
   variant = "normal"
 }) {
-  const clampedValue = (0, import_noya_utils10.clamp)(value, 0, 100);
-  return /* @__PURE__ */ import_react53.default.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ import_react53.default.createElement(
+  const clampedValue = (0, import_noya_utils9.clamp)(value, 0, 100);
+  return /* @__PURE__ */ import_react54.default.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ import_react54.default.createElement(
     ProgressIndicator,
     {
       variant,
@@ -5661,11 +5686,11 @@ var ProgressIndicator = (0, import_styled_components30.default)(ProgressPrimitiv
 
 // src/components/RadioGroup.tsx
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"));
-var import_react54 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 var import_styled_components31 = __toESM(require("styled-components"));
-var ignoredProps3 = /* @__PURE__ */ new Set(["colorScheme"]);
+var ignoredProps2 = /* @__PURE__ */ new Set(["colorScheme"]);
 var StyledRoot = (0, import_styled_components31.default)(ToggleGroupPrimitive.Root).withConfig({
-  shouldForwardProp: (prop) => !ignoredProps3.has(prop)
+  shouldForwardProp: (prop) => !ignoredProps2.has(prop)
 })(({ theme, colorScheme }) => ({
   appearance: "none",
   width: "0px",
@@ -5688,7 +5713,7 @@ var StyledRoot = (0, import_styled_components31.default)(ToggleGroupPrimitive.Ro
   padding: colorScheme === void 0 ? "2px" : 0
 }));
 var StyledItem = (0, import_styled_components31.default)(ToggleGroupPrimitive.Item).withConfig({
-  shouldForwardProp: (prop) => !ignoredProps3.has(prop)
+  shouldForwardProp: (prop) => !ignoredProps2.has(prop)
 })(({ theme, colorScheme }) => ({
   ...theme.textStyles.small,
   position: "relative",
@@ -5714,9 +5739,9 @@ var StyledItem = (0, import_styled_components31.default)(ToggleGroupPrimitive.It
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors[colorScheme ?? "primary"]}`
   }
 }));
-var ToggleGroupItem = (0, import_react54.forwardRef)(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
-  const { colorScheme } = (0, import_react54.useContext)(RadioGroupContext);
-  const itemElement = /* @__PURE__ */ import_react54.default.createElement(
+var ToggleGroupItem = (0, import_react55.forwardRef)(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
+  const { colorScheme } = (0, import_react55.useContext)(RadioGroupContext);
+  const itemElement = /* @__PURE__ */ import_react55.default.createElement(
     StyledItem,
     {
       ref: forwardedRef,
@@ -5726,9 +5751,9 @@ var ToggleGroupItem = (0, import_react54.forwardRef)(function ToggleGroupItem2({
     },
     children
   );
-  return tooltip ? /* @__PURE__ */ import_react54.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ import_react55.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
-var RadioGroupContext = (0, import_react54.createContext)({
+var RadioGroupContext = (0, import_react55.createContext)({
   colorScheme: "primary"
 });
 function ToggleGroupRoot({
@@ -5739,8 +5764,8 @@ function ToggleGroupRoot({
   allowEmpty,
   children
 }) {
-  const contextValue = (0, import_react54.useMemo)(() => ({ colorScheme }), [colorScheme]);
-  const handleValueChange = (0, import_react54.useCallback)(
+  const contextValue = (0, import_react55.useMemo)(() => ({ colorScheme }), [colorScheme]);
+  const handleValueChange = (0, import_react55.useCallback)(
     (value2) => {
       if (!allowEmpty && !value2)
         return;
@@ -5748,7 +5773,7 @@ function ToggleGroupRoot({
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ import_react54.default.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react54.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react55.default.createElement(
     StyledRoot,
     {
       id,
@@ -5762,53 +5787,53 @@ function ToggleGroupRoot({
 }
 var RadioGroup;
 ((RadioGroup2) => {
-  RadioGroup2.Root = (0, import_react54.memo)(ToggleGroupRoot);
-  RadioGroup2.Item = (0, import_react54.memo)(ToggleGroupItem);
+  RadioGroup2.Root = (0, import_react55.memo)(ToggleGroupRoot);
+  RadioGroup2.Item = (0, import_react55.memo)(ToggleGroupItem);
 })(RadioGroup || (RadioGroup = {}));
 
 // src/components/Select.tsx
-var import_noya_utils11 = require("@noya-app/noya-utils");
-var import_react55 = __toESM(require("react"));
+var import_noya_utils10 = require("@noya-app/noya-utils");
+var import_react56 = __toESM(require("react"));
 var import_styled_components32 = __toESM(require("styled-components"));
-var SelectContext = (0, import_react55.createContext)(void 0);
-var SelectOption = (0, import_react55.memo)(function SelectOption2({
+var SelectContext = (0, import_react56.createContext)(void 0);
+var SelectOption = (0, import_react56.memo)(function SelectOption2({
   value,
   title,
   onSelect
 }) {
-  const { addListener, removeListener } = (0, import_react55.useContext)(SelectContext);
-  (0, import_react55.useEffect)(() => {
+  const { addListener, removeListener } = (0, import_react56.useContext)(SelectContext);
+  (0, import_react56.useEffect)(() => {
     if (!onSelect)
       return;
     addListener(value, onSelect);
     return () => removeListener(value);
   }, [addListener, onSelect, removeListener, value]);
-  return /* @__PURE__ */ import_react55.default.createElement("option", { value }, title ?? value);
+  return /* @__PURE__ */ import_react56.default.createElement("option", { value }, title ?? value);
 });
-var createChevronSVGString = (0, import_noya_utils11.memoize)(
+var createChevronSVGString = (0, import_noya_utils10.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 = import_styled_components32.default.div(
-  ({ flex }) => ({
-    flex: flex ?? "1 1 0px",
+  ({ $flex }) => ({
+    flex: $flex ?? "1 1 0px",
     display: "flex",
     flexDirection: "row",
     position: "relative"
   })
 );
 var SelectElement = import_styled_components32.default.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",
@@ -5845,7 +5870,7 @@ var SelectLabel = import_styled_components32.default.label(({ theme }) => ({
   justifyContent: "end",
   paddingRight: "24px"
 }));
-var Select = (0, import_react55.memo)(function Select2({
+var Select = (0, import_react56.memo)(function Select2({
   id,
   flex,
   value,
@@ -5856,8 +5881,8 @@ var Select = (0, import_react55.memo)(function Select2({
   const getTitle = "options" in rest ? rest.getTitle : void 0;
   const onChange = "options" in rest ? rest.onChange : void 0;
   const children = "options" in rest ? void 0 : rest.children;
-  const optionElements = (0, import_react55.useMemo)(
-    () => options ? options.map((option, index) => /* @__PURE__ */ import_react55.default.createElement(
+  const optionElements = (0, import_react56.useMemo)(
+    () => options ? options.map((option, index) => /* @__PURE__ */ import_react56.default.createElement(
       SelectOption,
       {
         key: option,
@@ -5868,33 +5893,33 @@ var Select = (0, import_react55.memo)(function Select2({
     )) : children,
     [children, getTitle, onChange, options]
   );
-  const listeners = (0, import_react55.useRef)(/* @__PURE__ */ new Map());
-  const contextValue = (0, import_react55.useMemo)(
+  const listeners = (0, import_react56.useRef)(/* @__PURE__ */ new Map());
+  const contextValue = (0, import_react56.useMemo)(
     () => ({
       addListener: (value2, listener) => listeners.current.set(value2, listener),
       removeListener: (value2) => listeners.current.delete(value2)
     }),
     []
   );
-  return /* @__PURE__ */ import_react55.default.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react55.default.createElement(SelectContainer, { flex }, /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react56.default.createElement(SelectContainer, { $flex: flex }, /* @__PURE__ */ import_react56.default.createElement(
     SelectElement,
     {
       id,
-      flex,
+      $flex: flex,
       value,
-      onChange: (0, import_react55.useCallback)(
+      onChange: (0, import_react56.useCallback)(
         (event) => listeners.current.get(event.target.value)?.(),
         [listeners]
       ),
       onPointerDown: (event) => event.stopPropagation()
     },
     optionElements
-  )), label && /* @__PURE__ */ import_react55.default.createElement(SelectLabel, { htmlFor: id }, label));
+  )), label && /* @__PURE__ */ import_react56.default.createElement(SelectLabel, { htmlFor: id }, label));
 });
 
 // src/components/Slider.tsx
 var RadixSlider = __toESM(require("@radix-ui/react-slider"));
-var import_react56 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 var import_styled_components33 = __toESM(require("styled-components"));
 var StyledSlider = (0, import_styled_components33.default)(RadixSlider.Root)({
   flex: "1",
@@ -5935,17 +5960,17 @@ var Slider = function Slider2({
   min,
   max
 }) {
-  const arrayValue = (0, import_react56.useMemo)(
+  const arrayValue = (0, import_react57.useMemo)(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
-  const handleValueChange = (0, import_react56.useCallback)(
+  const handleValueChange = (0, import_react57.useCallback)(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ import_react56.default.createElement(
+  return /* @__PURE__ */ import_react57.default.createElement(
     StyledSlider,
     {
       min,
@@ -5954,16 +5979,16 @@ var Slider = function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange
     },
-    /* @__PURE__ */ import_react56.default.createElement(StyledTrack, null, /* @__PURE__ */ import_react56.default.createElement(StyledRange, null)),
-    /* @__PURE__ */ import_react56.default.createElement(StyledThumb2, null)
+    /* @__PURE__ */ import_react57.default.createElement(StyledTrack, null, /* @__PURE__ */ import_react57.default.createElement(StyledRange, null)),
+    /* @__PURE__ */ import_react57.default.createElement(StyledThumb2, null)
   );
 };
 
 // src/components/Switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var import_react57 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var import_styled_components34 = __toESM(require("styled-components"));
-var SwitchRoot = (0, import_styled_components34.default)(SwitchPrimitive.Root)(({ theme, colorScheme: variant }) => ({
+var SwitchRoot = (0, import_styled_components34.default)(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
   all: "unset",
   width: 32,
   height: 19,
@@ -5972,13 +5997,12 @@ var SwitchRoot = (0, import_styled_components34.default)(SwitchPrimitive.Root)((
   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 = (0, import_styled_components34.default)(SwitchPrimitive.Thumb)({
@@ -5997,51 +6021,51 @@ var Switch = function Switch2({
   onChange,
   colorScheme = "normal"
 }) {
-  return /* @__PURE__ */ import_react57.default.createElement(
+  return /* @__PURE__ */ import_react58.default.createElement(
     SwitchRoot,
     {
-      colorScheme,
+      $colorScheme: colorScheme,
       checked: value,
       onCheckedChange: (newValue) => {
         onChange(newValue);
       }
     },
-    /* @__PURE__ */ import_react57.default.createElement(SwitchThumb, null)
+    /* @__PURE__ */ import_react58.default.createElement(SwitchThumb, null)
   );
 };
 
 // src/components/TreeView.tsx
-var import_react58 = __toESM(require("react"));
-var TreeRow = (0, import_react58.forwardRef)(function TreeRow2({
+var import_react59 = __toESM(require("react"));
+var TreeRow = (0, import_react59.forwardRef)(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
   children,
   ...rest
 }, forwardedRef) {
-  const { expandable } = (0, import_react58.useContext)(ListView.RowContext);
-  const handleClickChevron = (0, import_react58.useCallback)(
+  const { expandable } = (0, import_react59.useContext)(ListView.RowContext);
+  const handleClickChevron = (0, import_react59.useCallback)(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ import_react58.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react58.default.createElement(
+  return /* @__PURE__ */ import_react59.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react59.default.createElement(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon" : "ChevronRightIcon",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, icon, /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, icon, /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
   TreeView2.Root = ListView.Root;
   TreeView2.RowTitle = ListView.RowTitle;
   TreeView2.EditableRowTitle = ListView.EditableRowTitle;
-  TreeView2.Row = (0, import_react58.memo)(TreeRow);
+  TreeView2.Row = (0, import_react59.memo)(TreeRow);
 })(TreeView || (TreeView = {}));
 
 // src/hooks/usePlatform.ts
@@ -6082,7 +6106,8 @@ var colors2 = (0, import_immer.default)(colors, (colors3) => {
   colors3.canvas.background = "rgb(20,19,23)";
   colors3.canvas.sliceOutline = "rgb(150,150,150)";
   colors3.canvas.grid = "rgba(0,0,0,0.1)";
-  colors3.sidebar.background = "rgba(34,33,39,0.95)";
+  colors3.sidebar.background = "rgb(34,33,39)";
+  colors3.sidebar.backgroundTransparent = "rgba(34,33,39,0.95)";
   colors3.popover.background = "rgba(34,33,39,1)";
   colors3.popover.divider = colors3.divider;
   colors3.listView.raisedBackground = "rgba(181,178,255,0.1)";
@@ -6134,8 +6159,8 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 ];
 
 // src/components/ArrayController.tsx
-var import_noya_utils12 = require("@noya-app/noya-utils");
-var import_react60 = __toESM(require("react"));
+var import_noya_utils11 = require("@noya-app/noya-utils");
+var import_react61 = __toESM(require("react"));
 var import_styled_components36 = __toESM(require("styled-components"));
 
 // src/components/InspectorPrimitives.tsx
@@ -6154,25 +6179,25 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react59 = __toESM(require("react"));
+var import_react60 = __toESM(require("react"));
 var import_styled_components35 = __toESM(require("styled-components"));
-var Section = import_styled_components35.default.div(({ theme, padding = "10px", gap }) => ({
+var Section = import_styled_components35.default.div(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
   display: "flex",
   flexDirection: "column",
-  padding,
-  gap
+  padding: $padding,
+  gap: $gap
 }));
 var SectionHeader = import_styled_components35.default.div(({ theme }) => ({
   display: "flex",
   alignItems: "center"
 }));
-var Title3 = import_styled_components35.default.div(({ theme, textStyle }) => ({
+var Title3 = import_styled_components35.default.div(({ theme, $textStyle }) => ({
   display: "flex",
   flexDirection: "row",
   userSelect: "none",
-  ...textStyle ? {
-    ...theme.textStyles[textStyle],
+  ...$textStyle ? {
+    ...theme.textStyles[$textStyle],
     color: theme.colors.text
   } : {
     ...theme.textStyles.label,
@@ -6181,12 +6206,12 @@ var Title3 = import_styled_components35.default.div(({ theme, textStyle }) => ({
   }
 }));
 var Row2 = import_styled_components35.default.div(
-  ({ theme, gap }) => ({
+  ({ theme, $gap }) => ({
     flex: "1",
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    gap
+    gap: $gap
   })
 );
 var Column = import_styled_components35.default.div(({ theme }) => ({
@@ -6201,18 +6226,18 @@ var Checkbox = import_styled_components35.default.input(({ theme }) => ({
 var Text3 = import_styled_components35.default.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ import_react59.default.createElement(Spacer.Vertical, { size: (0, import_styled_components35.useTheme)().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components35.useTheme)().sizes.inspector.horizontalSeparator });
+var VerticalSeparator = () => /* @__PURE__ */ import_react60.default.createElement(Spacer.Vertical, { size: (0, import_styled_components35.useTheme)().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react60.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components35.useTheme)().sizes.inspector.horizontalSeparator });
 var SliderRowLabel = import_styled_components35.default.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
   marginBottom: "-6px"
 }));
-var RowLabel = import_styled_components35.default.span(({ theme, textStyle }) => ({
+var RowLabel = import_styled_components35.default.span(({ theme, $textStyle }) => ({
   // marginBottom: '6px',
   display: "flex",
-  ...textStyle ? {
-    ...theme.textStyles[textStyle]
+  ...$textStyle ? {
+    ...theme.textStyles[$textStyle]
   } : {
     ...theme.textStyles.label,
     color: theme.colors.textSubtle,
@@ -6222,7 +6247,7 @@ var RowLabel = import_styled_components35.default.span(({ theme, textStyle }) =>
   // Button height
   alignItems: "center"
 }));
-var LabeledRow = (0, import_react59.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react60.memo)(function LabeledRow2({
   id,
   children,
   label,
@@ -6230,13 +6255,13 @@ var LabeledRow = (0, import_react59.memo)(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ import_react59.default.createElement(Row2, { id }, /* @__PURE__ */ import_react59.default.createElement(Column, null, /* @__PURE__ */ import_react59.default.createElement(RowLabel, { textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react59.default.createElement(Row2, { gap }, children)));
+  return /* @__PURE__ */ import_react60.default.createElement(Row2, { id }, /* @__PURE__ */ import_react60.default.createElement(Column, null, /* @__PURE__ */ import_react60.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react60.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react60.default.createElement(Row2, { $gap: gap }, children)));
 });
-var LabeledSliderRow = (0, import_react59.memo)(function LabeledRow3({
+var LabeledSliderRow = (0, import_react60.memo)(function LabeledRow3({
   children,
   label
 }) {
-  return /* @__PURE__ */ import_react59.default.createElement(Row2, null, /* @__PURE__ */ import_react59.default.createElement(Column, null, /* @__PURE__ */ import_react59.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react59.default.createElement(Row2, null, children)));
+  return /* @__PURE__ */ import_react60.default.createElement(Row2, null, /* @__PURE__ */ import_react60.default.createElement(Column, null, /* @__PURE__ */ import_react60.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react60.default.createElement(Row2, null, children)));
 });
 
 // src/components/ArrayController.tsx
@@ -6249,7 +6274,7 @@ var ElementRow = import_styled_components36.default.div({
 var ItemContainer2 = import_styled_components36.default.div({
   position: "relative"
 });
-var ArrayController = (0, import_react60.memo)(function ArrayController2({
+var ArrayController = (0, import_react61.memo)(function ArrayController2({
   id,
   items,
   title,
@@ -6267,12 +6292,12 @@ var ArrayController = (0, import_react60.memo)(function ArrayController2({
 }) {
   const iconColor = (0, import_styled_components36.useTheme)().colors.icon;
   const primaryLightColor = (0, import_styled_components36.useTheme)().colors.primaryLight;
-  const keys = (0, import_react60.useMemo)(
+  const keys = (0, import_react61.useMemo)(
     () => items.map((item, index) => getKey?.(item) ?? index.toString()),
     [getKey, items]
   );
-  const indexes = reversed ? (0, import_noya_utils12.range)(0, items.length).reverse() : (0, import_noya_utils12.range)(0, items.length);
-  const handleMoveItem = (0, import_react60.useCallback)(
+  const indexes = reversed ? (0, import_noya_utils11.range)(0, items.length).reverse() : (0, import_noya_utils11.range)(0, items.length);
+  const handleMoveItem = (0, import_react61.useCallback)(
     (sourceIndex, destinationIndex, position) => {
       if (reversed) {
         if (position === "above") {
@@ -6289,11 +6314,11 @@ var ArrayController = (0, import_react60.memo)(function ArrayController2({
     [onMoveItem, reversed]
   );
   const renderRow = (index) => {
-    return /* @__PURE__ */ import_react60.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
+    return /* @__PURE__ */ import_react61.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
   };
-  return /* @__PURE__ */ import_react60.default.createElement(Section, { id, padding, gap: "2px" }, /* @__PURE__ */ import_react60.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react60.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react60.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react60.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
+  return /* @__PURE__ */ import_react61.default.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ import_react61.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react61.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react61.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react61.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
     [
-      onClickTrash && /* @__PURE__ */ import_react60.default.createElement(
+      onClickTrash && /* @__PURE__ */ import_react61.default.createElement(
         IconButton,
         {
           id: `${id}-trash`,
@@ -6302,7 +6327,7 @@ var ArrayController = (0, import_react60.memo)(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ import_react60.default.createElement(
+      onClickExpand && /* @__PURE__ */ import_react61.default.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -6311,7 +6336,7 @@ var ArrayController = (0, import_react60.memo)(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ import_react60.default.createElement(
+      onClickPlus && /* @__PURE__ */ import_react61.default.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -6321,33 +6346,33 @@ var ArrayController = (0, import_react60.memo)(function ArrayController2({
         }
       )
     ],
-    /* @__PURE__ */ import_react60.default.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ import_react60.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react60.default.createElement(
+    /* @__PURE__ */ import_react61.default.createElement(Spacer.Horizontal, { size: 8 })
+  )), /* @__PURE__ */ import_react61.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react61.default.createElement(
     Sortable.Root,
     {
       keys,
       renderOverlay: renderRow,
       onMoveItem: handleMoveItem
     },
-    indexes.map((index) => /* @__PURE__ */ import_react60.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react60.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react60.default.createElement(
+    indexes.map((index) => /* @__PURE__ */ import_react61.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react61.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react61.default.createElement(
       ListView.DragIndicator,
       {
-        gap: 0,
-        colorScheme: "primary",
-        relativeDropPosition,
-        offsetLeft: 0
+        $gap: 0,
+        $colorScheme: "primary",
+        $relativeDropPosition: relativeDropPosition,
+        $offsetLeft: 0
       }
     ))))
   ) : indexes.map(renderRow)), expanded && renderExpandedContent?.());
 });
 
 // src/components/DimensionInput.tsx
-var import_noya_utils13 = require("@noya-app/noya-utils");
-var import_react61 = __toESM(require("react"));
+var import_noya_utils12 = require("@noya-app/noya-utils");
+var import_react62 = __toESM(require("react"));
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = (0, import_react61.memo)(function DimensionInput2({
+var DimensionInput = (0, import_react62.memo)(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -6357,24 +6382,24 @@ var DimensionInput = (0, import_react61.memo)(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = (0, import_react61.useCallback)(
+  const handleNudgeValue = (0, import_react62.useCallback)(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = (0, import_react61.useCallback)(
+  const handleSetValue = (0, import_react62.useCallback)(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ import_react61.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react61.default.createElement(
+  return /* @__PURE__ */ import_react62.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react62.default.createElement(
     InputField.NumberInput,
     {
-      value: value === void 0 ? value : (0, import_noya_utils13.round)(value, 2),
+      value: value === void 0 ? value : (0, import_noya_utils12.round)(value, 2),
       placeholder: value === void 0 ? placeholder : void 0,
       onNudge: handleNudgeValue,
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ import_react61.default.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ import_react62.default.createElement(InputField.Label, null, label));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {