@prismicio/editor-ui 0.1.0 → 0.2.0

package/README.md

@@ -1,5 +1,14 @@
 # editor-ui
 
+## radix-ui GOTCHAS
+
+- When passing a React Node as children to a radix primitive that has the `asChild` prop, you must spread all unused props into that React Node, even if at the type level there doesn't seem to be any remaining props. This is because radix secretly set a lot of extra props on the React Node you gave it. For an example of this, see BaseInput's `otherProps`.
+  We favor using `asChild` to reduce the number of DOM nodes and make it easy to size children.
+
+## vanilla-extract GOTCHAS
+
+- You can not reference a parent selector that is made of ONLY `sprinkles` generated classNames. See Field.css.ts -> labelPosition to see a workaround: An empty object is passed to `styleVariant` which is equivalent to having an empty className generated with `style({})`.
+
 ## How to add a new SVG icon
 
 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.

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

@@ -0,0 +1,7 @@
+export declare const container: string;
+export declare const containerDirection: Record<"horizontal" | "vertical", string>;
+export declare const item: string;
+export declare const entering: string;
+export declare const enteringDelay: string;
+export declare const present: string;
+export declare const exiting: string;

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

@@ -0,0 +1,11 @@
+import { Key, ReactElement, ReactNode } from "react";
+import { gaps } from "../../theme/vars.css";
+interface AnimatedListProps<ITEM> {
+    gap?: keyof typeof gaps;
+    direction?: "horizontal" | "vertical";
+    items: readonly ITEM[];
+    getItemKey: (item: ITEM) => Key;
+    children: (item: ITEM, index: number) => ReactNode;
+}
+export declare function AnimatedList<ITEM>(props: AnimatedListProps<ITEM>): ReactElement;
+export {};

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

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

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

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

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

@@ -1,5 +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 startAdornment: string;
 export declare const endAdornment: string;

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

@@ -1,17 +1,19 @@
-import type { ChangeEvent, FC, FocusEvent, ReactNode } from "react";
-declare type BaseInputProps = Readonly<{
+import { ReactNode } from "react";
+import * as styles from "./BaseInput.css";
+export interface BaseInputProps {
     autoComplete?: string;
     className?: string;
-    endAdornment?: ReactNode;
     id?: string;
     inputMode?: "decimal" | "text";
     name?: string;
-    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
     readOnly?: boolean;
     startAdornment?: ReactNode;
-    value?: string;
-}>;
-export declare const BaseInput: FC<BaseInputProps>;
-export {};
+    endAdornment?: ReactNode;
+    value: string;
+    variant?: keyof typeof styles.inputColorVariant;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onChange?: (value: string) => void;
+}
+export declare const BaseInput: import("react").ForwardRefExoticComponent<BaseInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,30 +1,4 @@
 import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
-declare const _default: ComponentMeta<import("react").FC<Readonly<{
-    autoComplete?: string | undefined;
-    className?: string | undefined;
-    endAdornment?: import("react").ReactNode;
-    id?: string | undefined;
-    inputMode?: "text" | "decimal" | undefined;
-    name?: string | undefined;
-    onBlur?: ((event: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
-    onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>) => void) | undefined;
-    placeholder?: string | undefined;
-    readOnly?: boolean | undefined;
-    startAdornment?: import("react").ReactNode;
-    value?: string | undefined;
-}>>>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<import("./BaseInput").BaseInputProps & import("react").RefAttributes<HTMLInputElement>>>;
 export default _default;
-export declare const Default: ComponentStoryFn<import("react").FC<Readonly<{
-    autoComplete?: string | undefined;
-    className?: string | undefined;
-    endAdornment?: import("react").ReactNode;
-    id?: string | undefined;
-    inputMode?: "text" | "decimal" | undefined;
-    name?: string | undefined;
-    onBlur?: ((event: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
-    onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>) => void) | undefined;
-    placeholder?: string | undefined;
-    readOnly?: boolean | undefined;
-    startAdornment?: import("react").ReactNode;
-    value?: string | undefined;
-}>>>;
+export declare const Default: ComponentStoryFn<import("react").ForwardRefExoticComponent<import("./BaseInput").BaseInputProps & import("react").RefAttributes<HTMLInputElement>>>;

package/dist/components/BlankSlate/BlankSlate.d.ts

