@noya-app/noya-designsystem 0.1.53 → 0.1.54

package/dist/index.js

@@ -143,6 +143,7 @@ __export(src_exports, {
   ToolbarMenu: () => ToolbarMenu,
   ToolbarMenuButton: () => ToolbarMenuButton,
   ToolbarMenuDropdown: () => ToolbarMenuDropdown,
+  ToolbarMenuItem: () => ToolbarMenuItem,
   Tooltip: () => Tooltip,
   TreeView: () => TreeView,
   UserAvatar: () => UserAvatar,
@@ -2355,7 +2356,7 @@ var getMenuItemKey = (item, index) => {
   }
 };
 var CHECKBOX_WIDTH = 15;
-var CHECKBOX_RIGHT_INSET = 8;
+var CHECKBOX_RIGHT_INSET = 6;
 var CHECKBOX_INDENT_WIDTH = 6;
 var styles = {
   separatorStyle: "h-px bg-divider mx-3 my-1",
@@ -2454,11 +2455,10 @@ var SectionHeader = (0, import_react32.memo)(function SectionHeader2({
 });
 
 // src/components/internal/MenuViewport.tsx
-var import_noya_icons3 = require("@noya-app/noya-icons");
+var import_noya_icons2 = require("@noya-app/noya-icons");
 var import_react34 = __toESM(require("react"));
 
 // src/components/internal/SelectItem.tsx
-var import_noya_icons2 = require("@noya-app/noya-icons");
 var import_react33 = __toESM(require("react"));
 var SelectItem = import_react33.default.forwardRef(
   ({
@@ -2498,7 +2498,7 @@ var SelectItem = import_react33.default.forwardRef(
           )
         },
         /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }),
-        Components4.ItemIndicator && /* @__PURE__ */ import_react33.default.createElement(Components4.ItemIndicator, { ...styles.itemIndicator }, /* @__PURE__ */ import_react33.default.createElement(import_noya_icons2.CheckIcon, null)),
+        Components4.ItemIndicator && /* @__PURE__ */ import_react33.default.createElement(Components4.ItemIndicator, { ...styles.itemIndicator }, /* @__PURE__ */ import_react33.default.createElement(Checkmark, null)),
         icon && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 8 })),
         children,
         shortcut && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react33.default.createElement(KeyboardShortcut, { shortcut }))
@@ -2519,10 +2519,34 @@ var SelectItem = import_react33.default.forwardRef(
         onSelect: handleSelectItem,
         ...props
       },
-      /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-1 items-center" }, indented && /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), checked ? /* @__PURE__ */ import_react33.default.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ import_react33.default.createElement(import_noya_icons2.CheckIcon, null)) : indented ? /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }) : null, icon && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react33.default.createElement(Components4.ItemText, null, children), shortcut && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react33.default.createElement(KeyboardShortcut, { shortcut })))
+      /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-1 items-center" }, indented && /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), checked ? /* @__PURE__ */ import_react33.default.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ import_react33.default.createElement(Checkmark, null)) : indented ? /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }) : null, icon && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react33.default.createElement(Components4.ItemText, null, children), shortcut && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react33.default.createElement(KeyboardShortcut, { shortcut })))
     ));
   }
 );
