@prismicio/editor-ui 0.4.25 → 0.4.27

package/dist/components/FileUpload/{FileDropZone/FileDropZone.d.ts → FileDropZone.d.ts}

@@ -1,9 +1,8 @@
 import { type ReactNode } from "react";
-import { type MediaAssetType } from "../FileUpload.utils";
+import { type MediaAssetType } from "./FileUpload.utils";
 export interface FileDropZoneProps {
     onFilesSelected: (files: File[]) => void;
     overlay: ReactNode;
-    overlayVariant?: "default" | "simple";
     assetType?: MediaAssetType;
     children?: ReactNode;
 }

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

@@ -0,0 +1,14 @@
+import { FileDropZone } from "./FileDropZone";
+import { FileUploadButton } from "./FileUploadButton";
+declare const _default: {
+    title: string;
+    subcomponents: {
+        FileDropZone: typeof FileDropZone;
+        FileUploadButton: typeof FileUploadButton;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./FileDropZone").FileDropZoneProps>;
+    name: string;
+};

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

@@ -4,7 +4,7 @@ export declare const validExtensions: {
     readonly videoAll: "video/*";
     readonly audioAll: "audio/*";
     readonly csv: "text/csv";
+    readonly txt: "text/plain";
 };
 export type MediaAssetType = "image" | "all";
 export declare function isValidFileExtension(type: string, assetType: "image" | "all"): boolean;
-export declare function getNonSpecificExtension(inputString: string): string;

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

@@ -1,2 +1,2 @@
-export { FileDropZone } from "./FileDropZone/FileDropZone";
-export { UploadProgress } from "./UploadProgress/UploadProgress";
+export { FileDropZone } from "./FileDropZone";
+export { FileUploadButton } from "./FileUploadButton";

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Form } from "./";
 declare const meta: {
     title: string;
@@ -12,15 +13,11 @@ declare const meta: {
 };
 export default meta;
 export declare const Default: {
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+    render: (args: {
         children?: import("react").ReactNode;
         sx?: import("../../theme/new").SX | undefined;
         onSubmit: () => void;
-    }>, context: import("@storybook/types").StoryContext<import("@storybook/react/dist/types-0a347bb9").R, {
-        children?: import("react").ReactNode;
-        sx?: import("../../theme/new").SX | undefined;
-        onSubmit: () => void;
-    }>) => JSX.Element)[];
+    }) => JSX.Element;
     args: {};
     name: string;
 };

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

