@prismicio/editor-ui 0.4.25 → 0.4.27

package/dist/theme/vars.css.d.ts

@@ -64,10 +64,12 @@ export declare const tokens: {
         readonly greyLight12: "hsl(261, 25%, 11%)";
         readonly inherit: "inherit";
         readonly indigoLight2: "hsl(223, 100%, 99%)";
+        readonly indigoLight4: "hsl(223, 92%, 95%)";
         readonly indigoLight7: "hsl(225, 78%, 82%)";
         readonly indigoLight10: "hsl(226, 59%, 51%)";
         readonly indigoLight11: "hsl(226, 55%, 45%)";
         readonly indigoDark2: "hsl(230, 36%, 13%)";
+        readonly indigoDark4: "hsl(227, 48%, 21%)";
         readonly indigoDark7: "hsl(226, 56%, 35%)";
         readonly indigoDark10: "hsl(227, 76%, 62%)";
         readonly indigoDark11: "hsl(228, 100%, 76%)";
@@ -135,6 +137,7 @@ export declare const tokens: {
         readonly purpleLight12: "hsl(254, 60%, 18%)";
         readonly greyAlpha1: "hsla(0, 0%, 0%, 0.3)";
         readonly transparent: "transparent";
+        readonly white: "white";
     };
     readonly cursor: {
         readonly default: "default";
@@ -304,10 +307,12 @@ export declare const themeClass: string, vars: {
         readonly greyLight12: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         readonly inherit: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         readonly indigoLight2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly indigoLight4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         readonly indigoLight7: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         readonly indigoLight10: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         readonly indigoLight11: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         readonly indigoDark2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly indigoDark4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         readonly indigoDark7: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         readonly indigoDark10: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         readonly indigoDark11: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -375,6 +380,7 @@ export declare const themeClass: string, vars: {
         readonly purpleLight12: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         readonly greyAlpha1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         readonly transparent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     readonly cursor: {
         readonly default: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/package.json

@@ -1,12 +1,13 @@
 {
   "dependencies": {
     "@internationalized/date": "3.5.0",
-    "@prismicio/editor-support": "0.4.25",
+    "@prismicio/editor-support": "0.4.27",
     "@radix-ui/react-avatar": "1.0.4",
     "@radix-ui/react-checkbox": "1.0.4",
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-dismissable-layer": "1.0.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",
+    "@radix-ui/react-focus-scope": "1.0.4",
     "@radix-ui/react-label": "2.0.0",
     "@radix-ui/react-popover": "1.0.7",
     "@radix-ui/react-portal": "1.0.4",
@@ -16,6 +17,7 @@
     "@radix-ui/react-separator": "1.0.1",
     "@radix-ui/react-slider": "1.1.0",
     "@radix-ui/react-switch": "1.0.1",
+    "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-toggle": "1.0.1",
     "@radix-ui/react-toggle-group": "1.0.1",
     "@radix-ui/react-toolbar": "1.0.1",
@@ -24,12 +26,21 @@
     "@react-aria/calendar": "3.5.1",
     "@react-aria/color": "3.0.0-beta.20",
     "@react-aria/datepicker": "3.8.0",
-    "@react-aria/dnd": "3.3.0",
     "@react-aria/focus": "3.12.0",
     "@react-aria/i18n": "3.7.0",
     "@react-stately/calendar": "3.4.1",
     "@react-stately/color": "3.3.1",
     "@react-stately/datepicker": "3.8.0",
+    "@tiptap/core": "2.3.0",
+    "@tiptap/extension-document": "2.3.0",
+    "@tiptap/extension-hard-break": "2.3.0",
+    "@tiptap/extension-history": "2.3.0",
+    "@tiptap/extension-italic": "2.3.0",
+    "@tiptap/extension-paragraph": "2.3.0",
+    "@tiptap/extension-placeholder": "2.3.0",
+    "@tiptap/extension-text": "2.3.0",
+    "@tiptap/pm": "2.3.0",
+    "@tiptap/react": "2.3.0",
     "@vanilla-extract/css": "1.14.1",
     "@vanilla-extract/css-utils": "0.1.2",
     "@vanilla-extract/sprinkles": "1.5.0",
@@ -37,7 +48,8 @@
     "csstype": "3.1.2",
     "react-easy-crop": "4.6.1",
     "react-remove-scroll": "2.5.6",
-    "tslib": "2.4.0"
+    "tslib": "2.4.0",
+    "uuid": "9.0.1"
   },
   "devDependencies": {
     "@babel/core": "",
@@ -53,8 +65,10 @@
     "@storybook/preview-web": "",
     "@storybook/react": "7.4.2",
     "@storybook/react-vite": "7.4.2",
+    "@testing-library/react": "14.2.1",
     "@types/react": "18.0.18",
     "@types/react-dom": "18.2.7",
+    "@types/uuid": "9.0.8",
     "@vanilla-extract/vite-plugin": "4.0.4",
     "@vitejs/plugin-react": "4.0.3",
     "eslint": "8.50.0",
@@ -64,13 +78,13 @@
     "eslint-plugin-react": "7.31.7",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.13",
-    "happy-dom": "6.0.4",
+    "happy-dom": "13.6.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "storybook": "7.4.2",
     "typescript": "5.2.2",
-    "vite": "4.0.4",
-    "vitest": "0.34.6"
+    "vite": "5.1.5",
+    "vitest": "1.3.1"
   },
   "exports": {
     "./src/index.ts": "./src/index.ts",
@@ -107,5 +121,5 @@
   "sideEffects": false,
   "stableVersion": "0.0.0",
   "types": "./dist/index.d.ts",
-  "version": "0.4.25"
+  "version": "0.4.27"
 }

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

@@ -1,3 +0,0 @@
-export declare const avatarBody: string;
-export declare const avatarBorder: string;
-export declare const avatarImage: string;

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

@@ -1,17 +0,0 @@
-export declare const root: string;
-export declare const variant: {
-    dashed: string;
-    elevated: string;
-    outlined: string;
-    selected: string;
-};
-export declare const color: {
-    grey1: string;
-    grey2: string;
-    grey3: string;
-    indigo2: string;
-};
-export declare const header: string;
-export declare const headerTitle: string;
-export declare const headerActions: string;
-export declare const content: string;

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

@@ -1,4 +0,0 @@
-export declare const root: string;
-export declare const direction: Record<"idle" | "prev" | "next", string>;
-export declare const button: string;
-export declare const buttonIcon: string;

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

@@ -1,4 +0,0 @@
-export declare const root: string;
-export declare const loading: string;
-export declare const loaded: string;
-export declare const updating: string;

package/dist/components/CheckerBoard/CheckerBoard.css.d.ts

@@ -1 +0,0 @@
-export declare const checkerboard: string;

package/dist/components/CircledIcon/CircledIcon.d.ts

@@ -1,9 +0,0 @@
-import { type IconName } from "../Icon";
-import * as styles from "./CircledIconStyles.css";
-export interface CircledIconProps {
-    iconName: IconName;
-    color?: keyof typeof styles.iconColor;
-    size?: keyof typeof styles.size;
-    hasBorder?: boolean;
-}
-export declare function CircledIcon(props: CircledIconProps): JSX.Element;

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

@@ -1,11 +0,0 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./CircledIcon").CircledIconProps>;
-export default _default;
-export declare const Default: {
-    args: {
-        iconName: string;
-        color: string;
-        size: string;
-        hasBorder: boolean;
-    };
-    name: string;
-};

package/dist/components/CircledIcon/CircledIconStyles.css.d.ts

@@ -1,11 +0,0 @@
-export declare const iconBorderContainer: string;
-export declare const borderStyle: string;
-export declare const size: {
-    medium: string;
-    extraSmall: string;
-};
-export declare const iconColor: {
-    grey: string;
-    tomato: string;
-    purple: string;
-};

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

@@ -1 +0,0 @@
-export { CircledIcon } from "./CircledIcon";

package/dist/components/ConjoinedIcons/ConjoinedIcons.css.d.ts

@@ -1,2 +0,0 @@
-export declare const kindIconContainer: string;
-export declare const linkIconContainer: string;

package/dist/components/ContentEditable/ContentEditable.css.d.ts

@@ -1 +0,0 @@
-export declare const root: string;

package/dist/components/Cropper/Cropper.css.d.ts

@@ -1,4 +0,0 @@
-export declare const root: string;
-export declare const media: string;
-export declare const cropArea: string;
-export declare const cropperReady: string;

package/dist/components/DateInput/DateInput.css.d.ts

@@ -1,2 +0,0 @@
-export declare const root: string;
-export declare const dateSegments: string;

package/dist/components/DateInput/DateSegments.css.d.ts

@@ -1,7 +0,0 @@
-export declare const root: string;
-export declare const flexSpace: string;
-export declare const segment: string;
-export declare const segmentColor: string;
-export declare const segmentDisabledColor: string;
-export declare const segmentInlinePadding: string;
-export declare const segmentLiteralInlinePadding: string;

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

@@ -1 +0,0 @@
-export declare const container: string;

package/dist/components/DocumentCard/DocumentCard.css.d.ts

@@ -1,14 +0,0 @@
-export declare const root: {
-    normal: string;
-    loading: string;
-};
-export declare const badge: string;
-export declare const body: string;
-export declare const bodyText: string;
-export declare const titleLoadingSkeleton: string;
-export declare const docStatus: string;
-export declare const footer: string;
-export declare const previewImage: string;
-export declare const tags: string;
-export declare const tag: string;
-export declare const descriptionLoadingSkeleton: string;

package/dist/components/DocumentCard/DocumentCard.d.ts

@@ -1,14 +0,0 @@
-import type { FilterOption } from "../FilterField";
-export interface DocumentCardProps {
-    documentType: string;
-    documentURL: string;
-    title: string;
-    statusColor: "grey" | "green" | "amber" | "purple";
-    previewImageUrl?: string;
-    description?: string;
-    loading?: boolean;
-    tags: string[];
-    tagsFilter?: Set<FilterOption>;
-    onSelect: () => void;
-}
-export declare function DocumentCard(props: DocumentCardProps): JSX.Element;

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

@@ -1,40 +0,0 @@
-import { DocumentCard } from "./DocumentCard";
-declare const meta: {
-    title: string;
-    component: typeof DocumentCard;
-    argTypes: {
-        statusColor: {
-            control: {
-                type: string;
-            };
-            options: string[];
-        };
-    };
-};
-export default meta;
-export declare const Default: {
-    render: (args: {
-        documentType: string;
-        documentURL: string;
-        title: string;
-        statusColor: "green" | "grey" | "purple" | "amber";
-        previewImageUrl?: string | undefined;
-        description?: string | undefined;
-        loading?: boolean | undefined;
-        tags: string[];
-        tagsFilter?: Set<import("../FilterField").FilterOption> | undefined;
-        onSelect: () => void;
-    }) => JSX.Element;
-    args: {
-        documentType: string;
-        documentURL: string;
-        title: string;
-        description: string;
-        tags: string[];
-        previewImageUrl: string;
-        onSelect: () => undefined;
-        loading: false;
-        statusColor: "green";
-    };
-    name: string;
-};

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

@@ -1 +0,0 @@
-export { DocumentCard } from "./DocumentCard";

package/dist/components/DragCard/DragCard.css.d.ts

@@ -1,3 +0,0 @@
-export declare const root: string;
-export declare const card: string;
-export declare const main: string;

package/dist/components/Embed/EmbedPreview.css.d.ts

@@ -1,5 +0,0 @@
-export declare const root: string;
-export declare const selected: string;
-export declare const thumbnail: Record<"1:1" | "16:9", string>;
-export declare const content: string;
-export declare const title: string;

package/dist/components/Embed/EmbedPreview.d.ts

@@ -1,13 +0,0 @@
-type Props = {
-    url: string;
-    thumbnail: {
-        url: string;
-        aspectRatio: "1:1" | "16:9";
-    };
-    provider: string;
-    author?: string;
-    subtitle: string;
-    selected?: boolean;
-};
-export declare const EmbedPreview: ({ url, thumbnail, provider, author, subtitle, selected }: Props) => JSX.Element;
-export {};

package/dist/components/Embed/EmbedPreview.stories.d.ts

@@ -1,25 +0,0 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
-    url: string;
-    thumbnail: {
-        url: string;
-        aspectRatio: "1:1" | "16:9";
-    };
-    provider: string;
-    author?: string | undefined;
-    subtitle: string;
-    selected?: boolean | undefined;
-}>;
-export default _default;
-export declare const Default: {
-    args: {
-        url: string;
-        thumbnail: {
-            url: string;
-            aspectRatio: string;
-        };
-        provider: string;
-        author: string;
-        subtitle: string;
-    };
-    name: string;
-};

package/dist/components/Embed/EmptyEmbed.css.d.ts

@@ -1 +0,0 @@
-export declare const root: string;

package/dist/components/Embed/EmptyEmbed.d.ts

@@ -1,5 +0,0 @@
-type Props = {
-    title: string;
-};
-export declare const EmptyEmbed: ({ title }: Props) => JSX.Element;
-export {};

package/dist/components/Embed/EmptyEmbed.stories.d.ts

@@ -1,10 +0,0 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
-    title: string;
-}>;
-export default _default;
-export declare const Default: {
-    args: {
-        title: string;
-    };
-    name: string;
-};

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

@@ -1,5 +0,0 @@
-type Props = {
-    provider: string;
-};
-export declare const Icon: ({ provider }: Props) => JSX.Element;
-export {};

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

@@ -1,2 +0,0 @@
-export { EmbedPreview } from "./EmbedPreview";
-export { EmptyEmbed } from "./EmptyEmbed";

package/dist/components/FieldSet/FieldSet.css.d.ts

@@ -1,6 +0,0 @@
-export declare const root: string;
-export declare const border: {
-    normal: string;
-    selected: string;
-};
-export declare const legend: string;

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

@@ -1,4 +0,0 @@
-/**
- * The gap between each field.
- */
-export declare const fieldSetGap: 16;

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

@@ -1,31 +0,0 @@
-import { FileUploadButton } from "../FileUploadButton";
-import { FileDropZone } from "./FileDropZone/FileDropZone";
-import { UploadProgress } from "./UploadProgress/UploadProgress";
-declare const _default: {
-    title: string;
-    subcomponents: {
-        FileDropZone: typeof FileDropZone;
-        FileUploadButton: typeof FileUploadButton;
-        UploadProgress: typeof UploadProgress;
-    };
-};
-export default _default;
-export declare const UploadProgressStory: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./UploadProgress/UploadProgress").UploadProgressProps>;
-    args: {
-        status: string;
-    };
-    name: string;
-    argTypes: {
-        status: {
-            control: {
-                type: string;
-            };
-            options: string[];
-        };
-    };
-};
-export declare const Default: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./FileDropZone/FileDropZone").FileDropZoneProps>;
-    name: string;
-};

package/dist/components/FileUpload/UploadProgress/UploadProgress.css.d.ts

@@ -1,8 +0,0 @@
-export declare const uploadProgressContainer: string;
-export declare const uploadProgressBar: {
-    idle: string;
-    uploading: string;
-    success: string;
-    error: string;
-};
-export declare const imageContainer: string;

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

@@ -1,7 +0,0 @@
-import * as styles from "./UploadProgress.css";
-export interface UploadProgressProps {
-    file: File;
-    status: keyof typeof styles.uploadProgressBar;
-    onRetry?: () => void;
-}
-export declare function UploadProgress(props: UploadProgressProps): JSX.Element;

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

@@ -1 +0,0 @@
-export declare function getFileInfo(file: File): string;

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

@@ -1 +0,0 @@
-export { FileUploadButton } from "./FileUploadButton";

package/dist/components/FilterField/FilterField.css.d.ts

@@ -1,12 +0,0 @@
-export declare const root: string;
-export declare const shadow: {
-    open: string;
-    closed: string;
-};
-export declare const inputContainer: string;
-export declare const labelContainer: string;
-export declare const tagsContainer: string;
-export declare const input: string;
-export declare const footerWrapper: string;
-export declare const footer: string;
-export declare const optionsContainer: string;

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

@@ -1,17 +0,0 @@
-export declare const root: string;
-export declare const rootMode: {
-    normal: string;
-    drop: string;
-};
-export declare const lineMode: {
-    normal: string;
-    drop: string;
-};
-export declare const firstLine: string;
-export declare const secondLine: string;
-export declare const icon: string;
-export declare const iconMode: {
-    normal: string;
-    drop: string;
-};
-export declare const iconChildren: string;

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

@@ -1,7 +0,0 @@
-export declare const icon: string;
-export declare const size: {
-    extraSmall: string;
-    small: string;
-    medium: string;
-    large: string;
-};

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

@@ -1,30 +0,0 @@
-export declare const root: string;
-export declare const cursor: {
-    default: string;
-    pointer: string;
-};
-export declare const noPaddingSize: {
-    small: string;
-    medium: string;
-    large: string;
-};
-export declare const radius: {
-    medium: string;
-    full: string;
-};
-export declare const size: {
-    small: string;
-    medium: string;
-    large: string;
-};
-export declare const variant: {
-    ghost: string;
-    solid: string;
-};
-export declare const color: {
-    grey: string;
-    green: string;
-    amber: string;
-    purple: string;
-    tomato: string;
-};

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

@@ -1,13 +0,0 @@
-export declare const root: string;
-export declare const color: {
-    grey: string;
-    tomato: string;
-    amber: string;
-    green: string;
-    purple: string;
-    black: string;
-};
-export declare const dim: string;
-export declare const hidden: string;
-export declare const progressCircle: string;
-export declare const inline: string;

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

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

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

@@ -1,12 +0,0 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./InvisibleButton").InvisibleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export default _default;
-export declare const Default: {
-    args: {
-        buttonText: string;
-        disabled: boolean;
-        color: string;
-        startIcon: string;
-        endIcon: string;
-    };
-    name: string;
-};

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

@@ -1 +0,0 @@
-export { InvisibleButton } from "./InvisibleButton";

package/dist/components/LinkDescriptionCard/LinkDescriptionCard.css.d.ts

@@ -1,2 +0,0 @@
-export declare const header: string;
-export declare const cardContent: string;

package/dist/components/Masonry/Masonry.css.d.ts

@@ -1,2 +0,0 @@
-export declare const container: string;
-export declare const item: string;

package/dist/components/Masonry/Masonry.d.ts

@@ -1,12 +0,0 @@
-import { type CSSProperties, type Key, type ReactElement, type ReactNode } from "react";
-export interface ItemInfo {
-    key: Key;
-    aspectRatio: number;
-}
-export interface MasonryProps<ITEM> {
-    items: readonly ITEM[];
-    getItemInfo: (item: ITEM) => ItemInfo;
-    children?: (item: ITEM) => ReactNode;
-    style?: CSSProperties;
-}
-export declare function Masonry<ITEM>(props: MasonryProps<ITEM>): ReactElement;

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

@@ -1,11 +0,0 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Masonry").MasonryProps<unknown>>;
-export default _default;
-export declare const Default: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./Masonry").MasonryProps<unknown>>;
-    args: {};
-    name: string;
-};
-export declare const Skeleton: {
-    render: () => JSX.Element;
-    args: {};
-};

package/dist/components/Masonry/MasonryFile.css.d.ts

@@ -1,2 +0,0 @@
-export declare const root: string;
-export declare const iconContainer: string;

package/dist/components/Masonry/MasonryFile.d.ts

@@ -1,7 +0,0 @@
-interface MasonryFileProps {
-    extension: string;
-    filename: string;
-    onClick?: () => void;
-}
-export declare function MasonryFile(props: MasonryFileProps): JSX.Element;
-export {};

package/dist/components/Masonry/MasonryMedia.css.d.ts

@@ -1 +0,0 @@
-export declare const root: string;