@@ -1,8 +1,7 @@
-import type { ChildrenProps } from "@prismicio/editor-support/React";
-import type { CSSProperties, FC } from "react";
+import type { CSSProperties, FC, PropsWithChildren } from "react";
 import { type IconName } from "../Icon";
 import * as styles from "./BlankSlate.css";
-export interface BlankSlateProps extends ChildrenProps {
+export interface BlankSlateProps extends PropsWithChildren {
     style?: CSSProperties;
 }
 export declare const BlankSlate: FC<BlankSlateProps>;
@@ -10,11 +9,11 @@ declare type BlankSlateIconProps = Readonly<{
     name: IconName;
 }>;
 export declare const BlankSlateIcon: FC<BlankSlateIconProps>;
-export interface BlankSlateTitleProps extends ChildrenProps {
+export interface BlankSlateTitleProps extends PropsWithChildren {
     size?: keyof typeof styles.titleSizeVariant;
 }
 export declare const BlankSlateTitle: FC<BlankSlateTitleProps>;
-export declare const BlankSlateDescription: FC<ChildrenProps>;
-export declare const BlankSlateImage: FC<ChildrenProps>;
-export declare const BlankSlateActions: FC<ChildrenProps>;
+export declare const BlankSlateDescription: FC<PropsWithChildren>;
+export declare const BlankSlateImage: FC<PropsWithChildren>;
+export declare const BlankSlateActions: FC<PropsWithChildren>;
 export {};

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<"medium" | "large" | "small", string>;
+export declare const size: Record<"small" | "medium" | "large", 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?: "medium" | "large" | "small" | undefined;
+    size?: "small" | "medium" | "large" | 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?: "medium" | "large" | "small" | undefined;
+    size?: "small" | "medium" | "large" | 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?: "medium" | "large" | "small" | undefined;
+    size?: "small" | "medium" | "large" | 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: "medium" | "large" | "small";
+    size: "small" | "medium" | "large";
     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: "medium" | "large" | "small";
+    size: "small" | "medium" | "large";
     variant: "primary" | "secondary" | "tertiary";
 }>> & Readonly<{
     children?: import("react").ReactNode;

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

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

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

@@ -0,0 +1,7 @@
+declare type Props = {
+    value: string;
+    onValueChange: (value: string) => void;
+    onFocusReady: (focus: () => void) => void;
+};
+export declare const Calendar: (props: Props) => JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,6 @@
+export declare const root: string;
+export declare const wrapper: string;
+export declare const cell: string;
+export declare const focused: string;
+export declare const selected: string;
+export declare const hidden: string;

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

@@ -0,0 +1,8 @@
+import { AriaCalendarCellProps } from "@react-aria/calendar";
+import type { CalendarState } from "@react-stately/calendar";
+declare type Props = {
+    state: CalendarState;
+    date: AriaCalendarCellProps["date"];
+};
+export declare const CalendarCell: ({ state, date }: Props) => JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,7 @@
+import { AriaCalendarGridProps } from "@react-aria/calendar";
+import type { CalendarState } from "@react-stately/calendar";
+declare type Props = AriaCalendarGridProps & {
+    state: CalendarState;
+};
+export declare const CalendarGrid: ({ state, ...props }: Props) => JSX.Element;
+export {};

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

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

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

@@ -1,5 +1,4 @@
-import type { ChildrenProps } from "@prismicio/editor-support/React";
-import type { CSSProperties, FC, ReactNode } from "react";
+import type { CSSProperties, FC, PropsWithChildren, ReactNode } from "react";
 import * as styles from "./Card.css";
 declare type CardProps = Readonly<{
     children?: ReactNode;
@@ -9,8 +8,8 @@ declare type CardProps = Readonly<{
     variant?: keyof typeof styles.variant;
 }>;
 export declare const Card: FC<CardProps>;
-export declare const CardHeader: FC<ChildrenProps>;
-export declare const CardHeaderTitle: FC<ChildrenProps>;
+export declare const CardHeader: FC<PropsWithChildren>;
+export declare const CardHeaderTitle: FC<PropsWithChildren>;
 declare type CardHeaderActionsProps = Readonly<{
     children?: ReactNode;
     style?: CSSProperties;

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

@@ -0,0 +1,11 @@
+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;
+};
+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 {};

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

@@ -0,0 +1,10 @@
+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;
+}) => 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;
+}) => JSX.Element>;

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

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

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

@@ -3,5 +3,4 @@ export declare const container: string;
 export declare const header: string;
 export declare const headerIcon: string;
 export declare const closeButton: string;
