@noya-app/noya-designsystem 0.1.38 → 0.1.40

package/dist/index.d.mts

@@ -1,17 +1,17 @@
-import * as React$1 from 'react';
-import React__default, { CSSProperties, ReactNode, InputHTMLAttributes, ComponentProps, SyntheticEvent, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, Ref, LabelHTMLAttributes, ReactHTML } from 'react';
+import * as React from 'react';
+import React__default, { CSSProperties, ReactNode, InputHTMLAttributes, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, Ref, HTMLAttributes, ComponentProps, SyntheticEvent, LabelHTMLAttributes, ReactHTML } from 'react';
+import * as _noya_app_noya_geometry from '@noya-app/noya-geometry';
+import { Size } from '@noya-app/noya-geometry';
+import { IItemScore } from 'vscode-fuzzy-scorer';
+import { Property } from 'csstype';
 import * as Icons from '@noya-app/noya-icons';
 export { Icons };
+import { useSortable } from '@dnd-kit/sortable';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Sketch } from '@noya-app/noya-file-format';
 import * as _noya_app_noya_keymap from '@noya-app/noya-keymap';
 import { KeyModifiers, PlatformName } from '@noya-app/noya-keymap';
-import { Property } from 'csstype';
-import * as _noya_app_noya_geometry from '@noya-app/noya-geometry';
-import { Size } from '@noya-app/noya-geometry';
-import { IItemScore } from 'vscode-fuzzy-scorer';
-import { useSortable } from '@dnd-kit/sortable';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { SelectProps } from '@radix-ui/react-select';
 import { ImperativePanelGroupHandle } from 'react-resizable-panels';
@@ -23,21 +23,57 @@ interface Props$f {
     color?: string;
     trackColor?: string;
 }
-declare const ActivityIndicator: (props: Props$f) => React__default.ReactElement | null;
+declare const ActivityIndicator: React__default.NamedExoticComponent<Props$f>;
 
