@prismicio/editor-ui 0.1.0 → 0.3.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,8 @@
+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;
+export declare const gaps: Record<"0px" | "4px" | "6px" | "10px" | "12px" | "2px" | "8px" | "16px" | "24px" | "48px", string>;

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

@@ -0,0 +1,11 @@
+import { Key, ReactElement, ReactNode } from "react";
+import * as styles from "./AnimatedList.css";
+interface AnimatedListProps<ITEM> {
+    gap?: keyof typeof styles.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/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,5 +1,6 @@
 export declare const base: string;
 export declare const root: string;
 export declare const input: string;
+export declare const inputColorVariant: Record<"normal" | "link", 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/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/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/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/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?: "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: "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: "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: "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: "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/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/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";

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

@@ -1,15 +1,29 @@
-import * as SelectPrimitive from "@radix-ui/react-select";
+import type { SelectItemProps as RadixSelectItemProps, SelectProps as RadixSelectProps, SelectValueProps as RadixSelectValueProps } from "@radix-ui/react-select";
 import { type FC, type ReactNode } from "react";
 import type * as buttonStyles from "../Button/Button.css";
-declare type SelectProps = Readonly<Pick<SelectPrimitive.SelectProps, "autoComplete" | "children" | "name" | "onValueChange" | "value"> & Pick<SelectPrimitive.SelectValueProps, "placeholder"> & {
+import { IconName } from "../Icon";
+export interface SelectProps {
     disabled?: boolean;
     id?: string;
     inField?: boolean;
     size?: keyof typeof buttonStyles.size;
     trigger?: ReactNode;
+    icon?: IconName;
     variant?: keyof typeof buttonStyles.variant;
-}>;
+    placeholder?: RadixSelectValueProps["placeholder"];
+    autoComplete?: RadixSelectProps["autoComplete"];
+    children?: RadixSelectProps["children"];
+    name?: RadixSelectProps["name"];
+    onValueChange?: RadixSelectProps["onValueChange"];
+    value?: RadixSelectProps["value"];
+}
 export declare const Select: FC<SelectProps>;
-declare type SelectItemProps = Readonly<Pick<SelectPrimitive.SelectItemProps, "children" | "disabled" | "textValue" | "value">>;
+interface SelectItemProps {
+    icon?: IconName;
+    children?: RadixSelectItemProps["children"];
+    disabled?: RadixSelectItemProps["disabled"];
+    textValue?: RadixSelectItemProps["textValue"];
+    value: RadixSelectItemProps["value"];
+}
 export declare const SelectItem: FC<SelectItemProps>;
 export {};