-export declare const menu: string;
 export declare const content: string;

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

@@ -1,30 +1,21 @@
-import type { ChildrenProps } from "@prismicio/editor-support/React";
-import type { CSSProperties, FC, ReactNode } from "react";
+import type { FC, PropsWithChildren, ReactNode } from "react";
 import { type IconName } from "../Icon";
 export interface DialogProps {
+    trigger?: ReactNode;
     children?: ReactNode;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    onAnimationEnd?: () => void;
 }
 /**
  * A Dialog rendered in document.body.
- * The first focusable element found in DialogContainer will automatically be focused.
+ * The first focusable child will automatically be focused.
  */
 export declare const Dialog: FC<DialogProps>;
-export declare const DialogContainer: FC<ChildrenProps & {
-    onReady?: () => void;
-}>;
-export declare const DialogHeader: FC<ChildrenProps>;
-interface DialogHeaderIconProps {
-    name: IconName;
+interface DialogHeaderProps {
+    icon: IconName;
+    title: string;
 }
-export declare const DialogHeaderIcon: FC<DialogHeaderIconProps>;
-export declare const DialogHeaderTitle: FC<ChildrenProps>;
-export declare const DialogMenu: FC<ChildrenProps>;
-declare type DialogContentProps = Readonly<{
-    children?: ReactNode;
-    style?: CSSProperties;
-}>;
-export declare const DialogContent: FC<DialogContentProps>;
-export declare const DialogTrigger: FC<ChildrenProps>;
+export declare const DialogHeader: FC<DialogHeaderProps>;
+export declare const DialogContent: FC<PropsWithChildren>;
 export {};

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

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

package/dist/components/{DialogOptions → Dialog/Options}/DialogOptions.d.ts

@@ -1,16 +1,16 @@
 import type { ReactNode } from "react";
-import { IconName } from "../Icon";
-declare type DialogOptionsProps = Readonly<{
-    value: string;
-    onValueChange: (newValue: string) => void;
+import { IconName } from "../../Icon";
+export interface DialogOptionsProps {
+    value?: string;
+    onValueChange?: (newValue: string) => void;
     children: ReactNode;
-}>;
+}
 export declare const DialogOptions: ({ value, onValueChange, children }: DialogOptionsProps) => JSX.Element;
-declare type DialogOptionsItemProps = Readonly<{
+interface DialogOptionsItemProps {
     value: string;
     icon: IconName;
     title: string;
     subtitle: string;
-}>;
+}
 export declare const DialogOptionsItem: ({ value, icon, title, subtitle }: DialogOptionsItemProps) => JSX.Element;
 export {};

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

@@ -1 +1,2 @@
-export { Dialog, DialogContainer, DialogContent, DialogHeader, DialogHeaderIcon, DialogHeaderTitle, DialogMenu, DialogTrigger } from "./Dialog";
+export { Dialog, DialogContent, DialogHeader } from "./Dialog";
+export { DialogOptions, DialogOptionsItem } from "./Options/DialogOptions";

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

@@ -1,11 +1,10 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { type FC, type ReactNode } from "react";
-import * as styles from "./Field.css";
-declare type FieldProps = Readonly<{
+export declare const Field: import("react").ForwardRefExoticComponent<Readonly<{
     children?: ReactNode;
-    labelPosition?: keyof typeof styles.labelPosition;
-}>;
-export declare const Field: FC<FieldProps>;
+    labelPosition?: "top" | "side" | undefined;
+    onMouseOverChange?: ((isMouseOver: boolean) => void) | undefined;
+}> & import("react").RefAttributes<HTMLDivElement>>;
 declare type FieldIconProps = Readonly<{
     children?: ReactNode;
 }>;

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

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

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

@@ -4,6 +4,7 @@ export declare const color: {
     inherit: string;
 };
 export declare const size: {
+    xs: string;
     small: string;
     medium: string;
     large: string;

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?: "medium" | "large" | "small" | undefined;
+    size?: "small" | "medium" | "large" | "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: "add" | "search" | "link" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "centerFocusWeak" | "check" | "close" | "cloudUpload" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "delete" | "desktopWindows" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "notes" | "phoneIphone" | "photo" | "pin" | "schedule" | "tabletMac" | "textFields" | "toggleOff" | "unfoldMore" | "viewDay" | "zoomOutMap";
-    size?: "medium" | "large" | "small" | 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;
 }> & 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: "add" | "search" | "link" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "centerFocusWeak" | "check" | "close" | "cloudUpload" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "delete" | "desktopWindows" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "imageSearch" | "keyboardArrowDown" | "keyboardArrowUp" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "notes" | "phoneIphone" | "photo" | "pin" | "schedule" | "tabletMac" | "textFields" | "toggleOff" | "unfoldMore" | "viewDay" | "zoomOutMap";
-    size?: "medium" | "large" | "small" | 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;
 }> & import("react").RefAttributes<SVGSVGElement>>>;

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

