@noya-app/noya-designsystem 0.1.30 → 0.1.32

package/dist/index.d.ts

@@ -1,60 +1,51 @@
 import * as React$1 from 'react';
-import React__default, { CSSProperties, ReactNode, ComponentProps, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, Ref, ReactHTML } from 'react';
-import * as styled_components_dist_types from 'styled-components/dist/types';
-import * as styled_components from 'styled-components';
-import { CSSObject, CSSProperties as CSSProperties$1 } from 'styled-components';
+import React__default, { CSSProperties, ReactNode, ComponentProps, SyntheticEvent, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, Ref, ReactHTML } from 'react';
 import * as Icons from '@noya-app/noya-icons';
 export { Icons };
 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 csstype from 'csstype';
-import { Property } from 'csstype';
 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 { Config } from 'tailwindcss';
+import { ImperativePanelGroupHandle } from 'react-resizable-panels';
 import { RgbaColor } from '@noya-app/noya-colorpicker';
 
-interface Props$j {
+interface Props$f {
     size?: number;
     opacity?: number;
     color?: string;
     trackColor?: string;
 }
-declare const ActivityIndicator: (props: Props$j) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const ActivityIndicator: (props: Props$f) => React__default.ReactElement | null;
 
 declare const Avatar: (props: {
-    image?: string | undefined;
-    name?: string | undefined;
-    fallback?: string | undefined;
-    size?: number | undefined;
-    overflow?: number | undefined;
-    style?: React__default.CSSProperties | undefined;
-    className?: string | undefined;
-} & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    image?: string;
+    name?: string;
+    fallback?: string;
+    size?: number;
+    overflow?: number;
+    style?: React__default.CSSProperties;
+    className?: string;
+} & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
 declare function AvatarStack({ size, children, }: {
     size?: number;
     children: React__default.ReactNode;
 }): React__default.JSX.Element;
 
 type ButtonVariant = "normal" | "primary" | "primaryGradient" | "secondary" | "secondaryBright" | "white" | "thin" | "floating" | "none";
-type ButtonSize = "normal" | "large";
-declare const ButtonElement: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<React__default.DetailedHTMLProps<React__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $active: boolean;
-    $variant: ButtonVariant;
-    $size: ButtonSize;
-    $flex?: CSSProperties["flex"];
-    $defaultBackground?: string | undefined;
-}>> & string;
+type ButtonSize = "small" | "normal" | "large" | "floating";
 interface ButtonRootProps {
     id?: string;
     className?: string;
     style?: CSSProperties;
-    flex?: CSSProperties["flex"];
     tabIndex?: number;
     children: ReactNode;
     active?: boolean;
@@ -62,8 +53,8 @@ interface ButtonRootProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
     tooltip?: ReactNode;
-    onClick?: (event: React__default.MouseEvent) => void;
-    onPointerDown?: (event: React__default.PointerEvent) => void;
+    onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
+    onPointerDown?: (event: React__default.PointerEvent<HTMLButtonElement>) => void;
     contentStyle?: CSSProperties;
     defaultBackground?: string;
     as?: React__default.ElementType;
@@ -72,7 +63,7 @@ interface ButtonRootProps {
     target?: string;
     rel?: string;
 }
-declare const Button: (props: ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Button: (props: ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
 
 type ChipColorScheme = "primary" | "secondary" | "error";
 type ChipSize = "small" | "medium" | "large";
@@ -95,153 +86,7 @@ interface ChipProps {
     style?: React__default.CSSProperties;
     tabIndex?: number;
 }
-declare const Chip: (props: ChipProps & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-
-declare const name$1: string;
-declare const colors$1: {
-    logo: {
-        fill: string;
-        highlight: string;
-    };
-    background: string;
-    text: string;
-    textMuted: string;
-    textSubtle: string;
-    textDisabled: string;
-    textDecorativeLight: string;
-    dividerSubtle: string;
-    divider: string;
-    dividerStrong: string;
-    primary: string;
-    primaryLight: string;
-    primaryPastel: string;
-    secondary: string;
-    secondaryLight: string;
-    secondaryPastel: string;
-    secondaryBright: string;
-    warning: string;
-    neutralBackground: string;
-    inputBackground: string;
-    inputBackgroundLight: string;
-    codeBackground: string;
-    codeBackgroundLight: string;
-    readonly codeBackgroundDark: string;
-    codeBackgroundDecorativeDark: string;
-    selectedBackground: string;
-    transparentChecker: string;
-    activeBackground: string;
-    scrollbar: string;
-    placeholderDots: string;
-    breadcrumb: {
-        readonly text: string;
-        readonly textHover: string;
-        readonly icon: string;
-    };
-    listView: {
-        raisedBackground: string;
-        editingBackground: string;
-    };
-    canvas: {
-        background: string;
-        readonly selectionStroke: string;
-        dragHandleStroke: string;
-        measurement: string;
-        sliceOutline: string;
-        grid: string;
-    };
-    sidebar: {
-        background: string;
-        backgroundTransparent: 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;
-    thumbnailShadow: string;
-    inlineCode: {
-        text: string;
-        background: string;
-    };
-    textLink: string;
-    textLinkFocused: 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;
-    button: CSSObject;
-    code: CSSObject;
-    label: CSSObject;
-};
-declare const sizes: {
-    inset: {
-        top: number;
-    };
-    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, name$1 as name, 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 Chip: (props: ChipProps & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
 
 type IconName = keyof typeof Icons;
 
@@ -263,7 +108,7 @@ 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;
+}) => React__default.ReactElement | null;
 
 interface MenuItemProps<T extends string> {
     value?: T;
@@ -284,14 +129,13 @@ interface MenuProps<T extends string> {
     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 ContextMenu: <T extends string>(props: MenuProps<T>) => React__default.ReactElement | null;
 
-declare const StyledContent: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<DialogPrimitive.DialogContentProps & React__default.RefAttributes<HTMLDivElement>, never>> & string & Omit<React__default.ForwardRefExoticComponent<DialogPrimitive.DialogContentProps & React__default.RefAttributes<HTMLDivElement>>, keyof React__default.Component<any, {}, any>>;
-declare const CloseButtonContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+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$i {
+interface Props$e {
     title?: ReactNode;
     description?: ReactNode;
     children?: ReactNode;
@@ -301,30 +145,33 @@ interface Props$i {
     onOpenAutoFocus?: ComponentProps<typeof DialogPrimitive.Content>["onOpenAutoFocus"];
     closeOnInteractOutside?: boolean;
 }
-declare const Dialog: (props: Props$i & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-declare const FullscreenDialog: (props: Props$i & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+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" | "strong" | "subtle";
+type DividerVariant = "normal" | "subtle" | "strong";
 interface DividerProps {
     variant?: DividerVariant;
-    overflow?: number;
+    overflow?: number | string;
+    className?: string;
+    style?: React__default.CSSProperties;
 }
-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 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>[] | undefined;
-    onSelect?: ((value: T) => void) | undefined;
-    isVisible?: boolean | undefined;
-}) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    items?: MenuItem<T>[];
+    onSelect?: (value: T) => void;
+    isVisible?: boolean;
+}) => React__default.ReactElement | null;
 
 declare const DropdownMenu: <T extends string>(props: MenuProps<T> & {
-    open?: boolean | undefined;
-    onCloseAutoFocus?: ((event: React__default.SyntheticEvent<unknown, Event>) => void) | undefined;
-} & Pick<RadixDropdownMenu.DropdownMenuContentProps & React__default.RefAttributes<HTMLDivElement>, "align" | "side" | "sideOffset" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    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")[];
@@ -337,22 +184,21 @@ type SketchPattern = {
     patternTileScale: number;
 };
 
-interface Props$h {
+interface Props$d {
     id?: string;
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
-    flex?: CSSProperties["flex"];
 }
-declare const FillInputField: (props: Props$h & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+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<any, string | React__default.JSXElementConstructor<any>> | null;
-interface Props$g {
+}) => React__default.ReactElement | null;
+interface Props$c {
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
 }
-declare const FillPreviewBackground: (props: Props$g) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const FillPreviewBackground: (props: Props$c) => React__default.ReactElement | null;
 
 interface FloatingWindowProps {
     title?: string;
@@ -373,7 +219,7 @@ interface FloatingWindowProps {
 }
 declare const FloatingWindow: React__default.FC<FloatingWindowProps>;
 
-interface Props$f {
+interface Props$b {
     value: Sketch.GradientStop[];
     selectedStop: number;
     onChangeColor: (color: Sketch.Color) => void;
@@ -382,32 +228,7 @@ interface Props$f {
     onDelete: () => void;
     onSelectStop: (index: number) => void;
 }
-declare const GradientPicker: (props: Props$f) => 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;
-};
+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> {
@@ -438,27 +259,27 @@ interface GridViewRootProps extends Partial<GridViewContextValue> {
     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 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?: React__default.ReactNode;
-        padding?: csstype.Property.Padding<string | number> | undefined;
-    }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+        children?: ReactNode;
+        className?: string;
+    }) => React__default.ReactElement | null;
     const SectionHeader: (props: {
         title: string;
-    }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    }) => React__default.ReactElement | null;
 }
 
-declare const IconButton: (props: Omit<ButtonRootProps, "children" | "size" | "flex" | "variant"> & {
+declare const IconButton: (props: Omit<ButtonRootProps, "size" | "flex" | "children" | "variant"> & {
     iconName: IconName;
-    className?: string | undefined;
-    style?: React__default.CSSProperties | undefined;
-    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$e = {
+    className?: string;
+    style?: CSSProperties;
+    selected?: boolean;
+    color?: string;
+    size?: number;
+} & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
+
+type Props$a = {
     id?: string;
     style?: any;
     className?: string;
@@ -476,13 +297,13 @@ type Props$e = {
     onFocusChange?: (isFocused: boolean) => void;
     onBlur?: FocusEventHandler;
 } & Pick<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "autoFocus">;
-type ReadOnlyProps = Props$e & {
+type ReadOnlyProps = Props$a & {
     readOnly: true;
 };
-type ControlledProps = Props$e & {
+type ControlledProps = Props$a & {
     onChange: (value: string) => void;
 };
-type SubmittableProps = Props$e & {
+type SubmittableProps = Props$a & {
     onSubmit: (value: string) => void;
     allowSubmittingWithSameValue?: boolean;
     submitAutomaticallyAfterDelay?: number;
@@ -495,6 +316,7 @@ interface InputFieldLabelProps {
     children?: ReactNode;
     pointerEvents?: Property.PointerEvents;
     style?: React__default.CSSProperties;
+    className?: string;
 }
 interface InputFieldDropdownProps<T extends string> {
     id?: string;
@@ -502,18 +324,10 @@ interface InputFieldDropdownProps<T extends string> {
     onSelect: (value: T) => void;
     children?: ReactNode;
 }
-type InputFieldVariant = "normal" | "bare";
-declare const InputElement: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<(TextInputProps & React__default.RefAttributes<HTMLInputElement>) & styled_components_dist_types.BaseObject, {
-    disabled?: boolean | undefined;
-    readOnly?: boolean | undefined;
-    $labelPosition: LabelPosition;
-    $labelSize: number;
-    $hasLabel: boolean;
-    $hasDropdown: boolean;
-    $textAlign?: Property.TextAlign | undefined;
-    $variant?: InputFieldVariant | undefined;
-    $size: InputFieldSize;
-}>> & string & Omit<(props: TextInputProps & React__default.RefAttributes<HTMLInputElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null, keyof React__default.Component<any, {}, any>>;
+type InputFieldInputProps = TextInputProps & {
+    textAlign?: Property.TextAlign;
+    variant?: "bare";
+};
 type InputFieldNumberInputProps = Omit<TextInputProps, "value" | "onChange" | "onKeyDown" | "onSubmit"> & {
     value: number | undefined;
     onNudge?: (value: number) => void;
@@ -542,23 +356,20 @@ interface InputFieldRootProps {
     className?: string;
 }
 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 Root: (props: InputFieldRootProps) => React__default.ReactElement | null;
+    const Input: (props: InputFieldInputProps & React__default.RefAttributes<HTMLInputElement>) => React__default.ReactElement | null;
     const Typeahead: (props: {
         prefix: string;
         value: string;
-    }) => 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.RefAttributes<HTMLLabelElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-    const PrimitiveElement: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+    }) => React__default.ReactElement | null;
+    const NumberInput: (props: InputFieldNumberInputProps) => React__default.ReactElement | null;
+    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: InputFieldLabelProps & React__default.RefAttributes<HTMLLabelElement>) => React__default.ReactElement | null;
+    const PrimitiveElement: ({ readOnly, disabled, className, ...props }: {
+        readOnly?: boolean;
+        disabled?: boolean;
+    } & React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => React__default.JSX.Element;
 }
 
 declare function fuzzyScore({ item, query }: {
@@ -626,8 +437,8 @@ interface RootProps {
     axis?: "x" | "y";
 }
 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;
+    const Item: <T extends HTMLElement>(props: ItemProps$1<T>) => React__default.ReactElement | null;
+    const Root: (props: RootProps) => React__default.ReactElement | null;
 }
 
 type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
@@ -694,7 +505,7 @@ interface IVirtualizedList {
 type ListViewItemInfo = {
     isDragging: boolean;
 };
-type ChildrenProps$1 = {
+type ChildrenProps = {
     children: ReactNode;
 };
 type RenderProps<T> = {
@@ -729,30 +540,30 @@ type ListViewRootProps = {
     colorScheme?: ListColorScheme;
 };
 declare namespace ListView {
-    const RowTitle: (props: styled_components.FastOmit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-    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 RowTitle: (props: {
+        className?: string;
+        children: React__default.ReactNode;
+    } & React__default.HTMLAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
+    const EditableRowTitle: (props: EditableRowProps) => React__default.ReactElement | null;
+    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>;
     type ClickInfo = ListViewClickInfo;
     type ItemInfo = ListViewItemInfo;
     type RowProps<MenuItemType extends string = string> = ListViewRowProps<MenuItemType>;
     type VirtualizedList = IVirtualizedList;
-    const DragIndicator: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    const DragIndicator: (props: React__default.HTMLAttributes<HTMLDivElement> & {
         $relativeDropPosition: RelativeDropPosition;
         $gap: number;
         $offsetLeft: number;
         $colorScheme: ListColorScheme;
-    }>> & string;
+    } & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
     const rowHeight = 31;
     const sectionHeaderLabelHeight = 27;
     const calculateHeight: (items: number, headerCount: number, headerVariant: ListViewSectionHeaderVariant) => number;
     const normalizeDestinationIndex: (index: number, position: "above" | "below") => number;
 }
 
-declare const CompletionToken: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    $type: IToken["type"];
-}>> & string;
 interface CompletionMenuProps {
     items: CompletionListItem[];
     selectedIndex: number;
@@ -760,8 +571,8 @@ interface CompletionMenuProps {
     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;
-type Props$d = {
+declare const CompletionMenu: (props: CompletionMenuProps & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement | null;
+type InputFieldWithCompletionsProps = {
     loading?: boolean;
     initialValue?: string;
     placeholder?: string;
@@ -779,32 +590,29 @@ type Props$d = {
     hideChildrenWhenFocused?: boolean;
     hideMenuWhenEmptyValue?: boolean;
 };
-interface IInputFieldWithCompletions {
+interface InputFieldWithCompletionsRef {
     focus(): void;
     setValue(value: string): void;
     selectAllInputText(): void;
 }
-declare const InputFieldWithCompletions: (props: Props$d & React__default.RefAttributes<IInputFieldWithCompletions>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const InputFieldWithCompletions: (props: InputFieldWithCompletionsProps & React__default.RefAttributes<InputFieldWithCompletionsRef>) => React__default.ReactElement | null;
 
 declare const InspectorContainer: (props: {
     header?: React__default.ReactNode;
     children?: React__default.ReactNode;
     fallback?: React__default.ReactNode;
-    showDividers?: boolean | undefined;
-    id?: string | undefined;
-    className?: string | undefined;
-    style?: React__default.CSSProperties | undefined;
-} & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    showDividers?: boolean;
+    id?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+} & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
 
 interface LabelRootProps {
     label: ReactNode;
     children: ReactNode;
 }
 declare namespace Label {
-    const Label: (props: styled_components_dist_types.Substitute<React__default.DetailedHTMLProps<React__default.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
-        $selected?: boolean | undefined;
-    }>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-    const Root: (props: LabelRootProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Root: (props: LabelRootProps) => React__default.ReactElement | null;
 }
 
 interface ContainerProps {
@@ -814,10 +622,10 @@ interface ContainerProps {
         index: number;
     }) => ReactNode;
 }
-declare const LabeledElementView: (props: ContainerProps) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const LabeledElementView: (props: ContainerProps) => React__default.ReactElement | null;
 
 type PopoverVariant = "normal" | "large";
-interface Props$c extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
+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;
@@ -828,15 +636,13 @@ interface Props$c extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content
     onClickClose?: () => void;
     showArrow?: boolean;
 }
-declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onInteractOutside, onFocusOutside, onClickClose, }: Props$c): React__default.JSX.Element;
+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, }: {
+type ProgressVariant = "normal" | "warning" | "primary" | "secondary";
+declare function Progress({ value, variant, className, }: {
     value: number;
-    height?: CSSProperties['height'];
-    width?: CSSProperties['width'];
-    flex?: CSSProperties['flex'];
     variant?: ProgressVariant;
+    className?: string;
 }): React__default.JSX.Element;
 
 type RadioGroupColorScheme = "primary" | "secondary";
@@ -846,7 +652,7 @@ interface ItemProps {
     children: ReactNode;
     disabled?: boolean;
 }
-interface Props$b {
+interface Props$8 {
     id?: string;
     value?: string;
     onValueChange?: (value: string) => void;
@@ -856,37 +662,16 @@ interface Props$b {
     children: ReactNode;
 }
 declare namespace RadioGroup {
-    const Root: (props: Props$b) => 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;
+    const Root: (props: Props$8) => React__default.ReactElement | null;
+    const Item: (props: ItemProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
 }
 
-interface Props$a {
+interface Props$7 {
     children?: ReactNode | ((scrollElementRef: HTMLDivElement) => ReactNode);
 }
-declare const ScrollArea: (props: Props$a) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const ScrollArea: (props: Props$7) => React__default.ReactElement | 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: readonly T[];
-    getTitle?: (option: T, index: number) => string;
-    onChange: (value: T) => void;
-};
-type Props$9<T extends string> = ChildrenProps<T> & {
-    id: string;
-    flex?: CSSProperties["flex"];
-    value: T;
-    label?: ReactNode;
-};
-declare const Select: <T extends string>(props: Props$9<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-
-type Props$8<T extends string> = {
+type Props$6<T extends string> = {
     id?: string;
     style?: React__default.CSSProperties;
     className?: string;
@@ -896,181 +681,87 @@ type Props$8<T extends string> = {
     placeholder?: string;
     disabled?: boolean;
     readOnly?: boolean;
-};
-declare const SelectMenu: <T extends string = string>(props: Props$8<T>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    label?: React__default.ReactNode;
+} & Pick<SelectProps, "open">;
+declare const SelectMenu: <T extends string = string>(props: Props$6<T>) => React__default.ReactElement | null;
 
-interface Props$7 {
+interface Props$5 {
     id?: string;
     value: number;
     onValueChange: (value: number) => void;
     min: number;
     max: number;
 }
-declare const Slider: ({ id, value, onValueChange, min, max, }: Props$7) => React__default.JSX.Element;
+declare const Slider: ({ id, value, onValueChange, min, max, }: Props$5) => React__default.JSX.Element;
 
-interface Props$6 {
+interface Props$4 {
     size?: number | string;
     inline?: boolean;
 }
 declare namespace Spacer {
-    const Vertical: (props: Props$6 & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-    const Horizontal: (props: Props$6 & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-}
-
-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"];
-    isolation?: CSSProperties["isolation"];
-    backdropFilter?: CSSProperties["backdropFilter"];
-}
-type StackBreakpointList = BreakpointCollection<StyleProps$1>;
-interface Props$5 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;
+    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;
 }
-type StackProps = Omit<Props$5, "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 SwitchColorScheme = "normal" | "primary" | "secondary";
-interface Props$4 {
+interface Props$3 {
     value: boolean;
     onChange: (value: boolean) => void;
     /** @default normal */
     colorScheme?: SwitchColorScheme;
     disabled?: boolean;
 }
-declare const Switch: ({ value, onChange, colorScheme, disabled, }: Props$4) => 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"];
-    minWidth?: CSSProperties$1["minWidth"];
-    maxWidth?: CSSProperties$1["maxWidth"];
-    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"];
-    cursor?: CSSProperties$1["cursor"];
-};
-type TextBreakpointList = BreakpointCollection<StyleProps>;
-interface Props$3 extends StyleProps {
+declare const Switch: ({ value, onChange, colorScheme, disabled, }: Props$3) => React__default.JSX.Element;
+
+declare const config: Config;
+
+type Theme = typeof config.theme.extend;
+
+/**
+ * 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;
+type ThemeExtend = NonNullable<Theme['extend']>;
+type ThemeColor = keyof ThemeExtend['colors'];
+
+type Variant = "title" | "subtitle" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "body" | "small" | "button" | "code" | "label";
+declare const textStyles: Record<Variant, string>;
+type TextProps = {
     as?: keyof ReactHTML;
     href?: string;
     className?: string;
     style?: React__default.CSSProperties;
-    variant: keyof Theme["textStyles"];
-    breakpoints?: BreakpointCollection<StyleProps> | null | false;
-    color?: ThemeColorName;
+    variant: Variant;
+    color?: ThemeColor;
     children: ReactNode;
     onClick?: () => void;
     onDoubleClick?: () => void;
     onKeyDown?: (event: React__default.KeyboardEvent<HTMLSpanElement>) => void;
     tabIndex?: number;
-}
-declare const Text$1: (props: Props$3 & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-type PresetProps = Omit<Props$3, "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 Text$1: (props: TextProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
+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 Italic: ({ children }: {
     children: ReactNode;
 }) => React__default.JSX.Element;
 
 declare const useAutoResize: (value: string) => React__default.MutableRefObject<HTMLTextAreaElement | null>;
-declare const AutoResizingTextArea: (props: Omit<styled_components.FastOmit<React__default.DetailedHTMLProps<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>, "onChange" | "value"> & {
+declare const AutoResizingTextArea: (props: {
     onChangeText: (value: string) => void;
-    value?: string | undefined;
-} & React__default.RefAttributes<HTMLTextAreaElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    value?: string;
+} & React__default.TextareaHTMLAttributes<HTMLTextAreaElement> & React__default.RefAttributes<HTMLTextAreaElement>) => React__default.ReactElement | null;
 
 declare const Toast: ({ title, content, children, ...props }: {
-    title?: string | undefined;
+    title?: string;
     content: ReactNode;
     children?: React__default.ReactNode;
 }) => React__default.JSX.Element;
@@ -1082,7 +773,7 @@ interface Props$2 {
     children: ReactNode;
     content: ReactNode;
 }
-declare const Tooltip: (props: Props$2) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const Tooltip: (props: Props$2) => React__default.ReactElement | null;
 
 type TreeRowBaseProps = {
     icon?: Exclude<ReactNode, string> | IconName;
@@ -1094,43 +785,51 @@ type TreeRowBaseProps = {
 type TreeViewRowProps<MenuItemType extends string> = ListView.RowProps<MenuItemType> & TreeRowBaseProps;
 declare namespace TreeView {
     const Root: <T = any>(props: (({
-        children: React__default.ReactNode;
+        children: ReactNode;
     } | {
         data: T[];
         renderItem: (item: T, index: number, info: {
             isDragging: boolean;
-        }) => React__default.ReactNode;
+        }) => ReactNode;
         keyExtractor: (item: T, index: number) => string;
-        sortable?: boolean | undefined;
-        virtualized?: _noya_app_noya_geometry.Size | undefined;
+        sortable?: boolean;
+        virtualized?: _noya_app_noya_geometry.Size;
     }) & {
-        id?: string | undefined;
-        className?: string | undefined;
-        style?: React__default.CSSProperties | 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: (props: styled_components.FastOmit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-    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;
+        id?: string;
+        className?: string;
+        style?: React__default.CSSProperties;
+        onPress?: () => void;
+        scrollable?: boolean;
+        expandable?: boolean;
+        onMoveItem?: (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => void;
+        indentation?: number;
+        acceptsDrop?: DropValidator;
+        pressEventName?: "onClick" | "onPointerDown";
+        variant?: "normal" | "bare" | "padded";
+        sectionHeaderVariant?: "label" | "normal";
+        divider?: boolean;
+        gap?: number;
+        colorScheme?: "primary" | "secondary";
+    }) & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement | null;
+    const RowTitle: (props: {
+        className?: string;
+        children: React__default.ReactNode;
+    } & React__default.HTMLAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
+    const EditableRowTitle: (props: EditableRowProps) => React__default.ReactElement | null;
+    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>;
 }
 
+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";
+declare const CONTENT_AREA_ID = "editor-content-area";
 type PanelLayoutState = {
     leftSidebarCollapsed: boolean;
     rightSidebarCollapsed: boolean;
 };
+declare function usePreservePanelSize(panelGroupRef: React__default.RefObject<ImperativePanelGroupHandle | null>, setPanelLayoutState?: (state: PanelLayoutState) => void): void;
 
 interface Props$1 {
     autoSavePrefix?: string;
@@ -1164,24 +863,17 @@ type IWorkspaceLayout = {
     toggleLeftSidebar: () => void;
     toggleRightSidebar: () => void;
 };
-declare const WorkspaceLayout: (props: Props$1 & React__default.RefAttributes<IWorkspaceLayout>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+declare const WorkspaceLayout: (props: Props$1 & React__default.RefAttributes<IWorkspaceLayout>) => React__default.ReactElement | null;
 
-declare const DesignSystemThemeProvider: (props: {
-    children: ReactNode;
-    theme?: typeof lightTheme | undefined;
-}) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 type DesignSystemConfigurationContextValue = {
     platform: PlatformName;
 };
 declare const DesignSystemConfigurationProvider: (props: {
     children: ReactNode;
-    theme?: "dark" | "light" | typeof lightTheme | undefined;
-    platform?: PlatformName | undefined;
-}) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    platform?: PlatformName;
+}) => React__default.ReactElement | null;
 declare function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue;
-declare function useDesignSystemTheme(): styled_components.DefaultTheme;
 
-declare const Row$1: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 type DialogContextValue = {
     openInputDialog(title: string, inputValue?: string): Promise<string | undefined>;
     containsElement(element: HTMLElement): boolean;
@@ -1189,7 +881,7 @@ type DialogContextValue = {
 declare const DialogProvider: ({ children, }: {
     children: ReactNode;
 }) => React__default.JSX.Element;
-declare function useOpenInputDialog(): (title: string, inputValue?: string | undefined) => Promise<string | undefined>;
+declare function useOpenInputDialog(): (title: string, inputValue?: string) => Promise<string | undefined>;
 declare function useDialogContainsElement(): (element: HTMLElement) => boolean;
 
 type FloatingWindowContextValue = {
@@ -1210,8 +902,8 @@ type ImageDataContextValue = {
 };
 declare const ImageDataProvider: (props: {
     children: ReactNode;
-    getImageData?: ((ref: string) => ArrayBuffer | undefined) | undefined;
-}) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    getImageData?: (ref: string) => ArrayBuffer | undefined;
+}) => React__default.ReactElement | null;
 declare function useImageData(ref: string): ArrayBuffer | undefined;
 
 type GlobalInputBlurContextValue = {
@@ -1281,109 +973,24 @@ declare const mediaQuery: {
     xlarge: string;
 };
 
-declare const name: string;
-declare const colors: {
-    logo: {
-        fill: string;
-        highlight: string;
-    };
-    background: string;
-    text: string;
-    textMuted: string;
-    textSubtle: string;
-    textDisabled: string;
-    textDecorativeLight: string;
-    dividerSubtle: string;
-    divider: string;
-    dividerStrong: string;
-    primary: string;
-    primaryLight: string;
-    primaryPastel: string;
-    secondary: string;
-    secondaryLight: string;
-    secondaryPastel: string;
-    secondaryBright: string;
-    warning: string;
-    neutralBackground: string;
-    inputBackground: string;
-    inputBackgroundLight: string;
-    codeBackground: string;
-    codeBackgroundLight: string;
-    readonly codeBackgroundDark: string;
-    codeBackgroundDecorativeDark: string;
-    selectedBackground: string;
-    transparentChecker: string;
-    activeBackground: string;
-    scrollbar: string;
-    placeholderDots: string;
-    breadcrumb: {
-        readonly text: string;
-        readonly textHover: string;
-        readonly icon: string;
-    };
-    listView: {
-        raisedBackground: string;
-        editingBackground: string;
-    };
-    canvas: {
-        background: string;
-        readonly selectionStroke: string;
-        dragHandleStroke: string;
-        measurement: string;
-        sliceOutline: string;
-        grid: string;
-    };
-    sidebar: {
-        background: string;
-        backgroundTransparent: 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;
-    thumbnailShadow: string;
-    inlineCode: {
-        text: string;
-        background: string;
-    };
-    textLink: string;
-    textLinkFocused: string;
-};
-
-declare const dark_colors: typeof colors;
-declare const dark_fonts: typeof fonts;
-declare const dark_name: typeof name;
-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_name as name, dark_sizes as sizes, dark_textStyles as textStyles };
-}
-
 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>[];
 
 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 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 function withSeparatorElements(elements: ReactNode, separator: ReactNode | (() => ReactNode)): (string | number | React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | Iterable<ReactNode> | React$1.ReactPortal)[];
+
 type SetNumberMode = "replace" | "adjust";
 declare function getNewValue(value: number, mode: SetNumberMode, delta?: number): number;
 type DimensionValue = number | undefined;
@@ -1397,45 +1004,37 @@ interface Props {
     disabled?: boolean;
     trigger?: "change" | "submit";
 }
-declare const DimensionInput: (props: Props) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-
-declare const Section: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $padding?: CSSProperties["padding"];
-    $gap?: CSSProperties["gap"];
-}>> & string;
-declare const SectionHeader: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const Title: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $textStyle?: "small" | "heading3" | "heading4" | "heading5" | undefined;
-}>> & string;
-declare const Row: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $gap?: CSSProperties["gap"];
-}>> & string;
-declare const Column: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const Checkbox: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
-declare const Text: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+declare const DimensionInput: (props: Props) => React__default.ReactElement | null;
+
+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;
+type TitleTextStyle = "small" | "heading5" | "heading4" | "heading3";
+declare const Title: (props: 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;
 declare const VerticalSeparator: () => React__default.JSX.Element;
 declare const HorizontalSeparator: () => React__default.JSX.Element;
-declare const RowLabel: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    $textStyle?: "small" | "heading3" | "heading4" | "heading5" | undefined;
-}>> & string;
-declare const LabeledRow: (props: {
-    id?: string | undefined;
+declare const RowLabel: (props: React__default.HTMLAttributes<HTMLSpanElement> & {
+    $textStyle?: TitleTextStyle | "label";
+} & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
+interface LabeledRowProps {
+    id?: string;
     children: ReactNode;
     label: ReactNode;
-    labelTextStyle?: "small" | "heading3" | "heading4" | "heading5" | undefined;
-    gap?: CSSProperties["gap"];
+    labelTextStyle?: TitleTextStyle;
     right?: ReactNode;
-}) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-declare const LabeledSliderRow: (props: {
-    children: ReactNode;
-    label: string;
-}) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    className?: string;
+}
+declare const LabeledRow: (props: LabeledRowProps) => React__default.ReactElement | null;
 
 declare const InspectorPrimitives_Checkbox: typeof Checkbox;
 declare const InspectorPrimitives_Column: typeof Column;
 declare const InspectorPrimitives_HorizontalSeparator: typeof HorizontalSeparator;
 declare const InspectorPrimitives_LabeledRow: typeof LabeledRow;
-declare const InspectorPrimitives_LabeledSliderRow: typeof LabeledSliderRow;
 declare const InspectorPrimitives_Row: typeof Row;
 declare const InspectorPrimitives_RowLabel: typeof RowLabel;
 declare const InspectorPrimitives_Section: typeof Section;
@@ -1444,7 +1043,19 @@ declare const InspectorPrimitives_Text: typeof Text;
 declare const InspectorPrimitives_Title: typeof Title;
 declare const InspectorPrimitives_VerticalSeparator: typeof VerticalSeparator;
 declare namespace InspectorPrimitives {
-  export { InspectorPrimitives_Checkbox as Checkbox, InspectorPrimitives_Column as Column, InspectorPrimitives_HorizontalSeparator as HorizontalSeparator, InspectorPrimitives_LabeledRow as LabeledRow, InspectorPrimitives_LabeledSliderRow as LabeledSliderRow, 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 };
+  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" {
@@ -1452,4 +1063,4 @@ declare module "react" {
     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, ButtonElement, type ButtonRootProps, Chip, type ChipProps, CloseButtonContainer, type Colors, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, CompletionToken, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, DesignSystemThemeProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, type EditableRowProps, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, type GridProps, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IInputFieldWithCompletions, type IScoredItem, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, InputElement, InputField, type InputFieldSize, InputFieldWithCompletions, InspectorContainer, InspectorPrimitives, 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 RegularMenuItem, type RelativeDropPosition, Row$1 as Row, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, Select, SelectMenu, SelectOption, type SetNumberMode, type SketchPattern, Slider, Small, Sortable, Spacer, Stack, type StackBreakpointList, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, type TextBreakpointList, type Theme, type ThemeColorName, Toast, ToastProvider, Tooltip, TreeView, WorkspaceLayout, createSectionedMenu, dark as darkTheme, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, lightTheme, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, useAutoResize, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDesignSystemTheme, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, withSeparatorElements };
+export { ActivityIndicator, AutoResizingTextArea, Avatar, AvatarStack, Body, Button, ButtonRootProps, CONTENT_AREA_ID, Chip, ChipProps, CompletionItem, CompletionListItem, CompletionMenu, CompletionSectionHeader, ContextMenu, DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, DialogContextValue, DialogProvider, DimensionInput, DimensionValue, Divider, DividerVertical, DraggableMenuButton, DropValidator, DropdownMenu, EDITOR_PANEL_GROUP_ID, EditableRowProps, ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, GridView, GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, HoverEvent, HoverEvents, HoverProps, IDialog, IScoredItem, IToken, IVirtualizedList, IWorkspaceLayout, IconButton, IconName, ImageDataContextValue, ImageDataProvider, InputField, InputFieldInputProps, InputFieldSize, InputFieldWithCompletions, InputFieldWithCompletionsProps, InputFieldWithCompletionsRef, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabeledElementView, ListRowMarginType, ListRowPosition, ListView, MatchRange, MenuConfig, MenuItem, MenuItemProps, MenuProps, Optional, PanelLayoutState, PatternPreviewBackground, Popover, Progress, RIGHT_SIDEBAR_ID, RadioGroup, RegularMenuItem, RelativeDropPosition, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, SelectMenu, SetNumberMode, SketchPattern, Slider, Small, Sortable, Spacer, SupportedCanvasUploadType, SupportedImageUploadType, Switch, Text$1 as Text, TextProps, Theme, ThemeColor, Toast, ToastProvider, Tooltip, TreeView, WorkspaceLayout, cn, createSectionedMenu, 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 };