@prismicio/editor-ui 0.3.0 → 0.4.0

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,18 @@
+import { ReactElement } from "react";
+import { Sprinkles } from "../../theme/sprinkles.css";
+interface Props {
+    children: OnlyChild;
+    animationDuration?: Sprinkles["animationDuration"];
+}
+/**
+ * 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/{AnimatedList → Animated}/AnimatedList.css.d.ts

@@ -5,4 +5,4 @@ export declare const entering: string;
 export declare const enteringDelay: string;
 export declare const present: string;
 export declare const exiting: string;
-export declare const gaps: Record<"0px" | "4px" | "6px" | "10px" | "12px" | "2px" | "8px" | "16px" | "24px" | "48px", string>;
+export declare const gaps: Record<0 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 72 | 48 | 80, string>;

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

@@ -1,4 +1,5 @@
 import { Key, ReactElement, ReactNode } from "react";
+import { Sprinkles } from "../../theme/sprinkles.css";
 import * as styles from "./AnimatedList.css";
 interface AnimatedListProps<ITEM> {
     gap?: keyof typeof styles.gaps;
@@ -6,6 +7,7 @@ interface AnimatedListProps<ITEM> {
     items: readonly ITEM[];
     getItemKey: (item: ITEM) => Key;
     children: (item: ITEM, index: number) => ReactNode;
+    animationDuration?: Sprinkles["animationDuration"];
 }
 export declare function AnimatedList<ITEM>(props: AnimatedListProps<ITEM>): ReactElement;
 export {};

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/Badge/Badge.css.d.ts

@@ -1,7 +1,12 @@
 export declare const root: string;
 export declare const color: {
     grey: string;
+    green: string;
+    amber: string;
+    purple: string;
+    tomato: string;
 };
 export declare const size: {
     large: string;
+    medium: string;
 };

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

@@ -1,12 +1,12 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
 declare const _default: ComponentMeta<import("react").FC<Readonly<{
     children?: import("react").ReactNode;
-    color?: "grey" | undefined;
-    size?: "large" | undefined;
+    color?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
+    size?: "medium" | "large" | undefined;
 }>>>;
 export default _default;
 export declare const Default: ComponentStoryFn<import("react").FC<Readonly<{
     children?: import("react").ReactNode;
-    color?: "grey" | undefined;
-    size?: "large" | undefined;
+    color?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
+    size?: "medium" | "large" | undefined;
 }>>>;

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

@@ -1,18 +1,27 @@
-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;
+    borderRadius?: Sprinkles["borderRadius"];
     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 +33,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 +46,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,82 @@
 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;
+    borderRadius?: 0 | 1 | 2 | "100%" | 4 | 6 | 8 | 10 | 12 | undefined;
+    backgroundColor?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "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;
+    borderRadius?: 0 | 1 | 2 | "100%" | 4 | 6 | 8 | 10 | 12 | undefined;
+    backgroundColor?: "indigo10" | "indigo11" | "green3" | "green4" | "green9" | "green10" | "green11" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "tomato1" | "tomato3" | "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/Button/Button.css.d.ts

@@ -10,3 +10,6 @@ export declare const iconVariant: {
 export declare const startIcon: string;
 export declare const text: string;
 export declare const endIcon: string;
+export declare const dim: string;
+export declare const hidden: string;
+export declare const progressCircle: string;

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

@@ -4,6 +4,7 @@ export declare const Button: import("react").ForwardRefExoticComponent<Readonly<
     className?: string | undefined;
     disabled?: boolean | undefined;
     endIcon?: ReactNode;
+    loading?: boolean | undefined;
     onClick?: ((event: MouseEvent) => void) | undefined;
     size?: "medium" | "large" | "small" | undefined;
     startIcon?: ReactNode;

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

@@ -4,6 +4,7 @@ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<
     className?: string | undefined;
     disabled?: boolean | undefined;
     endIcon?: import("react").ReactNode;
+    loading?: boolean | undefined;
     onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
     size?: "medium" | "large" | "small" | undefined;
     startIcon?: import("react").ReactNode;
@@ -15,6 +16,7 @@ export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticC
     className?: string | undefined;
     disabled?: boolean | undefined;
     endIcon?: import("react").ReactNode;
+    loading?: boolean | undefined;
     onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
     size?: "medium" | "large" | "small" | undefined;
     startIcon?: import("react").ReactNode;

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/ColorInput/ColorArea.css.d.ts

@@ -0,0 +1,2 @@
+export declare const colorAreaSize: string;
+export declare const thumb: string;

package/dist/components/ColorInput/ColorArea.d.ts

@@ -0,0 +1,2 @@
+import { ColorAreaProps } from "@react-stately/color";
+export declare const ColorArea: (props: ColorAreaProps) => JSX.Element;

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

@@ -0,0 +1,7 @@
+export declare const container: string;
+export declare const input: string;
+export declare const colorSquare: string;
+export declare const emptyColorSquare: string;
+export declare const areaContainer: string;
+export declare const header: string;
+export declare const footer: string;

package/dist/components/ColorInput/ColorInput.d.ts

@@ -0,0 +1,8 @@
+declare type Props = {
+    value?: string;
+    onValueChange: (value?: string) => void;
+    "aria-labelledby": string;
+    placeholder?: string;
+};
+export declare const ColorInput: ({ value, onValueChange, ...props }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
+declare const _default: ComponentMeta<({ value, onValueChange, ...props }: {
+    value?: string | undefined;
+    onValueChange: (value?: string | undefined) => void;
+    "aria-labelledby": string;
+    placeholder?: string | undefined;
+}) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStoryFn<({ value, onValueChange, ...props }: {
+    value?: string | undefined;
+    onValueChange: (value?: string | undefined) => void;
+    "aria-labelledby": string;
+    placeholder?: string | undefined;
+}) => JSX.Element>;

package/dist/components/ColorInput/ColorSlider.css.d.ts

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

package/dist/components/ColorInput/ColorSlider.d.ts

@@ -0,0 +1,2 @@
+import { ColorSliderStateOptions } from "@react-stately/color";
+export declare const ColorSlider: (props: Omit<ColorSliderStateOptions, "locale" | "channel">) => JSX.Element;

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

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

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

@@ -1,6 +1,5 @@
 export declare const overlay: string;
 export declare const container: string;
 export declare const header: string;
-export declare const headerIcon: string;
 export declare const closeButton: string;
 export declare const content: string;

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

@@ -3,6 +3,7 @@ import { type IconName } from "../Icon";
 export interface DialogProps {
     trigger?: ReactNode;
     children?: ReactNode;
+    fullscreen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     onAnimationEnd?: () => void;
@@ -11,7 +12,7 @@ export interface DialogProps {
  * A Dialog rendered in document.body.
  * The first focusable child will automatically be focused.
  */
