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

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

@@ -1,10 +1,10 @@
 import { type MouseEvent, type PropsWithChildren, type ReactNode } from "react";
 import { type IconName } from "../Icon";
 import { textVariantMapping } from "../Text";
-export type ActionListVariants = "borderless" | "bordered";
+export type ActionListVariant = "borderless" | "bordered" | "compact";
 export interface ActionListProps extends PropsWithChildren {
-    variant?: ActionListVariants;
-    gap?: 0 | 8;
+    variant?: ActionListVariant;
+    gap?: 0 | 4 | 8;
 }
 export declare function ActionList(props: ActionListProps): JSX.Element;
 type Color = "grey" | "tomato";
@@ -30,4 +30,5 @@ export interface ActionListItemProps {
     completed?: boolean;
 }
 export declare const ActionListItem: (props: ActionListItemProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export declare function ActionListLabel(props: PropsWithChildren): JSX.Element;
 export {};

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

@@ -1,19 +1,390 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./ActionList").ActionListProps>;
-export default _default;
+import type { Meta } from "@storybook/react";
+import type { PropsWithChildren } from "react";
+import type { SeparatorProps } from "../Separator/Separator";
+import { ActionList, type ActionListItemProps, type ActionListProps } from "./ActionList";
+declare const meta: Meta<typeof ActionList>;
+export default meta;
 export declare const Default: {
     args: {
-        children: JSX.Element;
+        variant: "bordered";
+        gap: 8;
+        items: ({
+            startIcon: "add";
+            description: string;
+            children: string;
+            endIcon?: undefined;
+            endAdornment?: undefined;
+            color?: undefined;
+            disabled?: undefined;
+            selected?: undefined;
+        } | {
+            startIcon: "add";
+            endIcon: "folder";
+            description: string;
+            children: string;
+            endAdornment?: undefined;
+            color?: undefined;
+            disabled?: undefined;
+            selected?: undefined;
+        } | {
+            startIcon: "add";
+            description: string;
+            endAdornment: JSX.Element;
+            children: string;
+            endIcon?: undefined;
+            color?: undefined;
+            disabled?: undefined;
+            selected?: undefined;
+        } | {
+            color: "tomato";
+            startIcon: "add";
+            endIcon: "folder";
+            description: string;
+            endAdornment: JSX.Element;
+            children: string;
+            disabled?: undefined;
+            selected?: undefined;
+        } | {
+            disabled: true;
+            startIcon: "add";
+            description: string;
+            children: string;
+            endIcon?: undefined;
+            endAdornment?: undefined;
+            color?: undefined;
+            selected?: undefined;
+        } | {
+            color: "tomato";
+            disabled: true;
+            startIcon: "add";
+            description: string;
+            children: string;
+            endIcon?: undefined;
+            endAdornment?: undefined;
+            selected?: undefined;
+        } | {
+            startIcon: "add";
+            description: string;
+            children: string;
+            selected: true;
+            disabled: true;
+            endIcon?: undefined;
+            endAdornment?: undefined;
+            color?: undefined;
+        } | {
+            startIcon: "add";
+            description: string;
+            children: string;
+            selected: true;
+            endIcon?: undefined;
+            endAdornment?: undefined;
+            color?: undefined;
+            disabled?: undefined;
+        })[];
     };
+    decorators?: import("@storybook/types").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R, {
+        variant?: import("./ActionList").ActionListVariant | undefined;
+        gap?: 0 | 4 | 8 | undefined;
+        children?: import("react").ReactNode;
+        items: ActionListItemProps[];
+    }>[] | undefined;
+    parameters?: import("@storybook/types").Parameters | undefined;
+    argTypes?: Partial<import("@storybook/types").ArgTypes<ActionListProps & {
+        items: ActionListItemProps[];
+    }>> | undefined;
+    loaders?: import("@storybook/types").LoaderFunction<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ActionListItemProps[];
+    }>[] | undefined;
+    render?: import("@storybook/types").ArgsStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ActionListItemProps[];
+    }> | undefined;
+    name?: string | undefined;
+    storyName?: string | undefined;
+    play?: import("@storybook/types").PlayFunction<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ActionListItemProps[];
+    }> | undefined;
+    tags?: string[] | undefined;
+    story?: Omit<import("@storybook/types").StoryAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ActionListItemProps[];
+    }, Partial<ActionListProps & {
+        items: ActionListItemProps[];
+    }>>, "story"> | undefined;
 };
 export declare const WithProgress: {
+    name: string;
     args: {
-        children: JSX.Element;
+        variant: "bordered";
+        gap: 8;
+        items: ({
+            completed: true;
+            description: string;
+            endAdornment: JSX.Element;
+            children: string;
+        } | {
+            completed: false;
+            description: string;
+            endAdornment: JSX.Element;
+            children: string;
+        })[];
     };
-    name: string;
+    decorators?: import("@storybook/types").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R, {
+        variant?: import("./ActionList").ActionListVariant | undefined;
+        gap?: 0 | 4 | 8 | undefined;
+        children?: import("react").ReactNode;
+        items: ActionListItemProps[];
+    }>[] | undefined;
+    parameters?: import("@storybook/types").Parameters | undefined;
+    argTypes?: Partial<import("@storybook/types").ArgTypes<ActionListProps & {
+        items: ActionListItemProps[];
+    }>> | undefined;
+    loaders?: import("@storybook/types").LoaderFunction<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ActionListItemProps[];
+    }>[] | undefined;
+    render?: import("@storybook/types").ArgsStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ActionListItemProps[];
+    }> | undefined;
+    storyName?: string | undefined;
+    play?: import("@storybook/types").PlayFunction<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ActionListItemProps[];
+    }> | undefined;
+    tags?: string[] | undefined;
+    story?: Omit<import("@storybook/types").StoryAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ActionListItemProps[];
+    }, Partial<ActionListProps & {
+        items: ActionListItemProps[];
+    }>>, "story"> | undefined;
 };
 export declare const WithReadonlyProgress: {
     args: {
-        children: JSX.Element;
+        variant: "bordered";
+        gap: 8;
+        items: ({
+            completed: true;
+            description: string;
+            readOnly: true;
+            children: string;
+        } | {
+            completed: false;
+            description: string;
+            readOnly: true;
+            children: string;
+        })[];
     };
     name: string;
+    decorators?: import("@storybook/types").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R, {
+        variant?: import("./ActionList").ActionListVariant | undefined;
+        gap?: 0 | 4 | 8 | undefined;
+        children?: import("react").ReactNode;
+        items: ActionListItemProps[];
+    }>[] | undefined;
+    parameters?: import("@storybook/types").Parameters | undefined;
+    argTypes?: Partial<import("@storybook/types").ArgTypes<ActionListProps & {
+        items: ActionListItemProps[];
+    }>> | undefined;
+    loaders?: import("@storybook/types").LoaderFunction<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ActionListItemProps[];
+    }>[] | undefined;
+    render?: import("@storybook/types").ArgsStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ActionListItemProps[];
+    }> | undefined;
+    storyName?: string | undefined;
+    play?: import("@storybook/types").PlayFunction<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ActionListItemProps[];
+    }> | undefined;
+    tags?: string[] | undefined;
+    story?: Omit<import("@storybook/types").StoryAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ActionListItemProps[];
+    }, Partial<ActionListProps & {
+        items: ActionListItemProps[];
+    }>>, "story"> | undefined;
+};
+export declare const NavigationMenu: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    args: {
+        gap: 4;
+        variant: "compact";
+        items: ({
+            component: "ActionListLabel";
+            children: string;
+            backgroundColor?: undefined;
+            startIcon?: undefined;
+            style?: undefined;
+            sx?: undefined;
+            selected?: undefined;
+            renderEndIcon?: undefined;
+        } | {
+            component: "ActionListItem";
+            backgroundColor: "transparent";
+            startIcon: "prismic";
+            children: string;
+            style?: undefined;
+            sx?: undefined;
+            selected?: undefined;
+            renderEndIcon?: undefined;
+        } | {
+            component: "ActionListItem";
+            backgroundColor: "transparent";
+            startIcon: "checkBox";
+            children: string;
+            style?: undefined;
+            sx?: undefined;
+            selected?: undefined;
+            renderEndIcon?: undefined;
+        } | {
+            component: "ActionListItem";
+            backgroundColor: "transparent";
+            startIcon: "colorLens";
+            children: string;
+            style?: undefined;
+            sx?: undefined;
+            selected?: undefined;
+            renderEndIcon?: undefined;
+        } | {
+            component: "ActionListItem";
+            backgroundColor: "transparent";
+            startIcon: "search";
+            children: string;
+            style?: undefined;
+            sx?: undefined;
+            selected?: undefined;
+            renderEndIcon?: undefined;
+        } | {
+            component: "ActionListItem";
+            backgroundColor: "transparent";
+            startIcon: "language";
+            children: string;
+            style?: undefined;
+            sx?: undefined;
+            selected?: undefined;
+            renderEndIcon?: undefined;
+        } | {
+            component: "Separator";
+            style: "dashed";
+            sx: {
+                marginBlock: 20;
+            };
+            children?: undefined;
+            backgroundColor?: undefined;
+            startIcon?: undefined;
+            selected?: undefined;
+            renderEndIcon?: undefined;
+        } | {
+            component: "ActionListItem";
+            backgroundColor: "transparent";
+            startIcon: "database";
+            children: string;
+            style?: undefined;
+            sx?: undefined;
+            selected?: undefined;
+            renderEndIcon?: undefined;
+        } | {
+            component: "ActionListItem";
+            backgroundColor: "transparent";
+            startIcon: "folder";
+            children: string;
+            style?: undefined;
+            sx?: undefined;
+            selected?: undefined;
+            renderEndIcon?: undefined;
+        } | {
+            component: "ActionListItem";
+            backgroundColor: "transparent";
+            startIcon: "checkBox";
+            children: string;
+            selected: true;
+            style?: undefined;
+            sx?: undefined;
+            renderEndIcon?: undefined;
+        } | {
+            component: "ActionListItem";
+            backgroundColor: "transparent";
+            startIcon: "multipleStop";
+            children: string;
+            style?: undefined;
+            sx?: undefined;
+            selected?: undefined;
+            renderEndIcon?: undefined;
+        } | {
+            component: "ActionListItem";
+            backgroundColor: "transparent";
+            startIcon: "colorLens";
+            children: string;
+            renderEndIcon: () => JSX.Element;
+            style?: undefined;
+            sx?: undefined;
+            selected?: undefined;
+        })[];
+    };
+    decorators?: import("@storybook/types").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R, {
+        variant?: import("./ActionList").ActionListVariant | undefined;
+        gap?: 0 | 4 | 8 | undefined;
+        children?: import("react").ReactNode;
+        items: ((ActionListItemProps & {
+            component: "ActionListItem";
+        }) | (PropsWithChildren & {
+            component: "ActionListLabel";
+        }) | (SeparatorProps & {
+            component: "Separator";
+        }))[];
+    }>[] | undefined;
+    argTypes?: Partial<import("@storybook/types").ArgTypes<ActionListProps & {
+        items: ((ActionListItemProps & {
+            component: "ActionListItem";
+        }) | (PropsWithChildren & {
+            component: "ActionListLabel";
+        }) | (SeparatorProps & {
+            component: "Separator";
+        }))[];
+    }>> | undefined;
+    loaders?: import("@storybook/types").LoaderFunction<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ((ActionListItemProps & {
+            component: "ActionListItem";
+        }) | (PropsWithChildren & {
+            component: "ActionListLabel";
+        }) | (SeparatorProps & {
+            component: "Separator";
+        }))[];
+    }>[] | undefined;
+    render?: import("@storybook/types").ArgsStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ((ActionListItemProps & {
+            component: "ActionListItem";
+        }) | (PropsWithChildren & {
+            component: "ActionListLabel";
+        }) | (SeparatorProps & {
+            component: "Separator";
+        }))[];
+    }> | undefined;
+    name?: string | undefined;
+    storyName?: string | undefined;
+    play?: import("@storybook/types").PlayFunction<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ((ActionListItemProps & {
+            component: "ActionListItem";
+        }) | (PropsWithChildren & {
+            component: "ActionListLabel";
+        }) | (SeparatorProps & {
+            component: "Separator";
+        }))[];
+    }> | undefined;
+    tags?: string[] | undefined;
+    story?: Omit<import("@storybook/types").StoryAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
+        items: ((ActionListItemProps & {
+            component: "ActionListItem";
+        }) | (PropsWithChildren & {
+            component: "ActionListLabel";
+        }) | (SeparatorProps & {
+            component: "Separator";
+        }))[];
+    }, Partial<ActionListProps & {
+        items: ((ActionListItemProps & {
+            component: "ActionListItem";
+        }) | (PropsWithChildren & {
+            component: "ActionListLabel";
+        }) | (SeparatorProps & {
+            component: "Separator";
+        }))[];
+    }>>, "story"> | undefined;
 };

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

