@noya-app/noya-designsystem 0.1.25 → 0.1.27

package/dist/index.js

@@ -32,6 +32,7 @@ var src_exports = {};
 __export(src_exports, {
   ActivityIndicator: () => ActivityIndicator,
   ArrayController: () => ArrayController,
+  AutoResizingTextArea: () => AutoResizingTextArea,
   Avatar: () => Avatar,
   AvatarStack: () => AvatarStack,
   Body: () => Body,
@@ -65,6 +66,7 @@ __export(src_exports, {
   Heading4: () => Heading4,
   Heading5: () => Heading5,
   IconButton: () => IconButton,
+  Icons: () => Icons,
   ImageDataProvider: () => ImageDataProvider,
   InputElement: () => InputElement,
   InputField: () => InputField,
@@ -110,11 +112,13 @@ __export(src_exports, {
   lightTheme: () => light_exports,
   mediaQuery: () => mediaQuery,
   normalizeListDestinationIndex: () => normalizeListDestinationIndex,
+  renderIcon: () => renderIcon,
   rgbaToSketchColor: () => rgbaToSketchColor,
   size: () => size,
   sketchColorToHex: () => sketchColorToHex,
   sketchColorToRgba: () => sketchColorToRgba,
   sketchColorToRgbaString: () => sketchColorToRgbaString,
+  useAutoResize: () => useAutoResize,
   useCurrentFloatingWindowInternal: () => useCurrentFloatingWindowInternal,
   useDesignSystemConfiguration: () => useDesignSystemConfiguration,
   useDesignSystemTheme: () => useDesignSystemTheme,
@@ -452,7 +456,13 @@ var ButtonElement = import_styled_components5.default.button(
       color: theme.colors.text,
       boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
       fontSize: "12px",
-      padding: "0px 4px"
+      padding: "0px 4px",
+      "&:hover": {
+        opacity: 0.8
+      },
+      "&:active": {
+        opacity: 0.9
+      }
     },
     display: "flex",
     alignItems: "center",
@@ -476,7 +486,7 @@ var ButtonContent = import_styled_components5.default.span(({ theme }) => ({
 var Button = (0, import_react6.forwardRef)(function Button2({
   id,
   className,
-  style: style3,
+  style: style2,
   flex,
   tabIndex,
   tooltip,
@@ -497,7 +507,7 @@ var Button = (0, import_react6.forwardRef)(function Button2({
       ref: forwardedRef,
       id,
       className,
-      style: style3,
+      style: style2,
       $flex: flex,
       tabIndex,
       $active: active,
@@ -551,14 +561,14 @@ var IconButton = (0, import_react8.memo)(
   (0, import_react8.forwardRef)(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
     const { icon: iconColor, iconSelected: iconSelectedColor } = (0, import_styled_components6.useTheme)().colors;
     const Icon = Icons[iconName];
-    const style3 = (0, import_react8.useMemo)(() => {
+    const style2 = (0, import_react8.useMemo)(() => {
       return {
         padding: "0 2px",
         ...size2 && { minHeight: size2 },
         ...contentStyle
       };
     }, [contentStyle, size2]);
-    return /* @__PURE__ */ import_react8.default.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style3 }, /* @__PURE__ */ import_react8.default.createElement(
+    return /* @__PURE__ */ import_react8.default.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style2 }, /* @__PURE__ */ import_react8.default.createElement(
       Icon,
       {
         color: color ?? (selected ? iconSelectedColor : iconColor),
@@ -661,26 +671,29 @@ var mediaQuery = {
 var name = "light";
 var colors = {
   logo: {
-    fill: "rgb(175,175,175)",
-    highlight: "rgb(175,175,175)"
+    fill: "rgb(150, 152, 172)",
+    highlight: "rgb(150, 152, 172)"
   },
+  background: "rgb(255,255,255)",
   text: "rgb(38, 48, 83)",
-  textMuted: "rgb(85, 85, 85)",
-  textSubtle: "rgb(121, 121, 121)",
-  textDisabled: "rgb(160, 160, 160)",
+  textMuted: "rgb(107, 113, 136)",
+  textSubtle: "rgb(117, 121, 129)",
+  textDisabled: "rgb(150, 152, 172)",
   textDecorativeLight: "rgb(168, 185, 212)",
-  dividerSubtle: "rgba(0, 0, 0, 0.04)",
-  divider: "rgba(0, 0, 0, 0.07)",
-  dividerStrong: "rgba(0, 0, 0, 0.09)",
-  primary: "rgb(132, 63, 255)",
+  dividerSubtle: "rgba(30, 50, 100, 0.04)",
+  divider: "rgba(30, 50, 100, 0.07)",
+  dividerStrong: "rgba(30, 50, 100, 0.09)",
+  primary: "rgb(103, 70, 255)",
   primaryLight: "rgb(147, 86, 255)",
+  primaryPastel: "rgba(234, 230, 255)",
   secondary: "rgb(0, 151, 117)",
   secondaryLight: "rgb(0, 160, 129)",
+  secondaryPastel: "rgb(205, 238, 231)",
   secondaryBright: "#0ab557",
   warning: "rgb(251, 211, 0)",
   neutralBackground: "rgb(222,223,232)",
-  inputBackground: "rgb(240, 240, 242)",
-  inputBackgroundLight: "rgb(243, 243, 245)",
+  inputBackground: "rgb(240, 242, 246)",
+  inputBackgroundLight: "rgb(243, 245, 249)",
   codeBackground: "rgb(250, 250, 250)",
   codeBackgroundLight: "rgb(250, 250, 250)",
   get codeBackgroundDark() {
@@ -708,6 +721,7 @@ var colors = {
     editingBackground: "#fff"
   },
   canvas: {
+    // background: "white",
     background: "rgb(249,249,249)",
     get selectionStroke() {
       return colors.primary;
@@ -718,8 +732,8 @@ var colors = {
     grid: "rgba(0,0,0,0.05)"
   },
   sidebar: {
-    background: "rgb(252,252,252)",
-    backgroundTransparent: "rgba(252,252,252,0.85)"
+    background: "rgb(255,255,255)",
+    backgroundTransparent: "rgba(255,255,255,0.85)"
   },
   popover: {
     background: "rgb(252,252,252)",
@@ -732,7 +746,7 @@ var colors = {
   radioGroup: {
     background: "white"
   },
-  icon: "rgb(139, 139, 139)",
+  icon: "rgb(129, 131, 165)",
   iconSelected: "rgb(220, 220, 220)",
   mask: "rgb(12,193,67)",
   imageOverlay: "linear-gradient(0deg, rgba(132, 63, 255,0.55), rgba(132, 63, 255,0.55))",
@@ -741,7 +755,13 @@ var colors = {
   },
   selection: "rgb(179,215,254)",
   thumbnailBackground: "#f0efff",
-  thumbnailShadow: "#D3CEED66"
+  thumbnailShadow: "#D3CEED66",
+  inlineCode: {
+    text: "rgb(103, 70, 255)",
+    background: "rgb(240, 242, 246)"
+  },
+  textLink: "rgb(103, 70, 255)",
+  textLinkFocused: "rgb(147, 86, 255)"
 };
 var fonts = {
   normal: "'__Inter_6b0edc', '__Inter_Fallback_6b0edc', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
@@ -772,41 +792,41 @@ var textStyles = {
   heading1: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[2]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.75",
+    fontWeight: 600,
+    lineHeight: "1.6",
     letterSpacing: "-0.025em"
   },
   heading2: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[3]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75",
+    lineHeight: "1.5",
     letterSpacing: "-0.025em"
   },
   heading3: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[4]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.75",
+    fontWeight: 400,
+    lineHeight: "1.4",
     letterSpacing: "-0.025em"
   },
   heading4: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[5]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75"
+    lineHeight: "1.4"
   },
   heading5: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[6]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75"
+    lineHeight: "1.4"
   },
   body: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[5]}rem`,
     fontWeight: 400,
-    lineHeight: "1.75"
+    lineHeight: "1.4"
   },
   small: {
     fontFamily: fonts.normal,
@@ -838,6 +858,9 @@ var textStyles = {
   }
 };
 var sizes = {
+  inset: {
+    top: 46
+  },
   sidebarWidth: 260,
   toolbar: {
     height: 46,
@@ -989,7 +1012,7 @@ var Dialog = (0, import_react11.forwardRef)(function Dialog2({
   title,
   description,
   open,
-  style: style3,
+  style: style2,
   onOpenChange,
   onOpenAutoFocus,
   closeOnInteractOutside = true
@@ -1007,7 +1030,7 @@ var Dialog = (0, import_react11.forwardRef)(function Dialog2({
     {
       ref: contentRef,
       onOpenAutoFocus,
-      style: style3,
+      style: style2,
       ...closeOnInteractOutside === false && {
         onPointerDownOutside: (event) => {
           event.preventDefault();
@@ -1023,7 +1046,7 @@ var Dialog = (0, import_react11.forwardRef)(function Dialog2({
     children
   ));
 });
-var FullscreenDialog = (0, import_react11.forwardRef)(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
+var FullscreenDialog = (0, import_react11.forwardRef)(function FullscreenDialog2({ style: style2, ...rest }, forwardedRef) {
   return /* @__PURE__ */ import_react11.default.createElement(
     Dialog,
     {
@@ -1039,7 +1062,7 @@ var FullscreenDialog = (0, import_react11.forwardRef)(function FullscreenDialog2
         display: "flex",
         flexDirection: "column",
         padding: 0,
-        ...style3
+        ...style2
       },
       ...rest
     }
@@ -1126,26 +1149,43 @@ var import_react14 = __toESM(require("react"));
 
 // ../noya-react-utils/src/hooks/useFileDropTarget.ts
 var import_react13 = require("react");
-function useFileDropTarget(dropEvent) {
+function useFileDropTarget(ref, dropEvent) {
   const [isDropTargetActive, setIsDropTargetActive] = (0, import_react13.useState)(false);
-  const handleDragEvent = (0, import_react13.useCallback)((event, on) => {
-    if (on !== void 0)
-      setIsDropTargetActive(on);
+  const handleDragOver = (0, import_react13.useCallback)((event) => {
     event.preventDefault();
   }, []);
-  const handleDropEvent = (0, import_react13.useCallback)(
+  const handleDragEnter = (0, import_react13.useCallback)(
+    (event) => {
+      event.preventDefault();
+      if (!ref.current?.contains(event.relatedTarget)) {
+        setIsDropTargetActive(true);
+      }
+    },
+    [ref]
+  );
+  const handleDragLeave = (0, import_react13.useCallback)(
+    (event) => {
+      event.preventDefault();
+      if (!ref.current?.contains(event.relatedTarget)) {
+        setIsDropTargetActive(false);
+      }
+    },
+    [ref]
+  );
+  const handleDrop = (0, import_react13.useCallback)(
     (event) => {
+      event.preventDefault();
       dropEvent(event);
       setIsDropTargetActive(false);
     },
-    [dropEvent, setIsDropTargetActive]
+    [dropEvent]
   );
   return {
     dropTargetProps: {
-      onDragOver: handleDragEvent,
-      onDragEnter: (event) => handleDragEvent(event, true),
-      onDragLeave: (event) => handleDragEvent(event, false),
-      onDrop: handleDropEvent
+      onDragOver: handleDragOver,
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop
     },
     isDropTargetActive
   };
@@ -1155,12 +1195,13 @@ function useFileDropTarget(dropEvent) {
 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_react14.memo)(function FileDropTarget2({
   children,
   onDropFiles,
-  supportedFileTypes
+  supportedFileTypes,
+  ...props
 }) {
+  const ref = (0, import_react14.useRef)(null);
   const handleFile = (0, import_react14.useCallback)(
     (event) => {
       event.preventDefault();
@@ -1193,8 +1234,11 @@ var FileDropTarget = (0, import_react14.memo)(function FileDropTarget2({
     },
     [onDropFiles, supportedFileTypes]
   );
-  const { dropTargetProps, isDropTargetActive } = useFileDropTarget(handleFile);
-  return /* @__PURE__ */ import_react14.default.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
+  const { dropTargetProps, isDropTargetActive } = useFileDropTarget(
+    ref,
+    handleFile
+  );
+  return /* @__PURE__ */ import_react14.default.createElement("div", { ref, ...dropTargetProps, ...props }, typeof children === "function" ? children(isDropTargetActive) : children);
 });
 
 // ../noya-react-utils/src/hooks/useDeepArray.ts
@@ -1919,7 +1963,7 @@ var LabelContainer = import_styled_components13.default.label(({ theme, $labelPo
   }
 }));
 var InputFieldLabel = (0, import_react33.memo)(
-  (0, import_react33.forwardRef)(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
+  (0, import_react33.forwardRef)(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style2 }, forwardedRef) {
     const { labelPosition, hasDropdown, setLabelWidth } = (0, import_react33.useContext)(InputFieldContext);
     const ref = (0, import_react33.useRef)(null);
     (0, import_react33.useLayoutEffect)(() => {
@@ -1940,7 +1984,7 @@ var InputFieldLabel = (0, import_react33.memo)(
         pointerEvents,
         $labelPosition: labelPosition,
         $hasDropdown: hasDropdown,
-        style: style3
+        style: style2
       },
       children
     );
@@ -2108,34 +2152,34 @@ var InputFieldTypeahead = (props) => {
     labelSize,
     hasDropdown,
     hasLabel,
-    size: size2,
-    onFocusChange
+    size: size2
+    // onFocusChange,
   } = (0, import_react33.useContext)(InputFieldContext);
   return /* @__PURE__ */ import_react33.default.createElement(
     InputElement,
     {
+      as: "span",
       $labelPosition: labelPosition,
       $labelSize: labelSize,
       $hasLabel: hasLabel,
       $hasDropdown: hasDropdown,
       $size: size2,
-      onFocusChange,
-      readOnly: true,
-      placeholder: props.value,
       value: "",
       style: {
         position: "absolute",
-        top: -1,
+        top: 0,
         left: 0,
         right: 0,
-        bottom: -1,
+        bottom: 0,
         width: "100%",
         height: "100%",
         pointerEvents: "none",
         background: "transparent",
         boxShadow: "none"
       }
-    }
+    },
+    /* @__PURE__ */ import_react33.default.createElement("span", { style: { opacity: 0 } }, props.prefix),
+    /* @__PURE__ */ import_react33.default.createElement("span", { style: { opacity: 0.5 } }, props.value.slice(props.prefix.length))
   );
 };
 function parseNumber(value) {
@@ -2223,7 +2267,7 @@ function InputFieldRoot({
   size: size2 = "medium",
   renderPopoverContent,
   onFocusChange,
-  style: style3,
+  style: style2,
   className
 }) {
   const childrenArray = import_react33.Children.toArray(children);
@@ -2282,7 +2326,7 @@ function InputFieldRoot({
       id,
       $width: width,
       $flex: flex,
-      style: style3,
+      style: style2,
       className
     },
     children
@@ -2679,7 +2723,7 @@ function useHover(props = {}) {
 // src/components/Chip.tsx
 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 backgroundColor = $colorScheme === "primary" ? theme.colors.primaryPastel : $colorScheme === "secondary" ? theme.colors.secondaryPastel : $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",
@@ -2768,7 +2812,7 @@ var Chip = (0, import_react37.memo)(
     deletable,
     addable,
     clickable,
-    style: style3,
+    style: style2,
     size: size2 = "large",
     variant = "solid",
     monospace = false,
@@ -2791,7 +2835,7 @@ var Chip = (0, import_react37.memo)(
         ref: forwardedRef,
         $variant: variant,
         $colorScheme: colorScheme,
-        style: style3,
+        style: style2,
         onClick: handleClick,
         $size: size2,
         $monospace: monospace,
@@ -3861,11 +3905,11 @@ var FloatingWindow = ({
     ),
     /* @__PURE__ */ import_react45.default.createElement(Divider, null),
     /* @__PURE__ */ import_react45.default.createElement("div", { style: styles2.content }, children),
-    Object.entries(resizeHandlePositions).map(([direction, style3]) => /* @__PURE__ */ import_react45.default.createElement(
+    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ import_react45.default.createElement(
       "div",
       {
         key: direction,
-        style: { ...styles2.resizeHandle, ...style3 },
+        style: { ...styles2.resizeHandle, ...style2 },
         onMouseDown: handleResizeStart(direction)
       }
     ))
@@ -4202,7 +4246,7 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
   menuItems,
   onSelectMenuItem,
   onContextMenu,
-  style: style3
+  style: style2
 }, forwardedRef) {
   const [hovered, setHovered] = import_react48.default.useState(false);
   const { hoverProps } = useHover({
@@ -4252,7 +4296,7 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
         onClick: handleClick,
         onDoubleClick,
         onContextMenu,
-        style: style3
+        style: style2
       },
       children
     ),
@@ -4800,8 +4844,9 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
   onSelectMenuItem,
   onMenuOpenChange,
   onKeyDown,
-  style: style3,
-  dragIndicatorStyle
+  style: style2,
+  dragIndicatorStyle,
+  className
 }, forwardedRef) {
   depth = Math.max(0, depth);
   const {
@@ -4840,9 +4885,9 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
       // TODO: Where do these offsets actually come from?
       transform: `translate3d(-36px, -6px, 0)`,
       width: `calc(100% + 48px)`,
-      ...style3
-    } : style3;
-  }, [isDragging, style3]);
+      ...style2
+    } : style2;
+  }, [isDragging, style2]);
   const renderContent = ({
     relativeDropPosition,
     ...renderProps
@@ -4877,7 +4922,8 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
           { onPointerDown: renderProps.onPointerDown },
           { [pressEventName]: handlePress }
         ),
-        tabIndex
+        tabIndex,
+        className
       },
       relativeDropPosition && /* @__PURE__ */ import_react50.default.createElement(
         ListViewDragIndicatorElement,
@@ -4923,10 +4969,10 @@ var RenderItemContext = (0, import_react50.createContext)(
 RenderItemContext.displayName = "RenderItemContext";
 var VirtualizedListRow = (0, import_react50.memo)(function VirtualizedListRow2({
   index,
-  style: style3
+  style: style2
 }) {
   const renderItem = (0, import_react50.useContext)(RenderItemContext);
-  return /* @__PURE__ */ import_react50.default.createElement("div", { key: index, style: style3 }, renderItem(index));
+  return /* @__PURE__ */ import_react50.default.createElement("div", { key: index, style: style2 }, renderItem(index));
 });
 var VirtualizedListInner = (0, import_react50.forwardRef)(function VirtualizedListInner2({
   size: size2,
@@ -5012,7 +5058,7 @@ var RootContainer2 = import_styled_components25.default.div(({ theme, $scrollabl
 var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInner2({
   id,
   className,
-  style: style3,
+  style: style2,
   onPress,
   scrollable = false,
   expandable = true,
@@ -5173,7 +5219,7 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
     {
       id,
       className,
-      style: style3,
+      style: style2,
       ...{
         [pressEventName]: handleClick
       },
@@ -5279,6 +5325,7 @@ var Text = (0, import_react51.forwardRef)(function Text2({
   tabIndex,
   onClick,
   onKeyDown,
+  style: style2,
   ...rest
 }, forwardedRef) {
   const element = as ?? elements[variant] ?? "span";
@@ -5288,6 +5335,7 @@ var Text = (0, import_react51.forwardRef)(function Text2({
       ref: forwardedRef,
       as: element,
       className,
+      style: style2,
       tabIndex,
       $variant: variant,
       $breakpoints: breakpoints,
@@ -5422,7 +5470,7 @@ var InputFieldWithCompletions = (0, import_react52.memo)(
     onFocus,
     onBlur,
     onDeleteWhenEmpty,
-    style: style3,
+    style: style2,
     className,
     children,
     hideChildrenWhenFocused = false,
@@ -5647,7 +5695,7 @@ var InputFieldWithCompletions = (0, import_react52.memo)(
           onBlur: handleBlur,
           onFocusCapture: handleFocus,
           onKeyDown: handleKeyDown,
-          style: style3,
+          style: style2,
           className,
           autoCapitalize: "off",
           autoComplete: "off",
@@ -5660,7 +5708,7 @@ var InputFieldWithCompletions = (0, import_react52.memo)(
           "aria-controls": "component-listbox"
         }
       ),
-      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ import_react52.default.createElement(InputField.Typeahead, { value: typeaheadValue }),
+      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ import_react52.default.createElement(InputField.Typeahead, { value: typeaheadValue, prefix: filter }),
       (!isFocused || !hideChildrenWhenFocused) && children,
       loading && isFocused && /* @__PURE__ */ import_react52.default.createElement(InputField.Label, null, /* @__PURE__ */ import_react52.default.createElement(ActivityIndicator, null))
     );
@@ -5693,7 +5741,7 @@ var InspectorContainer = (0, import_react53.memo)(
     showDividers,
     id,
     className,
-    style: style3
+    style: style2
   }, forwardedRef) {
     const theme = useDesignSystemTheme();
     return /* @__PURE__ */ import_react53.default.createElement(
@@ -5707,7 +5755,7 @@ var InspectorContainer = (0, import_react53.memo)(
           flexDirection: "column",
           position: "relative",
           background: theme.colors.sidebar.background,
-          ...style3
+          ...style2
         }
       },
       header,
@@ -6151,9 +6199,12 @@ var readOnlyStyle = {
   justifyContent: "flex-start",
   textAlign: "left"
 };
+var flexStyle = {
+  flex: 1
+};
 var SelectMenu = (0, import_react59.memo)(function SelectMenu2({
   id,
-  style: style3,
+  style: style2,
   className,
   menuItems,
   value,
@@ -6171,16 +6222,16 @@ var SelectMenu = (0, import_react59.memo)(function SelectMenu2({
       Button,
       {
         id,
-        style: style3,
+        style: style2,
         contentStyle: readOnlyStyle,
         className,
         disabled
       },
-      icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 8 })),
-      selectedItem?.title ?? value
+      icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
+      /* @__PURE__ */ import_react59.default.createElement("span", { style: flexStyle }, selectedItem?.title ?? value)
     );
   }
-  return /* @__PURE__ */ import_react59.default.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ import_react59.default.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ import_react59.default.createElement(Button, { id, style: style3, className, disabled }, icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react59.default.createElement(Select3.Value, { placeholder }), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react59.default.createElement(import_noya_icons6.DropdownChevronIcon, null))), /* @__PURE__ */ import_react59.default.createElement(Select3.Portal, null, /* @__PURE__ */ import_react59.default.createElement(SelectContent, null, /* @__PURE__ */ import_react59.default.createElement(SelectViewport, null, menuItems.map((menuItem) => {
+  return /* @__PURE__ */ import_react59.default.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ import_react59.default.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ import_react59.default.createElement(Button, { id, style: style2, className, disabled }, icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { inline: true, size: 6 })), /* @__PURE__ */ import_react59.default.createElement("span", { style: flexStyle }, /* @__PURE__ */ import_react59.default.createElement(Select3.Value, { placeholder })), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }), /* @__PURE__ */ import_react59.default.createElement(import_noya_icons6.DropdownChevronIcon, null))), /* @__PURE__ */ import_react59.default.createElement(Select3.Portal, null, /* @__PURE__ */ import_react59.default.createElement(SelectContent, null, /* @__PURE__ */ import_react59.default.createElement(SelectViewport, null, menuItems.map((menuItem) => {
     if (typeof menuItem === "string") {
       return /* @__PURE__ */ import_react59.default.createElement(StyledSeparator, null);
     }
@@ -6321,58 +6372,124 @@ var Switch = function Switch2({
   );
 };
 
-// src/components/TreeView.tsx
+// src/components/TextArea.tsx
 var import_react62 = __toESM(require("react"));
-var TreeRow = (0, import_react62.forwardRef)(function TreeRow2({
+var import_styled_components36 = __toESM(require("styled-components"));
+var TextAreaElement = import_styled_components36.default.textarea(({ theme }) => ({
+  ...theme.textStyles.small,
+  color: theme.colors.text,
+  background: theme.colors.inputBackground,
+  width: "0px",
+  flex: "1 1 auto",
+  padding: "4px 6px",
+  border: "none",
+  outline: "none",
+  height: 100,
+  borderRadius: "4px",
+  "&::placeholder": {
+    color: theme.colors.textDisabled
+  },
+  "&:focus": {
+    boxShadow: `0 0 0 2px ${theme.colors.primary}`
+  },
+  // readonly
+  "&:read-only": {
+    color: theme.colors.textDisabled
+  },
+  resize: "none"
+}));
+var useAutoResize = (value) => {
+  const textareaRef = (0, import_react62.useRef)(null);
+  (0, import_react62.useEffect)(() => {
+    if (!textareaRef.current)
+      return;
+    textareaRef.current.style.height = "auto";
+    textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+  }, [value]);
+  return textareaRef;
+};
+var AutoResizingTextArea = (0, import_react62.memo)(
+  (0, import_react62.forwardRef)(function AutoResizingTextArea2({
+    value,
+    onChangeText,
+    ...rest
+  }, forwardedRef) {
+    const ref = useAutoResize(value || rest.placeholder || "");
+    const handleChange = (0, import_react62.useCallback)(
+      (event) => onChangeText(event.target.value),
+      [onChangeText]
+    );
+    const handleRef = (0, import_react62.useCallback)(
+      (value2) => {
+        ref.current = value2;
+        assignRef(forwardedRef, value2);
+      },
+      [ref, forwardedRef]
+    );
+    return /* @__PURE__ */ import_react62.default.createElement(
+      TextAreaElement,
+      {
+        ref: handleRef,
+        ...rest,
+        onChange: handleChange,
+        value
+      }
+    );
+  })
+);
+
+// src/components/TreeView.tsx
+var import_react63 = __toESM(require("react"));
+var TreeRow = (0, import_react63.forwardRef)(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
   children,
   ...rest
 }, forwardedRef) {
-  const { expandable } = (0, import_react62.useContext)(ListView.RowContext);
-  const handleClickChevron = (0, import_react62.useCallback)(
+  const { expandable } = (0, import_react63.useContext)(ListView.RowContext);
+  const handleClickChevron = (0, import_react63.useCallback)(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ import_react62.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react62.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react62.default.createElement(
+  return /* @__PURE__ */ import_react63.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react63.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react63.default.createElement(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react62.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react62.default.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ import_react63.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react63.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_react62.memo)(TreeRow);
+  TreeView2.Row = (0, import_react63.memo)(TreeRow);
 })(TreeView || (TreeView = {}));
 
 // src/components/WorkspaceLayout.tsx
 var import_noya_keymap5 = require("@noya-app/noya-keymap");
-var import_react65 = __toESM(require("react"));
+var import_react66 = __toESM(require("react"));
 var import_react_resizable_panels = require("react-resizable-panels");
 
 // src/hooks/usePreservePanelSize.tsx
-var import_react64 = require("react");
+var import_react65 = require("react");
 
 // src/hooks/useWindowSize.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 function useWindowSize() {
-  const [size2, setSize] = (0, import_react63.useState)(
+  const [size2, setSize] = (0, import_react64.useState)(
     typeof window === "undefined" ? { width: 0, height: 0 } : {
       width: window.innerWidth,
       height: window.innerHeight
     }
   );
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     const handleResize = () => setSize({
       width: window.innerWidth,
       height: window.innerHeight
@@ -6390,8 +6507,8 @@ var RIGHT_SIDEBAR_ID = "editor-right-sidebar";
 var CONTENT_AREA_ID = "editor-content-area";
 function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
   const windowSize = useWindowSize();
-  const layoutRef = (0, import_react64.useRef)();
-  (0, import_react64.useLayoutEffect)(() => {
+  const layoutRef = (0, import_react65.useRef)();
+  (0, import_react65.useLayoutEffect)(() => {
     const panelGroup = document.querySelector(
       `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
     );
@@ -6434,7 +6551,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
       panelGroupObserver.disconnect();
     };
   }, [panelGroupRef, setPanelLayoutState]);
-  (0, import_react64.useLayoutEffect)(() => {
+  (0, import_react65.useLayoutEffect)(() => {
     if (!layoutRef.current)
       return;
     const {
@@ -6494,7 +6611,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/WorkspaceLayout.tsx
-var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
+var WorkspaceLayout = (0, import_react66.forwardRef)(function WorkspaceLayout2({
   autoSavePrefix,
   leftSidebarContent: leftPanelContent,
   children: centerPanelContent,
@@ -6509,7 +6626,7 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
   leftSidebarCanResize = false,
   id,
   className,
-  style: style3
+  style: style2
 }, forwardedRef) {
   const windowSize = useWindowSize();
   function getPercentage(size2) {
@@ -6519,12 +6636,12 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
   const rightSidebarPercentage = getPercentage(rightSidebarInitialSize);
   const leftSidebarMinPercentage = leftSidebarMinSize !== void 0 ? getPercentage(leftSidebarMinSize) : void 0;
   const rightSidebarMinPercentage = rightSidebarMinSize !== void 0 ? getPercentage(rightSidebarMinSize) : void 0;
-  const panelGroupRef = (0, import_react65.useRef)(null);
-  const leftSidebarRef = (0, import_react65.useRef)(null);
-  const rightSidebarRef = (0, import_react65.useRef)(null);
+  const panelGroupRef = (0, import_react66.useRef)(null);
+  const leftSidebarRef = (0, import_react66.useRef)(null);
+  const rightSidebarRef = (0, import_react66.useRef)(null);
   usePreservePanelSize(panelGroupRef, onChangeLayoutState);
   const theme = useDesignSystemTheme();
-  (0, import_react65.useImperativeHandle)(forwardedRef, () => ({
+  (0, import_react66.useImperativeHandle)(forwardedRef, () => ({
     setLeftSidebarExpanded: (expanded) => {
       if (expanded) {
         leftSidebarRef.current?.expand();
@@ -6581,7 +6698,7 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
     }
   });
   const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
-  return /* @__PURE__ */ import_react65.default.createElement(
+  return /* @__PURE__ */ import_react66.default.createElement(
     "div",
     {
       id,
@@ -6590,10 +6707,10 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
         backgroundColor: theme.colors.canvas.background,
         display: "flex",
         flexDirection: "row",
-        ...style3
+        ...style2
       }
     },
-    /* @__PURE__ */ import_react65.default.createElement(
+    /* @__PURE__ */ import_react66.default.createElement(
       import_react_resizable_panels.PanelGroup,
       {
         ref: panelGroupRef,
@@ -6602,7 +6719,7 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
         autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
         style: { flex: "1" }
       },
-      hasLeftSidebar && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
+      hasLeftSidebar && /* @__PURE__ */ import_react66.default.createElement(import_react66.default.Fragment, null, /* @__PURE__ */ import_react66.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: LEFT_SIDEBAR_ID,
@@ -6619,7 +6736,7 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
           }
         },
         leftPanelContent
-      ), /* @__PURE__ */ import_react65.default.createElement(
+      ), /* @__PURE__ */ import_react66.default.createElement(
         import_react_resizable_panels.PanelResizeHandle,
         {
           style: {
@@ -6630,7 +6747,7 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
           }
         }
       )),
-      /* @__PURE__ */ import_react65.default.createElement(
+      /* @__PURE__ */ import_react66.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: CONTENT_AREA_ID,
@@ -6645,7 +6762,7 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
         },
         centerPanelContent
       ),
-      hasRightSidebar && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
+      hasRightSidebar && /* @__PURE__ */ import_react66.default.createElement(import_react66.default.Fragment, null, /* @__PURE__ */ import_react66.default.createElement(
         import_react_resizable_panels.PanelResizeHandle,
         {
           style: {
@@ -6655,7 +6772,7 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
             backgroundColor: theme.colors.divider
           }
         }
-      ), /* @__PURE__ */ import_react65.default.createElement(
+      ), /* @__PURE__ */ import_react66.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: RIGHT_SIDEBAR_ID,
@@ -6718,8 +6835,8 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/ArrayController.tsx
 var import_noya_utils11 = require("@noya-app/noya-utils");
-var import_react67 = __toESM(require("react"));
-var import_styled_components37 = __toESM(require("styled-components"));
+var import_react68 = __toESM(require("react"));
+var import_styled_components38 = __toESM(require("styled-components"));
 
 // src/components/InspectorPrimitives.tsx
 var InspectorPrimitives_exports = {};
@@ -6737,20 +6854,20 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react66 = __toESM(require("react"));
-var import_styled_components36 = __toESM(require("styled-components"));
-var Section = import_styled_components36.default.div(({ theme, $padding = "10px", $gap }) => ({
+var import_react67 = __toESM(require("react"));
+var import_styled_components37 = __toESM(require("styled-components"));
+var Section = import_styled_components37.default.div(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
   display: "flex",
   flexDirection: "column",
   padding: $padding,
   gap: $gap
 }));
-var SectionHeader = import_styled_components36.default.div(({ theme }) => ({
+var SectionHeader = import_styled_components37.default.div(({ theme }) => ({
   display: "flex",
   alignItems: "center"
 }));
-var Title3 = import_styled_components36.default.div(({ theme, $textStyle }) => ({
+var Title3 = import_styled_components37.default.div(({ theme, $textStyle }) => ({
   display: "flex",
   flexDirection: "row",
   userSelect: "none",
@@ -6759,11 +6876,11 @@ var Title3 = import_styled_components36.default.div(({ theme, $textStyle }) => (
     color: theme.colors.text
   } : {
     ...theme.textStyles.label,
-    color: theme.colors.textSubtle,
+    color: theme.colors.textMuted,
     fontWeight: "bold"
   }
 }));
-var Row2 = import_styled_components36.default.div(
+var Row2 = import_styled_components37.default.div(
   ({ theme, $gap }) => ({
     flex: "1",
     display: "flex",
@@ -6772,26 +6889,26 @@ var Row2 = import_styled_components36.default.div(
     gap: $gap
   })
 );
-var Column = import_styled_components36.default.div(({ theme }) => ({
+var Column = import_styled_components37.default.div(({ theme }) => ({
   flex: "1",
   display: "flex",
   flexDirection: "column",
   gap: "4px"
 }));
-var Checkbox = import_styled_components36.default.input(({ theme }) => ({
+var Checkbox = import_styled_components37.default.input(({ theme }) => ({
   margin: 0
 }));
-var Text3 = import_styled_components36.default.span(({ theme }) => ({
+var Text3 = import_styled_components37.default.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ import_react66.default.createElement(Spacer.Vertical, { size: (0, import_styled_components36.useTheme)().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components36.useTheme)().sizes.inspector.horizontalSeparator });
-var SliderRowLabel = import_styled_components36.default.span(({ theme }) => ({
+var VerticalSeparator = () => /* @__PURE__ */ import_react67.default.createElement(Spacer.Vertical, { size: (0, import_styled_components37.useTheme)().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components37.useTheme)().sizes.inspector.horizontalSeparator });
+var SliderRowLabel = import_styled_components37.default.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
   marginBottom: "-6px"
 }));
-var RowLabel = import_styled_components36.default.span(({ theme, $textStyle }) => ({
+var RowLabel = import_styled_components37.default.span(({ theme, $textStyle }) => ({
   // marginBottom: '6px',
   display: "flex",
   ...$textStyle ? {
@@ -6805,7 +6922,7 @@ var RowLabel = import_styled_components36.default.span(({ theme, $textStyle }) =
   // Button height
   alignItems: "center"
 }));
-var LabeledRow = (0, import_react66.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react67.memo)(function LabeledRow2({
   id,
   children,
   label,
@@ -6813,26 +6930,26 @@ var LabeledRow = (0, import_react66.memo)(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ import_react66.default.createElement(Row2, { id }, /* @__PURE__ */ import_react66.default.createElement(Column, null, /* @__PURE__ */ import_react66.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react66.default.createElement(Row2, { $gap: gap }, children)));
+  return /* @__PURE__ */ import_react67.default.createElement(Row2, { id }, /* @__PURE__ */ import_react67.default.createElement(Column, null, /* @__PURE__ */ import_react67.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react67.default.createElement(Row2, { $gap: gap }, children)));
 });
-var LabeledSliderRow = (0, import_react66.memo)(function LabeledRow3({
+var LabeledSliderRow = (0, import_react67.memo)(function LabeledRow3({
   children,
   label
 }) {
-  return /* @__PURE__ */ import_react66.default.createElement(Row2, null, /* @__PURE__ */ import_react66.default.createElement(Column, null, /* @__PURE__ */ import_react66.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react66.default.createElement(Row2, null, children)));
+  return /* @__PURE__ */ import_react67.default.createElement(Row2, null, /* @__PURE__ */ import_react67.default.createElement(Column, null, /* @__PURE__ */ import_react67.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react67.default.createElement(Row2, null, children)));
 });
 
 // src/components/ArrayController.tsx
-var ElementRow = import_styled_components37.default.div({
+var ElementRow = import_styled_components38.default.div({
   flex: "0 0 auto",
   display: "flex",
   flexDirection: "row",
   alignItems: "center"
 });
-var ItemContainer2 = import_styled_components37.default.div({
+var ItemContainer2 = import_styled_components38.default.div({
   position: "relative"
 });
-var ArrayController = (0, import_react67.memo)(function ArrayController2({
+var ArrayController = (0, import_react68.memo)(function ArrayController2({
   id,
   items,
   title,
@@ -6848,14 +6965,14 @@ var ArrayController = (0, import_react67.memo)(function ArrayController2({
   renderExpandedContent,
   padding = 10
 }) {
-  const iconColor = (0, import_styled_components37.useTheme)().colors.icon;
-  const primaryLightColor = (0, import_styled_components37.useTheme)().colors.primaryLight;
-  const keys = (0, import_react67.useMemo)(
+  const iconColor = (0, import_styled_components38.useTheme)().colors.icon;
+  const primaryLightColor = (0, import_styled_components38.useTheme)().colors.primaryLight;
+  const keys = (0, import_react68.useMemo)(
     () => items.map((item, index) => getKey?.(item) ?? index.toString()),
     [getKey, items]
   );
   const indexes = reversed ? (0, import_noya_utils11.range)(0, items.length).reverse() : (0, import_noya_utils11.range)(0, items.length);
-  const handleMoveItem = (0, import_react67.useCallback)(
+  const handleMoveItem = (0, import_react68.useCallback)(
     (sourceIndex, destinationIndex, position) => {
       if (reversed) {
         if (position === "above") {
@@ -6872,11 +6989,11 @@ var ArrayController = (0, import_react67.memo)(function ArrayController2({
     [onMoveItem, reversed]
   );
   const renderRow = (index) => {
-    return /* @__PURE__ */ import_react67.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
+    return /* @__PURE__ */ import_react68.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
   };
-  return /* @__PURE__ */ import_react67.default.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ import_react67.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react67.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react67.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
+  return /* @__PURE__ */ import_react68.default.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ import_react68.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react68.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react68.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react68.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
     [
-      onClickTrash && /* @__PURE__ */ import_react67.default.createElement(
+      onClickTrash && /* @__PURE__ */ import_react68.default.createElement(
         IconButton,
         {
           id: `${id}-trash`,
@@ -6885,7 +7002,7 @@ var ArrayController = (0, import_react67.memo)(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ import_react67.default.createElement(
+      onClickExpand && /* @__PURE__ */ import_react68.default.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -6894,7 +7011,7 @@ var ArrayController = (0, import_react67.memo)(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ import_react67.default.createElement(
+      onClickPlus && /* @__PURE__ */ import_react68.default.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -6904,15 +7021,15 @@ var ArrayController = (0, import_react67.memo)(function ArrayController2({
         }
       )
     ],
-    /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ import_react67.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react67.default.createElement(
+    /* @__PURE__ */ import_react68.default.createElement(Spacer.Horizontal, { size: 8 })
+  )), /* @__PURE__ */ import_react68.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react68.default.createElement(
     Sortable.Root,
     {
       keys,
       renderOverlay: renderRow,
       onMoveItem: handleMoveItem
     },
-    indexes.map((index) => /* @__PURE__ */ import_react67.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react67.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react67.default.createElement(
+    indexes.map((index) => /* @__PURE__ */ import_react68.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react68.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react68.default.createElement(
       ListView.DragIndicator,
       {
         $gap: 0,
@@ -6926,11 +7043,11 @@ var ArrayController = (0, import_react67.memo)(function ArrayController2({
 
 // src/components/DimensionInput.tsx
 var import_noya_utils12 = require("@noya-app/noya-utils");
-var import_react68 = __toESM(require("react"));
+var import_react69 = __toESM(require("react"));
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = (0, import_react68.memo)(function DimensionInput2({
+var DimensionInput = (0, import_react69.memo)(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -6940,15 +7057,15 @@ var DimensionInput = (0, import_react68.memo)(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = (0, import_react68.useCallback)(
+  const handleNudgeValue = (0, import_react69.useCallback)(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = (0, import_react68.useCallback)(
+  const handleSetValue = (0, import_react69.useCallback)(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ import_react68.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react68.default.createElement(
+  return /* @__PURE__ */ import_react69.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react69.default.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : (0, import_noya_utils12.round)(value, 2),
@@ -6957,12 +7074,13 @@ var DimensionInput = (0, import_react68.memo)(function DimensionInput2({
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ import_react68.default.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ import_react69.default.createElement(InputField.Label, null, label));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActivityIndicator,
   ArrayController,
+  AutoResizingTextArea,
   Avatar,
   AvatarStack,
   Body,
@@ -6996,6 +7114,7 @@ var DimensionInput = (0, import_react68.memo)(function DimensionInput2({
   Heading4,
   Heading5,
   IconButton,
+  Icons,
   ImageDataProvider,
   InputElement,
   InputField,
@@ -7041,11 +7160,13 @@ var DimensionInput = (0, import_react68.memo)(function DimensionInput2({
   lightTheme,
   mediaQuery,
   normalizeListDestinationIndex,
+  renderIcon,
   rgbaToSketchColor,
   size,
   sketchColorToHex,
   sketchColorToRgba,
   sketchColorToRgbaString,
+  useAutoResize,
   useCurrentFloatingWindowInternal,
   useDesignSystemConfiguration,
   useDesignSystemTheme,