-export declare const Dialog: FC<DialogProps>;
+export declare function Dialog(props: DialogProps): JSX.Element;
 interface DialogHeaderProps {
     icon: IconName;
     title: string;

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

@@ -1,5 +1,6 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
+import { Dialog } from "./";
 export declare const DialogOptionsStory: ComponentStoryFn<({ value, onValueChange, children }: import("./Options/DialogOptions").DialogOptionsProps) => JSX.Element>;
-declare const _default: ComponentMeta<import("react").FC<import("./Dialog").DialogProps>>;
+declare const _default: ComponentMeta<typeof Dialog>;
 export default _default;
-export declare const Default: ComponentStoryFn<import("react").FC<import("./Dialog").DialogProps>>;
+export declare const Default: ComponentStoryFn<typeof Dialog>;

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

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

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

@@ -0,0 +1,6 @@
+import type { DialogProps } from "./Dialog";
+declare type Props = {
+    onEscapeKeyDown: (evt: KeyboardEvent) => void;
+} & Pick<DialogProps, "open" | "onOpenChange" | "trigger" | "children" | "onAnimationEnd">;
+export declare function FullscreenDialog(props: Props): JSX.Element;
+export {};

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

@@ -1,4 +1,8 @@
 export declare const root: string;
 export declare const item: string;
+export declare const itemInlinePadding: {
+    withIcon: string;
+    withoutIcon: string;
+};
 export declare const itemIcon: string;
 export declare const itemTexts: string;

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

@@ -8,7 +8,7 @@ export interface DialogOptionsProps {
 export declare const DialogOptions: ({ value, onValueChange, children }: DialogOptionsProps) => JSX.Element;
 interface DialogOptionsItemProps {
     value: string;
-    icon: IconName;
+    icon?: IconName;
     title: string;
     subtitle: string;
 }

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

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

package/dist/components/DocumentStatusBar/DocumentStatusBar.d.ts

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

package/dist/components/DocumentStatusBar/DocumentStatusBar.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/DocumentStatusBar/index.d.ts

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

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/DocumentVersions/DocumentVersions.css.d.ts

@@ -0,0 +1,5 @@
+export declare const root: string;
+export declare const section: string;
+export declare const header: string;
+export declare const icon: string;
+export declare const card: Record<"default" | "selected", string>;

package/dist/components/DocumentVersions/DocumentVersions.d.ts

@@ -0,0 +1,15 @@
+declare type Section = {
+    header: string;
+    title: string;
+    subtitle: string;
+    selected: boolean;
+    onSelect: () => void;
+};
+declare type Props = {
+    local?: Omit<Section, "subtitle">;
+    unclassified?: Section;
+    published?: Section;
+};
+export declare const DocumentVersions: ({ local, unclassified, published }: Props) => JSX.Element;
+declare const Section: ({ children }: React.PropsWithChildren) => JSX.Element;
+export {};