@@ -1 +1 @@
-export { ActionList, ActionListItem } from "./ActionList";
+export { ActionList, ActionListItem, ActionListLabel } from "./ActionList";

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

@@ -7,7 +7,7 @@ declare const meta: {
     argTypes: {
         icon: {
             control: string;
-            options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "attachFile", "autoFixHigh", "biToggle", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "contentPaste", "createNewFolder", "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", "invite", "javascript", "json", "keyboardArrowDown", "keyboardArrowUp", "label", "language", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notStarted", "notes", "openInFull", "openInNew", "outbound", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "sentimentSatisfied", "settings", "settingsEthernet", "smartDisplay", "svelte", "tabletMac", "tag", "terminal", "textFields", "title", "toggleOff", "translate", "typescript", "unfoldMore", "unsplash", "upload", "videocam", "viewDay", "visibility", "vue", "zoomOutMap"];
+            options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "attachFile", "autoFixHigh", "biToggle", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "contentPaste", "createNewFolder", "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", "invite", "javascript", "json", "keyboardArrowDown", "keyboardArrowUp", "label", "language", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notStarted", "notes", "openInFull", "openInNew", "outbound", "people", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "sentimentSatisfied", "settings", "settingsEthernet", "smartDisplay", "svelte", "tabletMac", "tag", "terminal", "textFields", "title", "toggleOff", "translate", "typescript", "unfoldMore", "unsplash", "upload", "videocam", "viewDay", "visibility", "vue", "zoomOutMap"];
         };
         color: {
             control: string;

package/dist/components/Avatar/Avatar.d.ts

@@ -1,8 +1,8 @@
 export interface AvatarProps {
     imageUrl?: string;
-    firstName: string;
-    lastName: string;
+    firstName?: string;
+    lastName?: string;
     hasBorder?: boolean;
-    size?: 24 | 32;
+    size?: 16 | 24 | 32;
 }
 export declare function Avatar(props: AvatarProps): JSX.Element;

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

@@ -5,6 +5,8 @@ export declare const Default: {
         firstName: string;
         lastName: string;
         imageUrl: string;
+        hasBorder: boolean;
+        size: number;
     };
     name: string;
 };

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

@@ -20,11 +20,18 @@ export type BoxProps = {
     animation?: Animation;
     transition?: Transition;
     padding?: Padding;
+    /**
+     * @deprecated Use or add a more specific component
+     */
     border?: Border;
+    /**
+     * @deprecated Use or add a more specific component
+     */
     borderRadius?: BorderRadius;
+    /**
+     * @deprecated Use or add a more specific component
+     */
     borderStyle?: ThemeKeys<"borderStyle">;
-    borderColor?: ThemeKeys<"color">;
-    boxShadow?: ThemeKeys<"boxShadow">;
     backgroundColor?: ThemeKeys<"color">;
     opacity?: ThemeKeys<"opacity">;
     visibility?: "hidden" | "visible";

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

@@ -59,9 +59,7 @@ export declare const Default: {
             bottomRight?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
         }) | undefined;
         borderStyle?: "none" | "dashed" | "solid" | undefined;
-        borderColor?: "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;
-        boxShadow?: "1" | "2" | "4" | "none" | "3" | "-1" | "purpleFocus" | "ghostFocus" | "greenFocus" | "amberFocus" | "tomatoFocus" | "indigoFocus" | "gradient" | "greyFocus" | "cropper" | 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;
+        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" | "tomato5" | "tomato6" | "tomato7" | "tomato8" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
         opacity?: 0 | 1 | 0.1 | 0.3 | 0.4 | 0.5 | 0.6 | 0.8 | 0.9 | undefined;
         visibility?: "hidden" | "visible" | undefined;
         overflowY?: "auto" | "hidden" | undefined;
@@ -125,9 +123,7 @@ export declare const Default: {
             bottomRight?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
         }) | undefined;
         borderStyle?: "none" | "dashed" | "solid" | undefined;
-        borderColor?: "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;
-        boxShadow?: "1" | "2" | "4" | "none" | "3" | "-1" | "purpleFocus" | "ghostFocus" | "greenFocus" | "amberFocus" | "tomatoFocus" | "indigoFocus" | "gradient" | "greyFocus" | "cropper" | 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;
+        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" | "tomato5" | "tomato6" | "tomato7" | "tomato8" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | undefined;
         opacity?: 0 | 1 | 0.1 | 0.3 | 0.4 | 0.5 | 0.6 | 0.8 | 0.9 | undefined;
         visibility?: "hidden" | "visible" | undefined;
         overflowY?: "auto" | "hidden" | undefined;
@@ -139,7 +135,7 @@ export declare const Default: {
         alignItems?: "center" | "flex-start" | undefined;
         justifyContent?: "center" | "end" | "space-between" | undefined;
         display?: "flex" | "inline-flex" | undefined;
-        flexDirection?: "column" | "row" | undefined;
+        flexDirection?: "row" | "column" | undefined;
         gridTemplateColumns?: undefined;
         gridTemplateRows?: undefined;
         ref?: import("react").Ref<HTMLElement> | undefined;

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

@@ -4,6 +4,12 @@ import type { SX } from "../../theme";
 import { type IconName } from "../Icon";
 export interface ButtonProps {
     children?: ReactNode;
+    /**
+     * If true, children must be a valid ReactElement and it will be used as the
+     * top level component instead of <button>.
+     * Note that said component must be implemented with forwardRef() and spread/provide all its props to its first child VNode.
+     */
+    asChild?: boolean;
     /** Note that white is only supported for the invisible button */
     color?: "grey" | "darkGrey" | "purple" | "dark" | "tomato" | "amber" | "green" | "white" | "indigo";
     size?: "small" | "medium" | "large";
@@ -22,17 +28,13 @@ export interface ButtonProps {
      * Buttons have a bold text by default. You can override this by passing "normal".
      */
     textWeight?: "normal" | "bold";
+    radius?: "normal" | "full";
     sx?: SX;
     startIcon?: IconName;
     endIcon?: IconName;
     renderStartIcon?: (icon: ReactNode) => ReactNode;
     renderEndIcon?: (icon: ReactNode) => ReactNode;
     hotkeys?: Keys;
-    onClick?: (event: MouseEvent | KeyboardEvent) => void;
-    onMouseEnter?: (event: MouseEvent) => void;
-    onMouseLeave?: (event: MouseEvent) => void;
-    onMouseDown?: (event: MouseEvent) => void;
-    onMouseUp?: (event: MouseEvent) => void;
     /** Invisible variant in the design system. Used for icon buttons with no background */
     invisible?: boolean;
     /** Removes padding around the icon. Will only apply to icon only buttons. */
@@ -40,6 +42,15 @@ export interface ButtonProps {
     /**  Underlines the text content of the button. Only applies to invisible buttons */
     underline?: boolean;
     hiddenLabel?: string;
-    className?: string;
+    onClick?: (event: MouseEvent | KeyboardEvent) => void;
+    onMouseDown?: (event: MouseEvent) => void;
+    onMouseUp?: (event: MouseEvent) => void;
 }
 export declare const Button: (props: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+interface ButtonChildrenProps {
+    children: ReactNode;
+    buttonChildren?: ReactNode;
+    asChild: boolean;
+}
+export declare const ButtonChildren: (props: ButtonChildrenProps & import("react").RefAttributes<Element>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export {};