@prismicio/editor-ui 0.4.15 → 0.4.17

package/README.md

@@ -16,3 +16,15 @@
 3. You can repeat 1. and 2. as many times as needed.
 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.
+
+## Mark components or functions as private.
+
+In some cases a subset of functions are only used within `editor-ui` and should not be available outside of the package.
+By using TSDoc we can mark our these functions as `private`, thereby showing intent. If you were to export this function from the package, there would greater sentiment to evaluate if that is indeed the desired outcome.
+
+```ts
+/**
+ * @private
+ * This is an internal component we will always use this within the context of a xyz component.
+ */
+```

package/dist/components/ActionList/ActionList.d.ts

@@ -1,6 +1,10 @@
 import { type MouseEvent, type PropsWithChildren, type ReactNode } from "react";
 import { type IconName } from "../Icon";
-export declare function ActionList(props: PropsWithChildren): JSX.Element;
+export type ActionListVariants = "Borderless" | "Bordered";
+export interface ActionListProps extends PropsWithChildren {
+    variant?: ActionListVariants;
+}
+export declare function ActionList(props: ActionListProps): JSX.Element;
 export interface ActionListItemProps {
     children: ReactNode;
     color?: "grey" | "tomato";

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

@@ -1,6 +1,4 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
-    children?: import("react").ReactNode;
-}>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./ActionList").ActionListProps>;
 export default _default;
 export declare const Default: {
     args: {

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

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
+import type { SX } from "../../theme/new/sx";
 import { type Sprinkles } from "../../theme/sprinkles.css";
-import { type SX } from "../../theme/util";
 export interface AnimatedElementProps {
     children: OnlyChild;
     animation?: {

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

@@ -5,7 +5,7 @@ export declare const Badge: import("react").ForwardRefExoticComponent<Readonly<{
     size?: "medium" | "large" | undefined;
     width?: "restricted" | "unrestricted" | undefined;
     onClose?: (() => void) | undefined;
-    icon?: "visibility" | "add" | "code" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "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" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "search" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
+    icon?: "visibility" | "search" | "link" | "description" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
     onClick?: (() => void) | undefined;
     selected?: boolean | undefined;
     onMouseEnter?: (() => void) | undefined;

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

@@ -4,7 +4,7 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
     size?: "medium" | "large" | undefined;
     width?: "restricted" | "unrestricted" | undefined;
     onClose?: (() => void) | undefined;
-    icon?: "visibility" | "add" | "code" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "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" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "search" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
+    icon?: "visibility" | "search" | "link" | "description" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
     onClick?: (() => void) | undefined;
     selected?: boolean | undefined;
     onMouseEnter?: (() => void) | undefined;

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

@@ -1,5 +1,5 @@
 import { type KeyboardEvent, type ReactNode } from "react";
-import { type SX } from "../../theme/util";
+import type { SX } from "../../theme/new/sx";
 import * as styles from "./BaseInput.css";
 export interface BaseInputProps {
     autoComplete?: string;

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

@@ -22,7 +22,7 @@ export type BoxProps = {
     transition?: Transition;
     padding?: Padding;
     border?: Border;
-    borderRadius?: Sprinkles["borderRadius"];
+    borderRadius?: BorderRadius;
     borderStyle?: Sprinkles["borderStyle"];
     boxShadow?: Sprinkles["boxShadow"];
     backgroundColor?: ThemeColor;
@@ -30,6 +30,8 @@ export type BoxProps = {
     visibility?: Sprinkles["visibility"];
     overflowY?: Sprinkles["overflowY"];
     overflow?: Sprinkles["overflow"];
+    gridColumn?: string;
+    gridRow?: string;
 } & DisplayProps;
 type DisplayProps = {
     gap?: Sprinkles["gap"];
@@ -66,6 +68,12 @@ type Padding = Sprinkles["padding"] | {
     left?: Sprinkles["padding"];
     right?: Sprinkles["padding"];
 };
+type BorderRadius = Sprinkles["borderRadius"] | {
+    topLeft?: Sprinkles["borderRadius"];
+    topRight?: Sprinkles["borderRadius"];
+    bottomLeft?: Sprinkles["borderRadius"];
+    bottomRight?: Sprinkles["borderRadius"];
+};
 type Border = boolean | {
     top?: boolean;
     bottom?: boolean;

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

@@ -4,7 +4,7 @@ export declare const content: string;
 export declare const dimContent: string;
 export declare const hiddenContent: string;
 export declare const iconOnly: string;
-export declare const size: Record<"medium" | "large" | "small", string>;
+export declare const size: Record<"small" | "medium" | "large", string>;
 export declare const variant: {
     primary: string;
     secondary: string;

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

@@ -1,5 +1,5 @@
 import { type MouseEvent, type ReactNode } from "react";
-import { type SX } from "../../theme/util";
+import type { SX } from "../../theme/new/sx";
 import { type IconName } from "../Icon";
 import * as styles from "./Button.css";
 export interface ButtonProps {

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

@@ -1,18 +1,19 @@
 import { type ReactNode } from "react";
-import type * as buttonStyles from "../Button/Button.css";
-type ButtonGroupContextValue = Readonly<{
-    disabled?: boolean;
-    size: keyof typeof buttonStyles.size;
-    variant: keyof typeof buttonStyles.variant;
-}>;
-export declare const ButtonGroup: import("react").ForwardRefExoticComponent<Partial<Readonly<{
-    disabled?: boolean | undefined;
-    size: keyof typeof buttonStyles.size;
-    variant: keyof typeof buttonStyles.variant;
-}>> & Readonly<{
+import type { SX } from "../../theme/new/sx";
+export interface ButtonGroupProps {
     children?: ReactNode;
-    className?: string | undefined;
-    density?: "compact" | "regular" | undefined;
-}> & import("react").RefAttributes<HTMLDivElement>>;
+    className?: string;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    variant?: "primary" | "secondary" | "tertiary";
+    density?: "regular" | "compact";
+    sx?: SX;
+}
+export declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+interface ButtonGroupContextValue {
+    disabled?: boolean;
+    size: "small" | "medium" | "large";
+    variant: "primary" | "secondary" | "tertiary";
+}
 export declare function useButtonGroup(): ButtonGroupContextValue | undefined;
 export {};

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

@@ -1,12 +1,4 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Partial<Readonly<{
-    disabled?: boolean | undefined;
-    size: "medium" | "large" | "small";
-    variant: "primary" | "secondary" | "tertiary";
-}>> & Readonly<{
-    children?: import("react").ReactNode;
-    className?: string | undefined;
-    density?: "compact" | "regular" | undefined;
-}> & import("react").RefAttributes<HTMLDivElement>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./ButtonGroup").ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;
 export declare const Default: {
     args: {

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

@@ -1,5 +1,5 @@
 import type { PropsWithChildren, ReactNode } from "react";
-import { type SX } from "../../theme/util";
+import type { SX } from "../../theme/new/sx";
 import * as styles from "./Card.css";
 export interface CardProps {
     children?: ReactNode;

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

@@ -1,7 +1,9 @@
-import { type SX } from "../../theme/util";
+import { Time } from "@internationalized/date";
+import type { SX } from "../../theme/new/sx";
 export type DateInputProps = {
     value?: Date;
     mode: Mode;
+    defaultTime?: Time;
     readOnly?: boolean;
     /**
      * The minimum allowed date that a user may select.

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

@@ -1,3 +1,9 @@
-import type { DateValue } from "@internationalized/date";
+import { CalendarDate, type DateValue, type Time, ZonedDateTime } from "@internationalized/date";
 import { type AriaDateFieldProps } from "@react-aria/datepicker";
-export declare const DateSegments: (props: AriaDateFieldProps<DateValue>) => JSX.Element;
+interface DateSegmentsProps {
+    ariaDateFieldProps: AriaDateFieldProps<DateValue>;
+    defaultTime?: Time;
+    placeholderValue: CalendarDate | ZonedDateTime;
+}
+export declare function DateSegments(props: DateSegmentsProps): JSX.Element;
+export {};

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

@@ -1,6 +1,5 @@
 import type { FC, PropsWithChildren, ReactNode } from "react";
 import { type IconName } from "../Icon";
-import * as styles from "./Dialog.css";
 export interface Custom {
     width: number | "auto";
     height: number | "auto";
@@ -13,8 +12,8 @@ export interface DialogProps {
     onOpenChange?: (open: boolean) => void;
     onAnimationEnd?: () => void;
     hasClose?: boolean;
-    size?: keyof typeof styles.containerSize | "fullscreen" | Custom;
-    position?: keyof typeof styles.containerPosition;
+    size?: "small" | "large" | "fullscreen" | Custom;
+    position?: "center" | "bottomRight";
 }
 /**
  * A Dialog rendered in document.body.
@@ -38,6 +37,11 @@ type ActionsProps = {
     cancel?: {
         text: string;
     };
+    /**
+     * If true, the actions will be rendered in the dialog grid area `footer`.
+     */
+    asFooter?: boolean;
+    size?: "medium" | "large";
 };
 export declare const DialogActions: FC<ActionsProps>;
 export {};

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

@@ -1,5 +1,6 @@
+import type { DialogProps } from "./Dialog";
 export declare const DialogActionsStory: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./Dialog").DialogProps>;
+    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, DialogProps>;
     args: {
         open: boolean;
         trigger: JSX.Element;
@@ -14,10 +15,10 @@ export declare const DialogOptionsStory: {
     };
     name: string;
 };
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Dialog").DialogProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, DialogProps>;
 export default _default;
 export declare const Default: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./Dialog").DialogProps>;
+    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, DialogProps>;
     args: {
         open: boolean;
         modal: boolean;

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

@@ -1,16 +1,30 @@
 import type { ReactNode } from "react";
+import type { SX } from "../../../theme/new/sx";
 import { type IconName } from "../../Icon";
 export interface DialogOptionsProps {
     value?: string;
     onValueChange?: (newValue: string) => void;
     children: ReactNode;
+    sx?: SX;
+    /**
+     * Determines the padding for the dialog options panel
+     * @default medium
+     */
+    padding?: "small" | "medium";
+    /**
+     * Determines the width of the dialog options panel based on set of options.
+     *
+     * @param auto - Add auto width to the panel and let it grow with its content
+     * @default large
+     */
+    width?: "large" | "auto";
 }
-export declare const DialogOptions: ({ value, onValueChange, children }: DialogOptionsProps) => JSX.Element;
+export declare const DialogOptions: ({ value, onValueChange, children, width, padding }: DialogOptionsProps) => JSX.Element;
 interface DialogOptionsItemProps {
     value: string;
     icon?: IconName;
-    title: string;
-    subtitle: string;
+    title?: string;
+    subtitle?: string;
 }
 export declare const DialogOptionsItem: ({ value, icon, title, subtitle }: DialogOptionsItemProps) => JSX.Element;
 export {};

package/dist/components/EditableText/EditableText.d.ts

@@ -1,6 +1,7 @@
 import { colors } from "../../theme/colors";
 import { variant as textVariants } from "../Text/Text.css";
 export interface EditableTextProps {
+    "aria-label": string;
     value: string;
     onFocus?: () => void;
     onBlur?: () => void;

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

@@ -3,6 +3,7 @@ export default _default;
 export declare const Default: {
     render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./EditableText").EditableTextProps>;
     args: {
+        "aria-label": string;
         value: string;
         color: string;
         variant: string;

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

@@ -1,10 +1,25 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Field").FieldProps & import("react").RefAttributes<HTMLDivElement>>;
-export default _default;
-export declare const ExampleFieldChildren: import("react").FunctionComponentElement<{}>;
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./Field").FieldProps & import("react").RefAttributes<HTMLDivElement>>;
+    argTypes: {
+        children: {
+            control: {
+                disable: boolean;
+            };
+        };
+        labelPosition: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+    };
+};
+export default meta;
 export declare const Default: {
     args: {
-        children: import("react").FunctionComponentElement<{}>;
-        labelPosition: string;
+        children: import("react").FunctionComponentElement<any>;
+        labelPosition: "top";
     };
     name: string;
 };

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

@@ -1,6 +1,6 @@
 import type { Handler } from "@prismicio/editor-support/Type";
 import type { ReactNode } from "react";
-import { type SX } from "../../theme/util";
+import type { SX } from "../../theme/new/sx";
 export interface FormProps {
     children?: ReactNode;
     sx?: SX;

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

@@ -1,8 +1,10 @@
-import type { SX } from "../../theme/util";
+import { Time } from "@internationalized/date";
+import type { SX } from "../../theme/new/sx";
 import type { DateInputProps } from "../DateInput/DateInput";
 export interface FormDateInputProps {
     label: string;
     value?: Date;
+    defaultTime?: Time;
     mode: DateInputProps["mode"];
     /**
      * The minimum allowed date that a user may select.

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type SX } from "../../theme/util";
+import type { SX } from "../../theme/new/sx";
 export type FormFieldProps = {
     children?: ReactNode;
     disabled?: boolean;

package/dist/components/Gradient/Gradient.d.ts

@@ -1,4 +1,4 @@
-import { type SX } from "../../theme/util";
+import type { SX } from "../../theme/new/sx";
 export interface GradientProps {
     sx?: SX;
 }

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

@@ -1,5 +1,5 @@
 import { type MouseEvent } from "react";
-import { type SX } from "../../theme/util";
+import type { SX } from "../../theme/new/sx";
 import { type IconName } from "../Icon";
 export interface HairlineButtonProps {
     icon: IconName;

package/dist/components/HeaderTabLink/HeaderTabLink.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    text: string;
+    selected: boolean;
+    disabled?: boolean;
+    renderLink: (children: JSX.Element) => JSX.Element;
+}
+export declare function HeaderTabLink(props: Props): JSX.Element;
+export {};

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

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

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

@@ -1,5 +1,5 @@
 import { type ThemeColor } from "../../theme/colors";
-import { type SX } from "../../theme/util";
+import type { SX } from "../../theme/new/sx";
 import * as styles from "./Icon.css";
 import type { IconName } from "./iconNames";
 export interface IconProps {

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

@@ -1,2 +1,2 @@
-export declare const iconNames: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "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", "notes", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
+export declare const iconNames: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "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", "notes", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
 export type IconName = typeof iconNames[number];

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

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

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

@@ -1,13 +1,17 @@
-import type { ThemeColor } from "../../theme/colors";
+import { type MouseEvent } from "react";
 import type { IconName } from "../Icon/iconNames";
 import * as styles from "./IconButton.css";
 export interface IconButtonProps {
-    icon: IconName;
-    size?: keyof typeof styles.size;
+    color?: keyof typeof styles.color;
     cursor?: keyof typeof styles.cursor;
     hasPadding?: boolean;
-    color?: ThemeColor;
+    icon: IconName | JSX.Element;
     loading?: boolean;
     onClick?: () => void;
+    onMouseDown?: (event: MouseEvent) => void;
+    onMouseUp?: (event: MouseEvent) => void;
+    radius?: keyof typeof styles.radius;
+    size?: keyof typeof styles.size;
+    variant?: keyof typeof styles.variant;
 }
 export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,12 +1,10 @@
 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;
-        loading: boolean;
-        hasPadding: boolean;
-        size: string;
     };
     name: string;
 };

package/dist/components/NumberInput/NumberInput.d.ts

@@ -1,4 +1,4 @@
-import type { SX } from "../../theme/util";
+import type { SX } from "../../theme/new/sx";
 export interface NumberInputProps {
     autoComplete?: string;
     id?: string;

package/dist/components/Radio/RadioGroup.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type SX } from "../../theme/util";
+import type { SX } from "../../theme/new/sx";
 export interface RadioGroupProps<VALUE extends string> {
     values: readonly VALUE[];
     selectedValue: VALUE;

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

@@ -3,3 +3,4 @@ export declare const direction: {
     horizontal: string;
     vertical: string;
 };
+export declare const gradient: string;

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

@@ -6,5 +6,15 @@ export interface ScrollAreaProps {
     direction?: keyof typeof styles.direction;
     style?: CSSProperties;
     onScrollToBottom?: () => void;
+    /**
+     * Adds a set of controls to the scroll area.
+     * @default false
+     */
+    controls?: boolean;
+    /**
+     * The threshold for triggering the onScrollToBottom function.
+     * @default 50
+     */
+    treshold?: number;
 }
 export declare function ScrollArea(props: ScrollAreaProps): JSX.Element;

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

@@ -8,3 +8,12 @@ export declare const Default: {
     };
     name: string;
 };
+export declare const ScrollAreaWithControls: {
+    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./ScrollArea").ScrollAreaProps>;
+    args: {
+        children: JSX.Element[];
+        direction: string;
+        controls: boolean;
+    };
+    name: string;
+};

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

@@ -0,0 +1,14 @@
+import { type PropsWithChildren, type RefObject } from "react";
+interface ScrollAreaControlsProps extends PropsWithChildren {
+    /**
+     * A reference to the scroll area component.
+     */
+    scrollAreaRef: RefObject<HTMLDivElement>;
+    direction?: "vertical" | "horizontal";
+}
+/**
+ * @private
+ * This is an internal component we will always use this within the context of a ScrollArea component.
+ */
+export declare function ScrollAreaControls(props: ScrollAreaControlsProps): JSX.Element;
+export {};

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

@@ -1,7 +1,8 @@
-type Props = Readonly<{
+export interface SearchInputProps {
     value: string;
     onValueChange: (value: string) => void;
     placeholder?: string;
-}>;
-export declare const SearchInput: ({ onValueChange, value, ...props }: Props) => JSX.Element;
-export {};
+    maxLength?: number;
+    isLoading?: boolean;
+}
+export declare function SearchInput(props: SearchInputProps): JSX.Element;

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

@@ -1,18 +1,11 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Readonly<{
-    value: string;
-    onValueChange: (value: string) => void;
-    placeholder?: string | undefined;
-}>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./SearchInput").SearchInputProps>;
 export default _default;
 export declare const Default: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, Readonly<{
-        value: string;
-        onValueChange: (value: string) => void;
-        placeholder?: string | undefined;
-    }>>;
+    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./SearchInput").SearchInputProps>;
     args: {
         value: string;
         placeholder: string;
+        isLoading: boolean;
     };
     name: string;
 };

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { type SX } from "../../theme/util";
+import type { SX } from "../../theme/new/sx";
 import type * as buttonStyles from "../Button/Button.css";
 import { type IconName } from "../Icon";
 export interface SelectProps<VALUE extends string> {

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

@@ -1,4 +1,4 @@
-import { type SX } from "../../theme/util";
+import type { SX } from "../../theme/new/sx";
 export interface SeparatorProps {
     /**
      * Either `vertical` or `horizontal`. Defaults to `horizontal`.