@prismicio/editor-ui 0.2.0 → 0.3.0

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

@@ -5,3 +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>;

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

@@ -1,7 +1,7 @@
 import { Key, ReactElement, ReactNode } from "react";
-import { gaps } from "../../theme/vars.css";
+import * as styles from "./AnimatedList.css";
 interface AnimatedListProps<ITEM> {
-    gap?: keyof typeof gaps;
+    gap?: keyof typeof styles.gaps;
     direction?: "horizontal" | "vertical";
     items: readonly ITEM[];
     getItemKey: (item: ITEM) => Key;

package/dist/components/AppBackground.d.ts

@@ -0,0 +1,2 @@
+import type { FC, PropsWithChildren } from "react";
+export declare const AppBackground: FC<PropsWithChildren>;

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

@@ -1,6 +1,6 @@
 export declare const base: string;
 export declare const root: string;
 export declare const input: string;
-export declare const inputColorVariant: Record<"link" | "normal", string>;
+export declare const inputColorVariant: Record<"normal" | "link", string>;
 export declare const startAdornment: string;
 export declare const endAdornment: string;

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

@@ -0,0 +1,39 @@
+import { ReactElement, ReactNode } from "react";
+import { type ThemeColor } from "../../theme/colors";
+import { type Sprinkles } from "../../theme/sprinkles.css";
+declare type Props = {
+    as?: "div" | "nav" | "ul" | "ol" | "article" | "header";
+    children?: ReactNode;
+    position?: "absolute" | "relative";
+    width?: Sprinkles["width"];
+    height?: Sprinkles["height"];
+    padding?: Padding;
+    border?: Border;
+    backgroundColor?: ThemeColor;
+} & DisplayProps;
+declare type DisplayProps = {
+    gap?: Sprinkles["gap"];
+} & (GridDisplayProps | FlexDisplayProps);
+declare type GridDisplayProps = {
+    display: "grid";
+    gridTemplateColumns?: string;
+    gridTemplateRows?: string;
+};
+declare type FlexDisplayProps = {
+    display?: "flex";
+    flexDirection?: "column" | "row";
+};
+declare type Padding = Sprinkles["padding"] | {
+    top?: Sprinkles["padding"];
+    bottom?: Sprinkles["padding"];
+    left?: Sprinkles["padding"];
+    right?: Sprinkles["padding"];
+};
+declare type Border = boolean | {
+    top?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+    right?: boolean;
+};
+export declare function Box(props: Props): ReactElement;
+export {};

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

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

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

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

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

@@ -1,6 +1,6 @@
 export declare const root: string;
 export declare const iconOnly: string;
-export declare const size: Record<"small" | "medium" | "large", string>;
+export declare const size: Record<"medium" | "large" | "small", string>;
 export declare const variant: Record<"primary" | "secondary" | "tertiary", string>;
 export declare const iconVariant: {
     primary: string;

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

@@ -5,7 +5,7 @@ export declare const Button: import("react").ForwardRefExoticComponent<Readonly<
     disabled?: boolean | undefined;
     endIcon?: ReactNode;
     onClick?: ((event: MouseEvent) => void) | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     startIcon?: ReactNode;
     variant?: "primary" | "secondary" | "tertiary" | undefined;
 }> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -5,7 +5,7 @@ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<
     disabled?: boolean | undefined;
     endIcon?: import("react").ReactNode;
     onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     startIcon?: import("react").ReactNode;
     variant?: "primary" | "secondary" | "tertiary" | undefined;
 }> & import("react").RefAttributes<HTMLButtonElement>>>;
@@ -16,7 +16,7 @@ export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticC
     disabled?: boolean | undefined;
     endIcon?: import("react").ReactNode;
     onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     startIcon?: import("react").ReactNode;
     variant?: "primary" | "secondary" | "tertiary" | undefined;
 }> & import("react").RefAttributes<HTMLButtonElement>>>;

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

