@prismicio/editor-ui 0.3.0 → 0.3.1

package/README.md

@@ -14,5 +14,5 @@
 1. Export the SVG icon from [Figma](https://www.figma.com/file/V5pub1BwPMJGY52YHmhTmX/Prismic---Design-System?node-id=46%3A2811). It should always be the variant with a viewbox of 24x24.
 2. Move the file to `src/icons` and rename it with the official Material name: https://fonts.google.com/icons but with a lower camel case name.
 3. You can repeat 1. and 2. as many times as needed.
-4. Run `deno task update-icons`.
+4. Run `deno task update-icons` (it does not matter where in the monorepo you run this from)
 5. Check that your icon is visible in Storybook.

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

@@ -0,0 +1,4 @@
+export declare const root: string;
+export declare const content: string;
+export declare const buttons: string;
+export declare const button: string;

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

@@ -0,0 +1,11 @@
+declare type Props = {
+    title: string;
+    subtitle?: string;
+    buttons?: React.ReactNode;
+};
+export declare function Alert({ title, subtitle, buttons }: Props): JSX.Element;
+export declare const AlertButton: ({ title, onClick }: {
+    title: string;
+    onClick: () => void;
+}) => JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
+import { Alert } from "./Alert";
+declare const _default: ComponentMeta<typeof Alert>;
+export default _default;
+export declare const Default: ComponentStoryFn<typeof Alert>;

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

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

package/dist/components/{AnimatedList/AnimatedList.stories.d.ts → Animated/Animated.stories.d.ts}

@@ -1,5 +1,7 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
+import { AnimatedElement } from "./AnimatedElement";
 import { AnimatedList } from "./AnimatedList";
 declare const _default: ComponentMeta<typeof AnimatedList>;
 export default _default;
 export declare const Default: ComponentStoryFn<typeof AnimatedList>;
+export declare const AnimatedElementTemplateStory: ComponentStoryFn<typeof AnimatedElement>;

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

@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+interface Props {
+    children: OnlyChild;
+    animationDuration?: "standard" | "tabChangeTransition";
+}
+/**
+ * Animates a single element in & out based on whether it's currently rendered.
+ * An exit then enter animation will also play sequentially if the element's key changes.
+ * Unlike React CSSTransition(Group), this is based on CSS animations rather than a bunch of transition classes
+ * and the element doesn't have to be evaluated/rendered at all if it's not currently shown.
+ *
+ * If you only need to animate a single element's entrance (and not exit/swap), you don't need this component:
+ * you can just set a CSS animation on the element styles.
+ */
+export declare function AnimatedElement({ children, animationDuration }: Props): JSX.Element;
+declare type OnlyChild = ReactElement | null | undefined | false | 0;
+export {};

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

@@ -0,0 +1,8 @@
+export declare const container: string;
+export declare const containerDirection: Record<"horizontal" | "vertical", string>;
+export declare const item: string;
+export declare const entering: Record<"tabChangeTransition" | "standard", string>;
+export declare const enteringDelay: string;
+export declare const present: string;
+export declare const exiting: Record<"tabChangeTransition" | "standard", string>;
+export declare const gaps: Record<0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80, string>;

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

@@ -0,0 +1,2 @@
+export { AnimatedElement } from "./AnimatedElement";
+export { AnimatedList } from "./AnimatedList";

package/dist/components/AppBackground.d.ts

@@ -1,2 +1,6 @@
-import type { FC, PropsWithChildren } from "react";
-export declare const AppBackground: FC<PropsWithChildren>;
+import type { ReactNode } from "react";
+interface Props {
+    children?: ReactNode;
+}
+export declare function AppBackground({ children }: Props): JSX.Element;
+export {};

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

@@ -1,18 +1,26 @@
-import { ReactElement, ReactNode } from "react";
+import { ReactNode } from "react";
 import { type ThemeColor } from "../../theme/colors";
 import { type Sprinkles } from "../../theme/sprinkles.css";
-declare type Props = {
+declare type BoxProps = {
     as?: "div" | "nav" | "ul" | "ol" | "article" | "header";
     children?: ReactNode;
-    position?: "absolute" | "relative";
-    width?: Sprinkles["width"];
-    height?: Sprinkles["height"];
+    position?: "absolute" | "relative" | "sticky" | "fixed";
+    top?: Sprinkles["top"];
+    right?: Sprinkles["right"];
+    bottom?: Sprinkles["bottom"];
+    width?: Sprinkles["width"] | number;
+    maxWidth?: Sprinkles["maxWidth"] | number;
+    height?: Sprinkles["height"] | number;
+    maxHeight?: Sprinkles["maxHeight"] | number | string;
     padding?: Padding;
     border?: Border;
     backgroundColor?: ThemeColor;
+    overflowY?: "auto";
 } & DisplayProps;
 declare type DisplayProps = {
     gap?: Sprinkles["gap"];
+    alignItems?: Sprinkles["alignItems"];
+    justifyContent?: Sprinkles["justifyContent"];
 } & (GridDisplayProps | FlexDisplayProps);
 declare type GridDisplayProps = {
     display: "grid";
@@ -24,6 +32,8 @@ declare type FlexDisplayProps = {
     flexDirection?: "column" | "row";
 };
 declare type Padding = Sprinkles["padding"] | {
+    block?: Sprinkles["padding"];
+    inline?: Sprinkles["padding"];
     top?: Sprinkles["padding"];
     bottom?: Sprinkles["padding"];
     left?: Sprinkles["padding"];
@@ -35,5 +45,5 @@ declare type Border = boolean | {
     left?: boolean;
     right?: boolean;
 };
-export declare function Box(props: Props): ReactElement;
+export declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLElement>>;
 export {};

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

@@ -1,5 +1,80 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
-import { Box } from "./Box";
-declare const _default: ComponentMeta<typeof Box>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<({
+    as?: "article" | "div" | "header" | "nav" | "ol" | "ul" | undefined;
+    children?: import("react").ReactNode;
+    position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
+    top?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+    right?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+    bottom?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+    width?: number | "fit-content" | "100%" | "100vw" | "100vh" | undefined;
+    maxWidth?: number | "fit-content" | "100%" | "100vw" | "100vh" | undefined;
+    height?: number | "fit-content" | "100%" | "100vw" | "100vh" | undefined;
+    maxHeight?: string | number | undefined;
+    padding?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | {
+        block?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+        inline?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+        top?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+        bottom?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+        left?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+        right?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+    } | undefined;
+    border?: (boolean | {
+        top?: boolean | undefined;
+        bottom?: boolean | undefined;
+        left?: boolean | undefined;
+        right?: boolean | undefined;
+    }) | undefined;
+    backgroundColor?: "indigo10" | "indigo11" | "green9" | "green10" | "amber9" | "amber10" | "tomato1" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
+    overflowY?: "auto" | undefined;
+} & ({
+    gap?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+    alignItems?: "center" | "flex-start" | undefined;
+    justifyContent?: "space-between" | "center" | undefined;
+} & ({
+    display: "grid";
+    gridTemplateColumns?: string | undefined;
+    gridTemplateRows?: string | undefined;
+} | {
+    display?: "flex" | undefined;
+    flexDirection?: "column" | "row" | undefined;
+}))) & import("react").RefAttributes<HTMLElement>>>;
 export default _default;
-export declare const Default: ComponentStoryFn<typeof Box>;
+export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticComponent<({
+    as?: "article" | "div" | "header" | "nav" | "ol" | "ul" | undefined;
+    children?: import("react").ReactNode;
+    position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
+    top?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+    right?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+    bottom?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+    width?: number | "fit-content" | "100%" | "100vw" | "100vh" | undefined;
+    maxWidth?: number | "fit-content" | "100%" | "100vw" | "100vh" | undefined;
+    height?: number | "fit-content" | "100%" | "100vw" | "100vh" | undefined;
+    maxHeight?: string | number | undefined;
+    padding?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | {
+        block?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+        inline?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+        top?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+        bottom?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+        left?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+        right?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+    } | undefined;
+    border?: (boolean | {
+        top?: boolean | undefined;
+        bottom?: boolean | undefined;
+        left?: boolean | undefined;
+        right?: boolean | undefined;
+    }) | undefined;
+    backgroundColor?: "indigo10" | "indigo11" | "green9" | "green10" | "amber9" | "amber10" | "tomato1" | "tomato7" | "tomato10" | "tomato11" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "purpleAlpha1" | "currentColor" | "inherit" | "transparent" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark2" | "dark6" | "dark7" | "dark12" | undefined;
+    overflowY?: "auto" | undefined;
+} & ({
+    gap?: 0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80 | undefined;
+    alignItems?: "center" | "flex-start" | undefined;
+    justifyContent?: "space-between" | "center" | undefined;
+} & ({
+    display: "grid";
+    gridTemplateColumns?: string | undefined;
+    gridTemplateRows?: string | undefined;
+} | {
+    display?: "flex" | undefined;
+    flexDirection?: "column" | "row" | undefined;
+}))) & import("react").RefAttributes<HTMLElement>>>;

package/dist/components/Calendar/Calendar.d.ts

@@ -1,7 +1,8 @@
+import { DateValue, GregorianCalendar } from "@internationalized/date";
 declare type Props = {
-    value: string;
-    onValueChange: (value: string) => void;
-    onFocusReady: (focus: () => void) => void;
+    value: DateValue;
+    onValueChange: (value: DateValue) => void;
 };
 export declare const Calendar: (props: Props) => JSX.Element;
+export declare const createCalendar: () => GregorianCalendar;
 export {};

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

@@ -1,12 +1,11 @@
+import { DateValue } from "@internationalized/date";
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
 declare const _default: ComponentMeta<(props: {
-    value: string;
-    onValueChange: (value: string) => void;
-    onFocusReady: (focus: () => void) => void;
+    value: DateValue;
+    onValueChange: (value: DateValue) => void;
 }) => JSX.Element>;
 export default _default;
 export declare const Default: ComponentStoryFn<(props: {
-    value: string;
-    onValueChange: (value: string) => void;
-    onFocusReady: (focus: () => void) => void;
+    value: DateValue;
+    onValueChange: (value: DateValue) => void;
 }) => JSX.Element>;

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

@@ -1 +1 @@
-export { Calendar } from "./Calendar";
+export { Calendar, createCalendar } from "./Calendar";

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

@@ -1,8 +1,8 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
 declare const _default: ComponentMeta<import("react").FC<{
     zoom: number;
-    image?: string | undefined;
     crop: import("react-easy-crop").Point;
+    image?: string | undefined;
     aspect: number;
     onZoomChange?: ((zoom: number) => void) | undefined;
     onCropChange: (location: import("react-easy-crop").Point) => void;
@@ -12,8 +12,8 @@ declare const _default: ComponentMeta<import("react").FC<{
 export default _default;
 export declare const Default: ComponentStoryFn<import("react").FC<{
     zoom: number;
-    image?: string | undefined;
     crop: import("react-easy-crop").Point;
+    image?: string | undefined;
     aspect: number;
     onZoomChange?: ((zoom: number) => void) | undefined;
     onCropChange: (location: import("react-easy-crop").Point) => void;

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

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

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

@@ -1,11 +1,10 @@
-import React from "react";
-import { BaseInput } from "../BaseInput";
-declare type Props = Pick<React.ComponentProps<typeof BaseInput>, "id" | "placeholder" | "readOnly" | "value"> & {
-    inField?: boolean;
-    onValueChange: (newValue?: string) => void;
+declare type Mode = "date" | "date-time";
+declare type Props = {
+    readOnly?: boolean;
+    value?: string;
+    onValueChange: (value?: string) => void;
+    mode: Mode;
+    "aria-labelledby": string;
 };
-export declare const DateInput: ({ id, placeholder, readOnly, value, onValueChange }: Props) => JSX.Element;
-export declare const validDraft: (value: string) => string;
-export declare const validDate: (draft: string) => string | null;
-export declare const userDate: (validDate: string) => string | null;
+export declare const DateInput: ({ "aria-labelledby": ariaLabelledBy, readOnly, value, onValueChange, mode }: Props) => JSX.Element;
 export {};

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

@@ -1,10 +1,16 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
-declare const _default: ComponentMeta<({ id, placeholder, readOnly, value, onValueChange }: Pick<import("../BaseInput/BaseInput").BaseInputProps & import("react").RefAttributes<HTMLInputElement>, "value" | "id" | "placeholder" | "readOnly"> & {
-    inField?: boolean | undefined;
-    onValueChange: (newValue?: string | undefined) => void;
+declare const _default: ComponentMeta<({ "aria-labelledby": ariaLabelledBy, readOnly, value, onValueChange, mode }: {
+    readOnly?: boolean | undefined;
+    value?: string | undefined;
+    onValueChange: (value?: string | undefined) => void;
+    mode: "date" | "date-time";
+    "aria-labelledby": string;
 }) => JSX.Element>;
 export default _default;
-export declare const Default: ComponentStoryFn<({ id, placeholder, readOnly, value, onValueChange }: Pick<import("../BaseInput/BaseInput").BaseInputProps & import("react").RefAttributes<HTMLInputElement>, "value" | "id" | "placeholder" | "readOnly"> & {
-    inField?: boolean | undefined;
-    onValueChange: (newValue?: string | undefined) => void;
+export declare const Default: ComponentStoryFn<({ "aria-labelledby": ariaLabelledBy, readOnly, value, onValueChange, mode }: {
+    readOnly?: boolean | undefined;
+    value?: string | undefined;
+    onValueChange: (value?: string | undefined) => void;
+    mode: "date" | "date-time";
+    "aria-labelledby": string;
 }) => JSX.Element>;

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

@@ -0,0 +1,7 @@
+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/DateInput/DateSegments.d.ts

@@ -0,0 +1,3 @@
+import type { DateValue } from "@internationalized/date";
+import { AriaDateFieldProps } from "@react-aria/datepicker";
+export declare const DateSegments: (props: AriaDateFieldProps<DateValue>) => JSX.Element;

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

@@ -0,0 +1 @@
+export declare const root: Record<"published" | "release" | "archived" | "unclassified", string>;

package/dist/components/DocumentStatusDot/DocumentStatusDot.d.ts

@@ -0,0 +1,5 @@
+declare type Props = {
+    status: "published" | "release" | "archived" | "unclassified";
+};
+export declare const DocumentStatusDot: ({ status }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
+declare const _default: ComponentMeta<({ status }: {
+    status: "published" | "release" | "archived" | "unclassified";
+}) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStoryFn<({ status }: {
+    status: "published" | "release" | "archived" | "unclassified";
+}) => JSX.Element>;

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

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

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

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

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

@@ -0,0 +1,4 @@
+export declare const root: 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

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

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

@@ -0,0 +1,22 @@
+import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
+declare const _default: ComponentMeta<({ url, thumbnail, provider, author, subtitle }: {
+    url: string;
+    thumbnail: {
+        url: string;
+        aspectRatio: "1:1" | "16:9";
+    };
+    provider: string;
+    author?: string | undefined;
+    subtitle: string;
+}) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStoryFn<({ url, thumbnail, provider, author, subtitle }: {
+    url: string;
+    thumbnail: {
+        url: string;
+        aspectRatio: "1:1" | "16:9";
+    };
+    provider: string;
+    author?: string | undefined;
+    subtitle: string;
+}) => JSX.Element>;

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

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

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

@@ -0,0 +1,8 @@
+import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
+declare const _default: ComponentMeta<({ title }: {
+    title: string;
+}) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStoryFn<({ title }: {
+    title: string;
+}) => JSX.Element>;

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

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

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

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

package/dist/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -1,20 +1,23 @@
-import React, { CSSProperties, ReactNode } from "react";
+import type { Handler } from "@prismicio/editor-support/Type";
+import React, { ReactNode } from "react";
 interface ErrorBoundaryProps {
     children?: ReactNode;
     errorImageSrc?: string;
     title: string;
     description: string;
-    style?: CSSProperties;
+    renderError?: (error: ReactNode) => ReactNode;
 }
 interface ErrorBoundaryState {
-    hasError: boolean;
+    error?: unknown;
 }
+declare type ErrorInterceptor = (error: unknown, resetBoundary: Handler) => boolean;
 export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
     constructor(props: ErrorBoundaryProps);
-    static getDerivedStateFromError(_error: unknown): {
-        hasError: boolean;
+    static registerGlobalErrorInterceptor(value: ErrorInterceptor): void;
+    static getDerivedStateFromError(error: unknown): {
+        error: unknown;
     };
     tryAgain: () => void;
-    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
+    render(): React.ReactNode;
 }
 export {};

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

@@ -1,5 +1,6 @@
 export declare const root: string;
 export declare const labelPosition: Record<"top" | "side", string>;
+export declare const footer: string;
 export declare const icon: string;
 export declare const iconChildren: string;
 export declare const label: string;

package/dist/components/Field/Field.d.ts

@@ -1,7 +1,8 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { type FC, type ReactNode } from "react";
+import { type FC, type PropsWithChildren, type ReactNode } from "react";
 export declare const Field: import("react").ForwardRefExoticComponent<Readonly<{
     children?: ReactNode;
+    footer?: ReactNode;
     labelPosition?: "top" | "side" | undefined;
     onMouseOverChange?: ((isMouseOver: boolean) => void) | undefined;
 }> & import("react").RefAttributes<HTMLDivElement>>;
@@ -9,10 +10,11 @@ declare type FieldIconProps = Readonly<{
     children?: ReactNode;
 }>;
 export declare const FieldIcon: FC<FieldIconProps>;
-declare type FieldLabelProps = Readonly<Pick<LabelPrimitive.LabelProps, "children" | "htmlFor">>;
+declare type FieldLabelProps = Readonly<Pick<LabelPrimitive.LabelProps, "children" | "htmlFor" | "id">>;
 export declare const FieldLabel: FC<FieldLabelProps>;
 declare type FieldControlProps = Readonly<{
     children?: ReactNode;
 }>;
 export declare const FieldControl: FC<FieldControlProps>;
+export declare const FieldFooter: ({ children }: PropsWithChildren) => JSX.Element;
 export {};

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

@@ -1,12 +1,14 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
 declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Readonly<{
     children?: import("react").ReactNode;
+    footer?: import("react").ReactNode;
     labelPosition?: "top" | "side" | undefined;
     onMouseOverChange?: ((isMouseOver: boolean) => void) | undefined;
 }> & import("react").RefAttributes<HTMLDivElement>>>;
 export default _default;
 export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticComponent<Readonly<{
     children?: import("react").ReactNode;
+    footer?: import("react").ReactNode;
     labelPosition?: "top" | "side" | undefined;
     onMouseOverChange?: ((isMouseOver: boolean) => void) | undefined;
 }> & import("react").RefAttributes<HTMLDivElement>>>;

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

@@ -1 +1 @@
-export { Field, FieldControl, FieldIcon, FieldLabel } from "./Field";
+export { Field, FieldControl, FieldFooter, FieldIcon, FieldLabel } from "./Field";

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

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

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

@@ -1,11 +1,13 @@
 import type { FC, ReactNode } from "react";
 declare type FieldSetProps = Readonly<{
     children?: ReactNode;
+    selected?: boolean;
+    id?: string;
     name?: string;
 }>;
 export declare const FieldSet: FC<FieldSetProps>;
-declare type FieldSetLegendProps = Readonly<{
+interface FieldSetLegendProps {
     children?: ReactNode;
-}>;
+}
 export declare const FieldSetLegend: FC<FieldSetLegendProps>;
 export {};

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

@@ -1,10 +1,14 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
 declare const _default: ComponentMeta<import("react").FC<Readonly<{
     children?: import("react").ReactNode;
+    selected?: boolean | undefined;
+    id?: string | undefined;
     name?: string | undefined;
 }>>>;
 export default _default;
 export declare const Default: ComponentStoryFn<import("react").FC<Readonly<{
     children?: import("react").ReactNode;
+    selected?: boolean | undefined;
+    id?: string | undefined;
     name?: string | undefined;
 }>>>;

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

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

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

@@ -0,0 +1,8 @@
+import type { Handler } from "@prismicio/editor-support/Type";
+import type { ReactNode } from "react";
+interface Props {
+    children?: ReactNode;
+    onSubmit: Handler;
+}
+export declare function Form(props: Props): JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
+import { Form } from "./";
+declare const _default: ComponentMeta<typeof Form>;
+export default _default;
+export declare const Default: ComponentStoryFn<typeof Form>;

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

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

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

@@ -0,0 +1,8 @@
+export interface FormBaseInputProps {
+    type?: "text" | "email" | "password";
+    label?: string;
+    placeholder?: string;
+    value: string;
+    onValueChange?: (value: string) => void;
+}
+export declare function FormInput(props: FormBaseInputProps): JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Form } from "./Form";
+export { FormInput } from "./FormInput";

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

@@ -1,8 +1,3 @@
-export declare const color: {
-    grey2: string;
-    grey11: string;
-    inherit: string;
-};
 export declare const size: {
     xs: string;
     small: string;