@prismicio/editor-ui 0.4.17 → 0.4.19

package/dist/components/Field/Field.d.ts

@@ -1,29 +1,28 @@
 import { type PropsWithChildren, type ReactNode } from "react";
 import { type IconName } from "../Icon";
-import * as styles from "./Field.css";
 export interface FieldProps {
     children?: ReactNode;
     footer?: ReactNode;
-    labelPosition?: keyof typeof styles.labelPosition;
-    onMouseOverChange?: (isMouseOver: boolean) => void;
+    labelPosition?: "top" | "side";
     selected?: boolean;
+    onMouseOverChange?: (isMouseOver: boolean) => void;
 }
 export declare const Field: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>>;
 interface FieldIconProps {
     name: IconName;
     disabled?: boolean;
 }
-export declare function FieldIcon({ name, disabled }: FieldIconProps): JSX.Element;
+export declare function FieldIcon(props: FieldIconProps): JSX.Element;
 interface FieldLabelProps {
     children: string;
     htmlFor?: string;
     id?: string;
 }
-export declare function FieldLabel({ children, ...otherProps }: FieldLabelProps): JSX.Element;
+export declare function FieldLabel(props: FieldLabelProps): JSX.Element;
 interface FieldControlProps {
     children?: ReactNode;
     disabled?: boolean;
 }
-export declare function FieldControl({ children, disabled }: FieldControlProps): JSX.Element;
-export declare function FieldFooter({ children }: PropsWithChildren): JSX.Element;
+export declare function FieldControl(props: FieldControlProps): JSX.Element;
+export declare function FieldFooter(props: PropsWithChildren): JSX.Element;
 export {};

package/dist/components/Field/Field.stories.d.ts

@@ -18,7 +18,7 @@ declare const meta: {
 export default meta;
 export declare const Default: {
     args: {
-        children: import("react").FunctionComponentElement<any>;
+        children: JSX.Element;
         labelPosition: "top";
     };
     name: string;

package/dist/components/FileUpload/FileDropZone/FileDropZone.d.ts

@@ -1,7 +1,10 @@
 import { type ReactNode } from "react";
+import { type MediaAssetType } from "../FileUpload.utils";
 export interface FileDropZoneProps {
     onFilesSelected: (files: File[]) => void;
     overlay: ReactNode;
+    overlayVariant?: "default" | "simple";
+    assetType?: MediaAssetType;
     children?: ReactNode;
 }
 export declare function FileDropZone(props: FileDropZoneProps): JSX.Element;

package/dist/components/FileUpload/FileUpload.stories.d.ts

@@ -1,11 +1,11 @@
+import { FileUploadButton } from "../FileUploadButton";
 import { FileDropZone } from "./FileDropZone/FileDropZone";
-import { FileUploadTrigger } from "./FileUploadTrigger/FileUploadTrigger";
 import { UploadProgress } from "./UploadProgress/UploadProgress";
 declare const _default: {
     title: string;
     subcomponents: {
         FileDropZone: typeof FileDropZone;
-        FileUploadTrigger: typeof FileUploadTrigger;
+        FileUploadButton: typeof FileUploadButton;
         UploadProgress: typeof UploadProgress;
     };
 };

package/dist/components/FileUpload/FileUpload.utils.d.ts

@@ -1,5 +1,11 @@
+import type { FileDropItem } from "@react-aria/dnd";
 export declare const validExtensions: {
-    readonly imageNonSpecific: "image/";
+    readonly applicationAll: "application/*";
+    readonly textAll: "text/*";
     readonly imageAll: "image/*";
-    readonly applicationPdf: "application/pdf";
+    readonly videoAll: "video/*";
+    readonly audioAll: "audio/*";
 };
+export type MediaAssetType = "image" | "all";
+export declare function isValidFileExtension(item: FileDropItem, assetType: "image" | "all"): boolean;
+export declare function getNonSpecificExtension(inputString: string): string;

package/dist/components/FileUpload/index.d.ts

@@ -1,3 +1,2 @@
 export { FileDropZone } from "./FileDropZone/FileDropZone";
-export { FileUploadTrigger } from "./FileUploadTrigger/FileUploadTrigger";
 export { UploadProgress } from "./UploadProgress/UploadProgress";

package/dist/components/FileUploadButton/FileUploadButton.d.ts

@@ -0,0 +1,19 @@
+import { type ReactElement } from "react";
+import { type ButtonProps } from "../Button/Button";
+import { type MediaAssetType } from "../FileUpload/FileUpload.utils";
+interface FileUploadButtonProps extends ButtonProps {
+    disabled?: boolean;
+    /**
+     * A callback that is called when the user selects files.
+     * @returns An array of files that were selected by the user.
+     */
+    onFilesSelected: (files: File[]) => void;
+    assetType?: MediaAssetType;
+    /**
+     * A custom element to use as the button for triggering the upload. This is useful if you want to use a
+     * different component than the predefined Button component.
+     */
+    renderButton?: (onClick: ButtonProps["onClick"]) => ReactElement;
+}
+export declare function FileUploadButton(props: FileUploadButtonProps): JSX.Element;
+export {};

package/dist/components/FileUploadButton/index.d.ts

@@ -0,0 +1 @@
+export { FileUploadButton } from "./FileUploadButton";

package/dist/components/Form/Form.d.ts

@@ -1,6 +1,6 @@
 import type { Handler } from "@prismicio/editor-support/Type";
 import type { ReactNode } from "react";
-import type { SX } from "../../theme/new/sx";
+import type { SX } from "../../theme/new";
 export interface FormProps {
     children?: ReactNode;
     sx?: SX;

package/dist/components/Form/FormDateInput.d.ts

@@ -1,5 +1,5 @@
 import { Time } from "@internationalized/date";
-import type { SX } from "../../theme/new/sx";
+import type { SX } from "../../theme/new";
 import type { DateInputProps } from "../DateInput/DateInput";
 export interface FormDateInputProps {
     label: string;
@@ -12,5 +12,6 @@ export interface FormDateInputProps {
     minValue?: "tomorrow";
     sx?: SX;
     onValueChange: (value?: Date) => void;
+    disabled?: boolean;
 }
 export declare function FormDateInput(props: FormDateInputProps): JSX.Element;

package/dist/components/Form/FormField.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { SX } from "../../theme/new/sx";
+import type { SX } from "../../theme/new";
 export type FormFieldProps = {
     children?: ReactNode;
     disabled?: boolean;

package/dist/components/Form/FormInput.d.ts

@@ -1,4 +1,5 @@
-import { type KeyboardEventHandler } from "react";
+import { type ClipboardEventHandler, type KeyboardEventHandler } from "react";
+import type { SX } from "../../theme/new";
 import { type IconName } from "../Icon";
 import * as styles from "./FormInput.css";
 export interface FormInputProps {
@@ -10,7 +11,12 @@ export interface FormInputProps {
     error?: boolean;
     size?: keyof typeof styles.input;
     icon?: IconName;
+    autoComplete?: AutoCompleteValue;
+    sx?: SX;
     onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
     onValueChange?: (value: string) => void;
+    onPaste?: ClipboardEventHandler<HTMLInputElement>;
 }
 export declare function FormInput(props: FormInputProps): JSX.Element;
+type AutoCompleteValue = "username" | "current-password";
+export {};

package/dist/components/Form/FormSearchInput.d.ts

@@ -0,0 +1,11 @@
+import type { SX } from "../../theme/new";
+export interface FormSearchInputProps {
+    label?: string;
+    placeholder?: string;
+    maxLength?: number;
+    isLoading?: boolean;
+    value: string;
+    sx?: SX;
+    onValueChange: (value: string) => void;
+}
+export declare function FormSearchInput(props: FormSearchInputProps): JSX.Element;

package/dist/components/Form/index.d.ts

@@ -1,3 +1,4 @@
 export { Form } from "./Form";
 export { FormDateInput } from "./FormDateInput";
 export { FormInput } from "./FormInput";
+export { FormSearchInput } from "./FormSearchInput";

package/dist/components/Gradient/Gradient.d.ts

@@ -1,4 +1,4 @@
-import type { SX } from "../../theme/new/sx";
+import type { SX } from "../../theme/new";
 export interface GradientProps {
     sx?: SX;
 }

package/dist/components/Group/Group.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode } from "react";
 export interface GroupProps<ITEM> {
+    items: ITEM[];
     title?: string;
     addItemButtonTitle?: string;
-    items: ITEM[];
+    maxItems?: number;
     getItemKey: (item: ITEM) => string;
     children: (item: ITEM, index: number) => ReactNode;
     onAddItem?: () => void;
 }
-export declare function Group<ITEM>({ title, items, getItemKey, addItemButtonTitle, onAddItem, children }: GroupProps<ITEM>): JSX.Element;
+export declare function Group<ITEM>(props: GroupProps<ITEM>): JSX.Element;

package/dist/components/Group/Group.stories.d.ts

@@ -1,10 +1,6 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Group").GroupProps<unknown>>;
-export default _default;
-export declare const Default: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./Group").GroupProps<unknown>>;
-    args: {
-        title: string;
-        addItemButtonTitle: string;
-    };
-    name: string;
-};
+import type { Meta, StoryObj } from "@storybook/react";
+import { Group } from "./Group";
+type Story = StoryObj<typeof meta>;
+declare const meta: Meta<typeof Group>;
+export default meta;
+export declare const Default: Story;

package/dist/components/Group/GroupItem.css.d.ts

@@ -1,5 +1,4 @@
 export declare const root: string;
 export declare const header: string;
 export declare const headerIcon: string;
-export declare const actions: string;
 export declare const content: string;

package/dist/components/HairlineButton/HairlineButton.d.ts

@@ -1,5 +1,5 @@
 import { type MouseEvent } from "react";
-import type { SX } from "../../theme/new/sx";
+import type { SX } from "../../theme/new";
 import { type IconName } from "../Icon";
 export interface HairlineButtonProps {
     icon: IconName;

package/dist/components/HiddenLabel/HiddenLabel.d.ts

@@ -0,0 +1,11 @@
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+/**
+ * A label that is hidden visually but still accessible to screen readers
+ * and automated translation services.
+ *
+ * "aria-label" is not translated by automated translation services and should
+ * be avoided in favor of "HiddenLabel" component.
+ *
+ * @see https://adrianroselli.com/2019/11/aria-label-does-not-translate.html
+ */
+export declare function HiddenLabel(props: VisuallyHidden.VisuallyHiddenProps): JSX.Element;

package/dist/components/HiddenLabel/index.d.ts

@@ -0,0 +1 @@
+export { HiddenLabel } from "./HiddenLabel";

package/dist/components/Icon/Icon.d.ts

@@ -1,10 +1,9 @@
-import { type ThemeColor } from "../../theme/colors";
-import type { SX } from "../../theme/new/sx";
+import { type SX, type ThemeKeys } from "../../theme/new";
 import * as styles from "./Icon.css";
 import type { IconName } from "./iconNames";
 export interface IconProps {
     className?: string;
-    color?: ThemeColor;
+    color?: ThemeKeys<"color">;
     name: IconName;
     size?: keyof typeof styles.size;
     sx?: SX;

package/dist/components/Icon/iconNames.d.ts

@@ -1,2 +1,2 @@
-export declare const iconNames: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "keyboardArrowDown", "keyboardArrowUp", "label", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "notes", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
+export declare const iconNames: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "keyboardArrowDown", "keyboardArrowUp", "label", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "musicNote", "notes", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
 export type IconName = typeof iconNames[number];

package/dist/components/IconButton/IconButton.d.ts

@@ -5,6 +5,7 @@ export interface IconButtonProps {
     color?: keyof typeof styles.color;
     cursor?: keyof typeof styles.cursor;
     hasPadding?: boolean;
+    hiddenLabel?: string;
     icon: IconName | JSX.Element;
     loading?: boolean;
     onClick?: () => void;
@@ -13,5 +14,6 @@ export interface IconButtonProps {
     radius?: keyof typeof styles.radius;
     size?: keyof typeof styles.size;
     variant?: keyof typeof styles.variant;
+    disabled?: boolean;
 }
 export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Image/Image.d.ts

@@ -1,3 +1,4 @@
+import type { SX } from "../../theme/new";
 export interface ImageProps {
     src: string;
     alt?: string;
@@ -7,7 +8,9 @@ export interface ImageProps {
     borderRadius?: 0 | 4;
     boxShadow?: "3";
     animateOnLoad?: boolean;
+    sx?: SX;
     onLoad?: () => void;
+    background?: "transparent";
 }
 export declare function ImageComponent(props: ImageProps): JSX.Element;
 export declare function SuspenseImage(props: ImageProps): JSX.Element;

package/dist/components/InvisibleButton/InvisibleButton.css.d.ts

@@ -10,3 +10,4 @@ export declare const color: {
 export declare const dim: string;
 export declare const hidden: string;
 export declare const progressCircle: string;
+export declare const inline: string;

package/dist/components/InvisibleButton/InvisibleButton.d.ts

@@ -10,5 +10,6 @@ export interface InvisibleButtonProps {
     onClick?: (event: MouseEvent) => void;
     startIcon?: IconName;
     textVariant?: keyof typeof variant;
+    inline?: boolean;
 }
 export declare const InvisibleButton: import("react").ForwardRefExoticComponent<InvisibleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Line/Line.d.ts

@@ -0,0 +1,6 @@
+import type { AriaRole } from "react";
+export interface LineProps {
+    color: "grey" | "green" | "amber" | "purple";
+    role?: AriaRole;
+}
+export declare function Line(props: LineProps): JSX.Element;

package/dist/components/Line/Line.stories.d.ts

@@ -0,0 +1,20 @@
+import { Line } from "./Line";
+declare const meta: {
+    title: string;
+    component: typeof Line;
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+    };
+};
+export default meta;
+export declare const Default: {
+    name: string;
+    args: {
+        color: "green";
+    };
+};

package/dist/components/Line/index.d.ts

@@ -0,0 +1 @@
+export { Line } from "./Line";

package/dist/components/List/UnorderedList.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import type { SX } from "../../theme/new";
+export interface UnorderedListProps {
+    children?: ReactNode;
+    sx?: SX;
+}
+export declare function UnorderedList(props: UnorderedListProps): JSX.Element;
+export interface ListItemProps {
+    children?: ReactNode;
+}
+export declare function ListItem(props: ListItemProps): JSX.Element;

package/dist/components/List/UnorderedList.stories.d.ts

@@ -0,0 +1,23 @@
+import { UnorderedList } from "./UnorderedList";
+declare const meta: {
+    title: string;
+    component: typeof UnorderedList;
+    argTypes: {
+        children: {
+            control: {
+                disable: boolean;
+            };
+        };
+    };
+};
+export default meta;
+export declare const Default: {
+    name: string;
+    render: (args: {
+        children?: import("react").ReactNode;
+        sx?: import("../../theme/new").SX | undefined;
+    }) => JSX.Element;
+    args: {
+        children: JSX.Element;
+    };
+};

package/dist/components/List/index.d.ts

@@ -0,0 +1 @@
+export { ListItem, UnorderedList } from "./UnorderedList";

package/dist/components/Masonry/MasonryFile.d.ts

@@ -1,8 +1,7 @@
-import type { FC } from "react";
-interface MasonryFile {
+interface MasonryFileProps {
     extension: string;
     filename: string;
     onClick?: () => void;
 }
-export declare const MasonryFile: FC<MasonryFile>;
+export declare function MasonryFile(props: MasonryFileProps): JSX.Element;
 export {};

package/dist/components/MediaCard/MediaCard.d.ts

@@ -0,0 +1,35 @@
+import { type Status } from "../MediaProgress/MediaProgress";
+interface MediaCardProps {
+    url: string;
+    filename: string;
+    /**
+     * The file extension of the media
+     * @example "png"
+     */
+    extension: string;
+    width?: number;
+    height?: number;
+    selected?: boolean;
+    /**
+     * The upload status of the media
+     * @default idle
+     */
+    status?: Status;
+    /**
+     * The size of the media in bytes
+     */
+    size?: number;
+    /**
+     * Function called when the card is clicked
+     * @description This only affects the card, not the checkbox
+     */
+    onCardClick?: () => void;
+    /**
+     * Function called when the checkbox is clicked
+     * @description This only affects the checkbox, not the card
+     * @param checked - The new checked state of the checkbox
+     */
+    onCheckedChange?: (checked: boolean) => void;
+}
+export declare function MediaCard(props: MediaCardProps): JSX.Element;
+export {};

package/dist/components/MediaCard/MediaCard.stories.d.ts

@@ -0,0 +1,54 @@
+import { MediaCard } from "./MediaCard";
+declare const meta: {
+    title: string;
+    component: typeof MediaCard;
+    argTypes: {
+        selected: {
+            defaultValue: boolean;
+            control: {
+                type: string;
+            };
+        };
+        status: {
+            defaultValue: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        onCardClick: {
+            handleClick: {
+                action: string;
+            };
+        };
+        onCheckedChange: {
+            handleClick: {
+                action: string;
+            };
+        };
+    };
+};
+export default meta;
+export declare const Default: {
+    args: {
+        filename: string;
+        url: string;
+        extension: string;
+        width: number;
+        height: number;
+        size: number;
+    };
+    name: string;
+    render: (args: {
+        url: string;
+        filename: string;
+        extension: string;
+        width?: number | undefined;
+        height?: number | undefined;
+        selected?: boolean | undefined;
+        status?: import("../MediaProgress/MediaProgress").Status | undefined;
+        size?: number | undefined;
+        onCardClick?: (() => void) | undefined;
+        onCheckedChange?: ((checked: boolean) => void) | undefined;
+    }) => JSX.Element;
+};

package/dist/components/MediaCard/index.d.ts

@@ -0,0 +1 @@
+export { MediaCard } from "./MediaCard";

package/dist/components/MediaProgress/MediaProgress.d.ts

@@ -0,0 +1,6 @@
+export type Status = "idle" | "uploading" | "success" | "error";
+interface MediaProgressProps {
+    status: Status;
+}
+export declare function MediaProgress(props: MediaProgressProps): JSX.Element;
+export {};

package/dist/components/MediaProgress/MediaProgress.stories.d.ts

@@ -0,0 +1,24 @@
+import { MediaProgress } from "./MediaProgress";
+declare const meta: {
+    title: string;
+    component: typeof MediaProgress;
+    argTypes: {
+        status: {
+            defaultValue: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default meta;
+export declare const Default: {
+    args: {
+        status: "idle";
+    };
+    name: string;
+    render: (args: {
+        status: import("./MediaProgress").Status;
+    }) => JSX.Element;
+};

package/dist/components/MediaProgress/index.d.ts

@@ -0,0 +1 @@
+export { MediaProgress } from "./MediaProgress";

package/dist/components/NumberInput/NumberInput.d.ts

@@ -1,4 +1,5 @@
-import type { SX } from "../../theme/new/sx";
+import type { SX } from "../../theme/new";
+import type { BaseInputProps } from "../BaseInput/BaseInput";
 export interface NumberInputProps {
     autoComplete?: string;
     id?: string;
@@ -6,10 +7,11 @@ export interface NumberInputProps {
     min?: number;
     name?: string;
     placeholder?: string;
+    padding: BaseInputProps["padding"];
     readOnly?: boolean;
     value?: number;
-    onValueChange?: (value: number | undefined) => void;
     sx?: SX;
+    onValueChange?: (value: number | undefined) => void;
 }
 export declare function NumberInput(props: NumberInputProps): JSX.Element;
 export declare function isValidDraftValue(value: string): boolean;

package/dist/components/Portal/Portal.d.ts

@@ -0,0 +1,9 @@
+import * as PortalPrimitive from "@radix-ui/react-portal";
+interface PortalProps extends PortalPrimitive.PortalProps {
+}
+/**
+ * Portal component
+ * @description A component that renders its children in a portal. We use this instead of the native React portal component to avoid having to add the portal container to the DOM. This component will automatically add the portal container to the DOM when it is rendered and will keep track of different portals.
+ */
+export declare function Portal(props: PortalProps): JSX.Element;
+export {};

package/dist/components/Portal/index.d.ts

@@ -0,0 +1 @@
+export { Portal } from "./Portal";

package/dist/components/Radio/RadioGroup.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { SX } from "../../theme/new/sx";
+import type { SX } from "../../theme/new";
 export interface RadioGroupProps<VALUE extends string> {
     values: readonly VALUE[];
     selectedValue: VALUE;

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -15,6 +15,6 @@ export interface ScrollAreaProps {
      * The threshold for triggering the onScrollToBottom function.
      * @default 50
      */
-    treshold?: number;
+    threshold?: number;
 }
-export declare function ScrollArea(props: ScrollAreaProps): JSX.Element;
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ScrollArea/ScrollArea.stories.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./ScrollArea").ScrollAreaProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./ScrollArea").ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;
 export declare const Default: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./ScrollArea").ScrollAreaProps>;
+    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./ScrollArea").ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
     args: {
         children: JSX.Element[];
         direction: string;
@@ -9,7 +9,7 @@ export declare const Default: {
     name: string;
 };
 export declare const ScrollAreaWithControls: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./ScrollArea").ScrollAreaProps>;
+    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./ScrollArea").ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
     args: {
         children: JSX.Element[];
         direction: string;

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,8 +1,8 @@
 export interface SearchInputProps {
     value: string;
-    onValueChange: (value: string) => void;
     placeholder?: string;
     maxLength?: number;
     isLoading?: boolean;
+    onValueChange: (value: string) => void;
 }
 export declare function SearchInput(props: SearchInputProps): JSX.Element;