@noya-app/noya-designsystem 0.1.42 → 0.1.44

package/dist/index.js

@@ -1391,7 +1391,6 @@ var src_exports = {};
 __export(src_exports, {
   ActivityIndicator: () => ActivityIndicator,
   AnimatePresence: () => AnimatePresence,
-  AutoResizingTextArea: () => AutoResizingTextArea,
   Avatar: () => Avatar,
   AvatarStack: () => AvatarStack,
   BaseToolbar: () => BaseToolbar,
@@ -1455,6 +1454,8 @@ __export(src_exports, {
   Spacer: () => Spacer,
   Switch: () => Switch,
   Text: () => Text,
+  TextArea: () => TextArea,
+  TextAreaRow: () => TextAreaRow,
   Toast: () => Toast,
   ToastProvider: () => ToastProvider,
   Toolbar: () => Toolbar,
@@ -12300,7 +12301,8 @@ var SelectMenu = memoGeneric(function SelectMenu2({
   open,
   onFocus,
   onBlur,
-  onOpenChange
+  onOpenChange,
+  contentStyle
 }) {
   const selectedItem = menuItems.find(
     (item) => typeof item !== "string" && item.value === value
@@ -12388,7 +12390,9 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         collisionPadding: 8,
         align: "end",
         style: {
-          width: "var(--radix-select-trigger-width)"
+          width: "var(--radix-select-trigger-width)",
+          maxHeight: "500px",
+          ...contentStyle
         }
       },
       /* @__PURE__ */ import_react35.default.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react35.default.createElement(
@@ -13167,29 +13171,66 @@ var Combobox = (0, import_react38.memo)(
   (0, import_react38.forwardRef)(function Combobox2({
     id,
     loading,
-    initialValue = "",
     placeholder,
     items,
     size: size3,
-    onChange,
-    onSelectItem,
-    onHoverItem,
-    onFocus,
-    onBlur,
-    onDeleteWhenEmpty,
     style: style5,
     className,
     label,
     children: children2,
     hideMenuWhenEmptyValue = false,
-    allowArbitraryValues = false,
     readOnly = false,
     tabBehavior = "select",
-    openMenuBehavior = "showFilteredItems"
+    openMenuBehavior = "showFilteredItems",
+    onFocus,
+    onDeleteWhenEmpty,
+    ...rest
   }, forwardedRef) {
+    const props = (0, import_react38.useMemo)(() => {
+      if (rest.mode === "string") {
+        return {
+          mode: rest.mode,
+          value: rest.value,
+          onChange: rest.onChange,
+          onSelectItem: rest.onSelectItem,
+          onHoverItem: rest.onHoverItem,
+          onBlur: rest.onBlur,
+          allowArbitraryValues: rest.allowArbitraryValues
+        };
+      } else {
+        return {
+          mode: rest.mode,
+          value: rest.value,
+          onChange: rest.onChange,
+          onSelectItem: rest.onSelectItem,
+          onHoverItem: rest.onHoverItem,
+          onBlur: rest.onBlur
+        };
+      }
+    }, [
+      rest.mode,
+      rest.value,
+      rest.onChange,
+      rest.onSelectItem,
+      rest.onHoverItem,
+      rest.onBlur,
+      rest.allowArbitraryValues
+    ]);
     const ref = (0, import_react38.useRef)(null);
+    function getInitialValueString() {
+      if (props.mode === "string") {
+        return props.value ?? "";
+      } else {
+        return props.value?.name ?? "";
+      }
+    }
+    const initialValueString = getInitialValueString();
     const [comboboxState] = (0, import_react38.useState)(
-      () => new ComboboxState(items, initialValue, allowArbitraryValues)
+      () => new ComboboxState(
+        items,
+        initialValueString,
+        props.mode === "string" && (props.allowArbitraryValues ?? false)
+      )
     );
     const state = useComboboxState(comboboxState);
     const [isFocused, setIsFocused] = (0, import_react38.useState)(false);
@@ -13198,12 +13239,11 @@ var Combobox = (0, import_react38.memo)(
     (0, import_react38.useEffect)(() => {
       comboboxState.setItems(items);
     }, [items, comboboxState]);
+    (0, import_react38.useEffect)(() => {
+      comboboxState.setFilter(initialValueString);
+    }, [comboboxState, initialValueString]);
     const { filter, selectedIndex, filteredItems } = state;
-    const shouldShowMenu = (0, import_react38.useMemo)(() => {
-      if (!isFocused) return false;
-      if (hideMenuWhenEmptyValue && filter === "") return false;
-      return true;
-    }, [hideMenuWhenEmptyValue, filter, isFocused]);
+    const shouldShowMenu = isFocused && !(hideMenuWhenEmptyValue && filter === "");
     (0, import_react38.useEffect)(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
@@ -13211,15 +13251,28 @@ var Combobox = (0, import_react38.memo)(
     }, [selectedIndex]);
     const handleBlur = (0, import_react38.useCallback)(() => {
       ref.current?.blur();
-      comboboxState.reset(initialValue);
-      onBlur?.(state.filter === state.lastSubmittedValue.filter, filter);
+      comboboxState.reset(initialValueString);
+      if (props.mode === "string") {
+        props.onBlur?.(
+          state.filter === state.lastSubmittedValue.filter,
+          filter
+        );
+      } else {
+        const selectedItem = comboboxState.getSelectedItem();
+        if (selectedItem && selectedItem.type !== "sectionHeader") {
+          props.onBlur?.(
+            state.filter === state.lastSubmittedValue.filter,
+            selectedItem
+          );
+        }
+      }
       setIsFocused(false);
-    }, [filter, initialValue, onBlur, state, comboboxState]);
+    }, [filter, initialValueString, props, state, comboboxState]);
     const handleFocus = (0, import_react38.useCallback)(
       (event) => {
         setIsFocused(true);
         comboboxState.reset(
-          openMenuBehavior === "showAllItems" ? "" : initialValue
+          openMenuBehavior === "showAllItems" ? "" : initialValueString
         );
         if (ref.current) {
           const length = ref.current.value.length;
@@ -13227,30 +13280,54 @@ var Combobox = (0, import_react38.memo)(
         }
         onFocus?.(event);
       },
-      [initialValue, onFocus, openMenuBehavior, comboboxState]
+      [initialValueString, onFocus, openMenuBehavior, comboboxState]
     );
     const handleUpdateSelection = (0, import_react38.useCallback)(
       (item) => {
         if (item.type === "sectionHeader") return;
         const selectedItem = comboboxState.selectCurrentItem(item);
         if (!selectedItem || selectedItem.type === "sectionHeader") return;
-        onSelectItem?.(selectedItem);
-        onHoverItem?.(void 0);
+        if (props.mode === "string") {
+          props.onSelectItem?.(selectedItem.name);
+          props.onHoverItem?.(void 0);
+        } else {
+          props.onSelectItem?.(selectedItem);
+          props.onHoverItem?.(void 0);
+        }
         setShouldBlur(true);
       },
-      [onSelectItem, onHoverItem, comboboxState]
+      [props, comboboxState]
     );
     const handleIndexChange = (0, import_react38.useCallback)(
       (index) => {
         comboboxState.setSelectedIndex(index);
         const item = comboboxState.getSelectedItem();
         if (item && item.type !== "sectionHeader") {
-          onHoverItem?.(item);
+          if (props.mode === "string") {
+            props.onHoverItem?.(item.name);
+          } else {
+            props.onHoverItem?.(item);
+          }
+        } else {
+          props.onHoverItem?.(void 0);
+        }
+      },
+      [props, comboboxState]
+    );
+    const handleChange = (0, import_react38.useCallback)(
+      (value) => {
+        if (readOnly) return;
+        comboboxState.setFilter(value);
+        if (props.mode === "string") {
+          props.onChange?.(value);
         } else {
-          onHoverItem?.(void 0);
+          const selectedItem = comboboxState.getSelectedItem();
+          if (selectedItem && selectedItem.type !== "sectionHeader") {
+            props.onChange?.(selectedItem);
+          }
         }
       },
-      [onHoverItem, comboboxState]
+      [readOnly, props, comboboxState]
     );
     const handleKeyDown = (0, import_react38.useCallback)(
       (event) => {
@@ -13269,7 +13346,7 @@ var Combobox = (0, import_react38.memo)(
             if (shouldShowMenu) {
               if (item) {
                 handleUpdateSelection(item);
-              } else if (allowArbitraryValues) {
+              } else if (props.mode === "string" && props.allowArbitraryValues) {
                 comboboxState.submitArbitraryFilter(filter);
                 handleBlur();
               } else {
@@ -13299,7 +13376,7 @@ var Combobox = (0, import_react38.memo)(
                 }
                 handled = true;
               }
-            } else if (allowArbitraryValues && filter !== "") {
+            } else if (props.mode === "string" && props.allowArbitraryValues && filter !== "") {
               comboboxState.submitArbitraryFilter(filter);
               handleBlur();
               handled = true;
@@ -13334,17 +13411,9 @@ var Combobox = (0, import_react38.memo)(
         shouldShowMenu,
         comboboxState,
         tabBehavior,
-        allowArbitraryValues
+        props
       ]
     );
-    const handleChange = (0, import_react38.useCallback)(
-      (value) => {
-        if (readOnly) return;
-        comboboxState.setFilter(value);
-        onChange?.(value);
-      },
-      [onChange, readOnly, comboboxState]
-    );
     const typeaheadValue = comboboxState.getTypeaheadValue();
     (0, import_react38.useImperativeHandle)(forwardedRef, () => ({
       focus: () => {
@@ -13355,7 +13424,11 @@ var Combobox = (0, import_react38.memo)(
         }
       },
       setValue: (value) => {
-        comboboxState.setFilter(value);
+        if (typeof value === "string") {
+          comboboxState.setFilter(value);
+        } else {
+          comboboxState.setFilter(value.name);
+        }
       },
       selectAllInputText: () => {
         ref.current?.setSelectionRange(0, ref.current.value.length);
@@ -13369,23 +13442,24 @@ var Combobox = (0, import_react38.memo)(
           return;
         }
         comboboxState.reset(
-          openMenuBehavior === "showAllItems" ? "" : initialValue
+          openMenuBehavior === "showAllItems" ? "" : initialValueString
         );
         ref.current?.focus();
       },
       [
         shouldShowMenu,
         openMenuBehavior,
-        initialValue,
+        initialValueString,
         handleBlur,
         comboboxState
       ]
     );
     (0, import_react38.useEffect)(() => {
       if (!shouldBlur) return;
+      if (document.activeElement !== ref.current) return;
+      setShouldBlur(false);
       ref.current?.focus();
       handleBlur();
-      setShouldBlur(false);
     }, [shouldBlur, handleBlur]);
     return /* @__PURE__ */ import_react38.default.createElement(
       InputField.Root,
@@ -15199,42 +15273,46 @@ var import_react49 = __toESM(require("react"));
 var useAutoResize = (value) => {
   const textareaRef = (0, import_react49.useRef)(null);
   (0, import_react49.useEffect)(() => {
+    if (value === void 0) return;
     if (!textareaRef.current) return;
     textareaRef.current.style.height = "auto";
     textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
   }, [value]);
   return textareaRef;
 };
-var AutoResizingTextArea = (0, import_react49.memo)(
-  (0, import_react49.forwardRef)(function AutoResizingTextArea2({
+var TextArea = (0, import_react49.memo)(
+  (0, import_react49.forwardRef)(function TextArea2({
     value,
     onChangeText,
     className,
-    end,
-    endClassName,
     onChange,
+    autoResize = false,
     ...rest
   }, forwardedRef) {
-    const ref = useAutoResize(value || rest.placeholder || "");
+    const autoResizeRef = useAutoResize(
+      autoResize ? value || rest.placeholder || "" : void 0
+    );
     const handleChange = (0, import_react49.useCallback)(
       (event) => {
-        onChangeText(event.target.value);
+        onChangeText?.(event.target.value);
         onChange?.(event);
       },
       [onChangeText, onChange]
     );
     const handleRef = (0, import_react49.useCallback)(
       (value2) => {
-        ref.current = value2;
+        if (autoResize) {
+          autoResizeRef.current = value2;
+        }
         assignRef(forwardedRef, value2);
       },
-      [ref, forwardedRef]
+      [autoResize, autoResizeRef, forwardedRef]
     );
-    return /* @__PURE__ */ import_react49.default.createElement("div", { className: "relative w-full h-full" }, /* @__PURE__ */ import_react49.default.createElement(
+    return /* @__PURE__ */ import_react49.default.createElement(
       "textarea",
       {
         className: cx(
-          `font-sans text-heading5 font-normal text-text bg-input-background flex-1 py-1 px-1.5 border-none outline-none min-h-24 w-full rounded resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable transition-all`,
+          `font-sans text-heading5 font-normal text-text bg-input-background flex-1 py-1 px-1.5 border-none outline-none min-h-6 w-full rounded resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable transition-all`,
           className
         ),
         ref: handleRef,
@@ -15242,7 +15320,27 @@ var AutoResizingTextArea = (0, import_react49.memo)(
         onChange: handleChange,
         value
       }
-    ), /* @__PURE__ */ import_react49.default.createElement("div", { className: cx("absolute right-1 top-4", endClassName) }, end));
+    );
+  })
+);
+var TextAreaRow = (0, import_react49.memo)(
+  (0, import_react49.forwardRef)(function TextAreaRow2({
+    className,
+    textAreaClassName,
+    textAreaRef,
+    end,
+    endClassName,
+    ...rest
+  }, forwardedRef) {
+    return /* @__PURE__ */ import_react49.default.createElement(
+      "div",
+      {
+        ref: forwardedRef,
+        className: cx("relative w-full h-full", className)
+      },
+      /* @__PURE__ */ import_react49.default.createElement(TextArea, { className: textAreaClassName, ...rest, ref: textAreaRef }),
+      /* @__PURE__ */ import_react49.default.createElement("div", { className: cx("absolute right-1 top-4", endClassName) }, end)
+    );
   })
 );
 
@@ -15551,32 +15649,39 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/WorkspaceLayout.tsx
-var WorkspaceLayoutWithTheme = (0, import_react54.forwardRef)(function WorkspaceLayoutWithTheme2({
+var WorkspaceLayout = (0, import_react54.forwardRef)(function WorkspaceLayout2({
   autoSavePrefix,
-  leftSidebarContent: leftPanelContent,
-  children: centerPanelContent,
-  rightSidebarContent: rightPanelContent,
-  hasLeftSidebar = !!leftPanelContent,
-  hasRightSidebar = !!rightPanelContent,
-  onChangeLayoutState,
-  leftSidebarInitialSize = 280,
-  rightSidebarInitialSize = 400,
-  leftSidebarMinSize,
-  rightSidebarMinSize,
-  leftSidebarCanResize = false,
-  rightSidebarCanResize = false,
+  left,
+  right,
   id,
   className,
-  style: style5
+  style: style5,
+  toolbar,
+  children: children2,
+  onChangeLayoutState,
+  leftOptions: {
+    initialSize: leftInitialSize = 280,
+    minSize: leftMinSize,
+    resizable: leftResizable = true,
+    style: leftStyle,
+    className: leftClassName
+  } = {},
+  rightOptions: {
+    initialSize: rightInitialSize = 280,
+    minSize: rightMinSize,
+    resizable: rightResizable = true,
+    style: rightStyle,
+    className: rightClassName
+  } = {}
 }, forwardedRef) {
   const windowSize = useWindowSize();
   function getPercentage(size3) {
     return typeof size3 === "string" ? parseFloat(size3) : size3 / windowSize.width * 100;
   }
-  const leftSidebarPercentage = getPercentage(leftSidebarInitialSize);
-  const rightSidebarPercentage = getPercentage(rightSidebarInitialSize);
-  const leftSidebarMinPercentage = leftSidebarMinSize !== void 0 ? getPercentage(leftSidebarMinSize) : void 0;
-  const rightSidebarMinPercentage = rightSidebarMinSize !== void 0 ? getPercentage(rightSidebarMinSize) : void 0;
+  const leftSidebarPercentage = getPercentage(leftInitialSize);
+  const rightSidebarPercentage = getPercentage(rightInitialSize);
+  const leftSidebarMinPercentage = leftMinSize !== void 0 ? getPercentage(leftMinSize) : void 0;
+  const rightSidebarMinPercentage = rightMinSize !== void 0 ? getPercentage(rightMinSize) : void 0;
   const panelGroupRef = (0, import_react54.useRef)(null);
   const leftSidebarRef = (0, import_react54.useRef)(null);
   const rightSidebarRef = (0, import_react54.useRef)(null);
@@ -15590,21 +15695,21 @@ var WorkspaceLayoutWithTheme = (0, import_react54.forwardRef)(function Workspace
   );
   usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
   (0, import_react54.useImperativeHandle)(forwardedRef, () => ({
-    setLeftSidebarExpanded: (expanded) => {
+    setLeftExpanded: (expanded) => {
       if (expanded) {
         leftSidebarRef.current?.expand();
       } else {
         leftSidebarRef.current?.collapse();
       }
     },
-    setRightSidebarExpanded: (expanded) => {
+    setRightExpanded: (expanded) => {
       if (expanded) {
         rightSidebarRef.current?.expand();
       } else {
         rightSidebarRef.current?.collapse();
       }
     },
-    toggleAllSidebars: () => {
+    toggleSides: () => {
       const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
       const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
       if (isLeftSidebarExpanded || isRightSidebarExpanded) {
@@ -15615,7 +15720,7 @@ var WorkspaceLayoutWithTheme = (0, import_react54.forwardRef)(function Workspace
         rightSidebarRef.current?.expand();
       }
     },
-    toggleLeftSidebar: () => {
+    toggleLeft: () => {
       const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
       if (isLeftSidebarExpanded) {
         leftSidebarRef.current?.collapse();
@@ -15623,7 +15728,7 @@ var WorkspaceLayoutWithTheme = (0, import_react54.forwardRef)(function Workspace
         leftSidebarRef.current?.expand();
       }
     },
-    toggleRightSidebar: () => {
+    toggleRight: () => {
       const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
       if (isRightSidebarExpanded) {
         rightSidebarRef.current?.collapse();
@@ -15645,56 +15750,38 @@ var WorkspaceLayoutWithTheme = (0, import_react54.forwardRef)(function Workspace
       }
     }
   });
-  const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
+  const centerPanelPercentage = 100 - (left ? leftSidebarPercentage : 0) - (right ? rightSidebarPercentage : 0);
   return /* @__PURE__ */ import_react54.default.createElement(
     "div",
     {
       id,
-      className,
-      style: {
-        backgroundColor: cssVars.colors.canvasBackground,
-        display: "flex",
-        flexDirection: "row",
-        ...style5
-      }
+      className: cx("flex flex-col bg-canvas-background", className),
+      style: style5
     },
-    /* @__PURE__ */ import_react54.default.createElement(
+    toolbar,
+    /* @__PURE__ */ import_react54.default.createElement("div", { className: "flex flex-row flex-1" }, /* @__PURE__ */ import_react54.default.createElement(
       import_react_resizable_panels.PanelGroup,
       {
         ref: panelGroupRef,
         id: EDITOR_PANEL_GROUP_ID,
+        className: "flex-1",
         direction: "horizontal",
-        autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
-        style: { flex: "1" }
+        autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0
       },
-      hasLeftSidebar && /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement(
+      left && /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: LEFT_SIDEBAR_ID,
+          className: "relative",
           order: 1,
           ref: leftSidebarRef,
           defaultSize: leftSidebarPercentage,
           minSize: leftSidebarMinPercentage ?? leftSidebarPercentage,
-          ...!leftSidebarCanResize && { maxSize: leftSidebarPercentage },
-          collapsible: true,
-          style: {
-            display: "flex",
-            flexDirection: "row",
-            position: "relative"
-          }
+          ...!leftResizable && { maxSize: leftSidebarPercentage },
+          collapsible: true
         },
-        internalLayoutState?.leftSidebarCollapsed ? null : leftPanelContent
-      ), /* @__PURE__ */ import_react54.default.createElement(
-        import_react_resizable_panels.PanelResizeHandle,
-        {
-          style: {
-            cursor: "col-resize",
-            width: "1px",
-            height: "100%",
-            backgroundColor: cssVars.colors.divider
-          }
-        }
-      )),
+        internalLayoutState?.leftSidebarCollapsed ? null : /* @__PURE__ */ import_react54.default.createElement(PanelInner, { style: leftStyle, className: leftClassName }, left)
+      ), /* @__PURE__ */ import_react54.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" })),
       /* @__PURE__ */ import_react54.default.createElement(
         import_react_resizable_panels.Panel,
         {
@@ -15702,49 +15789,45 @@ var WorkspaceLayoutWithTheme = (0, import_react54.forwardRef)(function Workspace
           order: 2,
           defaultSize: centerPanelPercentage,
           minSize: 10,
-          style: {
-            display: "flex",
-            flexDirection: "row",
-            position: "relative"
-          }
+          className: "flex relative"
         },
-        centerPanelContent
+        children2
       ),
-      hasRightSidebar && /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement(
-        import_react_resizable_panels.PanelResizeHandle,
-        {
-          style: {
-            cursor: "col-resize",
-            width: "1px",
-            height: "100%",
-            backgroundColor: cssVars.colors.divider
-          }
-        }
-      ), /* @__PURE__ */ import_react54.default.createElement(
+      right && /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement(import_react_resizable_panels.PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" }), /* @__PURE__ */ import_react54.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: RIGHT_SIDEBAR_ID,
+          className: "relative",
           order: 3,
           ref: rightSidebarRef,
           minSize: rightSidebarMinPercentage ?? rightSidebarPercentage,
           defaultSize: rightSidebarPercentage,
-          ...!rightSidebarCanResize && {
+          ...!rightResizable && {
             maxSize: rightSidebarPercentage
           },
-          collapsible: true,
-          style: {
-            display: "flex",
-            flexDirection: "row",
-            position: "relative"
-          }
+          collapsible: true
         },
-        internalLayoutState?.rightSidebarCollapsed ? null : rightPanelContent
+        internalLayoutState?.rightSidebarCollapsed ? null : /* @__PURE__ */ import_react54.default.createElement(PanelInner, { style: rightStyle, className: rightClassName }, right)
       ))
-    )
+    ))
   );
 });
-var WorkspaceLayout = (0, import_react54.forwardRef)(function WorkspaceLayout2(props, forwardedRef) {
-  return /* @__PURE__ */ import_react54.default.createElement(WorkspaceLayoutWithTheme, { ...props, ref: forwardedRef });
+var PanelInner = (0, import_react54.memo)(function PanelInner2({
+  children: children2,
+  style: style5,
+  className
+}) {
+  return /* @__PURE__ */ import_react54.default.createElement(
+    "div",
+    {
+      style: style5,
+      className: cx(
+        "absolute inset-0 flex flex-col bg-sidebar-background",
+        className
+      )
+    },
+    children2
+  );
 });
 
 // src/hooks/usePlatform.ts
@@ -16062,14 +16145,15 @@ function ToolbarMenu({
         Button,
         {
           key: i,
+          disabled: item.disabled,
           onClick: () => {
             if (onSelectMenuItem && item.value) {
               onSelectMenuItem(item.value);
             }
           }
         },
-        item.icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
-        item.title
+        item.title,
+        item.icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }), renderIcon(item.icon))
       );
     }
     return /* @__PURE__ */ import_react58.default.createElement(
@@ -16083,7 +16167,7 @@ function ToolbarMenu({
           }
         }
       },
-      /* @__PURE__ */ import_react58.default.createElement(Button, null, item.icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 6 })), item.title, /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ import_react58.default.createElement(import_noya_icons8.DropdownChevronIcon, null))
+      /* @__PURE__ */ import_react58.default.createElement(Button, { disabled: item.disabled }, item.title, /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ import_react58.default.createElement(import_noya_icons8.DropdownChevronIcon, null))
     );
   }));
 }
@@ -16091,7 +16175,6 @@ function ToolbarMenu({
 0 && (module.exports = {
   ActivityIndicator,
   AnimatePresence,
-  AutoResizingTextArea,
   Avatar,
   AvatarStack,
   BaseToolbar,
@@ -16155,6 +16238,8 @@ function ToolbarMenu({
   Spacer,
   Switch,
   Text,
+  TextArea,
+  TextAreaRow,
   Toast,
   ToastProvider,
   Toolbar,