+function Checkmark() {
+  return /* @__PURE__ */ import_react33.default.createElement(
+    "svg",
+    {
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      width: 15,
+      height: 15
+    },
+    /* @__PURE__ */ import_react33.default.createElement(
+      "path",
+      {
+        className: "scale-90 origin-center",
+        d: "M3 8L6 11L12 5",
+        strokeWidth: "1.1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        stroke: "currentColor"
+      }
+    )
+  );
+}
 
 // src/components/internal/MenuViewport.tsx
 var MenuViewport = ({
@@ -2582,7 +2606,7 @@ var MenuViewport = ({
                 disabled: item.disabled
               },
               /* @__PURE__ */ import_react34.default.createElement("div", { className: "flex items-center flex-1" }, item.title),
-              /* @__PURE__ */ import_react34.default.createElement(import_noya_icons3.ChevronRightIcon, { className: "-mr-1" })
+              /* @__PURE__ */ import_react34.default.createElement(import_noya_icons2.ChevronRightIcon, { className: "-mr-1" })
             )
           ), /* @__PURE__ */ import_react34.default.createElement(Components4.Portal, null, /* @__PURE__ */ import_react34.default.createElement(
             Components4.SubContent,
@@ -3491,7 +3515,7 @@ var Checkbox = React35.memo(
 );
 
 // src/components/Chip.tsx
-var import_noya_icons4 = require("@noya-app/noya-icons");
+var import_noya_icons3 = require("@noya-app/noya-icons");
 var import_react45 = __toESM(require("react"));
 
 // src/hooks/useHover.ts
@@ -3688,7 +3712,7 @@ var Chip = (0, import_react45.memo)(
         ...rest
       },
       addable && /* @__PURE__ */ import_react45.default.createElement(
-        import_noya_icons4.PlusIcon,
+        import_noya_icons3.PlusIcon,
         {
           className: cx(ICON_BASE_STYLES, ICON_SIZE_STYLES[size2].add),
           onClick: onAdd && ((event) => {
@@ -3700,7 +3724,7 @@ var Chip = (0, import_react45.memo)(
       ),
       children,
       deletable && /* @__PURE__ */ import_react45.default.createElement(
-        import_noya_icons4.Cross1Icon,
+        import_noya_icons3.Cross1Icon,
         {
           className: cx(ICON_BASE_STYLES, ICON_SIZE_STYLES[size2].delete),
           ...hoverDeleteProps,
@@ -5804,9 +5828,9 @@ var ColorSwatch = (0, import_react55.forwardRef)(function ColorSwatch2({ color,
         width: sizePx,
         height: sizePx,
         borderRadius: "4px",
-        outline: checked ? "2px solid rgba(0,0,0,0.2)" : "1px solid rgba(0,0,0,0.1)",
+        outline: checked ? `2px solid ${cssVars.colors.primary}` : "1px solid rgba(0,0,0,0.1)",
         outlineOffset: -1,
-        boxShadow: checked ? `inset 0 0 0 2px rgba(0,0,0,0.2)` : void 0,
+        boxShadow: checked ? `inset 0 0 0 2px ${cssVars.colors.background}` : void 0,
         ...style2
       }
     }
@@ -5877,7 +5901,7 @@ function ColorSwatchControl(props) {
 }
 
 // src/components/Combobox.tsx
-var import_noya_icons6 = require("@noya-app/noya-icons");
+var import_noya_icons5 = require("@noya-app/noya-icons");
 var import_react59 = __toESM(require("react"));
 
 // src/utils/combobox.ts
@@ -6212,7 +6236,7 @@ function useComboboxState(state) {
 }
 
 // src/components/ComboboxMenu.tsx
-var import_noya_icons5 = require("@noya-app/noya-icons");
+var import_noya_icons4 = require("@noya-app/noya-icons");
 var import_react58 = __toESM(require("react"));
 var ComboboxMenu = memoGeneric(
   forwardRefGeneric(function ComboboxMenu2({
@@ -6265,7 +6289,7 @@ var ComboboxMenu = memoGeneric(
                 }
               }
             },
-            /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex flex-1 min-w-0 items-center" }, indented && /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ import_react58.default.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ import_react58.default.createElement(import_noya_icons5.CheckIcon, null)) : indented ? /* @__PURE__ */ import_react58.default.createElement(
+            /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex flex-1 min-w-0 items-center" }, indented && /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ import_react58.default.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ import_react58.default.createElement(import_noya_icons4.CheckIcon, null)) : indented ? /* @__PURE__ */ import_react58.default.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET
@@ -6616,7 +6640,7 @@ var Combobox = memoGeneric(
             onClick: handleChevronClick
           },
           /* @__PURE__ */ import_react59.default.createElement(
-            import_noya_icons6.DropdownChevronIcon,
+            import_noya_icons5.DropdownChevronIcon,
             {
               className: cx(
                 "transition-transform duration-100",
@@ -6952,7 +6976,7 @@ var CommandPalette = (0, import_react62.memo)(function CommandPalette2({
 });
 
 // src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx
-var import_noya_icons7 = require("@noya-app/noya-icons");
+var import_noya_icons6 = require("@noya-app/noya-icons");
 var import_react63 = __toESM(require("react"));
 var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ import_react63.default.createElement(
   Tooltip,
@@ -6982,20 +7006,20 @@ var ConnectedUsersMenuLayout = ({
           backgroundColor: isAssistantOpen ? colorFromString(currentUserId ?? "") : void 0
         }
       },
-      "AI",
-      /* @__PURE__ */ import_react63.default.createElement(Spacer.Horizontal, { size: 8 }),
       /* @__PURE__ */ import_react63.default.createElement(
-        import_noya_icons7.ChatBubbleWithDotsIcon,
+        import_noya_icons6.ChatBubbleWithDotsIcon,
         {
           color: isAssistantOpen ? void 0 : cssVars.colors.icon
         }
-      )
+      ),
+      /* @__PURE__ */ import_react63.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
+      "AI"
     )
   ));
 };
 
 // src/components/DraggableMenuButton.tsx
-var import_noya_icons8 = require("@noya-app/noya-icons");
+var import_noya_icons7 = require("@noya-app/noya-icons");
 var import_react64 = __toESM(require("react"));
 var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
   items,
@@ -7068,13 +7092,13 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         shouldBindKeyboardShortcuts: false
       },
       /* @__PURE__ */ import_react64.default.createElement("div", { className: "pointer-events-none h-[15px]" }, /* @__PURE__ */ import_react64.default.createElement(
-        import_noya_icons8.DragHandleDots2Icon,
+        import_noya_icons7.DragHandleDots2Icon,
         {
           color: isVisible || open ? cssVars.colors.icon : "transparent"
         }
       ))
     ) : /* @__PURE__ */ import_react64.default.createElement(
-      import_noya_icons8.DragHandleDots2Icon,
+      import_noya_icons7.DragHandleDots2Icon,
       {
         color: isVisible || open ? cssVars.colors.icon : "transparent"
       }
@@ -8297,7 +8321,7 @@ var LabeledField = (0, import_react73.memo)(function LabeledField2({
 });
 
 // src/components/MediaThumbnail.tsx
-var import_noya_icons9 = require("@noya-app/noya-icons");
+var import_noya_icons8 = require("@noya-app/noya-icons");
 var import_react74 = __toESM(require("react"));
 
 // src/components/catppuccin/fileIcons.ts
@@ -10763,7 +10787,7 @@ var MediaThumbnail = (0, import_react74.memo)(function MediaThumbnail2({
   const content = (0, import_react74.useMemo)(() => {
     switch (contentType) {
       case "image":
-        if (!url) return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons9.ImageIcon, { color: iconColor, style: iconStyles });
+        if (!url) return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons8.ImageIcon, { color: iconColor, style: iconStyles });
         return /* @__PURE__ */ import_react74.default.createElement(
           "img",
           {
@@ -10774,9 +10798,9 @@ var MediaThumbnail = (0, import_react74.memo)(function MediaThumbnail2({
           }
         );
       case "video":
-        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons9.VideoIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons8.VideoIcon, { color: iconColor, style: iconStyles });
       case "audio":
-        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons9.SpeakerLoudIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons8.SpeakerLoudIcon, { color: iconColor, style: iconStyles });
       default:
         if (iconName) {
           const Icon = Icons[iconName];
@@ -10795,7 +10819,7 @@ var MediaThumbnail = (0, import_react74.memo)(function MediaThumbnail2({
             );
           }
         }
-        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons9.FileIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ import_react74.default.createElement(import_noya_icons8.FileIcon, { color: iconColor, style: iconStyles });
     }
   }, [contentType, url, iconColor, iconStyles, iconName, fileName]);
   return /* @__PURE__ */ import_react74.default.createElement(
@@ -10889,7 +10913,7 @@ var Message = (0, import_react75.memo)(
 );
 
 // src/components/pipeline/PipelineResultLayout.tsx
-var import_noya_icons10 = require("@noya-app/noya-icons");
+var import_noya_icons9 = require("@noya-app/noya-icons");
 var import_react76 = __toESM(require("react"));
 var PipelineResultLink = ({ url }) => {
   return /* @__PURE__ */ import_react76.default.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ import_react76.default.createElement(
@@ -10900,7 +10924,7 @@ var PipelineResultLink = ({ url }) => {
       rel: "noopener noreferrer",
       className: "flex text-primary hover:opacity-80 border border-divider rounded-md"
     },
-    /* @__PURE__ */ import_react76.default.createElement("div", { className: "flex gap-1 items-center p-2" }, /* @__PURE__ */ import_react76.default.createElement(import_noya_icons10.Link1Icon, { className: "w-[15px] h-[15px] flex-shrink-0" })),
+    /* @__PURE__ */ import_react76.default.createElement("div", { className: "flex gap-1 items-center p-2" }, /* @__PURE__ */ import_react76.default.createElement(import_noya_icons9.Link1Icon, { className: "w-[15px] h-[15px] flex-shrink-0" })),
     /* @__PURE__ */ import_react76.default.createElement(DividerVertical, null),
     /* @__PURE__ */ import_react76.default.createElement(Small, { className: "truncate p-2 flex-1" }, url)
   ));
@@ -11057,12 +11081,15 @@ var SegmentedControlItem = (0, import_react78.forwardRef)(function SegmentedCont
       value: (value ?? "").toString(),
       disabled,
       className: cx(
-        "font-sans text-heading5 font-normal relative flex-1 appearance-none text-segmented-control-item rounded inline-flex gap-1.5 items-center justify-center align-middle text-center focus:outline-none transition-colors",
+        "font-sans text-button font-normal relative flex-1 appearance-none text-segmented-control-item rounded inline-flex gap-1.5 items-center justify-center align-middle text-center focus:outline-none transition-colors",
         colorScheme === "secondary" ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1" : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
         colorScheme === "secondary" ? "aria-checked:bg-secondary aria-checked:text-white" : colorScheme === "primary" ? "aria-checked:bg-primary aria-checked:text-white" : "aria-checked:bg-background aria-checked:text-text",
         "focus:z-interactable",
         "aria-checked:shadow-segment",
-        "whitespace-pre",
+        "whitespace-pre px-1",
+        "border-r border-divider last:border-r-0",
+        "aria-checked:border-r-transparent",
+        "[&:has(+[aria-checked=true])]:border-r-transparent",
         className
       ),
       ...props
@@ -11072,15 +11099,6 @@ var SegmentedControlItem = (0, import_react78.forwardRef)(function SegmentedCont
   );
   return tooltip ? /* @__PURE__ */ import_react78.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
-var Separator3 = ({ transparent }) => /* @__PURE__ */ import_react78.default.createElement(
-  "div",
-  {
-    className: cx(
-      "w-[1px] my-1 self-stretch bg-divider",
-      transparent && "bg-transparent"
-    )
-  }
-);
 var SegmentedControl = memoGeneric(function SegmentedControl2({
   id: idProp,
   value,
@@ -11088,7 +11106,6 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
   colorScheme,
   allowEmpty,
   items,
-  separator: separator2 = true,
   className,
   style: style2
 }) {
@@ -11101,7 +11118,6 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
     },
     [allowEmpty, onValueChange]
   );
-  const selectedIndex = items.findIndex((item) => item?.value === value);
   return /* @__PURE__ */ import_react78.default.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react78.default.createElement(
     ToggleGroupPrimitive2.Root,
     {
@@ -11110,17 +11126,15 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
       value,
       onValueChange: handleValueChange,
       className: cx(
-        `flex items-stretch flex-auto appearance-none relative outline-none min-h-input-height rounded bg-input-background py-[2px] px-[2px]`,
+        `grid appearance-none relative outline-none min-h-input-height rounded bg-input-background py-0.5 px-0.5`,
         className
       ),
-      style: style2
+      style: {
+        ...style2,
+        gridTemplateColumns: `repeat(${items.length}, 1fr)`
+      }
     },
-    separator2 ? items.map((item, index) => {
-      const isLastItem = index === items.length - 1;
-      const currentValue = item?.value;
-      const showSeparator = currentValue !== value && (selectedIndex === 0 && selectedIndex !== index ? true : index !== selectedIndex - 1);
-      return /* @__PURE__ */ import_react78.default.createElement(import_react78.default.Fragment, { key: index }, /* @__PURE__ */ import_react78.default.createElement(SegmentedControlItem, { key: index, ...item }), !isLastItem && /* @__PURE__ */ import_react78.default.createElement(Separator3, { transparent: !showSeparator }));
-    }) : items.map((item, index) => /* @__PURE__ */ import_react78.default.createElement(SegmentedControlItem, { key: index, ...item }))
+    items.map((item, index) => /* @__PURE__ */ import_react78.default.createElement(SegmentedControlItem, { key: index, ...item }))
   ));
 });
 
@@ -11184,7 +11198,7 @@ var SelectionToolbarContainer = (0, import_react79.memo)(
 );
 
 // src/components/SelectMenu.tsx
-var import_noya_icons11 = require("@noya-app/noya-icons");
+var import_noya_icons10 = require("@noya-app/noya-icons");
 var Select = __toESM(require("@radix-ui/react-select"));
 var import_react80 = __toESM(require("react"));
 var readOnlyStyle = {
@@ -11233,7 +11247,7 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
     label && labelPosition === "inset" && /* @__PURE__ */ import_react80.default.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ import_react80.default.createElement(Label, { className: "pr-4 text-text-disabled", htmlFor: id }, label)),
     /* @__PURE__ */ import_react80.default.createElement("span", { className: "flex-1 flex" }, /* @__PURE__ */ import_react80.default.createElement(Select.Value, { placeholder })),
     /* @__PURE__ */ import_react80.default.createElement(
-      import_noya_icons11.DropdownChevronIcon,
+      import_noya_icons10.DropdownChevronIcon,
       {
         className: cx(
           "transition-transform duration-100 ml-1.5",
@@ -11338,13 +11352,13 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         style: contentStyle
       },
       /* @__PURE__ */ import_react80.default.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react80.default.createElement(
-        import_noya_icons11.ChevronUpIcon,
+        import_noya_icons10.ChevronUpIcon,
         {
           className: cx("transition-transform duration-100")
         }
       )),
       /* @__PURE__ */ import_react80.default.createElement(Select.Viewport, null, /* @__PURE__ */ import_react80.default.createElement(MenuViewport, { items, Components: Components3 })),
-      /* @__PURE__ */ import_react80.default.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react80.default.createElement(import_noya_icons11.ChevronDownIcon, null))
+      /* @__PURE__ */ import_react80.default.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react80.default.createElement(import_noya_icons10.ChevronDownIcon, null))
     ))
   );
   return readOnly ? readOnlyButton : content;
@@ -11430,7 +11444,7 @@ var Slider = (0, import_react81.memo)(function Slider2({
       {
         style: trackFillStyle,
         className: cx(
-          "absolute inset-0 w-full h-full rounded overflow-hidden",
+          "absolute inset-0 w-full h-full rounded overflow-hidden bg-primary-pastel",
           colorScheme === "primary" && "bg-primary",
           colorScheme === "secondary" && "bg-secondary"
         )
@@ -12450,9 +12464,14 @@ function BaseToolbar({
 }
 
 // src/components/Toolbar.tsx
-var import_noya_icons12 = require("@noya-app/noya-icons");
+var import_noya_icons11 = require("@noya-app/noya-icons");
 var import_noya_keymap7 = require("@noya-app/noya-keymap");
 var import_react91 = __toESM(require("react"));
+var iconButtonStyle = {
+  height: 27,
+  width: 27,
+  minWidth: 27
+};
 var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
   item,
   onSelectMenuItem
@@ -12470,7 +12489,7 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
         }
       }
     },
-    /* @__PURE__ */ import_react91.default.createElement(Button, { disabled: item.disabled, active: item.checked || open }, item.title, item.title && item.icon && /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }), item.icon && renderIcon(item.icon), /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ import_react91.default.createElement(import_noya_icons12.DropdownChevronIcon, null))
+    /* @__PURE__ */ import_react91.default.createElement(Button, { disabled: item.disabled, active: item.checked || open }, item.icon && renderIcon(item.icon), item.title && item.icon && /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }), item.title, /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }), /* @__PURE__ */ import_react91.default.createElement(import_noya_icons11.DropdownChevronIcon, null))
   );
 });
 var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
@@ -12482,18 +12501,47 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
     {
       disabled: item.disabled,
       active: item.checked,
+      style: item.icon && !item.title ? iconButtonStyle : void 0,
       onClick: () => {
         if (onSelectMenuItem && item.value) {
           onSelectMenuItem(item.value);
         }
       }
     },
-    item.title,
+    item.icon && renderIcon(item.icon),
     item.title && item.icon && /* @__PURE__ */ import_react91.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
-    item.icon && renderIcon(item.icon)
+    item.title
   );
   return item.tooltip ? /* @__PURE__ */ import_react91.default.createElement(Tooltip, { sideOffset: 10, content: item.tooltip }, content) : content;
 });