@@ -1,7 +1,7 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
 declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Partial<Readonly<{
     disabled?: boolean | undefined;
-    size: "small" | "medium" | "large";
+    size: "medium" | "large" | "small";
     variant: "primary" | "secondary" | "tertiary";
 }>> & Readonly<{
     children?: import("react").ReactNode;
@@ -11,7 +11,7 @@ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<
 export default _default;
 export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticComponent<Partial<Readonly<{
     disabled?: boolean | undefined;
-    size: "small" | "medium" | "large";
+    size: "medium" | "large" | "small";
     variant: "primary" | "secondary" | "tertiary";
 }>> & Readonly<{
     children?: import("react").ReactNode;

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

@@ -2,7 +2,7 @@ import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
 declare const _default: ComponentMeta<import("react").FC<Readonly<{
     children?: import("react").ReactNode;
     className?: string | undefined;
-    color?: "grey2" | "grey1" | "grey3" | undefined;
+    color?: "grey1" | "grey2" | "grey3" | undefined;
     style?: import("react").CSSProperties | undefined;
     variant?: "dashed" | "elevated" | "outlined" | undefined;
 }>>>;
@@ -10,7 +10,7 @@ export default _default;
 export declare const Default: ComponentStoryFn<import("react").FC<Readonly<{
     children?: import("react").ReactNode;
     className?: string | undefined;
-    color?: "grey2" | "grey1" | "grey3" | undefined;
+    color?: "grey1" | "grey2" | "grey3" | undefined;
     style?: import("react").CSSProperties | undefined;
     variant?: "dashed" | "elevated" | "outlined" | undefined;
 }>>>;

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

@@ -3,5 +3,5 @@ export declare const Icon: import("react").ForwardRefExoticComponent<Readonly<{
     className?: string | undefined;
     color?: "inherit" | "grey2" | "grey11" | undefined;
     name: IconName;
-    size?: "small" | "medium" | "large" | "xs" | undefined;
+    size?: "medium" | "large" | "small" | "xs" | undefined;
 }> & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -2,13 +2,13 @@ import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
 declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Readonly<{
     className?: string | undefined;
     color?: "inherit" | "grey2" | "grey11" | undefined;
-    name: "search" | "link" | "add" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloudUpload" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "desktopWindows" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "tabletMac" | "textFields" | "toggleOff" | "unfoldMore" | "viewDay" | "zoomOutMap";
-    size?: "small" | "medium" | "large" | "xs" | undefined;
+    name: "add" | "search" | "link" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloudUpload" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "desktopWindows" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "tabletMac" | "textFields" | "toggleOff" | "unfoldMore" | "viewDay" | "zoomOutMap";
+    size?: "medium" | "large" | "small" | "xs" | undefined;
 }> & import("react").RefAttributes<SVGSVGElement>>>;
 export default _default;
 export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticComponent<Readonly<{
     className?: string | undefined;
     color?: "inherit" | "grey2" | "grey11" | undefined;
-    name: "search" | "link" | "add" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloudUpload" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "desktopWindows" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "tabletMac" | "textFields" | "toggleOff" | "unfoldMore" | "viewDay" | "zoomOutMap";
-    size?: "small" | "medium" | "large" | "xs" | undefined;
+    name: "add" | "search" | "link" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "close" | "cloudUpload" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "desktopWindows" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "linkOff" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "notes" | "phoneIphone" | "photo" | "pin" | "public" | "schedule" | "tabletMac" | "textFields" | "toggleOff" | "unfoldMore" | "viewDay" | "zoomOutMap";
+    size?: "medium" | "large" | "small" | "xs" | undefined;
 }> & import("react").RefAttributes<SVGSVGElement>>>;

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

@@ -1,3 +1,3 @@
 export declare const loading: string;
 export declare const loaded: string;
-export declare const sizing: Record<"none" | "contain" | "cover", string>;
+export declare const sizing: Record<"contain" | "none" | "cover", string>;

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

@@ -4,7 +4,7 @@ declare const _default: ComponentMeta<import("react").FC<Readonly<{
     alt?: string | undefined;
     loading?: "eager" | "lazy" | undefined;
     decoding?: "auto" | "async" | "sync" | undefined;
-    sizing?: "none" | "contain" | "cover" | undefined;
+    sizing?: "contain" | "none" | "cover" | undefined;
     animateOnLoad?: boolean | undefined;
     onLoad?: (() => void) | undefined;
 }>>>;
@@ -14,7 +14,7 @@ export declare const Default: ComponentStoryFn<import("react").FC<Readonly<{
     alt?: string | undefined;
     loading?: "eager" | "lazy" | undefined;
     decoding?: "auto" | "async" | "sync" | undefined;
-    sizing?: "none" | "contain" | "cover" | undefined;
+    sizing?: "contain" | "none" | "cover" | undefined;
     animateOnLoad?: boolean | undefined;
     onLoad?: (() => void) | undefined;
 }>>>;

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

@@ -1,3 +1,3 @@
 export declare const root: string;
-export declare const size: Record<"small" | "medium", string>;
+export declare const size: Record<"medium" | "small", string>;
 export declare const thumb: string;

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

@@ -1,10 +1,10 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
 declare const _default: ComponentMeta<import("react").FC<Readonly<Pick<import("@radix-ui/react-switch").SwitchProps, "disabled" | "value" | "name" | "id" | "checked" | "onCheckedChange"> & {
     inField?: boolean | undefined;
-    size?: "small" | "medium" | undefined;
+    size?: "medium" | "small" | undefined;
 }>>>;
 export default _default;
 export declare const Default: ComponentStoryFn<import("react").FC<Readonly<Pick<import("@radix-ui/react-switch").SwitchProps, "disabled" | "value" | "name" | "id" | "checked" | "onCheckedChange"> & {
     inField?: boolean | undefined;
-    size?: "small" | "medium" | undefined;
+    size?: "medium" | "small" | undefined;
 }>>>;

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

@@ -21,7 +21,7 @@ export declare const Text: import("react").ForwardRefExoticComponent<Readonly<{
     component?: Component | undefined;
     inField?: boolean | undefined;
     noWrap?: boolean | undefined;
-    variant?: "inherit" | "code" | "pre" | "caption" | "h1" | "h2" | "h3" | "h4" | "body1" | "body2" | "body3" | "button1" | "button2" | undefined;
+    variant?: "inherit" | "pre" | "caption" | "code" | "h1" | "h2" | "h3" | "h4" | "body1" | "body2" | "body3" | "button1" | "button2" | undefined;
     weight?: "inherit" | "400" | "500" | "600" | undefined;
 }> & import("react").RefAttributes<HTMLElement>>;
 export {};

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

@@ -4,10 +4,10 @@ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<
     children?: import("react").ReactNode;
     className?: string | undefined;
     color?: "inherit" | "grey11" | "grey12" | undefined;
-    component?: ("code" | "pre" | "h1" | "h2" | "h3" | "h4" | "kbd" | "p" | "span") | undefined;
+    component?: ("pre" | "code" | "h1" | "h2" | "h3" | "h4" | "kbd" | "p" | "span") | undefined;
     inField?: boolean | undefined;
     noWrap?: boolean | undefined;
-    variant?: "inherit" | "code" | "pre" | "caption" | "h1" | "h2" | "h3" | "h4" | "body1" | "body2" | "body3" | "button1" | "button2" | undefined;
+    variant?: "inherit" | "pre" | "caption" | "code" | "h1" | "h2" | "h3" | "h4" | "body1" | "body2" | "body3" | "button1" | "button2" | undefined;
     weight?: "inherit" | "400" | "500" | "600" | undefined;
 }> & import("react").RefAttributes<HTMLElement>>>;
 export default _default;
@@ -16,9 +16,9 @@ export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticC
     children?: import("react").ReactNode;
     className?: string | undefined;
     color?: "inherit" | "grey11" | "grey12" | undefined;
-    component?: ("code" | "pre" | "h1" | "h2" | "h3" | "h4" | "kbd" | "p" | "span") | undefined;
+    component?: ("pre" | "code" | "h1" | "h2" | "h3" | "h4" | "kbd" | "p" | "span") | undefined;
     inField?: boolean | undefined;
     noWrap?: boolean | undefined;
-    variant?: "inherit" | "code" | "pre" | "caption" | "h1" | "h2" | "h3" | "h4" | "body1" | "body2" | "body3" | "button1" | "button2" | undefined;
+    variant?: "inherit" | "pre" | "caption" | "code" | "h1" | "h2" | "h3" | "h4" | "body1" | "body2" | "body3" | "button1" | "button2" | undefined;
     weight?: "inherit" | "400" | "500" | "600" | undefined;
 }> & import("react").RefAttributes<HTMLElement>>>;

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

