@noya-app/noya-designsystem 0.0.2

package/dist/index.d.mts

@@ -0,0 +1,1178 @@
+import * as React$1 from 'react';
+import React__default, { CSSProperties, ReactNode, ReactElement, ComponentProps, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, Ref, ReactHTML } from 'react';
+import * as styled_components from 'styled-components';
+import { CSSObject, CSSProperties as CSSProperties$1 } from 'styled-components';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Sketch } from '@noya-app/noya-file-format';
+import * as csstype from 'csstype';
+import { Property } from 'csstype';
+import * as _noya_app_noya_keymap from '@noya-app/noya-keymap';
+import { KeyModifiers, PlatformName, KeyMap } from '@noya-app/noya-keymap';
+import * as Icons from '@noya-app/noya-icons';
+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 * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { useGesture } from 'react-use-gesture';
+import { RgbaColor } from '@noya-app/noya-colorpicker';
+
+interface Props$g {
+    size?: number;
+    opacity?: number;
+    color?: string;
+    trackColor?: string;
+}
+declare const ActivityIndicator: (props: Props$g) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+declare function Avatar({ image, name, fallback, size, overflow, }: {
+    image?: string;
+    name?: string;
+    fallback?: string;
+    size?: number;
+    overflow?: number;
+}): React__default.JSX.Element;
+
+type ButtonVariant = 'normal' | 'primary' | 'secondary' | 'secondaryBright' | 'white' | 'thin' | 'floating' | 'none';
+type ButtonSize = 'normal' | 'large';
+declare const ButtonElement: styled_components.StyledComponent<"button", styled_components.DefaultTheme, {
+    active: boolean;
+    variant: ButtonVariant;
+    size: ButtonSize;
+    flex?: CSSProperties['flex'];
+}, never>;
+interface ButtonRootProps {
+    id?: string;
+    flex?: CSSProperties['flex'];
+    tabIndex?: number;
+    children: ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    tooltip?: ReactNode;
+    onClick?: (event: React__default.MouseEvent) => void;
+    onPointerDown?: (event: React__default.PointerEvent) => void;
+    contentStyle?: CSSProperties;
+    as?: React__default.ElementType;
+    href?: string;
+    target?: string;
+    rel?: string;
+}
+declare const Button: (props: ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+type ChipColorScheme = 'primary' | 'secondary' | 'error';
+type ChipSize = 'small' | 'medium';
+type ChipVariant = 'solid' | 'outlined' | 'ghost';
+interface ChipProps {
+    colorScheme?: ChipColorScheme;
+    variant?: ChipVariant;
+    size?: ChipSize;
+    children?: React__default.ReactNode;
+    deletable?: boolean;
+    addable?: boolean;
+    monospace?: boolean;
+    onDelete?: () => void;
+    onAdd?: () => void;
+    onClick?: () => void;
+    onHoverDeleteChange?: (hovering: boolean) => void;
+    style?: React__default.CSSProperties;
+    tabIndex?: number;
+}
+declare const Chip: (props: ChipProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+declare const colors$1: {
+    logo: {
+        fill: string;
+        highlight: string;
+    };
+    text: string;
+    textMuted: string;
+    textSubtle: string;
+    textDisabled: string;
+    dividerSubtle: string;
+    divider: string;
+    dividerStrong: string;
+    primary: string;
+    primaryLight: string;
+    secondary: string;
+    secondaryLight: string;
+    secondaryBright: string;
+    warning: string;
+    neutralBackground: string;
+    inputBackground: string;
+    inputBackgroundLight: string;
+    codeBackground: string;
+    selectedBackground: string;
+    transparentChecker: string;
+    activeBackground: string;
+    scrollbar: string;
+    placeholderDots: string;
+    listView: {
+        raisedBackground: string;
+        editingBackground: string;
+    };
+    canvas: {
+        background: string;
+        readonly selectionStroke: string;
+        dragHandleStroke: string;
+        measurement: string;
+        sliceOutline: string;
+        grid: string;
+    };
+    sidebar: {
+        background: string;
+    };
+    popover: {
+        background: string;
+        divider: string;
+    };
+    slider: {
+        background: string;
+        border: string;
+    };
+    radioGroup: {
+        background: string;
+    };
+    icon: string;
+    iconSelected: string;
+    mask: string;
+    imageOverlay: string;
+    readonly dragOutline: string;
+    selection: string;
+    thumbnailBackground: string;
+};
+declare const fonts: {
+    normal: string;
+    monospace: string;
+};
+declare const textStyles: {
+    title: CSSObject;
+    subtitle: CSSObject;
+    heading1: CSSObject;
+    heading2: CSSObject;
+    heading3: CSSObject;
+    heading4: CSSObject;
+    heading5: CSSObject;
+    body: CSSObject;
+    small: CSSObject;
+    code: CSSObject;
+    label: CSSObject;
+};
+declare const sizes: {
+    sidebarWidth: number;
+    toolbar: {
+        height: number;
+        itemSeparator: number;
+    };
+    inspector: {
+        horizontalSeparator: number;
+        verticalSeparator: number;
+    };
+    spacing: {
+        nano: number;
+        micro: number;
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+        xxlarge: number;
+    };
+    dialog: {
+        padding: number;
+    };
+};
+
+declare const lightTheme_fonts: typeof fonts;
+declare const lightTheme_sizes: typeof sizes;
+declare const lightTheme_textStyles: typeof textStyles;
+declare namespace lightTheme {
+  export { colors$1 as colors, lightTheme_fonts as fonts, lightTheme_sizes as sizes, lightTheme_textStyles as textStyles };
+}
+
+type Theme = typeof lightTheme;
+declare module 'styled-components' {
+    interface DefaultTheme extends Theme {
+    }
+}
+interface Colors {
+}
+type PickByValue<T, V> = Pick<T, {
+    [K in keyof T]-?: T[K] extends V ? K : never;
+}[keyof T]>;
+type ThemeColorName = keyof PickByValue<Theme['colors'], string>;
+
+declare const SEPARATOR_ITEM = "separator";
+type MenuItemRole = "undo" | "redo" | "cut" | "copy" | "paste" | "pasteAndMatchStyle" | "delete" | "selectAll" | "reload" | "forceReload" | "toggleDevTools" | "resetZoom" | "zoomIn" | "zoomOut" | "toggleSpellChecker" | "togglefullscreen" | "window" | "minimize" | "close" | "help" | "about" | "services" | "hide" | "hideOthers" | "unhide" | "quit" | "showSubstitutions" | "toggleSmartQuotes" | "toggleSmartDashes" | "toggleTextReplacement" | "startSpeaking" | "stopSpeaking" | "zoom" | "front" | "appMenu" | "fileMenu" | "editMenu" | "viewMenu" | "shareMenu" | "recentDocuments" | "toggleTabBar" | "selectNextTab" | "selectPreviousTab" | "mergeAllWindows" | "clearRecentDocuments" | "moveTabToNewWindow" | "windowMenu";
+type RegularMenuItem<T extends string> = {
+    value?: T;
+    title: ReactNode;
+    shortcut?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    icon?: ReactElement;
+    items?: MenuItem<T>[];
+    role?: MenuItemRole;
+};
+type MenuItem<T extends string> = typeof SEPARATOR_ITEM | RegularMenuItem<T>;
+type ExtractMenuItemType<T> = T extends RegularMenuItem<infer U> ? U : never;
+declare const KeyboardShortcut: (props: {
+    shortcut: string;
+}) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+interface MenuItemProps<T extends string> {
+    value?: T;
+    children: ReactNode;
+    onSelect: (value: T) => void;
+    checked: boolean;
+    disabled: boolean;
+    indented: boolean;
+    shortcut?: string;
+    icon?: ReactElement;
+    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<any, string | React__default.JSXElementConstructor<any>> | null;
+
+declare const StyledContent: styled_components.StyledComponent<React__default.ForwardRefExoticComponent<DialogPrimitive.DialogContentProps & React__default.RefAttributes<HTMLDivElement>>, styled_components.DefaultTheme, {}, never>;
+declare const CloseButtonContainer: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
+interface IDialog {
+    containsElement: (element: HTMLElement) => boolean;
+}
+interface Props$f {
+    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$f & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+type DividerVariant = 'normal' | 'strong' | 'subtle';
+interface DividerProps {
+    variant?: DividerVariant;
+    overflow?: number;
+}
+declare const Divider: (props: DividerProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const DividerVertical: (props: DividerProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+declare const DropdownMenu: <T extends string>(props: MenuProps<T> & {
+    open?: boolean | undefined;
+    onCloseAutoFocus?: ((event: React__default.SyntheticEvent<unknown, Event>) => void) | undefined;
+} & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+declare const SUPPORTED_IMAGE_UPLOAD_TYPES: ("image/png" | "image/jpeg" | "image/webp" | "application/pdf" | "image/svg+xml")[];
+declare const SUPPORTED_CANVAS_UPLOAD_TYPES: ("" | "image/png" | "image/jpeg" | "image/webp" | "application/pdf" | "image/svg+xml")[];
+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$e {
+    id?: string;
+    value?: Sketch.Color | Sketch.Gradient | SketchPattern;
+    flex?: CSSProperties['flex'];
+}
+declare const FillInputField: (props: Props$e & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+declare const PatternPreviewBackground: (props: {
+    fillType: Sketch.PatternFillType;
+    tileScale: number;
+    imageRef: string;
+}) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+interface Props$d {
+    value?: Sketch.Color | Sketch.Gradient | SketchPattern;
+}
+declare const FillPreviewBackground: (props: Props$d) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+interface Props$c {
+    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$c) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+type GridProps = {
+    columns?: string;
+    rows?: string;
+    alignItems?: 'start' | 'center' | 'end';
+    justifyItems?: 'start' | 'center' | 'end';
+    placeItems?: 'start' | 'center' | 'end';
+    width?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    height?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    padding?: number | string;
+    paddingX?: number | string;
+    paddingXStart?: number | string;
+    paddingXEnd?: number | string;
+    paddingY?: number | string;
+    paddingYStart?: number | string;
+    paddingYEnd?: number | string;
+    gap?: number | string;
+    gapX?: number | string;
+    gapY?: number | string;
+    background?: keyof Colors;
+};
+
+type GridViewSize = 'xxs' | 'xs' | 'small' | 'large';
+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;
+}
+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<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Item: <MenuItemType extends string>(props: ItemProps$2<MenuItemType> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Section: (props: {
+        children?: React__default.ReactNode;
+        padding?: csstype.Property.Padding<string | number> | undefined;
+    }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const SectionHeader: (props: {
+        title: string;
+    }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+}
+
+declare const IconButton: (props: Omit<ButtonRootProps, "children" | "size" | "flex" | "variant"> & {
+    iconName: keyof typeof Icons;
+    selected?: boolean | undefined;
+    color?: string | undefined;
+    size?: number | undefined;
+} & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+type Props$b = {
+    id?: string;
+    style?: any;
+    className?: string;
+    type?: "text" | "search";
+    disabled?: boolean;
+    value: string;
+    placeholder?: string;
+    role?: AriaRole;
+    name?: HTMLInputElement["name"];
+    onKeyDown?: KeyboardEventHandler;
+    onClick?: MouseEventHandler;
+    onDoubleClick?: MouseEventHandler;
+    onPointerDown?: PointerEventHandler;
+    onFocusCapture?: FocusEventHandler;
+    onFocusChange?: (isFocused: boolean) => void;
+    onBlur?: FocusEventHandler;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "autoFocus">;
+type ReadOnlyProps = Props$b & {
+    readOnly: true;
+};
+type ControlledProps = Props$b & {
+    onChange: (value: string) => void;
+};
+type SubmittableProps = Props$b & {
+    onSubmit: (value: string) => void;
+    allowSubmittingWithSameValue?: boolean;
+    submitAutomaticallyAfterDelay?: number;
+};
+type TextInputProps = ReadOnlyProps | ControlledProps | SubmittableProps;
+
+type LabelPosition = 'start' | 'end';
+type InputFieldSize = 'small' | 'medium' | 'large';
+interface InputFieldLabelProps {
+    children?: ReactNode;
+    pointerEvents?: Property.PointerEvents;
+}
+interface InputFieldDropdownProps<T extends string> {
+    id?: string;
+    items: MenuItem<T>[];
+    onSelect: (value: T) => void;
+    children?: ReactNode;
+}
+type InputFieldVariant = 'normal' | 'bare';
+declare const InputElement: styled_components.StyledComponent<(props: TextInputProps & React__default.RefAttributes<HTMLInputElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null, styled_components.DefaultTheme, {
+    labelPosition: LabelPosition;
+    labelSize: number;
+    hasLabel: boolean;
+    hasDropdown: boolean;
+    textAlign?: Property.TextAlign | undefined;
+    disabled?: boolean | undefined;
+    variant?: InputFieldVariant | undefined;
+    readOnly?: boolean | undefined;
+    size: InputFieldSize;
+}, never>;
+type InputFieldNumberInputProps = Omit<TextInputProps, 'value' | 'onChange' | 'onKeyDown' | 'onSubmit'> & {
+    value: number | undefined;
+    onNudge?: (value: number) => void;
+    variant?: 'bare';
+} & ({
+    onChange: (value: number) => void;
+} | {
+    onSubmit: (value: number) => void;
+});
+interface InputFieldRootProps {
+    id?: string;
+    flex?: string;
+    children?: ReactNode;
+    width?: number;
+    labelPosition?: LabelPosition;
+    labelSize?: number;
+    hasDropdown?: boolean;
+    size?: InputFieldSize;
+    renderPopoverContent?: (options: {
+        width: number;
+    }) => ReactNode;
+    onFocusChange?: (isFocused: boolean) => void;
+}
+declare namespace InputField {
+    const Root: (props: InputFieldRootProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Input: (props: (TextInputProps & {
+        textAlign?: Property.TextAlign | undefined;
+        variant?: "bare" | undefined;
+    }) & React__default.RefAttributes<HTMLInputElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const NumberInput: (props: InputFieldNumberInputProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const DropdownMenu: <T extends string>(props: InputFieldDropdownProps<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Button: (props: {
+        children?: React__default.ReactNode;
+        onClick?: (() => void) | undefined;
+    }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Label: (props: InputFieldLabelProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+}
+
+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 normalizeListIndex: (index: number, position: 'above' | 'below') => number;
+type UseSortableReturnType = ReturnType<typeof useSortable>;
+interface ItemProps$1<T> {
+    id: string;
+    disabled?: boolean;
+    children: (props: {
+        ref: Ref<T>;
+        relativeDropPosition?: RelativeDropPosition;
+        [key: string]: any;
+    } & UseSortableReturnType['attributes']) => JSX.Element;
+}
+interface RootProps {
+    keys: string[];
+    children: ReactNode;
+    renderOverlay?: (index: number) => ReactNode;
+    onMoveItem?: (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => void;
+    acceptsDrop?: DropValidator;
+}
+declare namespace Sortable {
+    const Item: <T extends HTMLElement>(props: ItemProps$1<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Root: (props: RootProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+}
+
+type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
+type ListRowPosition = "only" | "first" | "middle" | "last";
+type ListColorScheme = "primary" | "secondary";
+type PressEventName = "onClick" | "onPointerDown";
+type ListRowContextValue = {
+    marginType: ListRowMarginType;
+    selectedPosition: ListRowPosition;
+    sortable: boolean;
+    expandable: boolean;
+    divider: boolean;
+    gap: number;
+    variant: ListViewVariant;
+    sectionHeaderVariant: ListViewSectionHeaderVariant;
+    indentation: number;
+    pressEventName: PressEventName;
+    isSectionHeader: boolean;
+    colorScheme: ListColorScheme;
+};
+interface EditableRowProps {
+    value: string;
+    onSubmitEditing: (value: string) => void;
+    autoFocus: boolean;
+    placeholder?: string;
+}
+interface ListViewClickInfo {
+    shiftKey: boolean;
+    altKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+}
+interface ListViewRowProps<MenuItemType extends string = string> {
+    id?: string;
+    tabIndex?: number;
+    selected?: boolean;
+    depth?: number;
+    disabled?: boolean;
+    draggable?: boolean;
+    hovered?: boolean;
+    sortable?: boolean;
+    gap?: number;
+    backgroundColor?: CSSProperties["backgroundColor"];
+    onPress?: (info: ListViewClickInfo) => void;
+    onDoubleClick?: () => void;
+    onHoverChange?: (isHovering: boolean) => void;
+    children?: ReactNode;
+    isSectionHeader?: boolean;
+    menuItems?: MenuItem<MenuItemType>[];
+    onSelectMenuItem?: (value: MenuItemType) => void;
+    onContextMenu?: () => void;
+    onMenuOpenChange?: (isOpen: boolean) => void;
+    onKeyDown?: (event: React__default.KeyboardEvent) => void;
+}
+interface IVirtualizedList {
+    scrollToIndex(index: number): void;
+}
+type ListViewItemInfo = {
+    isDragging: boolean;
+};
+type ChildrenProps$1 = {
+    children: ReactNode;
+};
+type RenderProps<T> = {
+    data: T[];
+    renderItem: (item: T, index: number, info: ListViewItemInfo) => ReactNode;
+    keyExtractor: (item: T, index: number) => string;
+    /**
+     * Each item must have an `id` in order to be sortable
+     */
+    sortable?: boolean;
+    virtualized?: Size;
+};
+type ListViewVariant = "normal" | "padded" | "bare";
+type ListViewSectionHeaderVariant = "normal" | "label";
+type ListViewRootProps = {
+    onPress?: () => void;
+    scrollable?: boolean;
+    expandable?: boolean;
+    onMoveItem?: (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => void;
+    indentation?: number;
+    acceptsDrop?: DropValidator;
+    pressEventName?: PressEventName;
+    variant?: ListViewVariant;
+    sectionHeaderVariant?: ListViewSectionHeaderVariant;
+    divider?: boolean;
+    gap?: number;
+    colorScheme?: ListColorScheme;
+};
+declare namespace ListView {
+    const RowTitle: React__default.MemoExoticComponent<styled_components.StyledComponent<"span", styled_components.DefaultTheme, {}, never>>;
+    const EditableRowTitle: (props: EditableRowProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Row: <MenuItemType extends string>(props: ListViewRowProps<MenuItemType> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Root: <T = any>(props: ((ChildrenProps$1 | RenderProps<T>) & ListViewRootProps) & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const RowContext: React__default.Context<ListRowContextValue>;
+    type ClickInfo = ListViewClickInfo;
+    type ItemInfo = ListViewItemInfo;
+    type RowProps<MenuItemType extends string = string> = ListViewRowProps<MenuItemType>;
+    type VirtualizedList = IVirtualizedList;
+    const DragIndicator: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
+        relativeDropPosition: RelativeDropPosition;
+        gap: number;
+        offsetLeft: number;
+        colorScheme: ListColorScheme;
+    }, never>;
+    const rowHeight = 31;
+    const sectionHeaderLabelHeight = 27;
+    const calculateHeight: (items: number, headerCount: number, headerVariant: ListViewSectionHeaderVariant) => number;
+    const normalizeIndex: (index: number, position: "above" | "below") => number;
+}
+
+declare const CompletionToken: styled_components.StyledComponent<"span", styled_components.DefaultTheme, {
+    type: IToken["type"];
+}, never>;
+interface CompletionMenuProps {
+    items: CompletionListItem[];
+    selectedIndex: number;
+    onSelectItem: (item: CompletionListItem) => void;
+    onHoverIndex: (index: number) => void;
+    listSize: Size;
+}
+declare const CompletionMenu: (props: CompletionMenuProps & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+interface Props$a {
+    loading?: boolean;
+    initialValue?: string;
+    placeholder?: string;
+    items: (CompletionItem | CompletionSectionHeader)[];
+    onChange?: (value: string) => void;
+    onHoverItem?: (item: CompletionItem | undefined) => void;
+    onSelectItem?: (item: CompletionItem) => void;
+    onFocus?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (didSubmit: boolean, value: string) => void;
+    onDeleteWhenEmpty?: () => void;
+    size?: InputFieldSize;
+    style?: React__default.CSSProperties;
+    children?: React__default.ReactNode;
+    hideChildrenWhenFocused?: boolean;
+    hideMenuWhenEmptyValue?: boolean;
+}
+declare const InputFieldWithCompletions: (props: Props$a & React__default.RefAttributes<HTMLInputElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+interface LabelRootProps {
+    label: ReactNode;
+    children: ReactNode;
+}
+declare namespace Label {
+    const Label: React__default.MemoExoticComponent<styled_components.StyledComponent<"label", styled_components.DefaultTheme, {
+        selected?: boolean | undefined;
+    }, never>>;
+    const Root: (props: LabelRootProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+}
+
+interface ContainerProps {
+    children: ReactNode;
+    renderLabel: (provided: {
+        id: string;
+        index: number;
+    }) => ReactNode;
+}
+declare const LabeledElementView: (props: ContainerProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+type PopoverVariant = 'normal' | 'large';
+interface Props$9 extends Pick<ComponentProps<typeof PopoverPrimitive['Content']>, 'onOpenAutoFocus' | 'onCloseAutoFocus' | 'onPointerDownOutside' | 'onInteractOutside' | 'onFocusOutside' | 'side'> {
+    children: React__default.ReactNode;
+    trigger: React__default.ReactNode;
+    variant?: PopoverVariant;
+    closable?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    sideOffset?: number;
+    onClickClose?: () => void;
+    showArrow?: boolean;
+}
+declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onInteractOutside, onFocusOutside, onClickClose, }: Props$9): React__default.JSX.Element;
+
+type ProgressVariant = 'normal' | 'warning' | 'primary' | 'secondary';
+declare function Progress({ value, width, height, flex, variant, }: {
+    value: number;
+    height?: CSSProperties['height'];
+    width?: CSSProperties['width'];
+    flex?: CSSProperties['flex'];
+    variant?: ProgressVariant;
+}): React__default.JSX.Element;
+
+type RadioGroupColorScheme = 'primary' | 'secondary';
+declare const StyledRoot: styled_components.StyledComponent<React__default.ForwardRefExoticComponent<(ToggleGroupPrimitive.ToggleGroupSingleProps | ToggleGroupPrimitive.ToggleGroupMultipleProps) & React__default.RefAttributes<HTMLDivElement>>, styled_components.DefaultTheme, {
+    colorScheme?: RadioGroupColorScheme | undefined;
+}, never>;
+interface ItemProps {
+    value: string;
+    tooltip?: ReactNode;
+    children: ReactNode;
+    disabled?: boolean;
+}
+interface Props$8 {
+    id?: string;
+    value?: string;
+    onValueChange?: ComponentProps<typeof StyledRoot>['onValueChange'];
+    colorScheme?: RadioGroupColorScheme;
+    allowEmpty?: boolean;
+    children: ReactNode;
+}
+declare namespace RadioGroup {
+    const Root: (props: Props$8) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Item: (props: ItemProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+}
+
+interface Props$7 {
+    children?: ReactNode | ((scrollElementRef: HTMLDivElement) => ReactNode);
+}
+declare const ScrollArea: (props: Props$7) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+interface SelectOptionProps<T extends string> {
+    value: T;
+    title?: string;
+    onSelect?: () => void;
+}
+declare const SelectOption: <T extends string>(props: SelectOptionProps<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+type ChildrenProps<T> = {
+    children: ReactNode;
+} | {
+    options: T[];
+    getTitle?: (option: T, index: number) => string;
+    onChange: (value: T) => void;
+};
+type Props$6<T extends string> = ChildrenProps<T> & {
+    id: string;
+    flex?: CSSProperties["flex"];
+    value: T;
+};
+declare const Select: <T extends string>(props: Props$6<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+interface Props$5 {
+    id?: string;
+    value: number;
+    onValueChange: (value: number) => void;
+    min: number;
+    max: number;
+}
+declare const Slider: ({ id, value, onValueChange, min, max, }: Props$5) => React__default.JSX.Element;
+
+interface Props$4 {
+    size?: number | string;
+    inline?: boolean;
+}
+declare namespace Spacer {
+    const Vertical: styled_components.StyledComponent<"span", styled_components.DefaultTheme, Props$4, never>;
+    const Horizontal: styled_components.StyledComponent<"span", styled_components.DefaultTheme, Props$4, never>;
+}
+
+type BreakpointKey = number | string;
+type Breakpoint<T extends object> = [BreakpointKey, T];
+type BreakpointCollection<T extends object> = Breakpoint<T>[] | Record<BreakpointKey, T>;
+
+declare function withSeparatorElements(elements: ReactNode, separator: ReactNode | (() => ReactNode)): (string | number | React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | Iterable<ReactNode> | React$1.ReactPortal)[];
+
+interface StyleProps$1 {
+    display?: 'flex' | 'inline-flex' | 'none' | 'block';
+    visibility?: CSSProperties['visibility'];
+    position?: CSSProperties['position'];
+    zIndex?: CSSProperties['zIndex'];
+    gap?: CSSProperties['gap'];
+    inset?: CSSProperties['inset'];
+    top?: CSSProperties['top'];
+    right?: CSSProperties['right'];
+    bottom?: CSSProperties['bottom'];
+    left?: CSSProperties['left'];
+    flexDirection?: CSSProperties['flexDirection'];
+    justifyContent?: CSSProperties['justifyContent'];
+    alignItems?: CSSProperties['alignItems'];
+    alignSelf?: CSSProperties['alignSelf'];
+    flex?: CSSProperties['flex'];
+    flexWrap?: CSSProperties['flexWrap'];
+    height?: CSSProperties['height'];
+    minHeight?: CSSProperties['minHeight'];
+    maxHeight?: CSSProperties['maxHeight'];
+    width?: CSSProperties['width'];
+    minWidth?: CSSProperties['minWidth'];
+    maxWidth?: CSSProperties['maxWidth'];
+    aspectRatio?: CSSProperties['aspectRatio'];
+    padding?: CSSProperties['padding'];
+    paddingVertical?: string | number;
+    paddingHorizontal?: string | number;
+    margin?: CSSProperties['margin'];
+    background?: CSSProperties['background'];
+    backgroundSize?: CSSProperties['backgroundSize'];
+    backgroundPosition?: CSSProperties['backgroundPosition'];
+    borderRadius?: CSSProperties['borderRadius'];
+    overflowX?: CSSProperties['overflowX'];
+    overflowY?: CSSProperties['overflowY'];
+    overflow?: CSSProperties['overflow'];
+    textOverflow?: CSSProperties['textOverflow'];
+    boxShadow?: CSSProperties['boxShadow'];
+    outline?: CSSProperties['outline'];
+    border?: CSSProperties['border'];
+    borderTop?: CSSProperties['borderTop'];
+    borderRight?: CSSProperties['borderRight'];
+    borderBottom?: CSSProperties['borderBottom'];
+    borderLeft?: CSSProperties['borderLeft'];
+    cursor?: CSSProperties['cursor'];
+    userSelect?: CSSProperties['userSelect'];
+    transition?: CSSProperties['transition'];
+    opacity?: CSSProperties['opacity'];
+    filter?: CSSProperties['filter'];
+    color?: CSSProperties['color'];
+    order?: CSSProperties['order'];
+    pointerEvents?: CSSProperties['pointerEvents'];
+    lineHeight?: CSSProperties['lineHeight'];
+}
+type StackBreakpointList = BreakpointCollection<StyleProps$1>;
+interface Props$3 extends StyleProps$1 {
+    id?: string;
+    as?: keyof ReactHTML;
+    className?: string;
+    children?: ReactNode;
+    separator?: Parameters<typeof withSeparatorElements>[1];
+    breakpoints?: StackBreakpointList | null | false;
+    href?: string;
+    tabIndex?: number;
+}
+type StackProps = Omit<Props$3, 'flexDirection'>;
+declare const Stack: {
+    V: (props: StackProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    H: (props: StackProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+};
+
+type SwitchVariant = 'normal' | 'primary' | 'secondary';
+interface Props$2 {
+    value: boolean;
+    onChange: (value: boolean) => void;
+    variant?: SwitchVariant;
+}
+declare const Switch: ({ value, onChange, variant, }: Props$2) => React__default.JSX.Element;
+
+type StyleProps = {
+    flex?: CSSProperties$1['flex'];
+    padding?: CSSProperties$1['padding'];
+    background?: CSSProperties$1['background'];
+    borderRadius?: CSSProperties$1['borderRadius'];
+    textAlign?: CSSProperties$1['textAlign'];
+    fontWeight?: CSSProperties$1['fontWeight'];
+    fontStyle?: CSSProperties$1['fontStyle'];
+    fontSize?: CSSProperties$1['fontSize'];
+    lineHeight?: CSSProperties$1['lineHeight'];
+    fontFamily?: CSSProperties$1['fontFamily'];
+    wordBreak?: CSSProperties$1['wordBreak'];
+    whiteSpace?: CSSProperties$1['whiteSpace'];
+    height?: CSSProperties$1['height'];
+    width?: CSSProperties$1['width'];
+    opacity?: CSSProperties$1['opacity'];
+    position?: CSSProperties$1['position'];
+    overflow?: CSSProperties$1['overflow'];
+    textOverflow?: CSSProperties$1['textOverflow'];
+    textDecoration?: CSSProperties$1['textDecoration'];
+    display?: CSSProperties$1['display'];
+    top?: CSSProperties$1['top'];
+    right?: CSSProperties$1['right'];
+    bottom?: CSSProperties$1['bottom'];
+    left?: CSSProperties$1['left'];
+    userSelect?: CSSProperties$1['userSelect'];
+};
+type TextBreakpointList = BreakpointCollection<StyleProps>;
+interface Props$1 extends StyleProps {
+    as?: keyof ReactHTML;
+    href?: string;
+    className?: string;
+    variant: keyof Theme['textStyles'];
+    breakpoints?: BreakpointCollection<StyleProps> | null | false;
+    color?: ThemeColorName;
+    children: ReactNode;
+    onClick?: () => void;
+}
+declare const Text: (props: Props$1 & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+type PresetProps = Omit<Props$1, 'variant'>;
+declare const Heading1: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Heading2: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Heading3: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Heading4: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Heading5: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Body: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Small: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Italic: ({ children }: {
+    children: ReactNode;
+}) => React__default.JSX.Element;
+
+declare const Toast: ({ title, content, children, ...props }: {
+    title?: string | undefined;
+    content: ReactNode;
+    children?: React__default.ReactNode;
+}) => React__default.JSX.Element;
+declare const ToastProvider: ({ children }: {
+    children: React__default.ReactNode;
+}) => React__default.JSX.Element;
+
+interface Props {
+    children: ReactNode;
+    content: ReactNode;
+}
+declare const Tooltip: (props: Props) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+
+type TreeRowBaseProps = {
+    icon?: ReactNode;
+    expanded?: boolean;
+    onClickChevron?: ({ altKey }: {
+        altKey: boolean;
+    }) => void;
+};
+type TreeViewRowProps<MenuItemType extends string> = ListView.RowProps<MenuItemType> & TreeRowBaseProps;
+declare namespace TreeView {
+    const Root: <T = any>(props: (({
+        children: React__default.ReactNode;
+    } | {
+        data: T[];
+        renderItem: (item: T, index: number, info: {
+            isDragging: boolean;
+        }) => React__default.ReactNode;
+        keyExtractor: (item: T, index: number) => string;
+        sortable?: boolean | undefined;
+        virtualized?: _noya_app_noya_geometry.Size | undefined;
+    }) & {
+        onPress?: (() => void) | undefined;
+        scrollable?: boolean | undefined;
+        expandable?: boolean | undefined;
+        onMoveItem?: ((sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => void) | undefined;
+        indentation?: number | undefined;
+        acceptsDrop?: DropValidator | undefined;
+        pressEventName?: ("onClick" | "onPointerDown") | undefined;
+        variant?: ("normal" | "bare" | "padded") | undefined;
+        sectionHeaderVariant?: ("label" | "normal") | undefined;
+        divider?: boolean | undefined;
+        gap?: number | undefined;
+        colorScheme?: ("primary" | "secondary") | undefined;
+    }) & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const RowTitle: React__default.MemoExoticComponent<styled_components.StyledComponent<"span", styled_components.DefaultTheme, {}, never>>;
+    const EditableRowTitle: (props: EditableRowProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Row: <MenuItemType extends string>(props: ListView.RowProps<MenuItemType> & TreeRowBaseProps & React__default.RefAttributes<HTMLLIElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    type ClickInfo = ListView.ClickInfo;
+    type RowProps<MenuItemType extends string> = TreeViewRowProps<MenuItemType>;
+}
+
+type DesignSystemConfigurationContextValue = {
+    platform: PlatformName;
+};
+declare const DesignSystemConfigurationProvider: (props: {
+    children: ReactNode;
+    theme: Theme;
+} & DesignSystemConfigurationContextValue) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue;
+declare function useDesignSystemTheme(): styled_components.DefaultTheme;
+
+declare const Row: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
+type DialogContextValue = {
+    openInputDialog(title: string, inputValue?: 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 | undefined) => Promise<string | undefined>;
+declare function useDialogContainsElement(): (element: HTMLElement) => boolean;
+
+type GlobalInputBlurContextValue = {
+    addListener: (f: () => void) => void;
+    removeListener: (f: () => void) => void;
+    trigger: () => void;
+};
+declare const GlobalInputBlurProvider: React$1.Provider<GlobalInputBlurContextValue>;
+/**
+ * Some components store their editable state internally.
+ * We trigger this event before selection changes so that they can commit their
+ * edits before they unmount. This is more manual but simpler than doing so during
+ * the unmount phase (e.g. the return function of `useEffect`), since handlers are
+ * guaranteed to be called with the current data.
+ */
+declare const useGlobalInputBlur: () => GlobalInputBlurContextValue;
+declare function useGlobalInputBlurListener(f: () => void): void;
+declare function useGlobalInputBlurTrigger(): () => void;
+
+type Optional<T> = T | false | null | undefined;
+type MenuConfig<T extends string> = Optional<Optional<RegularMenuItem<T>>[]>[];
+declare function createSectionedMenu<T extends string>(...sections: MenuConfig<T>): MenuItem<T>[];
+
+type ReactDOMEventHandlers = ReturnType<ReturnType<typeof useGesture>> & {
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    onKeyDownCapture?: (e: React.KeyboardEvent) => void;
+    onKeyUp?: (e: React.KeyboardEvent) => void;
+    onKeyUpCapture?: (e: React.KeyboardEvent) => void;
+    onKeyPress?: (e: React.KeyboardEvent) => void;
+    onKeyPressCapture?: (e: React.KeyboardEvent) => void;
+    onBeforeInput?: (e: InputEvent) => void;
+};
+type ReactEventHandlers<MenuItemType extends string = string> = ReactDOMEventHandlers & {
+    onContributeMenuItems?: () => Optional<RegularMenuItem<MenuItemType>>[];
+    keyboardShortcuts?: KeyMap;
+    onSelectMenuItem?: (id: string) => void;
+};
+type EventName = keyof ReactEventHandlers;
+declare function mergeEventHandlers(...handlerMaps: ReactEventHandlers[]): ReactEventHandlers;
+
+interface HoverEvent {
+    /** The type of hover event being fired. */
+    type: 'hoverstart' | 'hoverend';
+    /** The pointer type that triggered the hover event. */
+    pointerType: 'mouse' | 'pen';
+    /** The target element of the hover event. */
+    target: HTMLElement;
+}
+interface HoverEvents {
+    /** Handler that is called when a hover interaction starts. */
+    onHoverStart?(e: HoverEvent): void;
+    /** Handler that is called when a hover interaction ends. */
+    onHoverEnd?(e: HoverEvent): void;
+    /** Handler that is called when the hover state changes. */
+    onHoverChange?(isHovering: boolean): void;
+}
+interface HoverProps extends HoverEvents {
+    /** Whether the hover events should be disabled. */
+    isDisabled?: boolean;
+}
+interface HoverResult {
+    /** Props to spread on the target element. */
+    hoverProps: React$1.HTMLAttributes<HTMLElement>;
+    isHovered: boolean;
+}
+/**
+ * Handles pointer hover interactions for an element. Normalizes behavior
+ * across browsers and platforms, and ignores emulated mouse events on touch devices.
+ */
+declare function useHover(props?: HoverProps): HoverResult;
+
+declare function usePlatform(): _noya_app_noya_keymap.PlatformName;
+/**
+ * Either ctrl or meta, depending on the platform
+ */
+declare function usePlatformModKey(): 'ctrlKey' | 'metaKey';
+
+declare const size: {
+    medium: string;
+    large: string;
+    xlarge: string;
+    xxlarge: string;
+};
+declare const mediaQuery: {
+    small: string;
+    medium: string;
+    large: string;
+    xlarge: string;
+};
+
+declare const colors: {
+    logo: {
+        fill: string;
+        highlight: string;
+    };
+    text: string;
+    textMuted: string;
+    textSubtle: string;
+    textDisabled: string;
+    dividerSubtle: string;
+    divider: string;
+    dividerStrong: string;
+    primary: string;
+    primaryLight: string;
+    secondary: string;
+    secondaryLight: string;
+    secondaryBright: string;
+    warning: string;
+    neutralBackground: string;
+    inputBackground: string;
+    inputBackgroundLight: string;
+    codeBackground: string;
+    selectedBackground: string;
+    transparentChecker: string;
+    activeBackground: string;
+    scrollbar: string;
+    placeholderDots: string;
+    listView: {
+        raisedBackground: string;
+        editingBackground: string;
+    };
+    canvas: {
+        background: string;
+        readonly selectionStroke: string;
+        dragHandleStroke: string;
+        measurement: string;
+        sliceOutline: string;
+        grid: string;
+    };
+    sidebar: {
+        background: string;
+    };
+    popover: {
+        background: string;
+        divider: string;
+    };
+    slider: {
+        background: string;
+        border: string;
+    };
+    radioGroup: {
+        background: string;
+    };
+    icon: string;
+    iconSelected: string;
+    mask: string;
+    imageOverlay: string;
+    readonly dragOutline: string;
+    selection: string;
+    thumbnailBackground: string;
+};
+
+declare const dark_colors: typeof colors;
+declare const dark_fonts: typeof fonts;
+declare const dark_sizes: typeof sizes;
+declare const dark_textStyles: typeof textStyles;
+declare namespace dark {
+  export { dark_colors as colors, dark_fonts as fonts, dark_sizes as sizes, dark_textStyles as textStyles };
+}
+
+declare function getGradientBackground(value: Sketch.GradientStop[], type: Sketch.GradientType, direction?: number): string;
+
+declare function isLeftButtonClicked(event: React.MouseEvent): boolean;
+declare function isRightButtonClicked(event: React.MouseEvent): boolean;
+
+declare function sketchColorToRgba(value: Sketch.Color): RgbaColor;
+declare function sketchColorToRgbaString(value: Sketch.Color): string;
+declare function rgbaToSketchColor(value: RgbaColor): Sketch.Color;
+declare function sketchColorToHex(value: Sketch.Color): string;
+
+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, Avatar, Body, Button, ButtonElement, type ButtonRootProps, Chip, type ChipProps, CloseButtonContainer, type Colors, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, CompletionToken, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, type DialogContextValue, DialogProvider, Divider, DividerVertical, type DropValidator, DropdownMenu, type EditableRowProps, type EventName, type ExtractMenuItemType, FillInputField, FillPreviewBackground, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, type GridProps, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IScoredItem, type IToken, type IVirtualizedList, IconButton, InputElement, InputField, type InputFieldSize, InputFieldWithCompletions, Italic, KeyboardShortcut, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, type Optional, PatternPreviewBackground, Popover, Progress, RadioGroup, type ReactDOMEventHandlers, type ReactEventHandlers, type RegularMenuItem, type RelativeDropPosition, Row, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, Select, SelectOption, type SketchPattern, Slider, Small, Sortable, Spacer, Stack, type StackBreakpointList, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text, type TextBreakpointList, type Theme, type ThemeColorName, Toast, ToastProvider, Tooltip, TreeView, createSectionedMenu, dark as darkTheme, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, isLeftButtonClicked, isRightButtonClicked, lightTheme, mediaQuery, mergeEventHandlers, normalizeListIndex, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };