@prismicio/editor-ui 0.4.48 → 0.4.49-alpha.feat-onboarding-guide.0

package/dist/components/ActionList/ActionList.d.ts

@@ -29,5 +29,5 @@ export interface ActionListItemProps {
      */
     completed?: boolean;
 }
-export declare const ActionListItem: import("react").ForwardRefExoticComponent<ActionListItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ActionListItem: (props: ActionListItemProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export {};

package/dist/components/AnimatedElement/AnimatedElement.d.ts

@@ -24,7 +24,7 @@ export interface AnimatedElementProps {
  * If you only need to animate a single element's entrance (and not exit/swap), you don't need this component:
  * you can just set a CSS animation on the element styles.
  */
-export declare const AnimatedElement: import("react").ForwardRefExoticComponent<AnimatedElementProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AnimatedElement: (props: AnimatedElementProps & import("react").RefAttributes<HTMLDivElement>) => ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 type AnimationDuration = ThemeKeys<"transitionDuration">;
 type OnlyChild = ReactElement | null | undefined | false | 0;
 export {};

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./AnimatedElement").AnimatedElementProps & import("react").RefAttributes<HTMLDivElement>>;
+    component: (props: import("./AnimatedElement").AnimatedElementProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 };
 export default meta;
 export declare const Default: {

package/dist/components/AnimatedList/DragPreview.d.ts

@@ -4,4 +4,4 @@ export interface DragPreviewProps {
     direction: "horizontal" | "vertical";
     children: (key: string) => ReactNode;
 }
-export declare const DragPreview: import("react").ForwardRefExoticComponent<DragPreviewProps & import("react").RefAttributes<DragPreviewRenderer>>;
+export declare const DragPreview: (props: DragPreviewProps & import("react").RefAttributes<DragPreviewRenderer>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/dist/components/Badge/Badge.d.ts

@@ -16,4 +16,4 @@ export interface BadgeProps {
     /** Makes the badge content editable, fires onBlur when the value has changed */
     onEdit?: (newTitle: string) => void | Promise<void>;
 }
-export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Badge: (props: BadgeProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/dist/components/BaseInput/BaseInput.d.ts

@@ -52,5 +52,5 @@ interface PaddingLeftRight {
     right?: ThemeKeys<"space">;
     inline?: never;
 }
-export declare const BaseInput: import("react").ForwardRefExoticComponent<BaseInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const BaseInput: (props: BaseInputProps & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export {};

package/dist/components/Box/Box.d.ts

@@ -80,5 +80,5 @@ type Border = boolean | {
     left?: boolean;
     right?: boolean;
 };
-export declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLElement>>;
+export declare const Box: (props: BoxProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export {};

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./Box").BoxProps & import("react").RefAttributes<HTMLElement>>;
+    component: (props: import("./Box").BoxProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     argTypes: {
         children: {
             control: {

package/dist/components/Button/Button.d.ts

@@ -5,7 +5,7 @@ import { type IconName } from "../Icon";
 export interface ButtonProps {
     children?: ReactNode;
     /** Note that white is only supported for the invisible button */
-    color?: "grey" | "purple" | "dark" | "tomato" | "amber" | "green" | "white" | "indigo";
+    color?: "grey" | "darkGrey" | "purple" | "dark" | "tomato" | "amber" | "green" | "white" | "indigo";
     size?: "small" | "medium" | "large";
     disabled?: boolean;
     loading?: boolean;
@@ -40,5 +40,6 @@ export interface ButtonProps {
     /**  Underlines the text content of the button. Only applies to invisible buttons */
     underline?: boolean;
     hiddenLabel?: string;
+    className?: string;
 }
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Button: (props: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    component: (props: import("./Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     argTypes: {
         onClick: {};
         startIcon: {
@@ -16,7 +16,7 @@ export default meta;
 export declare const Default: {
     render: (args: {
         children?: import("react").ReactNode;
-        color?: "dark" | "white" | "green" | "grey" | "indigo" | "purple" | "tomato" | "amber" | undefined;
+        color?: "dark" | "white" | "green" | "grey" | "indigo" | "purple" | "tomato" | "darkGrey" | "amber" | undefined;
         size?: "small" | "medium" | "large" | undefined;
         disabled?: boolean | undefined;
         loading?: boolean | undefined;
@@ -38,6 +38,7 @@ export declare const Default: {
         hasPadding?: boolean | undefined;
         underline?: boolean | undefined;
         hiddenLabel?: string | undefined;
+        className?: string | undefined;
         ref?: import("react").Ref<HTMLButtonElement> | undefined;
         key?: import("react").Key | null | undefined;
     }) => JSX.Element;

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -8,7 +8,7 @@ export interface ButtonGroupProps {
     density?: "regular" | "compact";
     sx?: SX;
 }
-export declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ButtonGroup: (props: ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 interface ButtonGroupContextValue {
     disabled?: boolean;
     size: "small" | "medium" | "large";

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./ButtonGroup").ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    component: (props: import("./ButtonGroup").ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     argTypes: {
         children: {
             control: {

package/dist/components/Card/Card.d.ts

@@ -10,10 +10,11 @@ export interface CardProps {
     paddingBlock?: 0 | 8 | 12 | 16 | 28;
     paddingInline?: 0 | 16 | 24 | 32;
     padding?: 0 | 16;
-    onSelect?: (event: MouseEvent | KeyboardEvent) => void;
     sx?: SX;
+    onSelect?: (event: MouseEvent | KeyboardEvent) => void;
+    onClose?: () => void;
 }
-export declare function Card(props: CardProps): JSX.Element;
+export declare const Card: (props: CardProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 interface CardHeaderProps {
     children: ReactNode;
     sx?: SX;

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-import { Card } from "./Card";
 declare const meta: {
     title: string;
-    component: typeof Card;
+    component: (props: import("./Card").CardProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     argTypes: {
         children: {
             control: {
@@ -39,8 +38,11 @@ export declare const Default: {
         paddingBlock?: 0 | 8 | 12 | 16 | 28 | undefined;
         paddingInline?: 0 | 16 | 24 | 32 | undefined;
         padding?: 0 | 16 | undefined;
-        onSelect?: ((event: import("react").MouseEvent<Element, MouseEvent> | import("react").KeyboardEvent<Element>) => void) | undefined;
         sx?: import("../../theme").SX | undefined;
+        onSelect?: ((event: import("react").MouseEvent<Element, MouseEvent> | import("react").KeyboardEvent<Element>) => void) | undefined;
+        onClose?: (() => void) | undefined;
+        ref?: import("react").Ref<HTMLDivElement> | undefined;
+        key?: import("react").Key | null | undefined;
     }) => JSX.Element;
     args: {
         color: "grey1";

package/dist/components/Carousel/Carousel.d.ts

@@ -7,7 +7,7 @@ export interface CarouselProps<ITEM> {
     buttonSize?: "small" | "medium";
     renderPrevTooltip?: (trigger: ReactElement) => void;
     renderNextTooltip?: (trigger: ReactElement) => void;
-    onPageChange: (page: number) => void;
+    onPageChange?: (page: number) => void;
     style?: CSSProperties;
 }
 type Direction = "idle" | "prev" | "next";

package/dist/components/ComboBox/ComboBox.d.ts

@@ -6,7 +6,7 @@ export interface ComboBoxProps {
     variant?: Variant;
     sx?: SX;
 }
-export declare const ComboBox: import("react").ForwardRefExoticComponent<ComboBoxProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboBox: (props: ComboBoxProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 interface ComboBoxContentProps {
     children: ReactNode;
     /**
@@ -15,7 +15,7 @@ interface ComboBoxContentProps {
      */
     side?: "top" | "bottom";
 }
-export declare const ComboBoxContent: import("react").ForwardRefExoticComponent<ComboBoxContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboBoxContent: (props: ComboBoxContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 type ComboBoxItemProps = {
     value: string;
     checked?: boolean;
@@ -23,7 +23,7 @@ type ComboBoxItemProps = {
     disabled?: boolean;
     children: ReactNode;
 };
-export declare const ComboBoxItem: import("react").ForwardRefExoticComponent<ComboBoxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboBoxItem: (props: ComboBoxItemProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 interface ComboBoxInputProps {
     value: string;
     onValueChange: (search: string) => void;
@@ -34,7 +34,7 @@ interface ComboBoxInputProps {
      */
     autoFocus?: boolean;
 }
-export declare const ComboBoxInput: import("react").ForwardRefExoticComponent<ComboBoxInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const ComboBoxInput: (props: ComboBoxInputProps & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 interface ComboBoxActionProps {
     children: ReactNode;
 }

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

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./ComboBox").ComboBoxProps & import("react").RefAttributes<HTMLDivElement>>;
+    component: (props: import("./ComboBox").ComboBoxProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     tags: string[];
     argTypes: {
         variant: {

package/dist/components/DatePicker/DatePicker.d.ts

@@ -11,4 +11,4 @@ export interface DatePickerProps {
     /** Fallback text to display if the date picker has no value */
     fallback?: string;
 }
-export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DatePicker: (props: DatePickerProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -3,7 +3,7 @@ import type { StoryObj } from "@storybook/react";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./DatePicker").DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    component: (props: import("./DatePicker").DatePickerProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     argTypes: {
         onSubmit: {
             action: string;

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -74,7 +74,7 @@ interface DropdownMenuItemProps {
     onMouseOverChange?: (isMouseOver: boolean) => void;
     renderTooltip?: (node: ReactNode) => ReactNode;
 }
-export declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuItem: (props: DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 interface DropdownMenuLabelProps {
     children: ReactNode;
 }

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

@@ -7,7 +7,7 @@ export interface FieldProps {
     selected?: boolean;
     onMouseOverChange?: (isMouseOver: boolean) => void;
 }
-export declare const Field: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Field: (props: FieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 interface FieldIconProps {
     name: IconName;
     disabled?: boolean;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./Field").FieldProps & import("react").RefAttributes<HTMLDivElement>>;
+    component: (props: import("./Field").FieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     argTypes: {
         children: {
             control: {

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

@@ -6,7 +6,7 @@ export type FormFieldProps = {
     description?: string;
     sx?: SX;
 };
-export declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const FormField: (props: FormFieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 type LabelProps = {
     label: string;
     id: string;
@@ -19,5 +19,5 @@ export type FormInputFieldProps = {
     size?: "small" | "medium" | "large";
     sx?: SX;
 } & LabelProps;
-export declare const FormInputField: import("react").ForwardRefExoticComponent<FormInputFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const FormInputField: (props: FormInputFieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export {};

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

@@ -13,4 +13,4 @@ export interface FormSearchInputProps extends Pick<FormInputFieldProps, "disable
     endAdornment?: boolean;
     autoFocus?: boolean;
 }
-export declare const FormSearchInput: import("react").ForwardRefExoticComponent<FormSearchInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const FormSearchInput: (props: FormSearchInputProps & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -8,4 +8,4 @@ export interface HairlineButtonProps {
     sx?: SX;
     onClick?: (event: MouseEvent) => void;
 }
-export declare const HairlineButton: import("react").ForwardRefExoticComponent<HairlineButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const HairlineButton: (props: HairlineButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -8,4 +8,4 @@ export interface IconProps {
     size?: "extraSmall" | "small" | "medium" | "large";
     sx?: SX;
 }
-export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Icon: (props: IconProps & import("react").RefAttributes<SVGSVGElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -15,7 +15,8 @@ export interface IconButtonProps {
     size?: "small" | "medium" | "large";
     variant?: "solid" | "ghost";
     disabled?: boolean;
+    className?: string;
 }
-export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-type Color = "grey" | "green" | "amber" | "purple" | "tomato" | "indigo";
+export declare const IconButton: (props: IconButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+type Color = "grey" | "darkGrey" | "green" | "amber" | "purple" | "tomato" | "indigo";
 export {};

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

@@ -1,5 +1,5 @@
 import type { KeyboardEvent, MouseEvent } from "react";
-import { type Status } from "../MediaProgress/MediaProgress";
+import { type ProgressBarProps } from "../ProgressBar";
 interface Tag {
     id: string;
     name: string;
@@ -26,7 +26,7 @@ interface MediaCardProps {
      * The upload status of the media
      * @default idle
      */
-    status?: Status;
+    status?: MediaProgressStatus;
     /**
      * The size of the media in bytes
      */
@@ -55,4 +55,9 @@ interface MediaCardPlaceholderProps {
     kind?: string;
 }
 export declare function MediaCardPlaceholder(props: MediaCardPlaceholderProps): JSX.Element;
+type MediaProgressStatus = "idle" | "uploading" | "success" | "error";
+/**
+ * Matches Media Loading status to ProgressBar props
+ */
+export declare function getProgressPropsFromMediaStatus(status: MediaProgressStatus): ProgressBarProps;
 export {};

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

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

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -1,5 +1,5 @@
 import { type ThemeKeys } from "../../theme";
-interface ProgressBarProps {
+export interface ProgressBarProps {
     /**
      * The current value of the progress.
      */
@@ -46,7 +46,7 @@ interface ProgressBarProps {
      *
      * @defaultValue "normal"
      */
-    height?: "collapsed" | "normal";
+    height?: "collapsed" | "normal" | "large";
     /**
      * Slow transition applies 2s transition-duration - E.g.: uploading use-case.
      *
@@ -55,4 +55,3 @@ interface ProgressBarProps {
     transition?: "slow" | "fast";
 }
 export declare function ProgressBar(props: ProgressBarProps): JSX.Element;
-export {};

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

@@ -56,6 +56,17 @@ declare const meta: {
             };
         };
     };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+        value: number;
+        max?: number | undefined;
+        getValueLabel?: ((value: number, max: number) => string) | undefined;
+        displayLabel?: boolean | undefined;
+        color?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
+        backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
+        labelColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
+        height?: "large" | "normal" | "collapsed" | undefined;
+        transition?: "slow" | "fast" | undefined;
+    }>) => JSX.Element)[];
 };
 export default meta;
 export declare const Default: {
@@ -65,16 +76,20 @@ export declare const Default: {
         displayLabel: true;
         getValueLabel: (value?: number, max?: number) => string;
     };
-    render: (args: {
+};
+export declare const Large: {
+    args: {
+        backgroundColor: "purple5";
+        color: "purple8";
+        displayLabel: false;
+        height: "large";
         value: number;
-        max?: number | undefined;
-        getValueLabel?: ((value: number, max: number) => string) | undefined;
-        displayLabel?: boolean | undefined;
-        color?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
-        backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
-        labelColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato6" | "tomato7" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
-        height?: "normal" | "collapsed" | undefined;
-        transition?: "slow" | "fast" | undefined;
-    }) => JSX.Element;
-    name: string;
+        max: number;
+        getValueLabel: (value?: number, max?: number) => string;
+    };
+    parameters: {
+        controls: {
+            include: never[];
+        };
+    };
 };

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

@@ -1 +1 @@
-export { ProgressBar } from "./ProgressBar";
+export { ProgressBar, type ProgressBarProps } from "./ProgressBar";

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

@@ -17,4 +17,4 @@ export interface ScrollAreaProps {
      */
     threshold?: number;
 }
-export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ScrollArea: (props: ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -17,4 +17,4 @@ export interface SearchInputProps {
      */
     autoFocus?: boolean;
 }
-export declare const SearchInput: import("react").ForwardRefExoticComponent<SearchInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const SearchInput: (props: SearchInputProps & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/dist/components/Separator/Separator.d.ts

@@ -17,4 +17,4 @@ export interface SeparatorProps {
     style?: "solid" | "dashed";
     sx?: SX;
 }
-export declare const Separator: import("react").ForwardRefExoticComponent<SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Separator: (props: SeparatorProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./Separator").SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    component: (props: import("./Separator").SeparatorProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     argTypes: {
         orientation: {
             control: {

package/dist/components/Text/Text.d.ts

@@ -34,7 +34,7 @@ interface NonLinkProps extends BaseTextProps {
     inline?: never;
 }
 export type TextProps = NonLinkProps | LinkProps;
-export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
+export declare const Text: (props: TextProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 type Component = "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "kbd" | "p" | "pre" | "span" | "label" | "a";
 export declare const textVariantMapping: {
     readonly normal: "p";

package/dist/components/TextInput/TextInput.d.ts

@@ -22,4 +22,4 @@ export interface TextInputProps {
     onBlur?: BaseInputProps["onBlur"];
     onPaste?: BaseInputProps["onPaste"];
 }
-export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TextInput: (props: TextInputProps & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/dist/components/Toast/ToastContext.d.ts

@@ -14,9 +14,8 @@ interface ToastConfig {
     icon?: IconName;
 }
 export declare function ToastProvider(props: PropsWithChildren): JSX.Element;
-export declare function useToast(): ToastContext;
-interface ToastContext {
+export declare function useToast(): ToastContextValue;
+interface ToastContextValue {
     showToast: (config: ToastConfig) => void;
 }
-declare const ToastContext: import("react").Context<ToastContext>;
 export {};

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -11,4 +11,4 @@ export interface ToggleButtonProps {
     onPressedChange?: (pressed: boolean) => void;
     hiddenLabel?: string;
 }
-export declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ToggleButton: (props: ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./ToggleButton").ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    component: (props: import("./ToggleButton").ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     argTypes: {
         onPressedChange: {};
         size: {

package/dist/components/Toolbar/Toolbar.d.ts

@@ -14,7 +14,7 @@ interface ToolbarButtonProps {
     endIcon?: IconName;
     onClick?: (event: MouseEvent) => void;
 }
-export declare const ToolbarButton: import("react").ForwardRefExoticComponent<ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ToolbarButton: (props: ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 interface ToolbarButtonGroupProps {
     children?: ReactNode;
     density?: "regular" | "compact";