@@ -1,2 +1,2 @@
-export declare const iconNames: readonly ["add", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "centerFocusWeak", "check", "close", "cloudUpload", "crop", "cropLandscape", "cropPortrait", "dataObject", "delete", "desktopWindows", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "imageSearch", "keyboardArrowDown", "keyboardArrowUp", "link", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "notes", "phoneIphone", "photo", "pin", "schedule", "search", "tabletMac", "textFields", "toggleOff", "unfoldMore", "viewDay", "zoomOutMap"];
+export declare const iconNames: readonly ["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", "link", "linkOff", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "notes", "phoneIphone", "photo", "pin", "public", "schedule", "search", "tabletMac", "textFields", "toggleOff", "unfoldMore", "viewDay", "zoomOutMap"];
 export declare type IconName = typeof iconNames[number];

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<"contain" | "none" | "cover", string>;
+export declare const sizing: Record<"none" | "contain" | "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?: "contain" | "none" | "cover" | undefined;
+    sizing?: "none" | "contain" | "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?: "contain" | "none" | "cover" | undefined;
+    sizing?: "none" | "contain" | "cover" | undefined;
     animateOnLoad?: boolean | undefined;
     onLoad?: (() => void) | undefined;
 }>>>;

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

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

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,7 @@
+import type { FC, ReactNode } from "react";
+interface LinkProps {
+    href: string;
+    children?: ReactNode;
+}
+export declare const Link: FC<LinkProps>;
+export {};

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

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

package/dist/components/Masonry/MasonryMedia.css.d.ts

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

package/dist/components/Popover/LinkDescriptionPopover.css.d.ts

@@ -0,0 +1,3 @@
+export declare const header: string;
+export declare const kindIconContainer: string;
+export declare const linkIconContainer: string;

package/dist/components/Popover/LinkDescriptionPopover.d.ts

@@ -0,0 +1,15 @@
+import type { FC } from "react";
+import { PopoverProps } from "./Popover";
+export interface LinkDescriptionPopoverProps {
+    url: URL | undefined;
+    title: string;
+    anchor: PopoverProps["anchor"];
+    align?: PopoverProps["align"];
+    sideOffset?: PopoverProps["sideOffset"];
+    open?: PopoverProps["open"];
+    openDelay?: PopoverProps["openDelay"];
+    closeDelay?: PopoverProps["closeDelay"];
+    onOpenChange?: PopoverProps["onOpenChange"];
+    onMouseOverChange?: PopoverProps["onMouseOverChange"];
+}
+export declare const LinkDescriptionPopover: FC<LinkDescriptionPopoverProps>;

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

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

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,13 @@
+import { PopoverContentProps } from "@radix-ui/react-popover";
+import type { FC, ReactNode } from "react";
+export declare type PopoverProps = {
+    anchor: ReactNode;
+    children?: ReactNode;
+    focusOnEnter?: boolean;
+    open?: boolean;
+    openDelay?: number;
+    closeDelay?: number;
+    onOpenChange?: (open: boolean) => void;
+    onMouseOverChange?: (isMouseOver: boolean) => void;
+} & Pick<PopoverContentProps, "onInteractOutside" | "onEscapeKeyDown" | "align" | "sideOffset">;
+export declare const Popover: FC<PopoverProps>;

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

@@ -0,0 +1,6 @@
+import type { ComponentMeta, ComponentStoryFn } from "@storybook/react";
+import { LinkDescriptionPopover } from "./LinkDescriptionPopover";
+declare const _default: ComponentMeta<import("react").FC<import("./Popover").PopoverProps>>;
+export default _default;
+export declare const Default: ComponentStoryFn<import("react").FC<import("./Popover").PopoverProps>>;
+export declare const LinkDescription: ComponentStoryFn<typeof LinkDescriptionPopover>;

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

@@ -0,0 +1,2 @@
+export { LinkDescriptionPopover } from "./LinkDescriptionPopover";
+export { Popover } from "./Popover";