@igne-agency/react-web-ui 0.3.1 → 0.4.0

package/dist/components/dialog/dialog.js

@@ -1,10 +1,22 @@
 import { CloseButton as CloseButton$1 } from "../button/close-button.js";
 import dialog_module_default from "./dialog.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 // src/components/dialog/dialog.tsx
+/** Holds the dialog's open state for its parts. It renders no element of its own. */
+var Root = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+/** The dimmed layer behind a modal dialog. */
 var Backdrop = (t0) => {
 	const $ = c(8);
 	let className;
@@ -36,6 +48,7 @@ var Backdrop = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** The dialog's surface. */
 var Popup = (t0) => {
 	const $ = c(8);
 	let className;
@@ -67,6 +80,7 @@ var Popup = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** The dialog's heading, which names it. */
 var Title = (t0) => {
 	const $ = c(8);
 	let className;
@@ -100,46 +114,96 @@ var Title = (t0) => {
 };
 /** The title's line. Put a `Dialog.CloseButton` in it to trail a way out. */
 var Header = (t0) => {
-	const $ = c(5);
-	const { children, className } = t0;
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
 	let t1;
-	if ($[0] !== className) {
+	if ($[3] !== className) {
 		t1 = clsx(dialog_module_default.header, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[2] !== children || $[3] !== t1) {
+	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ jsx("div", {
 			className: t1,
-			children
+			...props
 		});
-		$[2] = children;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
 	return t2;
 };
-/** The icon-only way out, for a header or a footer. */
+/** The icon-only way out, for a header or a footer, drawn with the app's `icon`. */
 var CloseButton = (t0) => {
-	const $ = c(3);
-	const { closeLabel } = t0;
+	const $ = c(4);
+	const { closeLabel, icon } = t0;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = /* @__PURE__ */ jsx(Dialog.Close, {});
 		$[0] = t1;
 	} else t1 = $[0];
 	let t2;
-	if ($[1] !== closeLabel) {
+	if ($[1] !== closeLabel || $[2] !== icon) {
 		t2 = /* @__PURE__ */ jsx(CloseButton$1, {
 			closeLabel,
+			icon,
 			render: t1
 		});
 		$[1] = closeLabel;
-		$[2] = t2;
-	} else t2 = $[2];
+		$[2] = icon;
+		$[3] = t2;
+	} else t2 = $[3];
 	return t2;
 };
+/** `Portal`, `Backdrop` and `Popup` in one: the dialog's surface, above the page. */
+var Content = (t0) => {
+	const $ = c(9);
+	let container;
+	let props;
+	if ($[0] !== t0) {
+		({container, ...props} = t0);
+		$[0] = t0;
+		$[1] = container;
+		$[2] = props;
+	} else {
+		container = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Backdrop, {});
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props) {
+		t2 = /* @__PURE__ */ jsx(Popup, { ...props });
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== container || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Dialog.Portal, {
+			container,
+			children: [t1, t2]
+		});
+		$[6] = container;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+};
+/** The dialog's content, scrolling when it outgrows the surface. */
 var Body = (t0) => {
 	const $ = c(8);
 	let className;
@@ -171,6 +235,7 @@ var Body = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** The row the dialog's actions sit on. */
 var Footer = (t0) => {
 	const $ = c(8);
 	let className;
@@ -203,36 +268,34 @@ var Footer = (t0) => {
 	return t2;
 };
 /**
-* Dialog chrome over base-ui's Dialog. Provides `Header` / `Body` / `Footer`
-* regions plus a styled `Backdrop` and `Popup`. Footer actions are a slot.
+* A dialog over base-ui's `Dialog`, in `Header`, `Body` and `Footer` regions.
+* `Content` bundles the portal, backdrop and popup; the unbundled parts stay.
 *
 * @example
 * <Dialog.Root>
 *   <Dialog.Trigger>Edit</Dialog.Trigger>
-*   <Dialog.Portal>
-*     <Dialog.Backdrop />
-*     <Dialog.Popup>
-*       <Dialog.Header>
-*         <Dialog.Title>Discard changes?</Dialog.Title>
-*         <Dialog.CloseButton closeLabel="Close" />
-*       </Dialog.Header>
-*       <Dialog.Body>
-*         <Dialog.Description>Your edits will be lost.</Dialog.Description>
-*       </Dialog.Body>
-*       <Dialog.Footer>
-*         <Dialog.Close>Keep editing</Dialog.Close>
-*         <button onClick={discard}>Discard</button>
-*       </Dialog.Footer>
-*     </Dialog.Popup>
-*   </Dialog.Portal>
+*   <Dialog.Content>
+*     <Dialog.Header>
+*       <Dialog.Title>Discard changes?</Dialog.Title>
+*       <Dialog.CloseButton closeLabel="Close" icon={<CloseIcon />} />
+*     </Dialog.Header>
+*     <Dialog.Body>
+*       <Dialog.Description>Your edits will be lost.</Dialog.Description>
+*     </Dialog.Body>
+*     <Dialog.Footer>
+*       <Dialog.Close>Keep editing</Dialog.Close>
+*       <button onClick={discard}>Discard</button>
+*     </Dialog.Footer>
+*   </Dialog.Content>
 * </Dialog.Root>
 */
 var Dialog$1 = {
-	Root: Dialog.Root,
+	Root,
 	Trigger: Dialog.Trigger,
 	Portal: Dialog.Portal,
 	Backdrop,
 	Popup,
+	Content,
 	Title,
 	Description: Dialog.Description,
 	Close: Dialog.Close,

package/dist/components/divider/divider.js

@@ -1,7 +1,7 @@
 import divider_module_default from "./divider.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/divider/divider.tsx
 /**
 * A horizontal rule between two groups, with an optional subtitle under it.

package/dist/components/drawer/drawer.d.ts

@@ -1,7 +1,25 @@
 import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
 import type { ComponentProps, ReactNode } from "react";
 import { type CloseButtonProps } from "../button/close-button.tsx";
+export type DrawerRootProps<Payload = unknown> = Omit<BaseDrawer.Root.Props<Payload>, "open" | "defaultOpen" | "onOpenChange" | "modal" | "children" | "swipeDirection"> & Readonly<{
+    /** Whether the drawer is open. Leave it out for a drawer that keeps its own state. */
+    open?: boolean;
+    /** Whether the drawer starts open, when it keeps its own state. @default false */
+    defaultOpen?: boolean;
+    /** Called with the new open state when the drawer opens or closes. */
+    onOpenChange?: BaseDrawer.Root.Props<Payload>["onOpenChange"];
+    /** Whether focus stays inside the drawer and the page behind it is inert while it is open. @default true */
+    modal?: BaseDrawer.Root.Props<Payload>["modal"];
+    /** The edge the drawer slides in from, and the way a swipe dismisses it. @default "down" */
+    swipeDirection?: BaseDrawer.Root.Props<Payload>["swipeDirection"];
+    /** The trigger and the drawer's content. */
+    children?: BaseDrawer.Root.Props<Payload>["children"];
+}>;
+/** Holds the drawer's open state for its parts. It renders no element of its own. */
+declare const Root: <Payload>(props: DrawerRootProps<Payload>) => ReactNode;
+/** The dimmed layer behind a modal drawer. */
 declare const Backdrop: ({ className, ...props }: ComponentProps<typeof BaseDrawer.Backdrop>) => ReactNode;
+/** The fixed frame the popup slides within. */
 declare const Viewport: ({ className, ...props }: ComponentProps<typeof BaseDrawer.Viewport>) => ReactNode;
 export type DrawerPopupProps = ComponentProps<typeof BaseDrawer.Popup> & Readonly<{
     /**
@@ -10,25 +28,34 @@ export type DrawerPopupProps = ComponentProps<typeof BaseDrawer.Popup> & Readonl
      */
     filled?: boolean;
 }>;
+/** The drawer's surface: a side panel, or a bottom sheet when swiped down. */
 declare const Popup: ({ className, filled, ...props }: DrawerPopupProps) => ReactNode;
+/** The drawer's heading, which names it. */
 declare const Title: ({ className, ...props }: ComponentProps<typeof BaseDrawer.Title>) => ReactNode;
-export type DrawerHeaderProps = Readonly<{
-    children?: ReactNode;
-    className?: string;
-}>;
+export type DrawerHeaderProps = ComponentProps<"div">;
 /** The title's line. Put a `Drawer.CloseButton` in it to trail a way out. */
-declare const Header: ({ children, className, }: DrawerHeaderProps) => ReactNode;
-export type DrawerCloseButtonProps = Pick<CloseButtonProps, "closeLabel">;
-/** The icon-only way out, for a header or a footer. */
-declare const CloseButton: ({ closeLabel, }: DrawerCloseButtonProps) => ReactNode;
+declare const Header: ({ className, ...props }: DrawerHeaderProps) => ReactNode;
+export type DrawerCloseButtonProps = Pick<CloseButtonProps, "closeLabel" | "icon">;
+/** The icon-only way out, for a header or a footer, drawn with the app's `icon`. */
+declare const CloseButton: ({ closeLabel, icon, }: DrawerCloseButtonProps) => ReactNode;
+export type DrawerSheetProps = DrawerPopupProps & Readonly<{
+    /** The element the drawer is portalled into. @default document.body */
+    container?: BaseDrawer.Portal.Props["container"];
+}>;
+/**
+ * `Portal`, `Backdrop`, `Viewport`, `Popup` and `Content` in one: the drawer's
+ * surface, above the page, holding its children.
+ */
+declare const Sheet: ({ container, children, ...props }: DrawerSheetProps) => ReactNode;
 type DrawerParts = Readonly<{
-    Root: typeof BaseDrawer.Root;
+    Root: typeof Root;
     Trigger: typeof BaseDrawer.Trigger;
     Portal: typeof BaseDrawer.Portal;
     Backdrop: typeof Backdrop;
     Viewport: typeof Viewport;
     Popup: typeof Popup;
     Content: typeof BaseDrawer.Content;
+    Sheet: typeof Sheet;
     Header: typeof Header;
     Title: typeof Title;
     Close: typeof BaseDrawer.Close;
@@ -36,29 +63,20 @@ type DrawerParts = Readonly<{
     createHandle: typeof BaseDrawer.createHandle;
 }>;
 /**
- * Shared wrapper over base-ui's Drawer, mirroring its parts. Its look follows
- * `swipeDirection` on `Drawer.Root`: `"right"` slides a side panel in from the
- * right, `"down"` raises a bottom sheet up to 85dvh tall. The caller picks the
- * direction, for example from its own viewport query.
+ * A drawer over base-ui's `Drawer`: `swipeDirection="right"` slides in a side
+ * panel, `"down"` raises a bottom sheet. `Sheet` bundles the portal, backdrop,
+ * viewport, popup and content; the unbundled parts stay.
  *
  * @example
- * const handle = Drawer.createHandle();
- * const narrow = useMediaQuery("(width < 40rem)");
- *
- * <Drawer.Root handle={handle} swipeDirection={narrow ? "down" : "right"}>
- *   <Drawer.Trigger handle={handle}>Open</Drawer.Trigger>
- *   <Drawer.Portal>
- *     <Drawer.Backdrop />
- *     <Drawer.Viewport>
- *       <Drawer.Popup>
- *         <Drawer.Content>
- *           <Drawer.Title>Filters</Drawer.Title>
- *           ...
- *           <Drawer.Close>Done</Drawer.Close>
- *         </Drawer.Content>
- *       </Drawer.Popup>
- *     </Drawer.Viewport>
- *   </Drawer.Portal>
+ * <Drawer.Root swipeDirection={narrow ? "down" : "right"}>
+ *   <Drawer.Trigger>Open</Drawer.Trigger>
+ *   <Drawer.Sheet>
+ *     <Drawer.Header>
+ *       <Drawer.Title>Filters</Drawer.Title>
+ *       <Drawer.CloseButton closeLabel="Close" icon={<CloseIcon />} />
+ *     </Drawer.Header>
+ *     <Drawer.Close>Done</Drawer.Close>
+ *   </Drawer.Sheet>
  * </Drawer.Root>
  */
 export declare const Drawer: DrawerParts;

package/dist/components/drawer/drawer.js

@@ -1,10 +1,22 @@
 import { CloseButton as CloseButton$1 } from "../button/close-button.js";
 import drawer_module_default from "./drawer.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react/drawer";
 // src/components/drawer/drawer.tsx
+/** Holds the drawer's open state for its parts. It renders no element of its own. */
+var Root = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Drawer.Root, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+/** The dimmed layer behind a modal drawer. */
 var Backdrop = (t0) => {
 	const $ = c(8);
 	let className;
@@ -36,6 +48,7 @@ var Backdrop = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** The fixed frame the popup slides within. */
 var Viewport = (t0) => {
 	const $ = c(8);
 	let className;
@@ -67,6 +80,7 @@ var Viewport = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** The drawer's surface: a side panel, or a bottom sheet when swiped down. */
 var Popup = (t0) => {
 	const $ = c(10);
 	let className;
@@ -103,6 +117,7 @@ var Popup = (t0) => {
 	} else t3 = $[9];
 	return t3;
 };
+/** The drawer's heading, which names it. */
 var Title = (t0) => {
 	const $ = c(8);
 	let className;
@@ -136,80 +151,137 @@ var Title = (t0) => {
 };
 /** The title's line. Put a `Drawer.CloseButton` in it to trail a way out. */
 var Header = (t0) => {
-	const $ = c(5);
-	const { children, className } = t0;
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
 	let t1;
-	if ($[0] !== className) {
+	if ($[3] !== className) {
 		t1 = clsx(drawer_module_default.header, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[2] !== children || $[3] !== t1) {
+	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ jsx("div", {
 			className: t1,
-			children
+			...props
 		});
-		$[2] = children;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
 	return t2;
 };
-/** The icon-only way out, for a header or a footer. */
+/** The icon-only way out, for a header or a footer, drawn with the app's `icon`. */
 var CloseButton = (t0) => {
-	const $ = c(3);
-	const { closeLabel } = t0;
+	const $ = c(4);
+	const { closeLabel, icon } = t0;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = /* @__PURE__ */ jsx(Drawer.Close, {});
 		$[0] = t1;
 	} else t1 = $[0];
 	let t2;
-	if ($[1] !== closeLabel) {
+	if ($[1] !== closeLabel || $[2] !== icon) {
 		t2 = /* @__PURE__ */ jsx(CloseButton$1, {
 			closeLabel,
+			icon,
 			render: t1
 		});
 		$[1] = closeLabel;
-		$[2] = t2;
-	} else t2 = $[2];
+		$[2] = icon;
+		$[3] = t2;
+	} else t2 = $[3];
 	return t2;
 };
 /**
-* Shared wrapper over base-ui's Drawer, mirroring its parts. Its look follows
-* `swipeDirection` on `Drawer.Root`: `"right"` slides a side panel in from the
-* right, `"down"` raises a bottom sheet up to 85dvh tall. The caller picks the
-* direction, for example from its own viewport query.
+* `Portal`, `Backdrop`, `Viewport`, `Popup` and `Content` in one: the drawer's
+* surface, above the page, holding its children.
+*/
+var Sheet = (t0) => {
+	const $ = c(13);
+	let children;
+	let container;
+	let props;
+	if ($[0] !== t0) {
+		({container, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = container;
+		$[3] = props;
+	} else {
+		children = $[1];
+		container = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Backdrop, {});
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== children) {
+		t2 = /* @__PURE__ */ jsx(Drawer.Content, { children });
+		$[5] = children;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== props || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Viewport, { children: /* @__PURE__ */ jsx(Popup, {
+			...props,
+			children: t2
+		}) });
+		$[7] = props;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== container || $[11] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Drawer.Portal, {
+			container,
+			children: [t1, t3]
+		});
+		$[10] = container;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+};
+/**
+* A drawer over base-ui's `Drawer`: `swipeDirection="right"` slides in a side
+* panel, `"down"` raises a bottom sheet. `Sheet` bundles the portal, backdrop,
+* viewport, popup and content; the unbundled parts stay.
 *
 * @example
-* const handle = Drawer.createHandle();
-* const narrow = useMediaQuery("(width < 40rem)");
-*
-* <Drawer.Root handle={handle} swipeDirection={narrow ? "down" : "right"}>
-*   <Drawer.Trigger handle={handle}>Open</Drawer.Trigger>
-*   <Drawer.Portal>
-*     <Drawer.Backdrop />
-*     <Drawer.Viewport>
-*       <Drawer.Popup>
-*         <Drawer.Content>
-*           <Drawer.Title>Filters</Drawer.Title>
-*           ...
-*           <Drawer.Close>Done</Drawer.Close>
-*         </Drawer.Content>
-*       </Drawer.Popup>
-*     </Drawer.Viewport>
-*   </Drawer.Portal>
+* <Drawer.Root swipeDirection={narrow ? "down" : "right"}>
+*   <Drawer.Trigger>Open</Drawer.Trigger>
+*   <Drawer.Sheet>
+*     <Drawer.Header>
+*       <Drawer.Title>Filters</Drawer.Title>
+*       <Drawer.CloseButton closeLabel="Close" icon={<CloseIcon />} />
+*     </Drawer.Header>
+*     <Drawer.Close>Done</Drawer.Close>
+*   </Drawer.Sheet>
 * </Drawer.Root>
 */
 var Drawer$1 = {
-	Root: Drawer.Root,
+	Root,
 	Trigger: Drawer.Trigger,
 	Portal: Drawer.Portal,
 	Backdrop,
 	Viewport,
 	Popup,
 	Content: Drawer.Content,
+	Sheet,
 	Header,
 	Title,
 	Close: Drawer.Close,

package/dist/components/email-field/email-field.d.ts

@@ -1,11 +1,13 @@
 import type { ReactNode } from "react";
-import { type TextFieldClearProps, type TextPresetProps } from "../text-field/index.ts";
-export type EmailFieldProps = TextPresetProps & TextFieldClearProps;
+import { type TextFieldBaseProps, type TextFieldClearProps, type TextPresetProps } from "../text-field/index.ts";
+/** What an email field takes beside the preset props: its leading icon, and the clear button. */
+export type EmailFieldExtraProps = Pick<TextFieldBaseProps, "icon"> & TextFieldClearProps;
+export type EmailFieldProps = TextPresetProps & EmailFieldExtraProps;
 /**
  * An email address field, with the keyboard that carries an `@` and the
  * platform's own address autofill.
  *
  * @example
- * <EmailField label="Email address" optionalLabel="optional" value={email} onValueChange={setEmail} />
+ * <EmailField label="Email address" optionalLabel="optional" icon={<MailIcon />} value={email} onValueChange={setEmail} />
  */
 export declare const EmailField: ({ enterKeyHint, ...props }: EmailFieldProps) => ReactNode;

package/dist/components/email-field/email-field.js

@@ -1,4 +1,3 @@
-import SvgMail from "../../vendor/@material-design-icons/svg/outlined/mail.js";
 import { TextField } from "../text-field/text-field.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
@@ -8,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 * platform's own address autofill.
 *
 * @example
-* <EmailField label="Email address" optionalLabel="optional" value={email} onValueChange={setEmail} />
+* <EmailField label="Email address" optionalLabel="optional" icon={<MailIcon />} value={email} onValueChange={setEmail} />
 */
 var EmailField = (t0) => {
 	const $ = c(6);
@@ -29,7 +28,6 @@ var EmailField = (t0) => {
 		t2 = /* @__PURE__ */ jsx(TextField, {
 			...props,
 			enterKeyHint,
-			icon: SvgMail,
 			type: "email",
 			inputMode: "email",
 			autoComplete: "email",

package/dist/components/email-field/tsf-email-field.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
-import { type TextFieldClearProps, type TSFTextPresetProps } from "../text-field/index.ts";
-export type TSFEmailFieldProps = TSFTextPresetProps<TextFieldClearProps>;
+import { type TSFTextPresetProps } from "../text-field/index.ts";
+import { type EmailFieldExtraProps } from "./email-field.tsx";
+export type TSFEmailFieldProps = TSFTextPresetProps<EmailFieldExtraProps>;
 /**
  * `EmailField` bound to the TanStack Form field it renders in. Registered as
  * `field.EmailField`.

package/dist/components/empty-message/empty-message.d.ts

@@ -8,9 +8,9 @@ export type EmptyMessageProps = StatusPresetProps;
  *
  * @example
  * <EmptyMessage
- * 	icon={InboxIcon}
- * 	title="No declarations yet"
- * 	description="Declarations you send show up here."
+ * 	icon={<InboxIcon />}
+ * 	title="No invoices yet"
+ * 	description="Invoices you send show up here."
  * />
  */
 export declare const EmptyMessage: (props: EmptyMessageProps) => ReactNode;

package/dist/components/empty-message/empty-message.js

@@ -9,9 +9,9 @@ import { jsx } from "react/jsx-runtime";
 *
 * @example
 * <EmptyMessage
-* 	icon={InboxIcon}
-* 	title="No declarations yet"
-* 	description="Declarations you send show up here."
+* 	icon={<InboxIcon />}
+* 	title="No invoices yet"
+* 	description="Invoices you send show up here."
 * />
 */
 var EmptyMessage = (props) => {

package/dist/components/error-boundary/error-boundary.d.ts

@@ -1,6 +1,6 @@
 import type { ErrorInfo, ReactNode } from "react";
 import { type ErrorBoundaryPropsWithRender, type FallbackProps } from "react-error-boundary";
-import type { SvgComponent } from "../icon/icon.tsx";
+import { type ErrorMessageProps } from "../error-message/error-message.tsx";
 type SharedProps = Readonly<{
     children: ReactNode;
     /** Called with what was thrown, such as to log it. */
@@ -16,9 +16,11 @@ type DefaultFallbackProps = SharedProps & Readonly<{
     /** The fallback's description: what to do next, or who can help. */
     description?: string;
     /** A glyph on the fallback's error disc. */
-    icon?: SvgComponent;
+    icon?: ErrorMessageProps["icon"];
     /** The retry button's label; without it, the fallback offers no retry. */
     retryLabel?: string;
+    /** The retry button's leading glyph, such as the app's restart icon. */
+    retryIcon?: ReactNode;
     fallbackRender?: never;
 }>;
 type CustomFallbackProps = SharedProps & Readonly<{
@@ -28,6 +30,7 @@ type CustomFallbackProps = SharedProps & Readonly<{
     description?: never;
     icon?: never;
     retryLabel?: never;
+    retryIcon?: never;
 }>;
 export type ErrorBoundaryProps = DefaultFallbackProps | CustomFallbackProps;
 /**