@prismicio/editor-ui 0.4.19 → 0.4.21

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

@@ -1,12 +1,9 @@
+import type { ReactNode } from "react";
 type Props = {
     title: string;
-    subtitle?: string;
-    footerButtons?: React.ReactNode;
+    subtitle?: ReactNode;
+    footerButtons?: ReactNode;
     onClose?: () => void;
 };
 export declare function Alert({ title, subtitle, footerButtons, onClose }: Props): JSX.Element;
-export declare const AlertButton: ({ title, onClick }: {
-    title: string;
-    onClick: () => void;
-}) => JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
     title: string;
-    subtitle?: string | undefined;
+    subtitle?: import("react").ReactNode;
     footerButtons?: import("react").ReactNode;
     onClose?: (() => void) | undefined;
 }>;
@@ -8,7 +8,7 @@ export default _default;
 export declare const Default: {
     render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
         title: string;
-        subtitle?: string | undefined;
+        subtitle?: import("react").ReactNode;
         footerButtons?: import("react").ReactNode;
         onClose?: (() => void) | undefined;
     }>;

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

@@ -1,13 +1,27 @@
-import { type PropsWithChildren } from "react";
+import { type ReactNode, type RefObject } from "react";
+import type { IconName } from "../Icon";
 export interface AlertConfig {
+    id?: string;
     title: string;
-    subtitle: string;
+    subtitle: ReactNode;
+    buttons?: {
+        text: string;
+        onClick: () => void;
+        icon?: IconName;
+    }[];
     onRetry?: () => void;
 }
 interface AlertContext {
     showAlert: (config: AlertConfig) => void;
+    /** Useful to ignore click events when interacting with the alerts.
+     *
+     * E.g. if you don't want to close a dialog when dismissing an alert. */
+    containerRef: RefObject<HTMLDivElement> | null;
 }
 declare const AlertContext: import("react").Context<AlertContext>;
-export declare function AlertProvider(props: PropsWithChildren): JSX.Element;
+interface AlertProviderProps {
+    children: ReactNode;
+}
+export declare function AlertProvider(props: AlertProviderProps): JSX.Element;
 export declare function useAlert(): AlertContext;
 export {};

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

@@ -1,2 +1,2 @@
-export { Alert, AlertButton } from "./Alert";
+export { Alert } from "./Alert";
 export { type AlertConfig, AlertProvider, useAlert } from "./AlertContext";

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

@@ -2,6 +2,7 @@ import { type ReactNode } from "react";
 import { type Sprinkles } from "../../theme/sprinkles.css";
 import type { tokens } from "../../theme/vars.css";
 import { type RenderDragPreview, type RenderDropIndicator } from "./dnd";