+var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
+  item,
+  onSelectMenuItem
+}) {
+  if (item.type === "sectionHeader") return null;
+  if (item.type === "separator") {
+    return /* @__PURE__ */ import_react91.default.createElement(DividerVertical, { overflow: 4 });
+  }
+  if (isSelectableMenuItem(item)) {
+    return /* @__PURE__ */ import_react91.default.createElement(ToolbarMenuButton, { item, onSelectMenuItem });
+  }
+  return /* @__PURE__ */ import_react91.default.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+});
+var ToolbarMenu = memoGeneric(function ToolbarMenu2({
+  items,
+  onSelectMenuItem
+}) {
+  return /* @__PURE__ */ import_react91.default.createElement(import_react91.default.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ import_react91.default.createElement(
+      ToolbarMenuItem,
+      {
+        key: i,
+        item,
+        onSelectMenuItem
+      }
+    );
+  }));
+});
 function Toolbar({
   children,
   logo,
@@ -12534,35 +12582,6 @@ function Toolbar({
     children
   );
 }
-var ToolbarMenu = memoGeneric(function ToolbarMenu2({
-  items,
-  onSelectMenuItem
-}) {
-  return /* @__PURE__ */ import_react91.default.createElement(import_react91.default.Fragment, null, items.map((item, i) => {
-    if (item.type === "sectionHeader") return null;
-    if (item.type === "separator") {
-      return /* @__PURE__ */ import_react91.default.createElement(DividerVertical, { key: i, overflow: 4 });
-    }
-    if (isSelectableMenuItem(item)) {
-      return /* @__PURE__ */ import_react91.default.createElement(
-        ToolbarMenuButton,
-        {
-          key: i,
-          item,
-          onSelectMenuItem
-        }
-      );
-    }
-    return /* @__PURE__ */ import_react91.default.createElement(
-      ToolbarMenuDropdown,
-      {
-        key: i,
-        item,
-        onSelectMenuItem
-      }
-    );
-  }));
-});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AIAssistantInput,
@@ -12678,6 +12697,7 @@ var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   ToolbarMenu,
   ToolbarMenuButton,
   ToolbarMenuDropdown,
+  ToolbarMenuItem,
   Tooltip,
   TreeView,
   UserAvatar,