@noya-app/noya-designsystem 0.1.15 → 0.1.17

package/.turbo/turbo-build.log

@@ -5,13 +5,13 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
-CJS dist/index.js     215.09 KB
-CJS dist/index.js.map 434.94 KB
-CJS ⚡️ Build success in 51ms
-ESM dist/index.mjs     197.86 KB
-ESM dist/index.mjs.map 434.84 KB
-ESM ⚡️ Build success in 51ms
+CJS dist/index.js     215.43 KB
+CJS dist/index.js.map 437.43 KB
+CJS ⚡️ Build success in 67ms
+ESM dist/index.mjs     198.16 KB
+ESM dist/index.mjs.map 437.35 KB
+ESM ⚡️ Build success in 68ms
 DTS Build start
-DTS ⚡️ Build success in 3708ms
-DTS dist/index.d.ts  56.57 KB
-DTS dist/index.d.mts 56.57 KB
+DTS ⚡️ Build success in 9797ms
+DTS dist/index.d.ts  58.69 KB
+DTS dist/index.d.mts 58.69 KB

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @noya-app/noya-designsystem
 
+## 0.1.17
+
+### Patch Changes
+
+- c98f0a8: Improve inspector style
+- Updated dependencies [81d4074]
+  - @noya-app/noya-icons@0.1.4
+
+## 0.1.16
+
+### Patch Changes
+
+- 86288ca: styled-components 6
+- b1b4809: Adjust focus style and add boolean to JSON Editor
+- Updated dependencies [e2a3468]
+  - @noya-app/noya-colorpicker@0.1.9
+
 ## 0.1.15
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 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_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
 import { CSSObject, CSSProperties as CSSProperties$1 } from 'styled-components';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -15,7 +16,6 @@ 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 { RgbaColor } from '@noya-app/noya-colorpicker';
 
 interface Props$h {
@@ -42,13 +42,13 @@ declare function AvatarStack({ size, children, }: {
 
 type ButtonVariant = "normal" | "primary" | "primaryGradient" | "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"];
-    defaultBackground?: string | undefined;
-}, never>;
+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;
 interface ButtonRootProps {
     id?: string;
     className?: string;
@@ -143,6 +143,7 @@ declare const colors$1: {
     };
     sidebar: {
         background: string;
+        backgroundTransparent: string;
     };
     popover: {
         background: string;
@@ -264,8 +265,8 @@ interface MenuProps<T extends string> {
 }
 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>;
+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;
 interface IDialog {
     containsElement: (element: HTMLElement) => boolean;
 }
@@ -282,7 +283,7 @@ interface Props$g {
 declare const Dialog: (props: Props$g & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 declare const FullscreenDialog: (props: Props$g & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-type DividerVariant = 'normal' | 'strong' | 'subtle';
+type DividerVariant = "normal" | "strong" | "subtle";
 interface DividerProps {
     variant?: DividerVariant;
     overflow?: number;
@@ -318,7 +319,7 @@ type SketchPattern = {
 interface Props$f {
     id?: string;
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
-    flex?: CSSProperties['flex'];
+    flex?: CSSProperties["flex"];
 }
 declare const FillInputField: (props: Props$f & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
@@ -481,17 +482,17 @@ interface InputFieldDropdownProps<T extends string> {
     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;
+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;
-    variant?: InputFieldVariant | undefined;
     readOnly?: boolean | undefined;
-    size: InputFieldSize;
-}, never>;
+    $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 InputFieldNumberInputProps = Omit<TextInputProps, "value" | "onChange" | "onKeyDown" | "onSubmit"> & {
     value: number | undefined;
     onNudge?: (value: number) => void;
@@ -691,7 +692,7 @@ type ListViewRootProps = {
     colorScheme?: ListColorScheme;
 };
 declare namespace ListView {
-    const RowTitle: React__default.MemoExoticComponent<styled_components.StyledComponent<"span", styled_components.DefaultTheme, {}, never>>;
+    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;
@@ -700,21 +701,21 @@ declare namespace ListView {
     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 DragIndicator: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+        $relativeDropPosition: RelativeDropPosition;
+        $gap: number;
+        $offsetLeft: number;
+        $colorScheme: ListColorScheme;
+    }>> & string;
     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.StyledComponent<"span", styled_components.DefaultTheme, {
-    type: IToken["type"];
-}, never>;
+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;
@@ -753,9 +754,9 @@ interface LabelRootProps {
     children: ReactNode;
 }
 declare namespace Label {
-    const Label: React__default.MemoExoticComponent<styled_components.StyledComponent<"label", styled_components.DefaultTheme, {
-        selected?: boolean | undefined;
-    }, never>>;
+    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;
 }
 
@@ -792,9 +793,6 @@ declare function Progress({ value, width, height, flex, variant, }: {
 }): 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;
@@ -804,7 +802,7 @@ interface ItemProps {
 interface Props$9 {
     id?: string;
     value?: string;
-    onValueChange?: ComponentProps<typeof StyledRoot>["onValueChange"];
+    onValueChange?: (value: string) => void;
     colorScheme?: RadioGroupColorScheme;
     allowEmpty?: boolean;
     children: ReactNode;
@@ -854,8 +852,8 @@ interface Props$5 {
     inline?: boolean;
 }
 declare namespace Spacer {
-    const Vertical: styled_components.StyledComponent<"span", styled_components.DefaultTheme, Props$5, never>;
-    const Horizontal: styled_components.StyledComponent<"span", styled_components.DefaultTheme, Props$5, never>;
+    const Vertical: (props: Props$5 & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Horizontal: (props: Props$5 & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 }
 
 type BreakpointKey = number | string;
@@ -1047,7 +1045,7 @@ declare namespace TreeView {
         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 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;
     type ClickInfo = ListView.ClickInfo;
@@ -1069,7 +1067,7 @@ declare const DesignSystemConfigurationProvider: (props: {
 declare function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue;
 declare function useDesignSystemTheme(): styled_components.DefaultTheme;
 
-declare const Row$1: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
+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;
@@ -1220,6 +1218,7 @@ declare const colors: {
     };
     sidebar: {
         background: string;
+        backgroundTransparent: string;
     };
     popover: {
         background: string;
@@ -1298,25 +1297,25 @@ interface Props {
 }
 declare const DimensionInput: (props: Props) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-declare const Section: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
-    padding?: CSSProperties["padding"];
-    gap?: CSSProperties["gap"];
-}, never>;
-declare const SectionHeader: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
-declare const Title: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
-    textStyle?: "small" | "heading3" | "heading4" | "heading5" | undefined;
-}, never>;
-declare const Row: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
-    gap?: CSSProperties["gap"];
-}, never>;
-declare const Column: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
-declare const Checkbox: styled_components.StyledComponent<"input", styled_components.DefaultTheme, {}, never>;
-declare const Text: styled_components.StyledComponent<"span", styled_components.DefaultTheme, {}, never>;
+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 VerticalSeparator: () => React__default.JSX.Element;
 declare const HorizontalSeparator: () => React__default.JSX.Element;
-declare const RowLabel: styled_components.StyledComponent<"span", styled_components.DefaultTheme, {
-    textStyle?: "small" | "heading3" | "heading4" | "heading5" | undefined;
-}, never>;
+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;
     children: ReactNode;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 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_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
 import { CSSObject, CSSProperties as CSSProperties$1 } from 'styled-components';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -15,7 +16,6 @@ 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 { RgbaColor } from '@noya-app/noya-colorpicker';
 
 interface Props$h {
@@ -42,13 +42,13 @@ declare function AvatarStack({ size, children, }: {
 
 type ButtonVariant = "normal" | "primary" | "primaryGradient" | "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"];
-    defaultBackground?: string | undefined;
-}, never>;
+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;
 interface ButtonRootProps {
     id?: string;
     className?: string;
@@ -143,6 +143,7 @@ declare const colors$1: {
     };
     sidebar: {
         background: string;
+        backgroundTransparent: string;
     };
     popover: {
         background: string;
@@ -264,8 +265,8 @@ interface MenuProps<T extends string> {
 }
 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>;
+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;
 interface IDialog {
     containsElement: (element: HTMLElement) => boolean;
 }
@@ -282,7 +283,7 @@ interface Props$g {
 declare const Dialog: (props: Props$g & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 declare const FullscreenDialog: (props: Props$g & React__default.RefAttributes<IDialog>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-type DividerVariant = 'normal' | 'strong' | 'subtle';
+type DividerVariant = "normal" | "strong" | "subtle";
 interface DividerProps {
     variant?: DividerVariant;
     overflow?: number;
@@ -318,7 +319,7 @@ type SketchPattern = {
 interface Props$f {
     id?: string;
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
-    flex?: CSSProperties['flex'];
+    flex?: CSSProperties["flex"];
 }
 declare const FillInputField: (props: Props$f & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
@@ -481,17 +482,17 @@ interface InputFieldDropdownProps<T extends string> {
     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;
+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;
-    variant?: InputFieldVariant | undefined;
     readOnly?: boolean | undefined;
-    size: InputFieldSize;
-}, never>;
+    $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 InputFieldNumberInputProps = Omit<TextInputProps, "value" | "onChange" | "onKeyDown" | "onSubmit"> & {
     value: number | undefined;
     onNudge?: (value: number) => void;
@@ -691,7 +692,7 @@ type ListViewRootProps = {
     colorScheme?: ListColorScheme;
 };
 declare namespace ListView {
-    const RowTitle: React__default.MemoExoticComponent<styled_components.StyledComponent<"span", styled_components.DefaultTheme, {}, never>>;
+    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;
@@ -700,21 +701,21 @@ declare namespace ListView {
     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 DragIndicator: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+        $relativeDropPosition: RelativeDropPosition;
+        $gap: number;
+        $offsetLeft: number;
+        $colorScheme: ListColorScheme;
+    }>> & string;
     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.StyledComponent<"span", styled_components.DefaultTheme, {
-    type: IToken["type"];
-}, never>;
+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;
@@ -753,9 +754,9 @@ interface LabelRootProps {
     children: ReactNode;
 }
 declare namespace Label {
-    const Label: React__default.MemoExoticComponent<styled_components.StyledComponent<"label", styled_components.DefaultTheme, {
-        selected?: boolean | undefined;
-    }, never>>;
+    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;
 }
 
@@ -792,9 +793,6 @@ declare function Progress({ value, width, height, flex, variant, }: {
 }): 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;
@@ -804,7 +802,7 @@ interface ItemProps {
 interface Props$9 {
     id?: string;
     value?: string;
-    onValueChange?: ComponentProps<typeof StyledRoot>["onValueChange"];
+    onValueChange?: (value: string) => void;
     colorScheme?: RadioGroupColorScheme;
     allowEmpty?: boolean;
     children: ReactNode;
@@ -854,8 +852,8 @@ interface Props$5 {
     inline?: boolean;
 }
 declare namespace Spacer {
-    const Vertical: styled_components.StyledComponent<"span", styled_components.DefaultTheme, Props$5, never>;
-    const Horizontal: styled_components.StyledComponent<"span", styled_components.DefaultTheme, Props$5, never>;
+    const Vertical: (props: Props$5 & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+    const Horizontal: (props: Props$5 & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 }
 
 type BreakpointKey = number | string;
@@ -1047,7 +1045,7 @@ declare namespace TreeView {
         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 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;
     type ClickInfo = ListView.ClickInfo;
@@ -1069,7 +1067,7 @@ declare const DesignSystemConfigurationProvider: (props: {
 declare function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue;
 declare function useDesignSystemTheme(): styled_components.DefaultTheme;
 
-declare const Row$1: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
+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;
@@ -1220,6 +1218,7 @@ declare const colors: {
     };
     sidebar: {
         background: string;
+        backgroundTransparent: string;
     };
     popover: {
         background: string;
@@ -1298,25 +1297,25 @@ interface Props {
 }
 declare const DimensionInput: (props: Props) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
-declare const Section: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
-    padding?: CSSProperties["padding"];
-    gap?: CSSProperties["gap"];
-}, never>;
-declare const SectionHeader: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
-declare const Title: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
-    textStyle?: "small" | "heading3" | "heading4" | "heading5" | undefined;
-}, never>;
-declare const Row: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
-    gap?: CSSProperties["gap"];
-}, never>;
-declare const Column: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
-declare const Checkbox: styled_components.StyledComponent<"input", styled_components.DefaultTheme, {}, never>;
-declare const Text: styled_components.StyledComponent<"span", styled_components.DefaultTheme, {}, never>;
+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 VerticalSeparator: () => React__default.JSX.Element;
 declare const HorizontalSeparator: () => React__default.JSX.Element;
-declare const RowLabel: styled_components.StyledComponent<"span", styled_components.DefaultTheme, {
-    textStyle?: "small" | "heading3" | "heading4" | "heading5" | undefined;
-}, never>;
+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;
     children: ReactNode;