+import { type State } from "./layout";
 export interface AnimatedListProps<ITEM> {
     ariaLabel: string;
     gap?: keyof typeof tokens.space;
@@ -13,7 +14,15 @@ export interface AnimatedListProps<ITEM> {
     renderDragPreview?: RenderDragPreview;
     renderDropIndicator?: RenderDropIndicator;
     onReorder?: (items: ITEM[]) => void;
+    stacked?: {
+        /** Offset between stacked items */
+        offset: number;
+        /** Scaling factor between items */
+        scaleFactor: number;
+        /** Maximum number of items to stack, others will be hidden */
+        maxDepth: number;
+    };
 }
 export declare function AnimatedList<ITEM>(props: AnimatedListProps<ITEM>): JSX.Element;
-type ChildrenFunction<ITEM> = (item: ITEM, index: number) => ReactNode;
+type ChildrenFunction<ITEM> = (item: ITEM, index: number, state: State<ITEM>["state"]) => ReactNode;
 export {};

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

@@ -1,13 +1,15 @@
 import { type ReactNode } from "react";
-export declare const Badge: import("react").ForwardRefExoticComponent<Readonly<{
+import { type IconName } from "../Icon";
+export interface BadgeProps {
     title: ReactNode;
-    color?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
-    size?: "medium" | "large" | undefined;
-    maxWidth?: 150 | 250 | undefined;
-    onClose?: (() => void) | undefined;
-    icon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
-    onClick?: (() => void) | undefined;
-    selected?: boolean | undefined;
-    onMouseEnter?: (() => void) | undefined;
-    onMouseLeave?: (() => void) | undefined;
-}> & import("react").RefAttributes<HTMLDivElement>>;
+    color?: "grey" | "green" | "amber" | "purple" | "tomato";
+    size?: "large" | "medium";
+    maxWidth?: 150 | 250;
+    onClose?: () => void;
+    icon?: IconName;
+    onClick?: () => void;
+    selected?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,15 +1,4 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Readonly<{
-    title: import("react").ReactNode;
-    color?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
-    size?: "medium" | "large" | undefined;
-    maxWidth?: 150 | 250 | undefined;
-    onClose?: (() => void) | undefined;
-    icon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
-    onClick?: (() => void) | undefined;
-    selected?: boolean | undefined;
-    onMouseEnter?: (() => void) | undefined;
-    onMouseLeave?: (() => void) | undefined;
-}> & import("react").RefAttributes<HTMLDivElement>>;
+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: {
     args: {
@@ -18,6 +7,7 @@ export declare const Default: {
         size: string;
         onClose: () => undefined;
         icon: string;
+        selected: boolean;
     };
     name: string;
 };

package/dist/components/BlankSlate/BlankSlate.d.ts

@@ -12,7 +12,7 @@ interface BlankSlateIconProps {
     backgroundColor?: ThemeKeys<"color">;
     borderColor?: ThemeKeys<"color">;
     borderStyle?: CSSProperties["borderStyle"];
-    size?: "medium" | "large";
+    size?: "medium" | "large" | "xlarge";
 }
 export declare function BlankSlateIcon(props: BlankSlateIconProps): JSX.Element;
 declare const titleSizeVariant: {

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type CSSProperties, type ReactNode } from "react";
 import { type ThemeColor } from "../../theme/colors";
 import { type Sprinkles } from "../../theme/sprinkles.css";
 export type BoxProps = {
@@ -32,6 +32,7 @@ export type BoxProps = {
     overflow?: Sprinkles["overflow"];
     gridColumn?: string;
     gridRow?: string;
+    transform?: CSSProperties["transform"];
 } & DisplayProps;
 type DisplayProps = {
     gap?: Sprinkles["gap"];

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

@@ -7,7 +7,7 @@ declare const meta: {
             control: {
                 type: string;
             };
-            options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "keyboardArrowDown", "keyboardArrowUp", "label", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "musicNote", "notes", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
+            options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "keyboardArrowDown", "keyboardArrowUp", "label", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "musicNote", "notes", "openInFull", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
         };
     };
 };
@@ -23,8 +23,8 @@ export declare const Default: {
         flexContent?: boolean | undefined;
         textWeight?: "bold" | "normal" | undefined;
         sx?: import("../../theme/new").SX | undefined;
-        startIcon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
-        endIcon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
+        startIcon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
+        endIcon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
         renderStartIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
         renderEndIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
         onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;

package/dist/components/Dialog/Dialog.d.ts

@@ -1,4 +1,5 @@
-import type { FC, PropsWithChildren, ReactNode } from "react";
+import { type DialogContentProps } from "@radix-ui/react-dialog";
+import { type FC, type PropsWithChildren, type ReactNode } from "react";
 import { type IconName } from "../Icon";
 export interface Custom {
     width: number | "auto";
@@ -15,6 +16,7 @@ export interface DialogProps {
     hasClose?: boolean;
     size?: "small" | "large" | "fullscreen" | Custom;
     position?: "center" | "bottomRight";
+    onPointerDownOutside?: DialogContentProps["onPointerDownOutside"];
 }
 /**
  * A Dialog rendered in document.body.
@@ -35,6 +37,7 @@ type ActionsProps = {
         loading?: boolean;
         disabled?: boolean;
         disabledTooltip?: string;
+        color?: "grey" | "purple" | "dark" | "tomato" | "amber" | "green";
     };
     cancel?: {
         text: string;

package/dist/components/Dialog/Options/DialogOptions.d.ts

@@ -18,8 +18,12 @@ export interface DialogOptionsProps {
      * @default large
      */
     width?: "large" | "auto";
+    /**
+     * The sticky footer of the dialog options panel.
+     */
+    footer?: ReactNode;
 }
-export declare const DialogOptions: ({ value, onValueChange, children, width, padding }: DialogOptionsProps) => JSX.Element;
+export declare const DialogOptions: ({ value, onValueChange, children, width, padding, footer }: DialogOptionsProps) => JSX.Element;
 interface DialogOptionsItemProps {
     value: string;
     icon?: IconName;

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

@@ -1,2 +1 @@
 export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "./DropdownMenu";
-export * as dropdownMenuStyles from "./DropdownMenu.css";

package/dist/components/EditableText/EditableText.d.ts

@@ -1,5 +1,5 @@
 import { colors } from "../../theme/colors";
-import { variant as textVariants } from "../Text/Text.css";
+import { textVariantMapping } from "../Text";
 export interface EditableTextProps {
     "aria-label": string;
     value: string;
@@ -7,7 +7,7 @@ export interface EditableTextProps {
     onBlur?: () => void;
     onChange?: (value: string) => void;
     color?: keyof typeof colors;
-    variant?: keyof typeof textVariants;
+    variant?: keyof typeof textVariantMapping;
     disabled?: boolean;
 }
 export declare function EditableText(props: EditableTextProps): JSX.Element;

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

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

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

@@ -16,6 +16,7 @@ export interface FormInputProps {
     onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
     onValueChange?: (value: string) => void;
     onPaste?: ClipboardEventHandler<HTMLInputElement>;
+    onBlur?: () => void;
 }
 export declare function FormInput(props: FormInputProps): JSX.Element;
 type AutoCompleteValue = "username" | "current-password";

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

@@ -4,8 +4,9 @@ export interface FormSearchInputProps {
     placeholder?: string;
     maxLength?: number;
     isLoading?: boolean;
+    disabled?: boolean;
     value: string;
-    sx?: SX;
     onValueChange: (value: string) => void;
+    sx?: SX;
 }
 export declare function FormSearchInput(props: FormSearchInputProps): JSX.Element;

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

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

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

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

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

@@ -5,7 +5,7 @@ export interface ImageProps {
     loading?: "eager" | "lazy";
     decoding?: "async" | "auto" | "sync";
     sizing?: "contain" | "cover" | "none";
-    borderRadius?: 0 | 4;
+    borderRadius?: 0 | 4 | 8;
     boxShadow?: "3";
     animateOnLoad?: boolean;
     sx?: SX;

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

@@ -1,6 +1,6 @@
 import { type MouseEvent } from "react";
 import { type IconName } from "../Icon";
-import type { variant } from "../Text/Text.css";
+import { textVariantMapping } from "../Text";
 import * as styles from "./InvisibleButton.css";
 export interface InvisibleButtonProps {
     buttonText: string;
@@ -9,7 +9,7 @@ export interface InvisibleButtonProps {
     endIcon?: IconName;
     onClick?: (event: MouseEvent) => void;
     startIcon?: IconName;
-    textVariant?: keyof typeof variant;
+    textVariant?: keyof typeof textVariantMapping;
     inline?: boolean;
 }
 export declare const InvisibleButton: import("react").ForwardRefExoticComponent<InvisibleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -7,9 +7,11 @@ interface MediaCardProps {
      * @example "png"
      */
     extension: string;
+    kind?: string;
     width?: number;
     height?: number;
     selected?: boolean;
+    loading?: boolean;
     /**
      * The upload status of the media
      * @default idle
@@ -32,4 +34,9 @@ interface MediaCardProps {
     onCheckedChange?: (checked: boolean) => void;
 }
 export declare function MediaCard(props: MediaCardProps): JSX.Element;
+interface MediaCardPlaceholderProps {
+    extension: MediaCardProps["extension"];
+    filename: MediaCardProps["filename"];
+}
+export declare function MediaCardPlaceholder(props: MediaCardPlaceholderProps): JSX.Element;
 export {};

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

@@ -43,10 +43,12 @@ export declare const Default: {
         url: string;
         filename: string;
         extension: string;
+        kind?: string | undefined;
         width?: number | undefined;
         height?: number | undefined;
         selected?: boolean | undefined;
-        status?: import("../MediaProgress/MediaProgress").Status | undefined;
+        loading?: boolean | undefined;
+        status?: import("../MediaProgress").Status | undefined;
         size?: number | undefined;
         onCardClick?: (() => void) | undefined;
         onCheckedChange?: ((checked: boolean) => void) | undefined;

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

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

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

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

package/dist/components/SelectButton/SelectButton.d.ts

@@ -1,10 +1,10 @@
-import type { colors } from "../../theme/colors";
+import type { ThemeKeys } from "../../theme/new";
 import { type IconName } from "../Icon";
 export interface SelectButtonProps {
     textContent: string;
     onSelect: () => void;
     icon?: IconName;
-    color?: keyof typeof colors;
+    color?: ThemeKeys<"color">;
     disabled?: boolean;
 }
 /**

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,7 +1,7 @@
 import type { SX, ThemeKeys } from "../../theme/new";
 export interface Props {
     component?: "span";
-    borderRadius?: ThemeKeys<"borderRadius", 0 | 4 | 6 | "100%">;
+    borderRadius?: ThemeKeys<"borderRadius", 0 | 4 | 6 | 12 | "100%">;
     color?: ThemeKeys<"color", "grey1" | "grey5">;
     width?: number | string;
     height?: number | string;
@@ -14,6 +14,7 @@ export declare function Skeleton(props: Props): import("react").DetailedReactHTM
         height: string | number | undefined;
         flexGrow?: 1 | undefined;
         flexShrink?: 0 | undefined;
+        flexBasis?: 0 | undefined;
         alignSelf?: "center" | "stretch" | undefined;
         justifySelf?: "center" | "stretch" | undefined;
         visibility?: "hidden" | "visible" | undefined;

package/dist/components/Tab/Tab.d.ts

@@ -1,6 +1,10 @@
+import type { SX } from "../../theme/new";
 export interface TabProps {
     title: string;
     selected?: boolean;
     onSelect?: () => void;
+    outline?: boolean;
+    background?: "transparent";
+    sx?: SX;
 }
 export declare function Tab(props: TabProps): JSX.Element;

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

@@ -1,15 +1,13 @@
 import { type ReactNode } from "react";
-import { colors } from "../../theme/colors";
-import type { SX } from "../../theme/new";
-import * as styles from "./Text.css";
+import { type SX, type ThemeKeys } from "../../theme/new";
 export interface TextProps {
-    align?: keyof typeof styles.align;
+    align?: "inherit" | "start" | "center" | "end";
     children?: ReactNode;
     className?: string;
-    color?: keyof typeof colors;
+    color?: ThemeKeys<"color">;
     component?: Component;
     noWrap?: boolean;
-    variant?: Variant;
+    variant?: keyof typeof textVariantMapping;
     noSelect?: boolean;
     htmlFor?: string;
     underline?: boolean;
@@ -18,5 +16,20 @@ export interface TextProps {
 }
 export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
 type Component = "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "kbd" | "p" | "pre" | "span" | "label";
-type Variant = keyof typeof styles.variant;
+export declare const textVariantMapping: {
+    readonly normal: "p";
+    readonly bold: "p";
+    readonly italic: "p";
+    readonly small: "p";
+    readonly extraSmall: "p";
+    readonly smallBold: "p";
+    readonly smallItalic: "p";
+    readonly emphasized: "p";
+    readonly h1: "h1";
+    readonly h2: "h2";
+    readonly h3: "h3";
+    readonly h4: "h4";
+    readonly h5: "h5";
+    readonly inherit: "p";
+};
 export {};

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

@@ -1 +1,3 @@
-export { Text, type TextProps } from "./Text";
+import textStyles from "./Text.module.css";
+export { Text, type TextProps, textVariantMapping } from "./Text";
+export { textStyles };

package/dist/components/TextArea/TextArea.d.ts

@@ -6,9 +6,11 @@ export interface TextAreaProps {
     onChange?: (value: string) => void;
     placeholder?: string;
     readOnly?: boolean;
+    disabled?: boolean;
     value?: string;
     paddingLeft?: ThemeKeys<"space">;
     paddingRight?: ThemeKeys<"space">;
     sx?: SX;
+    onBlur?: () => void;
 }
 export declare function TextArea(props: TextAreaProps): JSX.Element;

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

@@ -3,7 +3,7 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
     anchor: React.ReactNode;
     open: boolean;
     onOpenChange?: ((open: boolean) => void) | undefined;
-    icon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
+    icon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
     loadingIndicator?: boolean | undefined;
     title: string;
     seconds: number;
@@ -18,7 +18,7 @@ export declare const Default: {
         anchor: React.ReactNode;
         open: boolean;
         onOpenChange?: ((open: boolean) => void) | undefined;
-        icon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
+        icon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInFull" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
         loadingIndicator?: boolean | undefined;
         title: string;
         seconds: number;

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

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

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { IconName } from "../Icon";
 type ToggleButtonGroupProps<Value extends string> = {
     children?: ReactNode;
     disabled?: boolean;
@@ -21,8 +22,8 @@ interface ToggleButtonGroupItemProps {
     children?: ReactNode;
     disabled?: boolean;
     value: string;
-    endIcon?: ReactNode;
-    startIcon?: ReactNode;
+    endIcon?: IconName;
+    startIcon?: IconName;
 }
 export declare function ToggleButtonGroupItem(props: ToggleButtonGroupItemProps): JSX.Element;
 export {};