@noya-app/noya-designsystem 0.1.50 → 0.1.51

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import React__default, { ReactNode, CSSProperties, ReactHTML, HTMLAttributes, Ar
 import { IItemScore } from 'vscode-fuzzy-scorer';
 import * as Icons from '@noya-app/noya-icons';
 export { Icons };
-import * as tailwindcss_types_config from 'tailwindcss/types/config';
+import tailwindConfig from '@noya-app/noya-tailwind-config';
 import * as _noya_app_noya_geometry from '@noya-app/noya-geometry';
 import { Size } from '@noya-app/noya-geometry';
 import { UniqueIdentifier } from '@dnd-kit/core';
@@ -132,6 +132,7 @@ type ActionMenuProps<TMenu extends string> = {
     onOpenChange: (open: boolean) => void;
     className?: string;
     style?: React__default.CSSProperties;
+    variant?: "normal" | "bare";
 };
 declare const ActionMenu: <TMenu extends string>(props: ActionMenuProps<TMenu>) => React__default.ReactElement | null;
 
@@ -224,186 +225,7 @@ type BannerProps = {
 };
 declare function Banner({ label, className, style }: BannerProps): React__default.JSX.Element;
 
-declare const config: {
-    content: string[];
-    corePlugins: {
-        preflight: false;
-    };
-    theme: {
-        extend: {
-            colors: {
-                "logo-fill": string;
-                "logo-highlight": string;
-                background: string;
-                text: string;
-                "text-muted": string;
-                "text-subtle": string;
-                "text-disabled": string;
-                "text-decorative-light": string;
-                "divider-subtle": string;
-                divider: string;
-                "divider-strong": string;
-                primary: string;
-                "primary-light": string;
-                "primary-pastel": string;
-                secondary: string;
-                "secondary-light": string;
-                "secondary-pastel": string;
-                "secondary-bright": string;
-                "input-background": string;
-                "input-background-light": string;
-                "list-view-hover-background": string;
-                "list-view-thumbnail-background": string;
-                "code-background": string;
-                "code-background-dark": string;
-                "selected-background": string;
-                "breadcrumb-text": string;
-                "breadcrumb-text-hover": string;
-                "breadcrumb-icon": string;
-                "canvas-background": string;
-                "canvas-grid": string;
-                "sidebar-background": string;
-                "sidebar-background-transparent": string;
-                "popover-background": string;
-                "popover-divider": string;
-                "listview-raised-background": string;
-                "listview-editing-background": string;
-                "slider-thumb-background": string;
-                "slider-border": string;
-                "segmented-control-item": string;
-                mask: string;
-                "transparent-checker": string;
-                scrollbar: string;
-                "placeholder-dots": string;
-                "drag-outline": string;
-                "active-background": string;
-                "thumbnail-background": string;
-                "thumbnail-shadow": string;
-                "inline-code-text": string;
-                "inline-code-background": string;
-                "text-link": string;
-                "text-link-focused": string;
-                icon: string;
-                "icon-selected": string;
-                warning: string;
-                dot: string;
-                "row-highlight": string;
-                "table-row-background": string;
-                "chip-primary-bg": string;
-                "chip-secondary-bg": string;
-                "chip-error-bg": string;
-                "chip-default-bg": string;
-                "chip-primary-shadow": string;
-                "chip-secondary-shadow": string;
-                "chip-error-shadow": string;
-                "chip-default-shadow": string;
-                "floating-button": string;
-                "block-border": string;
-                "block-highlight": string;
-            };
-            fontFamily: {
-                sans: [string, string, string, string, string, string, string, string, string, string];
-                mono: [string, string, string, string, string];
-            };
-            fontSize: {
-                title: [string, {
-                    lineHeight: string;
-                    letterSpacing: string;
-                }];
-                subtitle: [string, {
-                    lineHeight: string;
-                    letterSpacing: string;
-                }];
-                heading1: [string, {
-                    lineHeight: string;
-                    letterSpacing: string;
-                }];
-                heading2: [string, {
-                    lineHeight: string;
-                    letterSpacing: string;
-                }];
-                heading3: [string, {
-                    lineHeight: string;
-                    letterSpacing: string;
-                }];
-                heading4: [string, {
-                    lineHeight: string;
-                }];
-                heading5: [string, {
-                    lineHeight: string;
-                }];
-                body: [string, {
-                    lineHeight: string;
-                }];
-                small: [string, {
-                    lineHeight: string;
-                }];
-                code: [string, {
-                    lineHeight: string;
-                }];
-                button: [string, {
-                    lineHeight: string;
-                    letterSpacing: string;
-                }];
-                label: [string, {
-                    lineHeight: string;
-                    letterSpacing: string;
-                }];
-            };
-            spacing: {
-                nano: string;
-                micro: string;
-                small: string;
-                medium: string;
-                large: string;
-                xlarge: string;
-                xxlarge: string;
-                "inset-top": string;
-                "sidebar-width": string;
-                "toolbar-height": string;
-                "toolbar-separator": string;
-                "inspector-h-separator": string;
-                "inspector-v-separator": string;
-                "dialog-padding": string;
-                "input-height": string;
-            };
-            keyframes: {
-                spin: {
-                    "0%": {
-                        transform: string;
-                    };
-                    "100%": {
-                        transform: string;
-                    };
-                };
-                shimmer: {
-                    "0%": {
-                        backgroundPosition: string;
-                    };
-                    "100%": {
-                        backgroundPosition: string;
-                    };
-                };
-            };
-            animation: {
-                spin: string;
-                shimmer: string;
-            };
-            zIndex: {
-                interactable: string;
-                label: string;
-                menu: string;
-            };
-        };
-    };
-    safelist: string[];
-    plugins: {
-        handler: tailwindcss_types_config.PluginCreator;
-        config?: Partial<tailwindcss_types_config.Config> | undefined;
-    }[];
-};
-
-type Theme = (typeof config.theme)["extend"];
+type Theme = (typeof tailwindConfig.theme)["extend"];
 type ThemeColor = keyof Theme["colors"];
 declare const cssVars: {
     colors: {
@@ -520,6 +342,10 @@ declare const cssVars: {
             lineHeight: string;
             letterSpacing: string;
         }];
+        listSmall: [string, {
+            lineHeight: string;
+            letterSpacing: string;
+        }];
         label: [string, {
             lineHeight: string;
             letterSpacing: string;
@@ -659,15 +485,6 @@ interface ChipProps {
 }
 declare const Chip: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ChipProps & React__default.RefAttributes<HTMLSpanElement>>>;
 
-type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
-declare const getGridSize: (size: GridViewSize) => {
-    minColumnWidth: string;
-    gap: number;
-};
-declare const Grid: <T, M extends string = string>(props: CollectionProps<T, M> & {
-    ref?: React__default.ForwardedRef<CollectionRef>;
-} & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
-
 type RelativeDropPosition = "above" | "below" | "inside";
 type DropValidator = (sourceIndex: number, targetIndex: number, position: RelativeDropPosition) => boolean;
 declare const normalizeListTargetIndex: (index: number, position: "above" | "below") => number;
@@ -879,6 +696,7 @@ type CollectionRef = {
 type CollectionThumbnailProps<T> = {
     item: T;
     selected: boolean;
+    size?: CollectionItemSize;
 };
 type CollectionRenderActionProps<T> = {
     item: T;
@@ -905,7 +723,7 @@ interface CollectionProps<T, M extends string = string> {
     menuItems?: MenuItem<M>[];
     onSelectMenuItem?: (action: M, selectedItems: T[]) => void;
     onRename?: (item: T, newName: string) => void;
-    renderThumbnail?: ({ item, selected, }: CollectionThumbnailProps<T>) => React__default.ReactNode;
+    renderThumbnail?: ({ item, selected, size, }: CollectionThumbnailProps<T>) => React__default.ReactNode;
     renderAction?: "menu" | ((props: CollectionRenderActionProps<T>) => React__default.ReactNode);
     renderDetail?: (item: T, selected: boolean) => React__default.ReactNode;
     /** Callback when selection changes. If not provided, selection will be disabled. */
@@ -915,7 +733,7 @@ interface CollectionProps<T, M extends string = string> {
     /** Position of the detail content. Defaults to 'end'. */
     detailPosition?: "end" | "below";
     /** Size of the list items. Defaults to 'medium'. */
-    size?: GridViewSize;
+    size?: CollectionItemSize;
     /** Size of the thumbnail. Defaults to 'auto', which will be based on the size prop. */
     thumbnailSize?: CollectionThumbnailSize;
     /** For testing: Override the hover state with a specific item ID */
@@ -942,6 +760,7 @@ interface CollectionProps<T, M extends string = string> {
     dragIndicatorStyle?: ListViewRowProps<M>["dragIndicatorStyle"];
 }
 declare const Collection: <T, M extends string = string>(props: CollectionProps<T, M> & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
+type CollectionItemSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
 
 type InputSize = "small" | "medium" | "large";
 
@@ -975,6 +794,8 @@ type SubmittableProps = Props$d & {
     onSubmit: (value: string) => void;
     allowSubmittingWithSameValue?: boolean;
     submitAutomaticallyAfterDelay?: number;
+    /** @default true */
+    submitOnBlur?: boolean;
 };
 type TextInputProps = ReadOnlyProps | ControlledProps | SubmittableProps;
 
@@ -1118,6 +939,8 @@ interface ComboboxMenuProps<T extends string> {
     listSize: Size;
     style?: React__default.CSSProperties;
     indented?: boolean;
+    /** @default right */
+    iconPosition?: "left" | "right";
 }
 declare const ComboboxMenu: <T extends string>(props: ComboboxMenuProps<T> & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement | null;
 
@@ -1330,9 +1153,10 @@ declare const FileExplorerUploadButton: ({ showUploadButton, onUpload, children,
     children?: React__default.ReactNode;
 }) => React__default.JSX.Element;
 declare const FileExplorerCollection: <T, M extends string = string>(props: CollectionProps<T, M> & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
-declare const FileExplorerDetail: ({ selected, children, }: {
+declare const FileExplorerDetail: ({ selected, size, children, }: {
     selected: boolean;
     children: React__default.ReactNode;
+    size?: CollectionItemSize;
 }) => React__default.JSX.Element;
 declare const FileExplorerEmptyState: ({ label, ...props }: BannerProps$1) => React__default.JSX.Element;
 
@@ -1393,6 +1217,14 @@ interface Props$8 {
 }
 declare const GradientPicker: React$1.NamedExoticComponent<Props$8>;
 
+declare const getGridSize: (size: CollectionItemSize) => {
+    minColumnWidth: string;
+    gap: number;
+};
+declare const Grid: <T, M extends string = string>(props: CollectionProps<T, M> & {
+    ref?: React__default.ForwardedRef<CollectionRef>;
+} & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
+
 interface ItemProps<MenuItemType extends string = string> {
     id: string;
     title?: ReactNode;
@@ -1555,6 +1387,7 @@ type MediaThumbnailProps = {
      * If provided, use this icon instead of the default one for the asset type
      */
     iconName?: IconName;
+    size?: CollectionItemSize;
 };
 declare const getThumbnailColors: (colorScheme: ColorScheme$1, selected: boolean) => {
     icon: string;
@@ -2064,7 +1897,13 @@ declare class ComboboxState<T extends string> {
     setSelectedIndex(index: number): void;
     submitArbitraryFilter(filter: string): void;
 }
-declare function getNextIndex<T>(items: T[], currentIndex: number, direction: "next" | "previous", isDisabled: (item: T) => boolean): number;
+declare function filterWithGroupedSections<T extends string>(items: MenuItem<T>[], query: string): ScoredMenuItem<T>[];
+declare function getNextIndex<T>({ items, currentIndex, direction, isDisabled, }: {
+    items: T[];
+    currentIndex: number;
+    direction: "next" | "previous";
+    isDisabled: (item: T) => boolean;
+}): number;
 declare function useComboboxState<T extends string>(state: ComboboxState<T>): ComboboxStateSnapshot<T>;
 
 type MoveOptions = {
@@ -2188,9 +2027,9 @@ interface ToolbarProps<T extends string = string> {
     shouldBindKeyboardShortcuts?: boolean;
 }
 declare function Toolbar<T extends string = string>({ children, logo, leftMenuItems, rightMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts, }: ToolbarProps<T>): React__default.JSX.Element;
-declare function ToolbarMenu<T extends string>({ items, onSelectMenuItem, }: {
+declare const ToolbarMenu: <T extends string>(props: {
     items: MenuItem<T>[];
     onSelectMenuItem?: (value: T) => void;
-}): React__default.JSX.Element;
+}) => React__default.ReactElement | null;
 
-export { AIAssistantInput, AIAssistantLayout, AIAssistantLoadingIndicator, type AcceptsDropOptions, ActionMenu, ActivityIndicator, AnimatePresence, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, Banner, type BannerProps, type BaseComboboxProps, BaseToolbar, type BaseToolbarProps, Body, BreadcrumbText, Button, type ButtonRootProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, Collection, type CollectionProps, type CollectionRef, type CollectionRenderActionProps, type CollectionThumbnailProps, type CollectionThumbnailSize, type CollectionViewType, Combobox, ComboboxMenu, type ComboboxProps, type ComboboxRef, ComboboxState, type ComboboxStateSnapshot, CommandPalette, ConnectedUsersMenuLayout, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, type DetectSizeType, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, type DragIndicatorStyleProps, DraggableMenuButton, Drawer, type DrawerProps, type DropValidator, DropdownMenu, type DropdownRootProps, EDITOR_PANEL_GROUP_ID, type EditableRowProps, EditableText, type EditableTextRef, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FileExplorerCollection, FileExplorerDetail, FileExplorerEmptyState, FileExplorerLayout, FileExplorerUploadButton, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, Grid, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, INPUT_HEIGHT, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabelContext, type LabelPosition, LabelPositionContext, type LabelPositionContextValue, type LabelProps, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, type LayoutProps, List, type ListRowMarginType, type ListRowPosition, ListView, type ListViewItemInfo, type ListViewRootProps, type ListViewRowProps, Logo, type MatchRange, MediaThumbnail, type MenuComponents, type MenuConfig, type MenuItem, type MenuItemIcon, type MenuItemProps, type MenuItemRole, type MenuProps, MenuViewport, Message, type MessageProps, type MoveTreeItemOptions, type NonSelectableMenuItem, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, PatternPreviewBackground, type PercentageSidebarOptions, PipelineResultLayout, PipelineResultLink, Popover, Progress, RIGHT_SIDEBAR_ID, type RelativeDropPosition, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, SearchCompletionMenu, Section$1 as Section, SectionHeader$1 as SectionHeader, type SectionHeaderMenuItem, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, type SeparatorItem, type SetNumberMode, type SideOptions, type SideType, type SidebarRef, type SketchPattern, Slider, Small, Sortable, type SortableItemContextProps, Spacer, type StringModeOnlyProps, type StringModeProps, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, TextArea, TextAreaRow, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, Toolbar, ToolbarMenu, type ToolbarProps, Tooltip, TreeView, type UseThemeReturnType, UserAvatar, UserPointer, type UserPointerProps, WorkspaceLayout, type WorkspaceLayoutProps, type WorkspaceLayoutRef, acceptsDrop, colorForStringValues, colorFromString, createSectionedMenu, cssVars, cx, defaultAcceptsDrop, fuzzyFilter, fuzzyScore, fuzzyTokenize, getFieldSpacing, getGradientBackground, getGridSize, getKeyboardShortcutsForMenuItems, getMenuItemKey, getNewValue, getNextIndex, getThumbnailColors, isMenuItemSectionHeader, isNonSelectableMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, labeledFieldStyles, mediaQuery, mergeConflictingClassNames, moveTreeItem, normalizeListTargetIndex, popoverStyle, renderIcon, rgbaToSketchColor, separator, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, styles, textStyles, updateSelection, useAutoResize, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useDialogContext, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelPosition, useLabelWidth, useOpenConfirmationDialog, useOpenDialog, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, useTheme, validateDropIndicator, withSeparatorElements };
+export { AIAssistantInput, AIAssistantLayout, AIAssistantLoadingIndicator, type AcceptsDropOptions, ActionMenu, ActivityIndicator, AnimatePresence, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, Banner, type BannerProps, type BaseComboboxProps, BaseToolbar, type BaseToolbarProps, Body, BreadcrumbText, Button, type ButtonRootProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, Collection, type CollectionItemSize, type CollectionProps, type CollectionRef, type CollectionRenderActionProps, type CollectionThumbnailProps, type CollectionThumbnailSize, type CollectionViewType, Combobox, ComboboxMenu, type ComboboxProps, type ComboboxRef, ComboboxState, type ComboboxStateSnapshot, CommandPalette, ConnectedUsersMenuLayout, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, type DetectSizeType, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, type DragIndicatorStyleProps, DraggableMenuButton, Drawer, type DrawerProps, type DropValidator, DropdownMenu, type DropdownRootProps, EDITOR_PANEL_GROUP_ID, type EditableRowProps, EditableText, type EditableTextRef, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FileExplorerCollection, FileExplorerDetail, FileExplorerEmptyState, FileExplorerLayout, FileExplorerUploadButton, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, Grid, GridView, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, INPUT_HEIGHT, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabelContext, type LabelPosition, LabelPositionContext, type LabelPositionContextValue, type LabelProps, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, type LayoutProps, List, type ListRowMarginType, type ListRowPosition, ListView, type ListViewItemInfo, type ListViewRootProps, type ListViewRowProps, Logo, type MatchRange, MediaThumbnail, type MenuComponents, type MenuConfig, type MenuItem, type MenuItemIcon, type MenuItemProps, type MenuItemRole, type MenuProps, MenuViewport, Message, type MessageProps, type MoveTreeItemOptions, type NonSelectableMenuItem, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, PatternPreviewBackground, type PercentageSidebarOptions, PipelineResultLayout, PipelineResultLink, Popover, Progress, RIGHT_SIDEBAR_ID, type RelativeDropPosition, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, SearchCompletionMenu, Section$1 as Section, SectionHeader$1 as SectionHeader, type SectionHeaderMenuItem, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, type SeparatorItem, type SetNumberMode, type SideOptions, type SideType, type SidebarRef, type SketchPattern, Slider, Small, Sortable, type SortableItemContextProps, Spacer, type StringModeOnlyProps, type StringModeProps, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, TextArea, TextAreaRow, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, Toolbar, ToolbarMenu, type ToolbarProps, Tooltip, TreeView, type UseThemeReturnType, UserAvatar, UserPointer, type UserPointerProps, WorkspaceLayout, type WorkspaceLayoutProps, type WorkspaceLayoutRef, acceptsDrop, colorForStringValues, colorFromString, createSectionedMenu, cssVars, cx, defaultAcceptsDrop, filterWithGroupedSections, fuzzyFilter, fuzzyScore, fuzzyTokenize, getFieldSpacing, getGradientBackground, getGridSize, getKeyboardShortcutsForMenuItems, getMenuItemKey, getNewValue, getNextIndex, getThumbnailColors, isMenuItemSectionHeader, isNonSelectableMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, labeledFieldStyles, mediaQuery, mergeConflictingClassNames, moveTreeItem, normalizeListTargetIndex, popoverStyle, renderIcon, rgbaToSketchColor, separator, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, styles, textStyles, updateSelection, useAutoResize, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useDialogContext, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelPosition, useLabelWidth, useOpenConfirmationDialog, useOpenDialog, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, useTheme, validateDropIndicator, withSeparatorElements };