@prismicio/editor-ui 0.4.25 → 0.4.26

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

@@ -1,13 +1,28 @@
 import type { ReactNode } from "react";
 import { type IconName } from "../Icon";
-type Colors = "error" | "default";
-type Props = {
+import type { IconButtonProps } from "../IconButton/IconButton";
+type Colors = "error" | "info" | "default";
+export type AlertProps = {
+    icon?: IconName;
     title: string;
+    /**
+     * Indicates if the title is in a loading state. When true, an animated ellipsis is displayed next to the title.
+     */
+    titleLoading?: boolean;
     subtitle?: ReactNode;
-    onClose?: () => void;
+    rightButton?: RightButton;
     color?: Colors;
     footerButtons?: FooterButtons;
+    noShadow?: boolean;
 };
+type RightButton = {
+    onClick: () => void;
+} & ({
+    type: "close";
+} | {
+    type: "text";
+    title: string;
+});
 export interface FooterButtons {
     /** Dismiss button in the footer, displayed first */
     dismiss?: {
@@ -22,5 +37,9 @@ export interface FooterButtons {
         icon?: IconName;
     };
 }
-export declare function Alert(props: Props): JSX.Element;
+export declare function Alert(props: AlertProps): JSX.Element;
+type RightButtonProps = RightButton & {
+    color: IconButtonProps["color"];
+};
+declare function RightButton(props: RightButtonProps): JSX.Element;
 export {};

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

@@ -1,23 +1,28 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
+import type { StoryObj } from "@storybook/react";
+import { Alert } from "./Alert";
+declare const meta: {
     title: string;
-    subtitle?: import("react").ReactNode;
-    onClose?: (() => void) | undefined;
-    color?: ("default" | "error") | undefined;
-    footerButtons?: import("./Alert").FooterButtons | undefined;
-}>;
-export default _default;
-export declare const Default: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
-        title: string;
-        subtitle?: import("react").ReactNode;
-        onClose?: (() => void) | undefined;
-        color?: ("default" | "error") | undefined;
-        footerButtons?: import("./Alert").FooterButtons | undefined;
-    }>;
-    args: {
-        title: string;
-        subtitle: string;
-        onClose: () => void;
+    component: typeof Alert;
+    tags: string[];
+    argTypes: {
+        icon: {
+            control: string;
+            options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "biToggle", "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", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notes", "openInFull", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "upload", "viewDay", "visibility", "zoomOutMap"];
+        };
+        color: {
+            control: string;
+            options: string[];
+        };
+        titleLoading: {
+            control: string;
+        };
+        noShadow: {
+            control: string;
+        };
     };
-    name: string;
 };
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Dismissable: Story;
+export declare const Loading: Story;

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

@@ -1,6 +1,5 @@
 import { type ReactElement } from "react";
-import type { SX } from "../../theme/new";
-import { type Sprinkles } from "../../theme/sprinkles.css";
+import { type SX, type ThemeKeys } from "../../theme/new";
 export interface AnimatedElementProps {
     children: OnlyChild;
     animation?: {
@@ -9,8 +8,8 @@ export interface AnimatedElementProps {
         name: "slide";
         offset?: number;
     };
-    enterDuration?: Sprinkles["animationDuration"];
-    exitDuration?: Sprinkles["animationDuration"];
+    enterDuration?: AnimationDuration;
+    exitDuration?: AnimationDuration;
     sx?: SX;
 }
 /**
@@ -23,5 +22,6 @@ export interface AnimatedElementProps {
  * you can just set a CSS animation on the element styles.
  */
 export declare function AnimatedElement(props: AnimatedElementProps): JSX.Element;
+type AnimationDuration = ThemeKeys<"transitionDuration">;
 type OnlyChild = ReactElement | null | undefined | false | 0;
 export {};

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AnimatedElement } from "./AnimatedElement";
 declare const meta: {
     title: string;
@@ -5,7 +6,7 @@ declare const meta: {
 };
 export default meta;
 export declare const Default: {
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+    render: (args: {
         children: false | 0 | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null | undefined;
         animation?: {
             name: "fade";
@@ -16,18 +17,7 @@ export declare const Default: {
         enterDuration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
         exitDuration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
         sx?: import("../../theme/new").SX | undefined;
-    }>, context: import("@storybook/types").StoryContext<import("@storybook/react/dist/types-0a347bb9").R, {
-        children: false | 0 | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null | undefined;
-        animation?: {
-            name: "fade";
-        } | {
-            name: "slide";
-            offset?: number | undefined;
-        } | undefined;
-        enterDuration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
-        exitDuration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
-        sx?: import("../../theme/new").SX | undefined;
-    }>) => JSX.Element)[];
+    }) => JSX.Element;
     args: {
         children: null;
         enterDuration: 300;

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

@@ -1,19 +1,16 @@
 import { type ReactNode } from "react";
-import { type Sprinkles } from "../../theme/sprinkles.css";
-import type { tokens } from "../../theme/vars.css";
+import { type ThemeKeys } from "../../theme/new";
 import { type RenderDragPreview, type RenderDropIndicator } from "./dnd";
 import { type State } from "./layout";
 export interface AnimatedListProps<ITEM> {
     ariaLabel: string;
-    gap?: keyof typeof tokens.space;
+    gap?: Gap;
     direction?: "horizontal" | "vertical";
     items: ITEM[];
     getItemKey: (item: ITEM) => string;
+    /** A pure function used to render each item. */
     children: ChildrenFunction<ITEM>;
-    animationDuration?: Sprinkles["animationDuration"];
-    renderDragPreview?: RenderDragPreview;
-    renderDropIndicator?: RenderDropIndicator;
-    onReorder?: (items: ITEM[]) => void;
+    animationDuration?: AnimationDuration;
     stacked?: {
         /** Offset between stacked items */
         offset: number;
@@ -22,7 +19,15 @@ export interface AnimatedListProps<ITEM> {
         /** Maximum number of items to stack, others will be hidden */
         maxDepth: number;
     };
+    renderDragPreview?: RenderDragPreview;
+    renderDropIndicator?: RenderDropIndicator;
+    /**
+     * When provided, enables drag & drop.
+     */
+    onReorder?: (items: ITEM[]) => void;
 }
 export declare function AnimatedList<ITEM>(props: AnimatedListProps<ITEM>): JSX.Element;
+type Gap = ThemeKeys<"space">;
+type AnimationDuration = ThemeKeys<"transitionDuration">;
 type ChildrenFunction<ITEM> = (item: ITEM, index: number, state: State<ITEM>["state"]) => ReactNode;
 export {};

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

@@ -1,13 +1,44 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./AnimatedList").AnimatedListProps<unknown>>;
-export default _default;
+/// <reference types="react" />
+import { AnimatedList } from "./AnimatedList";
+declare const meta: {
+    title: string;
+    component: typeof AnimatedList;
+};
+export default meta;
 export declare const Default: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./AnimatedList").AnimatedListProps<unknown>>;
+    render: (args: {
+        ariaLabel: string;
+        gap?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        direction?: "horizontal" | "vertical" | undefined;
+        items: unknown[];
+        getItemKey: (item: unknown) => string;
+        children: (item: unknown, index: number, state: "hidden" | "entering" | "present" | "exiting") => import("react").ReactNode;
+        animationDuration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
+        stacked?: {
+            offset: number;
+            scaleFactor: number;
+            maxDepth: number;
+        } | undefined;
+        renderDragPreview?: import("./dnd").RenderDragPreview | undefined;
+        renderDropIndicator?: import("./dnd").RenderDropIndicator | undefined;
+        onReorder?: ((items: unknown[]) => void) | undefined;
+    }) => JSX.Element;
     argTypes: {
         children: {
             control: {
                 disable: boolean;
             };
         };
+        items: {
+            control: {
+                disable: boolean;
+            };
+        };
+        ariaLabel: {
+            control: {
+                disable: boolean;
+            };
+        };
         gap: {
             control: {
                 type: string;
@@ -28,8 +59,13 @@ export declare const Default: {
         };
     };
     args: {
-        gap: number;
-        direction: string;
+        gap: 8;
+        direction: "vertical";
+        animationDuration: 300;
+        ariaLabel: string;
+        items: never[];
+        getItemKey: () => string;
+        children: () => null;
     };
     name: string;
 };

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

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

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

@@ -1,15 +1,19 @@
-import { type ReactNode } from "react";
+import { type MouseEvent, type ReactNode } from "react";
+import type { SX } from "../../theme/new";
 import { type IconName } from "../Icon";
 export interface BadgeProps {
     title: ReactNode;
     color?: "grey" | "green" | "amber" | "purple" | "tomato";
     size?: "large" | "medium";
     maxWidth?: 150 | 250;
-    onClose?: () => void;
     icon?: IconName;
-    onClick?: () => void;
     selected?: boolean;
+    sx?: SX;
+    onClick?: (event?: MouseEvent<HTMLDivElement>) => void;
+    onClose?: () => void;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
+    /** Makes the badge content editable, fires onBlur when the value has changed */
+    onEdit?: (newTitle: string) => void;
 }
 export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Badge").BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;
 export declare const Default: {

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

@@ -1,4 +1,4 @@
-import { type ClipboardEventHandler, type KeyboardEvent, type ReactNode } from "react";
+import { type AriaRole, type ClipboardEventHandler, type FocusEvent, type KeyboardEvent, type ReactNode } from "react";
 import type { SX, ThemeKeys } from "../../theme/new";
 /**
  * Flexible base Input, provided with no height or block padding.
@@ -11,6 +11,9 @@ export interface BaseInputProps {
     placeholder?: string;
     readOnly?: boolean;
     startAdornment?: ReactNode;
+    prefix?: ReactNode;
+    prefixTooltip?: string;
+    suffix?: ReactNode;
     endAdornment?: ReactNode;
     padding?: Padding;
     value: string;
@@ -18,23 +21,35 @@ export interface BaseInputProps {
     cursor?: "text" | "pointer";
     maxLength?: number;
     disabled?: boolean;
-    type?: "text" | "email" | "password";
+    type?: "text" | "email" | "password" | "number";
     sx?: SX;
-    onFocus?: () => void;
-    onBlur?: () => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement, Element>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement, Element>) => void;
     onValueChange?: (value: string) => void;
     onKeyDown?: (event: KeyboardEvent) => void;
     onPaste?: ClipboardEventHandler<HTMLInputElement>;
+    role?: AriaRole;
+    /**
+     * AutoFocus can cause assesibilty issues when used, especially in forms.
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_concerns
+     */
+    autoFocus?: boolean;
 }
 interface Padding {
-    input?: {
-        inline?: ThemeKeys<"space">;
-        inlineStart?: ThemeKeys<"space">;
-        inlineEnd?: ThemeKeys<"space">;
-    };
+    input?: PaddingInline | PaddingLeftRight;
     adornment?: {
         inline: ThemeKeys<"space">;
     };
 }
+interface PaddingInline {
+    inline: ThemeKeys<"space">;
+    left?: never;
+    right?: never;
+}
+interface PaddingLeftRight {
+    left?: ThemeKeys<"space">;
+    right?: ThemeKeys<"space">;
+    inline?: never;
+}
 export declare const BaseInput: import("react").ForwardRefExoticComponent<BaseInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./BaseInput").BaseInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default _default;
 export declare const Default: {

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

@@ -1,8 +1,7 @@
 import { type CSSProperties, type ReactNode } from "react";
-import { type ThemeColor } from "../../theme/colors";
-import { type Sprinkles } from "../../theme/sprinkles.css";
+import { type ThemeKeys } from "../../theme/new";
 export type BoxProps = {
-    as?: "div" | "nav" | "ul" | "ol" | "article" | "header" | "form";
+    as?: "div" | "nav" | "ul" | "ol" | "article" | "header" | "form" | "span";
     children?: ReactNode;
     position?: "absolute" | "relative" | "sticky" | "fixed";
     top?: number | string;
@@ -15,29 +14,30 @@ export type BoxProps = {
     height?: number | string;
     minHeight?: number | string;
     maxHeight?: number | string;
-    flexGrow?: Sprinkles["flexGrow"];
-    flexShrink?: Sprinkles["flexShrink"];
-    flexWrap?: Sprinkles["flexWrap"];
+    flexGrow?: 1;
+    flexShrink?: 0;
+    flexWrap?: "wrap";
     animation?: Animation;
     transition?: Transition;
     padding?: Padding;
     border?: Border;
     borderRadius?: BorderRadius;
-    borderStyle?: Sprinkles["borderStyle"];
-    boxShadow?: Sprinkles["boxShadow"];
-    backgroundColor?: ThemeColor;
-    opacity?: Sprinkles["opacity"];
-    visibility?: Sprinkles["visibility"];
-    overflowY?: Sprinkles["overflowY"];
-    overflow?: Sprinkles["overflow"];
+    borderStyle?: ThemeKeys<"borderStyle">;
+    borderColor?: ThemeKeys<"color">;
+    boxShadow?: ThemeKeys<"boxShadow">;
+    backgroundColor?: ThemeKeys<"color">;
+    opacity?: ThemeKeys<"opacity">;
+    visibility?: "hidden" | "visible";
+    overflowY?: "auto" | "hidden";
+    overflow?: "hidden";
     gridColumn?: string;
     gridRow?: string;
     transform?: CSSProperties["transform"];
 } & DisplayProps;
 type DisplayProps = {
-    gap?: Sprinkles["gap"];
-    alignItems?: Sprinkles["alignItems"];
-    justifyContent?: Sprinkles["justifyContent"];
+    gap?: ThemeKeys<"space">;
+    alignItems?: "flex-start" | "center";
+    justifyContent?: "center" | "space-between" | "end";
 } & (BoxGridDisplayProps | BoxFlexDisplayProps);
 type BoxGridDisplayProps = {
     display: "grid";
@@ -46,34 +46,33 @@ type BoxGridDisplayProps = {
     flexDirection?: never;
 };
 export type BoxFlexDisplayProps = {
-    display?: "flex";
+    display?: "flex" | "inline-flex";
     flexDirection?: "column" | "row";
     gridTemplateColumns?: never;
     gridTemplateRows?: never;
 };
 type Animation = {
     name?: "fadeIn";
-    duration?: Sprinkles["animationDuration"];
+    duration?: ThemeKeys<"transitionDuration">;
 };
 type Transition = {
     property: "opacity" | "background-color" | "height";
-    duration?: Sprinkles["transitionDuration"];
-    timingFunction?: Sprinkles["transitionTimingFunction"];
+    duration?: ThemeKeys<"transitionDuration">;
     delay?: string;
 };
-type Padding = Sprinkles["padding"] | {
-    block?: Sprinkles["padding"];
-    inline?: Sprinkles["padding"];
-    top?: Sprinkles["padding"];
-    bottom?: Sprinkles["padding"];
-    left?: Sprinkles["padding"];
-    right?: Sprinkles["padding"];
+type Padding = ThemeKeys<"space"> | {
+    block?: ThemeKeys<"space">;
+    inline?: ThemeKeys<"space">;
+    top?: ThemeKeys<"space">;
+    bottom?: ThemeKeys<"space">;
+    left?: ThemeKeys<"space">;
+    right?: ThemeKeys<"space">;
 };
-type BorderRadius = Sprinkles["borderRadius"] | {
-    topLeft?: Sprinkles["borderRadius"];
-    topRight?: Sprinkles["borderRadius"];
-    bottomLeft?: Sprinkles["borderRadius"];
-    bottomRight?: Sprinkles["borderRadius"];
+type BorderRadius = ThemeKeys<"borderRadius"> | {
+    topLeft?: ThemeKeys<"borderRadius">;
+    topRight?: ThemeKeys<"borderRadius">;
+    bottomLeft?: ThemeKeys<"borderRadius">;
+    bottomRight?: ThemeKeys<"borderRadius">;
 };
 type Border = boolean | {
     top?: boolean;

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

@@ -1,10 +1,153 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Box").BoxProps & import("react").RefAttributes<HTMLElement>>;
-export default _default;
+/// <reference types="react" />
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./Box").BoxProps & import("react").RefAttributes<HTMLElement>>;
+    argTypes: {
+        children: {
+            control: {
+                disable: boolean;
+            };
+        };
+    };
+};
+export default meta;
 export declare const Default: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./Box").BoxProps & import("react").RefAttributes<HTMLElement>>;
+    render: (args: {
+        as?: "article" | "div" | "form" | "header" | "nav" | "ol" | "span" | "ul" | undefined;
+        children?: import("react").ReactNode;
+        position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
+        top?: string | number | undefined;
+        left?: string | number | undefined;
+        right?: string | number | undefined;
+        bottom?: string | number | undefined;
+        width?: string | number | undefined;
+        minWidth?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+        height?: string | number | undefined;
+        minHeight?: string | number | undefined;
+        maxHeight?: string | number | undefined;
+        flexGrow?: 1 | undefined;
+        flexShrink?: 0 | undefined;
+        flexWrap?: "wrap" | undefined;
+        animation?: {
+            name?: "fadeIn" | undefined;
+            duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
+        } | undefined;
+        transition?: {
+            property: "background-color" | "height" | "opacity";
+            duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
+            delay?: string | undefined;
+        } | undefined;
+        padding?: (0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | {
+            block?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            inline?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            top?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            bottom?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            left?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            right?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        }) | undefined;
+        border?: (boolean | {
+            top?: boolean | undefined;
+            bottom?: boolean | undefined;
+            left?: boolean | undefined;
+            right?: boolean | undefined;
+        }) | undefined;
+        borderRadius?: (0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | {
+            topLeft?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
+            topRight?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
+            bottomLeft?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
+            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" | "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" | "gradient" | "greyFocus" | "cropper" | "windowTabs" | undefined;
+        backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "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;
+        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;
+        overflow?: "hidden" | undefined;
+        gridColumn?: string | undefined;
+        gridRow?: string | undefined;
+        transform?: import("csstype").Property.Transform | undefined;
+        gap?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        alignItems?: "center" | "flex-start" | undefined;
+        justifyContent?: "center" | "end" | "space-between" | undefined;
+        display: "grid";
+        gridTemplateColumns?: string | undefined;
+        gridTemplateRows?: string | undefined;
+        flexDirection?: undefined;
+        ref?: import("react").Ref<HTMLElement> | undefined;
+        key?: import("react").Key | null | undefined;
+    } | {
+        as?: "article" | "div" | "form" | "header" | "nav" | "ol" | "span" | "ul" | undefined;
+        children?: import("react").ReactNode;
+        position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
+        top?: string | number | undefined;
+        left?: string | number | undefined;
+        right?: string | number | undefined;
+        bottom?: string | number | undefined;
+        width?: string | number | undefined;
+        minWidth?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+        height?: string | number | undefined;
+        minHeight?: string | number | undefined;
+        maxHeight?: string | number | undefined;
+        flexGrow?: 1 | undefined;
+        flexShrink?: 0 | undefined;
+        flexWrap?: "wrap" | undefined;
+        animation?: {
+            name?: "fadeIn" | undefined;
+            duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
+        } | undefined;
+        transition?: {
+            property: "background-color" | "height" | "opacity";
+            duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
+            delay?: string | undefined;
+        } | undefined;
+        padding?: (0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | {
+            block?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            inline?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            top?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            bottom?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            left?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+            right?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        }) | undefined;
+        border?: (boolean | {
+            top?: boolean | undefined;
+            bottom?: boolean | undefined;
+            left?: boolean | undefined;
+            right?: boolean | undefined;
+        }) | undefined;
+        borderRadius?: (0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | {
+            topLeft?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
+            topRight?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
+            bottomLeft?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
+            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" | "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" | "gradient" | "greyFocus" | "cropper" | "windowTabs" | undefined;
+        backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "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;
+        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;
+        overflow?: "hidden" | undefined;
+        gridColumn?: string | undefined;
+        gridRow?: string | undefined;
+        transform?: import("csstype").Property.Transform | undefined;
+        gap?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        alignItems?: "center" | "flex-start" | undefined;
+        justifyContent?: "center" | "end" | "space-between" | undefined;
+        display?: "flex" | "inline-flex" | undefined;
+        flexDirection?: "column" | "row" | undefined;
+        gridTemplateColumns?: undefined;
+        gridTemplateRows?: undefined;
+        ref?: import("react").Ref<HTMLElement> | undefined;
+        key?: import("react").Key | null | undefined;
+    }) => JSX.Element;
     args: {
         children: JSX.Element;
-        as: string;
+        as: "div";
     };
     name: string;
 };