@@ -9,7 +9,7 @@ export interface FormDateInputProps {
     /**
      * The minimum allowed date that a user may select.
      */
-    minValue?: "tomorrow";
+    minValue?: "today";
     sx?: SX;
     onValueChange: (value?: Date) => void;
     disabled?: boolean;

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

@@ -5,6 +5,7 @@ export type FormFieldProps = {
     disabled?: boolean;
     error?: boolean;
     sx?: SX;
+    size?: "small" | "medium" | "large";
 } & LabelProps;
 type LabelProps = {
     label: string;

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

@@ -1,8 +1,9 @@
-import { type ClipboardEventHandler, type KeyboardEvent } from "react";
+import { type ClipboardEventHandler, type KeyboardEvent, type ReactNode } from "react";
 import type { SX } from "../../theme/new";
 import { type IconName } from "../Icon";
 export interface FormInputProps {
-    type?: "text" | "email" | "password";
+    type?: "text" | "email" | "password" | "number";
+    size?: "small" | "medium" | "large";
     disabled?: boolean;
     label?: string;
     placeholder?: string;
@@ -15,6 +16,9 @@ export interface FormInputProps {
     onValueChange?: (value: string) => void;
     onPaste?: ClipboardEventHandler<HTMLInputElement>;
     onBlur?: () => void;
+    prefix?: ReactNode;
+    prefixTooltip?: string;
+    suffix?: ReactNode;
 }
 export declare function FormInput(props: FormInputProps): JSX.Element;
 type AutoCompleteValue = "username" | "current-password";

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

@@ -1,3 +1,4 @@
+import { type AriaRole, type FocusEvent } from "react";
 import type { SX } from "../../theme/new";
 export interface FormSearchInputProps {
     label?: string;
@@ -8,5 +9,9 @@ export interface FormSearchInputProps {
     value: string;
     onValueChange: (value: string) => void;
     sx?: SX;
+    role?: AriaRole;
+    onFocus?: (event: FocusEvent<HTMLInputElement, Element>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement, Element>) => void;
+    endAdornment?: boolean;
 }
-export declare function FormSearchInput(props: FormSearchInputProps): JSX.Element;
+export declare const FormSearchInput: import("react").ForwardRefExoticComponent<FormSearchInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./HairlineButton").HairlineButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default _default;
 export declare const Default: {

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

@@ -1,11 +1,11 @@
+/// <reference types="react" />
 import { type SX, type ThemeKeys } from "../../theme/new";
-import * as styles from "./Icon.css";
 import type { IconName } from "./iconNames";
 export interface IconProps {
     className?: string;
     color?: ThemeKeys<"color">;
     name: IconName;
-    size?: keyof typeof styles.size;
+    size?: "extraSmall" | "small" | "medium" | "large";
     sx?: SX;
 }
 export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;
 export default _default;
 export declare const Default: {

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const PrismicLogo: import("react").MemoExoticComponent<() => JSX.Element>;

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

@@ -1,2 +1,2 @@
-export declare const iconNames: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "keyboardArrowDown", "keyboardArrowUp", "label", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "musicNote", "notes", "openInFull", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "upload", "viewDay", "visibility", "zoomOutMap"];
+export declare const iconNames: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "biToggle", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "keyboardArrowDown", "keyboardArrowUp", "label", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notes", "openInFull", "openInNew", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "upload", "viewDay", "visibility", "zoomOutMap"];
 export type IconName = typeof iconNames[number];

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

@@ -1,19 +1,19 @@
 import { type MouseEvent } from "react";
 import type { IconName } from "../Icon/iconNames";
-import * as styles from "./IconButton.css";
 export interface IconButtonProps {
-    color?: keyof typeof styles.color;
-    cursor?: keyof typeof styles.cursor;
+    color?: Color;
     hasPadding?: boolean;
     hiddenLabel?: string;
     icon: IconName | JSX.Element;
     loading?: boolean;
-    onClick?: () => void;
+    onClick?: (event: MouseEvent) => void;
     onMouseDown?: (event: MouseEvent) => void;
     onMouseUp?: (event: MouseEvent) => void;
-    radius?: keyof typeof styles.radius;
-    size?: keyof typeof styles.size;
-    variant?: keyof typeof styles.variant;
+    radius?: "full" | "medium";
+    size?: "small" | "medium" | "large";
+    variant?: "solid" | "ghost";
     disabled?: boolean;
 }
 export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+type Color = "grey" | "green" | "amber" | "purple" | "tomato";
+export {};

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

@@ -1,10 +1,10 @@
+/// <reference types="react" />
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./IconButton").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default _default;
 export declare const Default: {
     render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./IconButton").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
     args: {
         icon: string;
-        cursor: string;
     };
     name: string;
 };

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

@@ -1,5 +1,6 @@
-import type { SX } from "../../theme/new";
+import { type SX } from "../../theme/new";
 export interface ImageProps {
+    "aria-label"?: string;
     src: string;
     alt?: string;
     loading?: "eager" | "lazy";

package/dist/components/LazyRender/LazyRender.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type BoxFlexDisplayProps, type BoxProps } from "../Box/Box";
+import { type ThemeKeys } from "../../theme/new";
 /**
  * Lazily renders a child the first time it intersects with the viewport.
  * Works with any vertical scrolling ancestor (direct or not).
@@ -14,8 +14,15 @@ export interface LazyRenderProps {
      * Getting this right is not critical.
      * A heightEstimate of 0 means nothing will lazily render as everything is immediately visible.
      * On the other hand, a huge heightEstimate means it will be hard to see and load the content after the first item.
+     * @default 200
      */
     heightEstimate?: number;
-    box?: BoxProps & BoxFlexDisplayProps;
+    /**
+     * Whether to keep the children loaded forever after they were shown the first time.
+     * Otherwise, will keep mounting/unmounting the children as they appear on screen.
+     * @default false
+     */
+    keepLoaded?: boolean;
+    gap?: ThemeKeys<"space">;
 }
 export declare function LazyRender(props: LazyRenderProps): JSX.Element;

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

@@ -1,4 +1,4 @@
-import type { IconName } from "../Icon";
+import { type IconName } from "../Icon";
 export interface LinkDescriptionCardProps {
     url: URL | string;
     title: string;

package/dist/components/List/UnorderedList.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { UnorderedList } from "./UnorderedList";
 declare const meta: {
     title: string;

package/dist/components/MediaCard/MediaCard.d.ts

@@ -1,13 +1,22 @@
 import { type Status } from "../MediaProgress/MediaProgress";
+interface Tag {
+    id: string;
+    name: string;
+}
 interface MediaCardProps {
+    "aria-label"?: string;
     url: string;
     filename: string;
+    filenameHighlight?: string;
+    alt?: string;
     /**
      * The file extension of the media
      * @example "png"
      */
-    extension: string;
+    extension?: string;
     kind?: string;
+    tags?: Tag[];
+    onAddTag?: () => void;
     width?: number;
     height?: number;
     selected?: boolean;
@@ -35,8 +44,8 @@ interface MediaCardProps {
 }
 export declare function MediaCard(props: MediaCardProps): JSX.Element;
 interface MediaCardPlaceholderProps {
-    extension: MediaCardProps["extension"];
-    filename: MediaCardProps["filename"];
+    filename: string;
+    extension?: string;
 }
 export declare function MediaCardPlaceholder(props: MediaCardPlaceholderProps): JSX.Element;
 export {};

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

@@ -1,7 +1,9 @@
+import type { StoryObj } from "@storybook/react";
 import { MediaCard } from "./MediaCard";
 declare const meta: {
     title: string;
     component: typeof MediaCard;
+    tags: string[];
     argTypes: {
         selected: {
             defaultValue: boolean;
@@ -26,31 +28,15 @@ declare const meta: {
                 action: string;
             };
         };
+        onAddTag: {
+            handleClick: {
+                action: string;
+            };
+        };
     };
 };
 export default meta;
-export declare const Default: {
-    args: {
-        filename: string;
-        url: string;
-        extension: string;
-        width: number;
-        height: number;
-        size: number;
-    };
-    name: string;
-    render: (args: {
-        url: string;
-        filename: string;
-        extension: string;
-        kind?: string | undefined;
-        width?: number | undefined;
-        height?: number | undefined;
-        selected?: boolean | undefined;
-        loading?: boolean | undefined;
-        status?: import("../MediaProgress").Status | undefined;
-        size?: number | undefined;
-        onCardClick?: (() => void) | undefined;
-        onCheckedChange?: ((checked: boolean) => void) | undefined;
-    }) => JSX.Element;
-};
+type Story = StoryObj<typeof meta>;
+export declare const StaticMediaCard: Story;
+export declare const DynamicMediaCard: Story;
+export declare const TaglessMediaCard: Story;

package/dist/components/OverflowContainer/OverflowContainer.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import { type ThemeKeys } from "../../theme/new";
+type Gap = Extract<ThemeKeys<"space">, number>;
+interface OverflowContainerProps {
+    children: ReactNode[];
+    /**
+     * simulates a gap by adding a right margin to each item,
+     * required so that gap is included within width calculations
+     */
+    gap?: Gap;
+}
+export declare function OverflowContainer(props: OverflowContainerProps): JSX.Element;
+interface OverflowItemProps {
+    children: ReactNode;
+}
+export declare function OverflowItem(props: OverflowItemProps): JSX.Element;
+interface OverflowAdornmentProps {
+    adornment: ({ numberOfVisibleItems }: {
+        numberOfVisibleItems: number;
+    }) => ReactNode;
+}
+export declare function OverflowEndAdornment(props: OverflowAdornmentProps): JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+import { OverflowContainer } from "./OverflowContainer";
+declare const meta: {
+    title: string;
+    component: typeof OverflowContainer;
+    tags: string[];
+    argTypes: {
+        gap: {
+            control: string;
+            options: number[];
+        };
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+        children: import("react").ReactNode[];
+        gap?: (0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100) | undefined;
+    }>) => JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutAdornment: Story;
+export declare const WithString: Story;

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

@@ -0,0 +1 @@
+export { OverflowContainer, OverflowEndAdornment, OverflowItem } from "./OverflowContainer";

package/dist/components/ProgressCircle/ProgressCircle.d.ts

@@ -1,6 +1,6 @@
-import { type ThemeColor } from "../../theme/colors";
+import { type ThemeKeys } from "../../theme/new";
 export interface ProgressCircleProps {
-    color?: ThemeColor;
+    color?: ThemeKeys<"color">;
 }
 /**
  * ProgressCircle.

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -1,9 +1,9 @@
 import { type CSSProperties, type ReactNode } from "react";
-import * as styles from "./ScrollArea.css";
 export interface ScrollAreaProps {
+    "aria-label"?: string;
     children?: ReactNode;
     className?: string;
-    direction?: keyof typeof styles.direction;
+    direction?: "horizontal" | "vertical";
     style?: CSSProperties;
     onScrollToBottom?: () => void;
     /**

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./ScrollArea").ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;
 export declare const Default: {

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,10 +1,20 @@
+import { type AriaRole, type FocusEvent } from "react";
 import type { SX } from "../../theme/new";
 export interface SearchInputProps {
     value: string;
+    onValueChange: (value: string) => void;
     placeholder?: string;
     maxLength?: number;
     isLoading?: boolean;
     sx?: SX;
-    onValueChange: (value: string) => void;
+    role?: AriaRole;
+    onFocus?: (event: FocusEvent<HTMLInputElement, Element>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement, Element>) => void;
+    endAdornment?: boolean;
+    /**
+     * AutoFocus can cause assesibilty issues when used, especially in forms.
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_concerns
+     */
+    autoFocus?: boolean;
 }
-export declare function SearchInput(props: SearchInputProps): JSX.Element;
+export declare const SearchInput: import("react").ForwardRefExoticComponent<SearchInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,7 +1,8 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./SearchInput").SearchInputProps>;
+/// <reference types="react" />
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./SearchInput").SearchInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default _default;
 export declare const Default: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./SearchInput").SearchInputProps>;
+    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./SearchInput").SearchInputProps & import("react").RefAttributes<HTMLInputElement>>;
     args: {
         value: string;
         placeholder: string;

package/dist/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { SX } from "../../theme/new";
+import { type SX } from "../../theme/new";
 import { type IconName } from "../Icon";
 export interface SelectProps<VALUE extends string> {
     disabled?: boolean;

package/dist/components/Separator/Separator.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { SX } from "../../theme/new";
 export interface SeparatorProps {
     /**

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const meta: {
     title: string;
     component: import("react").ForwardRefExoticComponent<import("./Separator").SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import type { SX, ThemeKeys } from "../../theme/new";
 export interface Props {
     component?: "span";
@@ -5,6 +6,10 @@ export interface Props {
     color?: ThemeKeys<"color", "grey1" | "grey5">;
     width?: number | string;
     height?: number | string;
+    /**
+     * Alternatively to setting an explicit width and/or height, a Skeleton can take children and be implicitely sized to match it, which can improve the fidelity of the Skeleton's size.
+     */
+    children?: ReactNode;
     sx?: SX;
 }
 export declare function Skeleton(props: Props): import("react").DetailedReactHTMLElement<{
@@ -20,15 +25,16 @@ export declare function Skeleton(props: Props): import("react").DetailedReactHTM
         justifySelf?: "center" | "stretch" | undefined;
         visibility?: "hidden" | "visible" | undefined;
         position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
-        marginLeft?: 0 | 2 | 1 | "auto" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-        marginRight?: 0 | 2 | 1 | "auto" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-        marginTop?: 0 | 2 | 1 | "auto" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-        marginBottom?: 0 | 2 | 1 | "auto" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-        marginInline?: 0 | 2 | 1 | "auto" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-        marginBlock?: 0 | 2 | 1 | "auto" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-        top?: 0 | 2 | 1 | "auto" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-        left?: 0 | 2 | 1 | "auto" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-        right?: 0 | 2 | 1 | "auto" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
-        bottom?: 0 | 2 | 1 | "auto" | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        marginLeft?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        marginRight?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        marginTop?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        marginBottom?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        marginInline?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        marginBlock?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        top?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        left?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        right?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        bottom?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
+        borderRadius?: 0 | 2 | 1 | "50%" | "100%" | "inherit" | 4 | 6 | 8 | 10 | 12 | undefined;
     };
 }, HTMLElement>;

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

@@ -1,11 +1,54 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Skeleton").Props>;
-export default _default;
+/// <reference types="react" />
+import { Skeleton } from "./Skeleton";
+declare const meta: {
+    title: string;
+    component: typeof Skeleton;
+    argTypes: {
+        width: {
+            control: {
+                type: string;
+            };
+        };
+        height: {
+            control: {
+                type: string;
+            };
+        };
+        color: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        borderRadius: {
+            control: {
+                type: string;
+            };
+            options: number[];
+        };
+        children: {
+            control: {
+                disable: boolean;
+            };
+        };
+    };
+};
+export default meta;
 export declare const Default: {
+    render: (args: {
+        component?: "span" | undefined;
+        borderRadius?: 0 | "100%" | 4 | 6 | 12 | undefined;
+        color?: "grey1" | "grey5" | undefined;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+        children?: import("react").ReactNode;
+        sx?: import("../../theme/new").SX | undefined;
+    }) => JSX.Element;
     args: {
         width: number;
         height: number;
-        color: string;
-        borderRadius: number;
+        color: "grey5";
+        borderRadius: 6;
     };
     name: string;
 };

package/dist/components/Slice/SliceSelectCard.d.ts

@@ -8,5 +8,6 @@ export interface SliceSelectCardProps {
     variation?: string;
     children: ReactNode;
     onClick: () => void;
+    disabled?: boolean;
 }
 export declare function SliceSelectCard(props: SliceSelectCardProps): JSX.Element;

package/dist/components/Suspense/AnimatedSuspense.d.ts

@@ -1,9 +1,9 @@
 import { type ReactNode } from "react";
-import { type Sprinkles } from "../../theme/sprinkles.css";
+import type { ThemeKeys } from "../../theme/new";
 interface AnimatedSuspenseProps {
     children: ReactNode;
     fallback?: ReactNode;
-    animationDuration?: Sprinkles["animationDuration"];
+    animationDuration?: ThemeKeys<"transitionDuration">;
 }
 export declare function AnimatedSuspense(props: AnimatedSuspenseProps): JSX.Element;
 export {};

package/dist/components/Table/Table.d.ts

@@ -5,6 +5,8 @@ export interface TableProps {
     columnLayout: string;
     isLoading?: boolean;
     isInteractive?: boolean;
+    border?: boolean;
+    radius?: boolean;
 }
 /**
  * Outer table component. This should wrap any table header and body in order to