@@ -4,7 +4,7 @@ export declare const ToggleButton: import("react").ForwardRefExoticComponent<Rea
     children?: ReactNode;
     disabled?: boolean | undefined;
     endIcon?: ReactNode;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     startIcon?: ReactNode;
     variant?: "primary" | "secondary" | "tertiary" | undefined;
 }> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -3,7 +3,7 @@ declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<
     children?: import("react").ReactNode;
     disabled?: boolean | undefined;
     endIcon?: import("react").ReactNode;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     startIcon?: import("react").ReactNode;
     variant?: "primary" | "secondary" | "tertiary" | undefined;
 }> & import("react").RefAttributes<HTMLButtonElement>>>;
@@ -12,7 +12,7 @@ export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticC
     children?: import("react").ReactNode;
     disabled?: boolean | undefined;
     endIcon?: import("react").ReactNode;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     startIcon?: import("react").ReactNode;
     variant?: "primary" | "secondary" | "tertiary" | undefined;
 }> & import("react").RefAttributes<HTMLButtonElement>>>;

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

@@ -1,20 +1,20 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
 declare const _default: ComponentMeta<import("react").FC<Readonly<Pick<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps, "disabled" | "children"> & Pick<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps, "value" | "type" | "onValueChange"> & {
     density?: "compact" | "regular" | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     variant?: "primary" | "secondary" | "tertiary" | undefined;
 }> | Readonly<Pick<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps, "disabled" | "children"> & Pick<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps, "value" | "type" | "onValueChange"> & {
     density?: "compact" | "regular" | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     variant?: "primary" | "secondary" | "tertiary" | undefined;
 }>>>;
 export default _default;
 export declare const Default: ComponentStoryFn<import("react").FC<Readonly<Pick<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps, "disabled" | "children"> & Pick<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps, "value" | "type" | "onValueChange"> & {
     density?: "compact" | "regular" | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     variant?: "primary" | "secondary" | "tertiary" | undefined;
 }> | Readonly<Pick<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps, "disabled" | "children"> & Pick<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps, "value" | "type" | "onValueChange"> & {
     density?: "compact" | "regular" | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     variant?: "primary" | "secondary" | "tertiary" | undefined;
 }>>>;

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { AnimatedList } from "./components/AnimatedList";
+export { AppBackground } from "./components/AppBackground";
 export { Badge } from "./components/Badge";
 export { BlankSlate, BlankSlateActions, BlankSlateDescription, BlankSlateIcon, BlankSlateImage, BlankSlateTitle } from "./components/BlankSlate";
+export { Box } from "./components/Box";
 export { Button } from "./components/Button";
 export { ButtonGroup } from "./components/ButtonGroup";
 export { Card, CardContent, CardHeader, CardHeaderActions, CardHeaderTitle } from "./components/Card";