@prismicio/editor-ui 0.4.20 → 0.4.21

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" | "openInFull" | "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" | "openInFull" | "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/Dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import { type DialogContentProps } from "@radix-ui/react-dialog";
-import type { FC, PropsWithChildren, ReactNode } from "react";
+import { type FC, type PropsWithChildren, type ReactNode } from "react";
 import { type IconName } from "../Icon";
 export interface Custom {
     width: number | "auto";
@@ -37,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/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;

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

@@ -11,5 +11,6 @@ export interface TextAreaProps {
     paddingLeft?: ThemeKeys<"space">;
     paddingRight?: ThemeKeys<"space">;
     sx?: SX;
+    onBlur?: () => void;
 }
 export declare function TextArea(props: TextAreaProps): JSX.Element;

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 {};