-declare const Avatar: (props: {
+type AnimatePresenceProps = {
+    children: React__default.ReactNode;
+    /**
+     * Duration of enter/exit animations in milliseconds
+     * @default 200
+     */
+    duration?: number;
+    /**
+     * Custom styles to apply during animations
+     */
+    animationStyles?: {
+        entering?: React__default.CSSProperties;
+        entered?: React__default.CSSProperties;
+        exiting?: React__default.CSSProperties;
+    };
+    /** @default false */
+    skipInitialAnimation?: boolean;
+    /**
+     * @default "wait"
+     * "wait" - wait for the previous animation to finish before starting the next one
+     * "crossfade" - crossfade between the previous and next animation
+     */
+    mode?: "wait" | "crossfade";
+};
+declare const AnimatePresence: ({ children, duration, animationStyles, skipInitialAnimation, mode, }: AnimatePresenceProps) => React__default.JSX.Element;
+
+type AvatarProps = {
     image?: string;
     name?: string;
-    fallback?: string;
+    /** string used to generate a fallback monogram. more unique strings are better. */
+    userId?: string;
     size?: number;
     overflow?: number;
     style?: React__default.CSSProperties;
     className?: string;
-} & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
-declare function AvatarStack({ size, children, }: {
+    /** colors are generated from the fallback string or title, but you can override it here */
+    backgroundColor?: string;
+    /** @default normal */
+    variant?: "normal" | "bare";
+    disabled?: boolean;
+};
+declare const Avatar: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<AvatarProps & React__default.RefAttributes<HTMLDivElement>>>;
+declare const AvatarStack: React__default.NamedExoticComponent<{
     size?: number;
+    /** @default 3 */
+    max?: number;
     children: React__default.ReactNode;
-}): React__default.JSX.Element;
+    className?: string;
+}>;
 
 type ButtonVariant = "normal" | "primary" | "secondary" | "secondaryBright" | "thin" | "floating" | "none";
 type ButtonSize = "small" | "normal" | "large" | "floating";
@@ -61,12 +97,12 @@ interface ButtonRootProps {
     target?: string;
     rel?: string;
 }
-declare const Button: (props: ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
+declare const Button: React__default.ForwardRefExoticComponent<ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>>;
 
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
     colorScheme?: "primary" | "secondary";
 }
-declare const Checkbox$1: (props: CheckboxProps & React__default.RefAttributes<HTMLInputElement>) => React__default.ReactElement | null;
+declare const Checkbox$1: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLInputElement>>>;
 
 type ChipColorScheme = "primary" | "secondary" | "error";
 type ChipSize = "small" | "medium" | "large";
@@ -89,7 +125,50 @@ interface ChipProps {
     style?: React__default.CSSProperties;
     tabIndex?: number;
 }
-declare const Chip: (props: ChipProps & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
+declare const Chip: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ChipProps & React__default.RefAttributes<HTMLSpanElement>>>;
+
+declare function fuzzyScore({ item, query }: {
+    item: string;
+    query: string;
+}): IItemScore;
+type IScoredItem = IItemScore & {
+    index: number;
+};
+declare function fuzzyFilter({ items, query, scoreThreshold, }: {
+    items: string[];
+    query: string;
+    scoreThreshold?: number;
+}): IScoredItem[];
+type IToken = {
+    type: 'text';
+    text: string;
+} | {
+    type: 'match';
+    text: string;
+};
+type MatchRange = {
+    start: number;
+    end: number;
+};
+declare function fuzzyTokenize({ item, itemScore, }: {
+    item: string;
+    itemScore: IItemScore;
+}): IToken[];
+
+type CompletionItem = {
+    type?: undefined;
+    id: string;
+    name: string;
+    icon?: ReactNode;
+    alwaysInclude?: boolean;
+};
+type CompletionSectionHeader = {
+    type: 'sectionHeader';
+    id: string;
+    name: string;
+    maxVisibleItems?: number;
+};
+type CompletionListItem = (CompletionItem & IScoredItem) | CompletionSectionHeader;
 
 type IconName = keyof typeof Icons;
 
@@ -109,180 +188,11 @@ type RegularMenuItem<T extends string> = {
 };
 type MenuItem<T extends string> = typeof SEPARATOR_ITEM | RegularMenuItem<T>;
 type ExtractMenuItemType<T> = T extends RegularMenuItem<infer U> ? U : never;
-declare const KeyboardShortcut: (props: {
+declare const KeyboardShortcut: React__default.NamedExoticComponent<{
     shortcut: string;
-}) => React__default.ReactElement | null;
-
-interface MenuItemProps<T extends string> {
-    value?: T;
-    children: ReactNode;
-    onSelect: (value: T) => void;
-    checked: boolean;
-    disabled: boolean;
-    indented: boolean;
-    shortcut?: string;
-    icon?: ReactNode;
-    items?: MenuItem<T>[];
-}
-interface MenuProps<T extends string> {
-    children: ReactNode;
-    items: MenuItem<T>[];
-    onSelect: (value: T) => void;
-    isNested?: boolean;
-    shouldBindKeyboardShortcuts?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}
-declare const ContextMenu: <T extends string>(props: MenuProps<T>) => React__default.ReactElement | null;
-
-declare const StyledContent: (props: Omit<DialogPrimitive.DialogContentProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
-interface IDialog {
-    containsElement: (element: HTMLElement) => boolean;
-}
-interface Props$e {
-    title?: ReactNode;
-    description?: ReactNode;
-    children?: ReactNode;
-    style?: ComponentProps<typeof StyledContent>["style"];
-    open: ComponentProps<typeof DialogPrimitive.Root>["open"];
-    onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>["onOpenChange"];
-    onOpenAutoFocus?: ComponentProps<typeof DialogPrimitive.Content>["onOpenAutoFocus"];
-    closeOnInteractOutside?: boolean;
-}
-declare const Dialog: (props: Props$e & React__default.RefAttributes<IDialog>) => React__default.ReactElement | null;
-declare const FullscreenDialog: (props: Props$e & React__default.RefAttributes<IDialog>) => React__default.ReactElement | null;
-
-type DividerVariant = "normal" | "subtle" | "strong";
-interface DividerProps {
-    variant?: DividerVariant;
-    overflow?: number | string;
-    className?: string;
-    style?: React__default.CSSProperties;
-}
-declare const Divider: (props: DividerProps) => React__default.ReactElement | null;
-declare const DividerVertical: (props: DividerProps) => React__default.ReactElement | null;
-
-/**
- * A button that opens a menu when clicked, but also allows dragging the
- */
-declare const DraggableMenuButton: <T extends string>(props: {
-    items?: MenuItem<T>[];
-    onSelect?: (value: T) => void;
-    isVisible?: boolean;
-}) => React__default.ReactElement | null;
+}>;
 
-declare const DropdownMenu: <T extends string>(props: MenuProps<T> & {
-    open?: boolean;
-    onCloseAutoFocus?: React__default.EventHandler<SyntheticEvent<unknown>>;
-    emptyState?: React__default.ReactNode;
-} & Pick<RadixDropdownMenu.DropdownMenuContentProps & React__default.RefAttributes<HTMLDivElement>, "align" | "side" | "sideOffset" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
-
-declare const SUPPORTED_IMAGE_UPLOAD_TYPES: ("image/png" | "image/jpeg" | "image/webp" | "image/svg+xml" | "application/pdf")[];
-declare const SUPPORTED_CANVAS_UPLOAD_TYPES: ("" | "image/png" | "image/jpeg" | "image/webp" | "image/svg+xml" | "application/pdf")[];
-type SupportedImageUploadType = (typeof SUPPORTED_IMAGE_UPLOAD_TYPES)[number];
-type SupportedCanvasUploadType = (typeof SUPPORTED_CANVAS_UPLOAD_TYPES)[number];
-type SketchPattern = {
-    _class: 'pattern';
-    image?: Sketch.FileRef | Sketch.DataRef;
-    patternFillType: Sketch.PatternFillType;
-    patternTileScale: number;
-};
-
-interface Props$d {
-    id?: string;
-    value?: Sketch.Color | Sketch.Gradient | SketchPattern;
-}
-declare const FillInputField: (props: Props$d & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
-
-declare const PatternPreviewBackground: (props: {
-    fillType: Sketch.PatternFillType;
-    tileScale: number;
-    imageRef: string;
-}) => React__default.ReactElement | null;
-interface Props$c {
-    value?: Sketch.Color | Sketch.Gradient | SketchPattern;
-}
-declare const FillPreviewBackground: (props: Props$c) => React__default.ReactElement | null;
-
-interface FloatingWindowProps {
-    title?: string;
-    onClose?: () => void;
-    children: React__default.ReactNode;
-    initialWidth?: number;
-    initialHeight?: number;
-    initialX?: number;
-    initialY?: number;
-    minWidth?: number;
-    minHeight?: number;
-    toolbarContent?: React__default.ReactNode;
-    renderToolbar?: (props: {
-        title?: string;
-        toolbarContent?: React__default.ReactNode;
-        onClose?: () => void;
-    }) => React__default.ReactNode;
-}
-declare const FloatingWindow: React__default.FC<FloatingWindowProps>;
-
-interface Props$b {
-    value: Sketch.GradientStop[];
-    selectedStop: number;
-    onChangeColor: (color: Sketch.Color) => void;
-    onChangePosition: (position: number) => void;
-    onAdd: (color: Sketch.Color, position: number) => void;
-    onDelete: () => void;
-    onSelectStop: (index: number) => void;
-}
-declare const GradientPicker: (props: Props$b) => React__default.ReactElement | null;
-
-type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
-interface ItemProps$2<MenuItemType extends string = string> {
-    id: string;
-    title?: ReactNode;
-    subtitle?: ReactNode;
-    loading?: boolean;
-    selected?: boolean;
-    onClick?: (event: React__default.MouseEvent) => void;
-    onPress?: (options: KeyModifiers) => void;
-    onDoubleClick?: () => void;
-    onHoverChange?: (isHovering: boolean) => void;
-    children?: ReactNode;
-    menuItems?: MenuItem<MenuItemType>[];
-    onSelectMenuItem?: (value: MenuItemType) => void;
-    onContextMenu?: () => void;
-    style?: CSSProperties;
-}
-type GridViewContextValue = {
-    size: GridViewSize;
-    textPosition: "overlay" | "below" | "toolip";
-    bordered: boolean;
-    disabled: boolean;
-};
-interface GridViewRootProps extends Partial<GridViewContextValue> {
-    children: ReactNode;
-    onClick?: () => void;
-    scrollable?: boolean;
-}
-declare namespace GridView {
-    const Root: (props: GridViewRootProps) => React__default.ReactElement | null;
-    const Item: <MenuItemType extends string>(props: ItemProps$2<MenuItemType> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
-    const Section: (props: {
-        children?: ReactNode;
-        className?: string;
-    }) => React__default.ReactElement | null;
-    const SectionHeader: (props: {
-        title: string;
-    }) => React__default.ReactElement | null;
-}
-
-declare const IconButton: (props: Omit<ButtonRootProps, "size" | "children" | "flex" | "variant"> & {
-    iconName: IconName;
-    className?: string;
-    style?: CSSProperties;
-    selected?: boolean;
-    color?: string;
-    size?: number;
-} & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
-
-type Props$a = {
+type Props$e = {
     id?: string;
     style?: any;
     className?: string;
@@ -300,13 +210,15 @@ type Props$a = {
     onFocusChange?: (isFocused: boolean) => void;
     onBlur?: FocusEventHandler;
 } & Pick<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "autoFocus">;
-type ReadOnlyProps = Props$a & {
+type ReadOnlyProps = Props$e & {
     readOnly: true;
 };
-type ControlledProps = Props$a & {
+type ControlledProps = Props$e & {
     onChange: (value: string) => void;
+    onFocus?: FocusEventHandler;
+    onBlur?: FocusEventHandler;
 };
-type SubmittableProps = Props$a & {
+type SubmittableProps = Props$e & {
     onSubmit: (value: string) => void;
     allowSubmittingWithSameValue?: boolean;
     submitAutomaticallyAfterDelay?: number;
@@ -329,11 +241,14 @@ type InputFieldNumberInputProps = Omit<TextInputProps, "value" | "onChange" | "o
     value: number | undefined;
     onNudge?: (value: number) => void;
     variant?: "bare";
+    onFocus?: FocusEventHandler;
+    onBlur?: FocusEventHandler;
 } & ({
     onChange: (value: number) => void;
 } | {
     onSubmit: (value: number) => void;
 });
+declare function InputFieldNumberInput(props: InputFieldNumberInputProps): React__default.JSX.Element;
 interface InputFieldRootProps {
     id?: string;
     flex?: string;
@@ -352,71 +267,29 @@ interface InputFieldRootProps {
     style?: React__default.CSSProperties;
     className?: string;
 }
+declare function InputFieldRoot({ id, flex, children, width, labelPosition, labelSize, size, renderPopoverContent, onFocusChange, style, className, }: InputFieldRootProps): React__default.JSX.Element;
 declare namespace InputField {
-    const Root: (props: InputFieldRootProps) => React__default.ReactElement | null;
-    const Input: (props: InputFieldInputProps & React__default.RefAttributes<HTMLInputElement>) => React__default.ReactElement | null;
-    const Typeahead: (props: {
+    const Root: React__default.MemoExoticComponent<typeof InputFieldRoot>;
+    const Input: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<InputFieldInputProps & React__default.RefAttributes<HTMLInputElement>>>;
+    const Typeahead: React__default.MemoExoticComponent<(props: {
         prefix: string;
         value: string;
-    }) => React__default.ReactElement | null;
-    const NumberInput: (props: InputFieldNumberInputProps) => React__default.ReactElement | null;
+    }) => React__default.JSX.Element>;
+    const NumberInput: React__default.MemoExoticComponent<typeof InputFieldNumberInput>;
     const DropdownMenu: <T extends string>(props: InputFieldDropdownProps<T>) => React__default.ReactElement | null;
-    const Button: (props: React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
-    const Label: (props: React__default.LabelHTMLAttributes<HTMLLabelElement> & React__default.RefAttributes<HTMLLabelElement>) => React__default.ReactElement | null;
-    const PrimitiveElement: ({ readOnly, disabled, className, ...props }: {
+    const Button: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>>>;
+    const Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.LabelHTMLAttributes<HTMLLabelElement> & React__default.RefAttributes<HTMLLabelElement>>>;
+    const PrimitiveElement: ({ readOnly, disabled, className, style, ...props }: {
         readOnly?: boolean;
         disabled?: boolean;
     } & React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => React__default.JSX.Element;
 }
 
-declare function fuzzyScore({ item, query }: {
-    item: string;
-    query: string;
-}): IItemScore;
-type IScoredItem = IItemScore & {
-    index: number;
-};
-declare function fuzzyFilter({ items, query, scoreThreshold, }: {
-    items: string[];
-    query: string;
-    scoreThreshold?: number;
-}): IScoredItem[];
-type IToken = {
-    type: 'text';
-    text: string;
-} | {
-    type: 'match';
-    text: string;
-};
-type MatchRange = {
-    start: number;
-    end: number;
-};
-declare function fuzzyTokenize({ item, itemScore, }: {
-    item: string;
-    itemScore: IItemScore;
-}): IToken[];
-
-type CompletionItem = {
-    type?: undefined;
-    id: string;
-    name: string;
-    icon?: ReactNode;
-    alwaysInclude?: boolean;
-};
-type CompletionSectionHeader = {
-    type: 'sectionHeader';
-    id: string;
-    name: string;
-    maxVisibleItems?: number;
-};
-type CompletionListItem = (CompletionItem & IScoredItem) | CompletionSectionHeader;
-
 type RelativeDropPosition = "above" | "below" | "inside";
 type DropValidator = (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => boolean;
 declare const normalizeListDestinationIndex: (index: number, position: "above" | "below") => number;
 type UseSortableReturnType = ReturnType<typeof useSortable>;
-interface ItemProps$1<T> {
+interface ItemProps$2<T> {
     id: string;
     disabled?: boolean;
     children: (props: {
@@ -434,7 +307,7 @@ interface RootProps {
     axis?: "x" | "y";
 }
 declare namespace Sortable {
-    const Item: <T extends HTMLElement>(props: ItemProps$1<T>) => React__default.ReactElement | null;
+    const Item: <T extends HTMLElement>(props: ItemProps$2<T>) => React__default.ReactElement | null;
     const Root: (props: RootProps) => React__default.ReactElement | null;
 }
 
@@ -461,6 +334,7 @@ interface EditableRowProps {
     autoFocus: boolean;
     placeholder?: string;
 }
+declare function ListViewEditableRowTitle({ value, onSubmitEditing, autoFocus, placeholder, }: EditableRowProps): React__default.JSX.Element;
 interface ListViewClickInfo {
     shiftKey: boolean;
     altKey: boolean;
@@ -537,11 +411,11 @@ type ListViewRootProps = {
     colorScheme?: ListColorScheme;
 };
 declare namespace ListView {
-    const RowTitle: (props: {
+    const RowTitle: React__default.MemoExoticComponent<({ className, children, ...props }: {
         className?: string;
         children: React__default.ReactNode;
-    } & React__default.HTMLAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
-    const EditableRowTitle: (props: EditableRowProps) => React__default.ReactElement | null;
+    } & HTMLAttributes<HTMLSpanElement>) => React__default.JSX.Element>;
+    const EditableRowTitle: React__default.MemoExoticComponent<typeof ListViewEditableRowTitle>;
     const Row: <MenuItemType extends string>(props: ListViewRowProps<MenuItemType> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
     const Root: <T = any>(props: ((ChildrenProps | RenderProps<T>) & ListViewRootProps) & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement | null;
     const RowContext: React__default.Context<ListRowContextValue>;
@@ -549,12 +423,12 @@ declare namespace ListView {
     type ItemInfo = ListViewItemInfo;
     type RowProps<MenuItemType extends string = string> = ListViewRowProps<MenuItemType>;
     type VirtualizedList = IVirtualizedList;
-    const DragIndicator: (props: React__default.HTMLAttributes<HTMLDivElement> & {
+    const DragIndicator: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & {
         $relativeDropPosition: RelativeDropPosition;
         $gap: number;
         $offsetLeft: number;
         $colorScheme: ListColorScheme;
-    } & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
+    } & React__default.RefAttributes<HTMLDivElement>>;
     const rowHeight = 31;
     const sectionHeaderLabelHeight = 27;
     const calculateHeight: (items: number, headerCount: number, headerVariant: ListViewSectionHeaderVariant) => number;
@@ -568,8 +442,9 @@ interface CompletionMenuProps {
     onHoverIndex: (index: number) => void;
     listSize: Size;
 }
-declare const CompletionMenu: (props: CompletionMenuProps & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement | null;
+declare const CompletionMenu: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<CompletionMenuProps & React__default.RefAttributes<IVirtualizedList>>>;
 type InputFieldWithCompletionsProps = {
+    id?: string;
     loading?: boolean;
     initialValue?: string;
     placeholder?: string;
@@ -583,6 +458,7 @@ type InputFieldWithCompletionsProps = {
     size?: InputFieldSize;
     style?: React__default.CSSProperties;
     className?: string;
+    label?: React__default.ReactNode;
     children?: React__default.ReactNode;
     hideChildrenWhenFocused?: boolean;
     hideMenuWhenEmptyValue?: boolean;
@@ -592,9 +468,182 @@ interface InputFieldWithCompletionsRef {
     setValue(value: string): void;
     selectAllInputText(): void;
 }
-declare const InputFieldWithCompletions: (props: InputFieldWithCompletionsProps & React__default.RefAttributes<InputFieldWithCompletionsRef>) => React__default.ReactElement | null;
+declare const Combobox: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<InputFieldWithCompletionsProps & React__default.RefAttributes<InputFieldWithCompletionsRef>>>;
+
+interface MenuItemProps<T extends string> {
+    value?: T;
+    children: ReactNode;
+    onSelect: (value: T) => void;
+    checked: boolean;
+    disabled: boolean;
+    indented: boolean;
+    shortcut?: string;
+    icon?: ReactNode;
+    items?: MenuItem<T>[];
+}
+interface MenuProps<T extends string> {
+    children: ReactNode;
+    items: MenuItem<T>[];
+    onSelect: (value: T) => void;
+    isNested?: boolean;
+    shouldBindKeyboardShortcuts?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const ContextMenu: <T extends string>(props: MenuProps<T>) => React__default.ReactElement | null;
+
+declare const StyledContent: React__default.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+interface IDialog {
+    containsElement: (element: HTMLElement) => boolean;
+}
+interface Props$d {
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    style?: ComponentProps<typeof StyledContent>["style"];
+    open: ComponentProps<typeof DialogPrimitive.Root>["open"];
+    onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>["onOpenChange"];
+    onOpenAutoFocus?: ComponentProps<typeof DialogPrimitive.Content>["onOpenAutoFocus"];
+    closeOnInteractOutside?: boolean;
+    className?: string;
+}
+declare const Dialog: React__default.ForwardRefExoticComponent<Props$d & React__default.RefAttributes<IDialog>>;
+declare const FullscreenDialog: React__default.ForwardRefExoticComponent<Props$d & React__default.RefAttributes<IDialog>>;
+
+type DividerVariant = "normal" | "subtle" | "strong";
+interface DividerProps {
+    variant?: DividerVariant;
+    overflow?: number | string;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare const Divider: React__default.NamedExoticComponent<DividerProps>;
+declare const DividerVertical: React__default.NamedExoticComponent<DividerProps>;
+
+/**
+ * A button that opens a menu when clicked, but also allows dragging the
+ */
+declare const DraggableMenuButton: <T extends string>(props: {
+    items?: MenuItem<T>[];
+    onSelect?: (value: T) => void;
+    isVisible?: boolean;
+}) => React__default.ReactElement | null;
+
+declare const DropdownMenu: <T extends string>(props: MenuProps<T> & {
+    open?: boolean;
+    onCloseAutoFocus?: React__default.EventHandler<SyntheticEvent<unknown>>;
+    emptyState?: React__default.ReactNode;
+} & Pick<RadixDropdownMenu.DropdownMenuContentProps & React__default.RefAttributes<HTMLDivElement>, "align" | "side" | "sideOffset" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
+
+declare const SUPPORTED_IMAGE_UPLOAD_TYPES: ("image/png" | "image/jpeg" | "image/webp" | "image/svg+xml" | "application/pdf")[];
+declare const SUPPORTED_CANVAS_UPLOAD_TYPES: ("" | "image/png" | "image/jpeg" | "image/webp" | "image/svg+xml" | "application/pdf")[];
+type SupportedImageUploadType = (typeof SUPPORTED_IMAGE_UPLOAD_TYPES)[number];
+type SupportedCanvasUploadType = (typeof SUPPORTED_CANVAS_UPLOAD_TYPES)[number];
+type SketchPattern = {
+    _class: 'pattern';
+    image?: Sketch.FileRef | Sketch.DataRef;
+    patternFillType: Sketch.PatternFillType;
+    patternTileScale: number;
+};
+
+interface Props$c {
+    id?: string;
+    value?: Sketch.Color | Sketch.Gradient | SketchPattern;
+}
+declare const FillInputField: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Props$c & React__default.RefAttributes<HTMLButtonElement>>>;
+
+declare const PatternPreviewBackground: React__default.NamedExoticComponent<{
+    fillType: Sketch.PatternFillType;
+    tileScale: number;
+    imageRef: string;
+}>;
+interface Props$b {
+    value?: Sketch.Color | Sketch.Gradient | SketchPattern;
+}
+declare const FillPreviewBackground: React__default.NamedExoticComponent<Props$b>;
+
+interface FloatingWindowProps {
+    title?: string;
+    onClose?: () => void;
+    children: React__default.ReactNode;
+    initialWidth?: number;
+    initialHeight?: number;
+    initialX?: number;
+    initialY?: number;
+    minWidth?: number;
+    minHeight?: number;
+    toolbarContent?: React__default.ReactNode;
+    renderToolbar?: (props: {
+        title?: string;
+        toolbarContent?: React__default.ReactNode;
+        onClose?: () => void;
+    }) => React__default.ReactNode;
+}
+declare const FloatingWindow: React__default.FC<FloatingWindowProps>;
+
+interface Props$a {
+    value: Sketch.GradientStop[];
+    selectedStop: number;
+    onChangeColor: (color: Sketch.Color) => void;
+    onChangePosition: (position: number) => void;
+    onAdd: (color: Sketch.Color, position: number) => void;
+    onDelete: () => void;
+    onSelectStop: (index: number) => void;
+}
+declare const GradientPicker: React__default.NamedExoticComponent<Props$a>;
 
-declare const InspectorContainer: (props: {
+type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
+interface ItemProps$1<MenuItemType extends string = string> {
+    id: string;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    loading?: boolean;
+    selected?: boolean;
+    onClick?: (event: React__default.MouseEvent) => void;
+    onPress?: (options: KeyModifiers) => void;
+    onDoubleClick?: () => void;
+    onHoverChange?: (isHovering: boolean) => void;
+    children?: ReactNode;
+    menuItems?: MenuItem<MenuItemType>[];
+    onSelectMenuItem?: (value: MenuItemType) => void;
+    onContextMenu?: () => void;
+    style?: CSSProperties;
+}
+type GridViewContextValue = {
+    size: GridViewSize;
+    textPosition: "overlay" | "below" | "toolip";
+    bordered: boolean;
+    disabled: boolean;
+};
+interface GridViewRootProps extends Partial<GridViewContextValue> {
+    children: ReactNode;
+    onClick?: () => void;
+    scrollable?: boolean;
+}
+declare function GridViewRoot({ size, children, scrollable, onClick, textPosition, bordered, disabled, }: GridViewRootProps): React__default.JSX.Element;
+declare function GridViewSection({ children, className, }: {
+    children?: ReactNode;
+    className?: string;
+}): React__default.JSX.Element;
+declare function GridViewSectionHeader({ title }: {
+    title: string;
+}): React__default.JSX.Element;
+declare namespace GridView {
+    const Root: React__default.MemoExoticComponent<typeof GridViewRoot>;
+    const Item: React__default.MemoExoticComponent<(<MenuItemType extends string>(props: ItemProps$1<MenuItemType> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null)>;
+    const Section: React__default.MemoExoticComponent<typeof GridViewSection>;
+    const SectionHeader: React__default.MemoExoticComponent<typeof GridViewSectionHeader>;
+}
+
+declare const IconButton: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Omit<ButtonRootProps, "size" | "children" | "variant" | "flex"> & {
+    iconName: IconName;
+    className?: string;
+    style?: CSSProperties;
+    selected?: boolean;
+    color?: string;
+    size?: number;
+} & React__default.RefAttributes<HTMLButtonElement>>>;
+
+declare const InspectorContainer: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
     header?: React__default.ReactNode;
     children?: React__default.ReactNode;
     fallback?: React__default.ReactNode;
@@ -602,11 +651,11 @@ declare const InspectorContainer: (props: {
     id?: string;
     className?: string;
     style?: React__default.CSSProperties;
-} & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
+} & React__default.RefAttributes<HTMLDivElement>>>;
 
 interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
 }
-declare const Label: (props: LabelProps & React__default.RefAttributes<HTMLLabelElement>) => React__default.ReactElement | null;
+declare const Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>>;
 
 interface ContainerProps {
     children: ReactNode;
@@ -615,7 +664,7 @@ interface ContainerProps {
         index: number;
     }) => ReactNode;
 }
-declare const LabeledElementView: (props: ContainerProps) => React__default.ReactElement | null;
+declare const LabeledElementView: React__default.NamedExoticComponent<ContainerProps>;
 
 type PopoverVariant = "normal" | "large";
 interface Props$9 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
@@ -654,15 +703,16 @@ interface Props$8 {
     allowEmpty?: boolean;
     children: ReactNode;
 }
+declare function ToggleGroupRoot({ id, value, onValueChange, colorScheme, allowEmpty, children, }: Props$8): React__default.JSX.Element;
 declare namespace RadioGroup {
-    const Root: (props: Props$8) => React__default.ReactElement | null;
-    const Item: (props: ItemProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
+    const Root: React__default.MemoExoticComponent<typeof ToggleGroupRoot>;
+    const Item: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ItemProps & React__default.RefAttributes<HTMLButtonElement>>>;
 }
 
 interface Props$7 {
     children?: ReactNode | ((scrollElementRef: HTMLDivElement) => ReactNode);
 }
-declare const ScrollArea: (props: Props$7) => React__default.ReactElement | null;
+declare const ScrollArea: React__default.NamedExoticComponent<Props$7>;
 
 type Props$6<T extends string> = {
     id?: string;
@@ -675,25 +725,34 @@ type Props$6<T extends string> = {
     disabled?: boolean;
     readOnly?: boolean;
     label?: React__default.ReactNode;
+    onFocus?: FocusEventHandler;
+    onBlur?: FocusEventHandler;
 } & Pick<SelectProps, "open">;
 declare const SelectMenu: <T extends string = string>(props: Props$6<T>) => React__default.ReactElement | null;
 
+type ColorScheme = "primary" | "secondary";
 interface Props$5 {
     id?: string;
+    style?: React__default.CSSProperties;
+    className?: string;
     value: number;
     onValueChange: (value: number) => void;
     min: number;
     max: number;
+    colorScheme?: ColorScheme;
+    label?: React__default.ReactNode;
+    onFocus?: FocusEventHandler;
+    onBlur?: FocusEventHandler;
 }
-declare const Slider: ({ id, value, onValueChange, min, max, }: Props$5) => React__default.JSX.Element;
+declare const Slider: ({ id, style, className, value, onValueChange, min, max, colorScheme, label, onFocus, onBlur, }: Props$5) => React__default.JSX.Element;
 
 interface Props$4 {
     size?: number | string;
     inline?: boolean;
 }
 declare namespace Spacer {
-    const Vertical: (props: Props$4 & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
-    const Horizontal: (props: Props$4 & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
+    const Vertical: React__default.ForwardRefExoticComponent<Props$4 & React__default.RefAttributes<HTMLSpanElement>>;
+    const Horizontal: React__default.ForwardRefExoticComponent<Props$4 & React__default.RefAttributes<HTMLSpanElement>>;
 }
 
 type SwitchColorScheme = "normal" | "primary" | "secondary";
@@ -704,8 +763,12 @@ interface Props$3 {
     /** @default normal */
     colorScheme?: SwitchColorScheme;
     disabled?: boolean;
+    onFocus?: FocusEventHandler;
+    onBlur?: FocusEventHandler;
+    className?: string;
+    style?: CSSProperties;
 }
-declare const Switch: ({ id, value, onChange, colorScheme, disabled, }: Props$3) => React__default.JSX.Element;
+declare const Switch: ({ id, value, onChange, colorScheme, disabled, onFocus, onBlur, style, className, }: Props$3) => React__default.JSX.Element;
 
 declare const config: {
     content: string[];
@@ -779,6 +842,7 @@ declare const config: {
                 "chip-secondary-shadow": string;
                 "chip-error-shadow": string;
                 "chip-default-shadow": string;
+                "floating-button": string;
             };
             fontFamily: {
                 sans: [string, string, string, string, string, string, string, string, string, string];
@@ -870,6 +934,7 @@ declare const config: {
             zIndex: {
                 interactable: string;
                 label: string;
+                menu: string;
             };
         };
     };
@@ -944,6 +1009,7 @@ declare const cssVars: {
         chipSecondaryShadow: string;
         chipErrorShadow: string;
         chipDefaultShadow: string;
+        floatingButton: string;
     };
     fontFamily: {
         sans: [string, string, string, string, string, string, string, string, string, string];
@@ -1035,6 +1101,7 @@ declare const cssVars: {
     zIndex: {
         interactable: string;
         label: string;
+        menu: string;
     };
 };
 
@@ -1055,24 +1122,24 @@ type TextProps = {
     onKeyDown?: (event: React__default.KeyboardEvent<HTMLSpanElement>) => void;
     tabIndex?: number;
 };
-declare const Text$1: (props: TextProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
+declare const Text$1: React__default.ForwardRefExoticComponent<TextProps & React__default.RefAttributes<HTMLElement>>;
 type PresetProps = Omit<TextProps, "variant">;
-declare const Heading1: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
-declare const Heading2: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
-declare const Heading3: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
-declare const Heading4: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
-declare const Heading5: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
-declare const Body: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
-declare const Small: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
+declare const Heading1: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
+declare const Heading2: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
+declare const Heading3: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
+declare const Heading4: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
+declare const Heading5: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
+declare const Body: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
+declare const Small: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
 declare const Italic: ({ children }: {
     children: ReactNode;
 }) => React__default.JSX.Element;
 
 declare const useAutoResize: (value: string) => React__default.MutableRefObject<HTMLTextAreaElement | null>;
-declare const AutoResizingTextArea: (props: {
+declare const AutoResizingTextArea: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
     onChangeText: (value: string) => void;
     value?: string;
-} & React__default.TextareaHTMLAttributes<HTMLTextAreaElement> & React__default.RefAttributes<HTMLTextAreaElement>) => React__default.ReactElement | null;
+} & React__default.TextareaHTMLAttributes<HTMLTextAreaElement> & React__default.RefAttributes<HTMLTextAreaElement>>>;
 
 declare const Toast: ({ title, content, children, ...props }: {
     title?: string;
@@ -1087,7 +1154,7 @@ interface Props$2 {
     children: ReactNode;
     content: ReactNode;
 }
-declare const Tooltip: (props: Props$2) => React__default.ReactElement | null;
+declare const Tooltip: React__default.NamedExoticComponent<Props$2>;
 
 type TreeRowBaseProps = {
     icon?: Exclude<ReactNode, string> | IconName;
@@ -1120,21 +1187,38 @@ declare namespace TreeView {
         acceptsDrop?: DropValidator;
         pressEventName?: "onClick" | "onPointerDown";
         variant?: "normal" | "bare" | "padded";
-        sectionHeaderVariant?: "label" | "normal";
+        sectionHeaderVariant?: "normal" | "label";
         divider?: boolean;
         gap?: number;
         colorScheme?: "primary" | "secondary";
     }) & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement | null;
-    const RowTitle: (props: {
+    const RowTitle: React__default.MemoExoticComponent<({ className, children, ...props }: {
         className?: string;
         children: React__default.ReactNode;
-    } & React__default.HTMLAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
-    const EditableRowTitle: (props: EditableRowProps) => React__default.ReactElement | null;
+    } & React__default.HTMLAttributes<HTMLSpanElement>) => React__default.JSX.Element>;
+    const EditableRowTitle: React__default.MemoExoticComponent<({ value, onSubmitEditing, autoFocus, placeholder, }: EditableRowProps) => React__default.JSX.Element>;
     const Row: <MenuItemType extends string>(props: ListView.RowProps<MenuItemType> & TreeRowBaseProps & React__default.RefAttributes<HTMLLIElement>) => React__default.ReactElement | null;
     type ClickInfo = ListView.ClickInfo;
     type RowProps<MenuItemType extends string> = TreeViewRowProps<MenuItemType>;
 }
 
+type Point = {
+    x: number;
+    y: number;
+};
+type UserPointerProps = {
+    userId?: string;
+    name?: string;
+    /** label to display in the tooltip next to the Pointer */
+    visible?: boolean;
+    point: Point;
+    /** defaults to a random color based on the key, but can optionally be overridden */
+    backgroundColor?: string;
+    style?: React__default.CSSProperties;
+    className?: string;
+};
+declare const UserPointer: React__default.NamedExoticComponent<UserPointerProps>;
+
 declare const EDITOR_PANEL_GROUP_ID = "editor-panel-group";
 declare const LEFT_SIDEBAR_ID = "editor-left-sidebar";
 declare const RIGHT_SIDEBAR_ID = "editor-right-sidebar";
@@ -1154,6 +1238,7 @@ interface Props$1 {
     hasLeftSidebar?: boolean;
     onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
     leftSidebarCanResize?: boolean;
+    rightSidebarCanResize?: boolean;
     id?: string;
     className?: string;
     style?: React__default.CSSProperties;
@@ -1177,25 +1262,35 @@ type IWorkspaceLayout = {
     toggleLeftSidebar: () => void;
     toggleRightSidebar: () => void;
 };
-declare const WorkspaceLayout: (props: Props$1 & React__default.RefAttributes<IWorkspaceLayout>) => React__default.ReactElement | null;
+declare const WorkspaceLayout: React__default.ForwardRefExoticComponent<Props$1 & React__default.RefAttributes<IWorkspaceLayout>>;
 
 type DesignSystemConfigurationContextValue = {
     platform: PlatformName;
 };
-declare const DesignSystemConfigurationProvider: (props: {
+declare const DesignSystemConfigurationProvider: React__default.NamedExoticComponent<{
     children: ReactNode;
     platform?: PlatformName;
-}) => React__default.ReactElement | null;
+}>;
 declare function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue;
 
 type DialogContextValue = {
-    openInputDialog(title: string, inputValue?: string): Promise<string | undefined>;
+    openInputDialog(options: string | {
+        title: string;
+        description?: ReactNode;
+        placeholder?: string;
+        initialValue?: string;
+    }): Promise<string | undefined>;
     containsElement(element: HTMLElement): boolean;
 };
 declare const DialogProvider: ({ children, }: {
     children: ReactNode;
 }) => React__default.JSX.Element;
-declare function useOpenInputDialog(): (title: string, inputValue?: string) => Promise<string | undefined>;
+declare function useOpenInputDialog(): (options: string | {
+    title: string;
+    description?: ReactNode;
+    placeholder?: string;
+    initialValue?: string;
+}) => Promise<string | undefined>;
 declare function useDialogContainsElement(): (element: HTMLElement) => boolean;
 
 type FloatingWindowContextValue = {
@@ -1211,21 +1306,12 @@ declare const FloatingWindowProvider: ({ children, }: {
 declare const useFloatingWindowManager: () => FloatingWindowContextValue;
 declare const useCurrentFloatingWindowInternal: () => CurrentWindowContextValue;
 
-type ImageDataContextValue = {
-    getImageData: (ref: string) => ArrayBuffer | undefined;
-};
-declare const ImageDataProvider: (props: {
-    children: ReactNode;
-    getImageData?: (ref: string) => ArrayBuffer | undefined;
-}) => React__default.ReactElement | null;
-declare function useImageData(ref: string): ArrayBuffer | undefined;
-
 type GlobalInputBlurContextValue = {
     addListener: (f: () => void) => void;
     removeListener: (f: () => void) => void;
     trigger: () => void;
 };
-declare const GlobalInputBlurProvider: React$1.Provider<GlobalInputBlurContextValue>;
+declare const GlobalInputBlurProvider: React.Provider<GlobalInputBlurContextValue>;
 /**
  * Some components store their editable state internally.
  * We trigger this event before selection changes so that they can commit their
@@ -1237,6 +1323,15 @@ declare const useGlobalInputBlur: () => GlobalInputBlurContextValue;
 declare function useGlobalInputBlurListener(f: () => void): void;
 declare function useGlobalInputBlurTrigger(): () => void;
 
+type ImageDataContextValue = {
+    getImageData: (ref: string) => ArrayBuffer | undefined;
+};
+declare const ImageDataProvider: React__default.NamedExoticComponent<{
+    children: ReactNode;
+    getImageData?: (ref: string) => ArrayBuffer | undefined;
+}>;
+declare function useImageData(ref: string): ArrayBuffer | undefined;
+
 interface HoverEvent {
     /** The type of hover event being fired. */
     type: 'hoverstart' | 'hoverend';
@@ -1259,7 +1354,7 @@ interface HoverProps extends HoverEvents {
 }
 interface HoverResult {
     /** Props to spread on the target element. */
-    hoverProps: React$1.HTMLAttributes<HTMLElement>;
+    hoverProps: React.HTMLAttributes<HTMLElement>;
     isHovered: boolean;
 }
 /**
@@ -1274,6 +1369,14 @@ declare function usePlatform(): _noya_app_noya_keymap.PlatformName;
  */
 declare function usePlatformModKey(): 'ctrlKey' | 'metaKey';
 
+/** @default light */
+type UseThemeReturnType = "dark" | "light";
+/**
+ * Hook to get the current theme of the app via the `data-theme` attribute on the body element.
+ * @returns The current theme.
+ */
+declare function useTheme(): UseThemeReturnType;
+
 declare const size: {
     medium: string;
     large: string;
@@ -1287,12 +1390,7 @@ declare const mediaQuery: {
     xlarge: string;
 };
 
-/**
- * Utility for merging classes conditionally. Right side will override left side if there are any conflicts.
- * Usage: cn('bg-red-500 text-white', 'bg-blue-500') // Returns: 'text-white bg-blue-500'
- * @danger do not use this function to concatenate class names. Use it to merge classes conditionally.
- */
-declare const cn: (...classes: (string | boolean | undefined | null)[]) => string;
+declare function cx(...args: Array<string | number | boolean | null | undefined>): string;
 
 type Optional<T> = T | false | null | undefined;
 type MenuConfig<T extends string> = Optional<Optional<RegularMenuItem<T>>[]>[];
@@ -1300,10 +1398,12 @@ declare function createSectionedMenu<T extends string>(...sections: MenuConfig<T
 
 declare function getGradientBackground(value: Sketch.GradientStop[], type: Sketch.GradientType, direction?: number): string;
 
-declare function useDarkMode(elementRef: React.RefObject<HTMLElement>): {
-    isDark: boolean;
-    elementRef: React$1.RefObject<HTMLElement>;
-};
+declare const colorForStringValues: Record<string, string>;
+/**
+ * Create a background color and initials from a name
+ * Adapted from (MIT) https://mui.com/material-ui/react-avatar/
+ */
+declare function colorFromString(str: string): string;
 
 declare function sketchColorToRgba(value: Sketch.Color): RgbaColor;
 declare function sketchColorToRgbaString(value: Sketch.Color): string;
@@ -1328,23 +1428,23 @@ interface Props {
     disabled?: boolean;
     trigger?: "change" | "submit";
 }
-declare const DimensionInput: (props: Props) => React__default.ReactElement | null;
+declare const DimensionInput: React__default.NamedExoticComponent<Props>;
 
-declare const Section: (props: React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
-declare const SectionHeader: (props: React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
+declare const Section: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
+declare const SectionHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
 type TitleTextStyle = "small" | "heading5" | "heading4" | "heading3";
-declare const Title: (props: React__default.HTMLAttributes<HTMLDivElement> & {
+declare const Title: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & {
     $textStyle?: TitleTextStyle;
-} & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
-declare const Row: (props: React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
-declare const Column: (props: React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
-declare const Checkbox: (props: React__default.InputHTMLAttributes<HTMLInputElement> & React__default.RefAttributes<HTMLInputElement>) => React__default.ReactElement | null;
-declare const Text: (props: React__default.HTMLAttributes<HTMLSpanElement> & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
+} & React__default.RefAttributes<HTMLDivElement>>;
+declare const Row: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
+declare const Column: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
+declare const Checkbox: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & React__default.RefAttributes<HTMLInputElement>>;
+declare const Text: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLSpanElement> & React__default.RefAttributes<HTMLSpanElement>>;
 declare const VerticalSeparator: () => React__default.JSX.Element;
 declare const HorizontalSeparator: () => React__default.JSX.Element;
-declare const RowLabel: (props: React__default.LabelHTMLAttributes<HTMLLabelElement> & {
+declare const RowLabel: React__default.ForwardRefExoticComponent<React__default.LabelHTMLAttributes<HTMLLabelElement> & {
     $textStyle?: TitleTextStyle | "label";
-} & React__default.RefAttributes<HTMLLabelElement>) => React__default.ReactElement | null;
+} & React__default.RefAttributes<HTMLLabelElement>>;
 interface LabeledRowProps {
     id?: string;
     children: ReactNode;
@@ -1353,7 +1453,7 @@ interface LabeledRowProps {
     right?: ReactNode;
     className?: string;
 }
-declare const LabeledRow: (props: LabeledRowProps) => React__default.ReactElement | null;
+declare const LabeledRow: React__default.NamedExoticComponent<LabeledRowProps>;
 
 declare const InspectorPrimitives_Checkbox: typeof Checkbox;
 declare const InspectorPrimitives_Column: typeof Column;
@@ -1370,9 +1470,4 @@ declare namespace InspectorPrimitives {
   export { InspectorPrimitives_Checkbox as Checkbox, InspectorPrimitives_Column as Column, InspectorPrimitives_HorizontalSeparator as HorizontalSeparator, InspectorPrimitives_LabeledRow as LabeledRow, InspectorPrimitives_Row as Row, InspectorPrimitives_RowLabel as RowLabel, InspectorPrimitives_Section as Section, InspectorPrimitives_SectionHeader as SectionHeader, InspectorPrimitives_Text as Text, InspectorPrimitives_Title as Title, InspectorPrimitives_VerticalSeparator as VerticalSeparator };
 }
 
-declare module "react" {
-    function memo<A, B>(Component: (props: A) => B): (props: A) => React.ReactElement | null;
-    function forwardRef<T, P = {}>(render: (props: P, ref: React.ForwardedRef<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
-
-export { ActivityIndicator, AutoResizingTextArea, Avatar, AvatarStack, Body, Button, type ButtonRootProps, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, EDITOR_PANEL_GROUP_ID, type EditableRowProps, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IScoredItem, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, InputField, type InputFieldInputProps, type InputFieldSize, InputFieldWithCompletions, type InputFieldWithCompletionsProps, type InputFieldWithCompletionsRef, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, type Optional, type PanelLayoutState, PatternPreviewBackground, Popover, Progress, RIGHT_SIDEBAR_ID, RadioGroup, type RegularMenuItem, type RelativeDropPosition, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, SelectMenu, type SetNumberMode, type SketchPattern, Slider, Small, Sortable, Spacer, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, Tooltip, TreeView, WorkspaceLayout, cn, createSectionedMenu, cssVars, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, textStyles, useAutoResize, useCurrentFloatingWindowInternal, useDarkMode, useDesignSystemConfiguration, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, withSeparatorElements };
+export { ActivityIndicator, AnimatePresence, type AnimatePresenceProps, AutoResizingTextArea, Avatar, type AvatarProps, AvatarStack, Body, Button, type ButtonRootProps, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, Combobox, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, EDITOR_PANEL_GROUP_ID, type EditableRowProps, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IScoredItem, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, InputField, type InputFieldInputProps, type InputFieldSize, type InputFieldWithCompletionsProps, type InputFieldWithCompletionsRef, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, type Optional, type PanelLayoutState, PatternPreviewBackground, Popover, Progress, RIGHT_SIDEBAR_ID, RadioGroup, type RegularMenuItem, type RelativeDropPosition, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, SelectMenu, type SetNumberMode, type SketchPattern, Slider, Small, Sortable, Spacer, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, Tooltip, TreeView, type UseThemeReturnType, UserPointer, type UserPointerProps, WorkspaceLayout, colorForStringValues, colorFromString, createSectionedMenu, cssVars, cx, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, textStyles, useAutoResize, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, useTheme, withSeparatorElements };