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

package/dist/components/toast/toast-provider.css

@@ -1,103 +1,106 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._viewport_x67qw_3 {
+  ._viewport_1majn_3 {
     position: fixed;
     inset-block: auto var(--toast-viewport-inset, var(--sys-unit-16));
     inset-inline: auto var(--toast-viewport-inset, var(--sys-unit-16));
     display: flex;
     flex-direction: column;
-    gap: var(--sys-unit-8);
+    gap: var(--toast-viewport-gap, var(--sys-unit-8));
     inline-size: var(--toast-width, min(24rem, 100vw - 2rem));
   }
-  ._viewport_x67qw_3 {
+  ._viewport_1majn_3 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._viewport_x67qw_3:focus-visible {
+  ._viewport_1majn_3:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._toast_x67qw_19 {
+  ._toast_1majn_19 {
     --_toast-fg: var(--sys-color-text);
     --_toast-bg: var(--sys-color-surface-overlay-high);
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
-    row-gap: var(--sys-unit-6);
+    row-gap: var(--toast-gap, var(--sys-unit-6));
     box-sizing: border-box;
     border-radius: var(--toast-radius, var(--sys-radius-md));
     background: var(--toast-bg, var(--_toast-bg));
-    box-shadow: var(--sys-elevation-2);
-    padding: var(--sys-unit-8);
+    box-shadow: var(--toast-shadow, var(--sys-elevation-2));
+    padding: var(--toast-pad, var(--sys-unit-8));
     color: var(--toast-fg, var(--_toast-fg));
-    font: var(--sys-font-body-medium);
+    font: var(--toast-font, var(--sys-font-body-medium));
   }
   @media not (prefers-reduced-motion) {
-    ._toast_x67qw_19 {
+    ._toast_1majn_19 {
       transition: opacity var(--sys-motion-short) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-emphasized);
     }
   }
-  ._toast_x67qw_19[data-starting-style], ._toast_x67qw_19[data-ending-style] {
+  ._toast_1majn_19[data-starting-style], ._toast_1majn_19[data-ending-style] {
     opacity: 0;
     scale: 0.8;
   }
-  ._toast_x67qw_19[data-tone=success] {
+  ._toast_1majn_19[data-tone=success] {
     --_toast-fg: var(--sys-color-success-fg);
     --_toast-bg: var(--sys-color-success-bg);
   }
-  ._toast_x67qw_19[data-tone=error] {
+  ._toast_1majn_19[data-tone=error] {
     --_toast-fg: var(--sys-color-error-fg);
     --_toast-bg: var(--sys-color-error-bg);
   }
-  ._toast_x67qw_19[data-tone=warning] {
+  ._toast_1majn_19[data-tone=warning] {
     --_toast-fg: var(--sys-color-warning-fg);
     --_toast-bg: var(--sys-color-warning-bg);
   }
-  ._toast_x67qw_19[data-tone=info] {
+  ._toast_1majn_19[data-tone=info] {
     --_toast-fg: var(--sys-color-info-fg);
     --_toast-bg: var(--sys-color-info-bg);
   }
-  ._icon_x67qw_59 {
+  ._icon_1majn_59 {
     display: inline-flex;
     flex-shrink: 0;
     grid-area: 1/1;
-    margin-inline-end: var(--sys-unit-4);
+    margin-inline-end: var(--toast-icon-space, var(--sys-unit-4));
     font-size: var(--toast-icon-size, 1.2em);
   }
-  ._icon_x67qw_59 > svg {
+  ._icon_1majn_59 > svg {
     inline-size: 1em;
     block-size: 1em;
     fill: currentcolor;
   }
-  ._title_x67qw_71 {
+  ._title_1majn_71 {
     grid-area: 1/2;
     min-inline-size: 0;
-    font: var(--sys-font-label-medium);
+    font: var(--toast-title-font, var(--sys-font-label-medium));
   }
-  ._close_x67qw_76 {
+  ._close_1majn_76 {
     --btn-fg: var(--toast-fg, var(--_toast-fg));
     grid-area: 1/3;
-    margin-inline-start: var(--sys-unit-6);
+    margin-inline-start: var(--toast-close-space, var(--sys-unit-6));
   }
-  ._description_x67qw_81 {
+  ._description_1majn_81 {
     grid-column: 1/-1;
-    font: var(--sys-font-body-medium);
+    font: var(--toast-description-font, var(--toast-font, var(--sys-font-body-medium)));
     text-wrap: pretty;
   }
-  ._actions_x67qw_86 {
+  ._actions_1majn_86 {
     display: flex;
     grid-column: 1/-1;
-    gap: var(--sys-unit-4);
-    margin-block-start: var(--sys-unit-2);
+    gap: var(--toast-actions-gap, var(--sys-unit-4));
+    margin-block-start: var(--toast-actions-space, var(--sys-unit-2));
   }
-  ._actions_x67qw_86 > [data-variant=primary] {
+  ._actions_1majn_86 > [data-variant=primary] {
     --btn-bg: var(--toast-fg, var(--_toast-fg));
     --btn-fg: var(--toast-bg, var(--_toast-bg));
   }
-  ._actions_x67qw_86 > [data-variant=secondary] {
-    --btn-bg: var(--sys-color-surface-overlay-high);
+  ._actions_1majn_86 > [data-variant=secondary] {
+    --btn-bg: var(
+    	--toast-action-secondary-bg,
+    	var(--sys-color-surface-overlay-high)
+    );
     --btn-fg: var(--toast-fg, var(--_toast-fg));
   }
-  ._actions_x67qw_86 > [data-variant=tertiary] {
+  ._actions_1majn_86 > [data-variant=tertiary] {
     --btn-fg: var(--toast-fg, var(--_toast-fg));
   }
 }

package/dist/components/toast/toast-provider.d.ts

@@ -8,7 +8,41 @@ export type ToastRootProps = Omit<BaseToast.Root.Props, "toast" | "className"> &
     toast: ToastObject;
     className?: string;
 }>;
-/** A toast's frame, in its tone: a dialog that holds the other parts. */
+export type ToastProviderPartProps = Readonly<{
+    /** The app, and the `Portal` holding the `Viewport`. */
+    children: ReactNode;
+}>;
+/**
+ * Provides the global {@link toastManager} to the parts inside it. It renders
+ * no element of its own.
+ *
+ * @example
+ * <Toast.Provider>
+ * 	<App />
+ * 	<Toast.Portal>
+ * 		<Toast.Viewport aria-label="Notifications">…</Toast.Viewport>
+ * 	</Toast.Portal>
+ * </Toast.Provider>
+ */
+declare const Provider: ({ children, }: ToastProviderPartProps) => ReactNode;
+export type ToastViewportProps = Omit<BaseToast.Viewport.Props, "className" | "aria-label"> & Readonly<{
+    /** The region's name, reached with F6, such as "Notifications". */
+    "aria-label": string;
+    className?: string;
+}>;
+/**
+ * The region the toasts stack in, at the corner of the screen.
+ *
+ * @example
+ * <Toast.Viewport aria-label="Notifications">{toasts}</Toast.Viewport>
+ */
+declare const Viewport: ({ className, ...props }: ToastViewportProps) => ReactNode;
+/**
+ * A toast's frame, in its tone: a dialog that holds the other parts.
+ *
+ * @example
+ * <Toast.Root toast={toast}>…</Toast.Root>
+ */
 declare const Root: ({ toast, className, ...props }: ToastRootProps) => ReactNode;
 export type ToastIconProps = ComponentPropsWithRef<"span">;
 /** The caller's glyph before the title, sized and coloured by the toast. Renders nothing without children. */
@@ -26,17 +60,24 @@ declare const Description: ({ className, ...props }: ToastDescriptionProps) => R
 export type ToastActionsProps = ComponentPropsWithRef<"div">;
 /** The row of buttons under the text, re-coloured for the toast's tone. */
 declare const Actions: ({ className, ...props }: ToastActionsProps) => ReactNode;
-export type ToastCloseProps = Readonly<{
-    /** Accessible name, such as "Close", surfaced as the tooltip hint and the `aria-label`. */
-    label: string;
-    /** The close glyph. */
-    children: ReactNode;
+export type ToastCloseProps = Omit<BaseToast.Close.Props, "className" | "render"> & Readonly<{
+    /** The button to render, such as `<IconButton label="Close" variant="tertiary" size="sm"><CloseIcon /></IconButton>`. */
+    render: NonNullable<BaseToast.Close.Props["render"]>;
     className?: string;
 }>;
-/** The icon-only button that closes the toast, named for every input. */
-declare const Close: ({ label, children, className, }: ToastCloseProps) => ReactNode;
-/** The parts of a toast, for `ToastProvider`'s `renderToast`. */
+/**
+ * The button that closes the toast, exposed to assistive tech whether or not
+ * the stack is expanded. It renders whichever button it is given.
+ *
+ * @example
+ * <Toast.Close render={<IconButton label="Close" variant="tertiary" size="sm"><CloseIcon /></IconButton>} />
+ */
+declare const Close: ({ className, ...props }: ToastCloseProps) => ReactNode;
+/** The parts of a toast, for `ToastProvider`'s `renderToast` or a viewport of the app's own. */
 export type ToastParts = Readonly<{
+    Provider: typeof Provider;
+    Portal: typeof BaseToast.Portal;
+    Viewport: typeof Viewport;
     Root: typeof Root;
     Icon: typeof Icon;
     Title: typeof Title;
@@ -45,13 +86,21 @@ export type ToastParts = Readonly<{
     Close: typeof Close;
 }>;
 /**
- * The parts of one toast: the `Root` frame in its tone, the `Icon`, `Title`,
- * `Description` and `Actions`, and the `Close` button.
+ * The parts of the toast system: the `Provider`, the `Portal` and the
+ * `Viewport` the toasts stack in, and for one toast the `Root` frame in its
+ * tone, the `Icon`, `Title`, `Description` and `Actions`, and the `Close`
+ * button. `ToastProvider` assembles the first three.
  *
  * @example
  * <Toast.Root toast={toast}>
  * 	<Toast.Title>{toast.data?.body}</Toast.Title>
- * 	<Toast.Close label="Close"><CloseIcon /></Toast.Close>
+ * 	<Toast.Close
+ * 		render={
+ * 			<IconButton label="Close" variant="tertiary" size="sm">
+ * 				<CloseIcon />
+ * 			</IconButton>
+ * 		}
+ * 	/>
  * </Toast.Root>
  */
 export declare const Toast: ToastParts;
@@ -68,8 +117,8 @@ export type ToastProviderProps = Readonly<{
     children: ReactNode;
 }>;
 /**
- * Mounts the toast system once at the app root: provides the global
- * {@link toastManager} to base-ui and renders the viewport alongside the app.
+ * Mounts the toast system once at the app root: the `Toast.Provider`, and the
+ * `Toast.Viewport` in its `Toast.Portal` alongside the app, drawing each toast.
  *
  * @example
  * <ToastProvider closeLabel="Close" closeIcon={<CloseIcon />} viewportLabel="Notifications">

package/dist/components/toast/toast-provider.js

@@ -1,17 +1,89 @@
-import { useRequiredContext } from "../../lib/use-required-context.js";
-import { Button } from "../button/button.js";
+import { Button, IconButton } from "../button/button.js";
 import { flushBufferedToasts, toastManager } from "./toast.js";
 import toast_provider_module_default from "./toast-provider.module.js";
 import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, createContext, useEffect } from "react";
+import { Fragment as Fragment$1, useEffect } from "react";
 import { Toast } from "@base-ui/react/toast";
 // src/components/toast/toast-provider.tsx
-var ToastIdContext = createContext(null);
-/** A toast's frame, in its tone: a dialog that holds the other parts. */
+/**
+* Provides the global {@link toastManager} to the parts inside it. It renders
+* no element of its own.
+*
+* @example
+* <Toast.Provider>
+* 	<App />
+* 	<Toast.Portal>
+* 		<Toast.Viewport aria-label="Notifications">…</Toast.Viewport>
+* 	</Toast.Portal>
+* </Toast.Provider>
+*/
+var Provider = (t0) => {
+	const $ = c(3);
+	const { children } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[0] = t1;
+	} else t1 = $[0];
+	useEffect(flushBufferedToasts, t1);
+	let t2;
+	if ($[1] !== children) {
+		t2 = /* @__PURE__ */ jsx(Toast.Provider, {
+			toastManager,
+			children
+		});
+		$[1] = children;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+};
+/**
+* The region the toasts stack in, at the corner of the screen.
+*
+* @example
+* <Toast.Viewport aria-label="Notifications">{toasts}</Toast.Viewport>
+*/
+var Viewport = (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 ($[3] !== className) {
+		t1 = clsx(toast_provider_module_default.viewport, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Toast.Viewport, {
+			...props,
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* A toast's frame, in its tone: a dialog that holds the other parts.
+*
+* @example
+* <Toast.Root toast={toast}>…</Toast.Root>
+*/
 var Root = (t0) => {
-	const $ = c(14);
+	const $ = c(11);
 	let className;
 	let props;
 	let toast;
@@ -26,39 +98,28 @@ var Root = (t0) => {
 		props = $[2];
 		toast = $[3];
 	}
-	const t1 = toast.id;
-	const t2 = toast.data?.tone;
-	let t3;
+	const t1 = toast.data?.tone;
+	let t2;
 	if ($[4] !== className) {
-		t3 = clsx(toast_provider_module_default.toast, className);
+		t2 = clsx(toast_provider_module_default.toast, className);
 		$[4] = className;
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== props || $[7] !== t2 || $[8] !== t3 || $[9] !== toast) {
-		t4 = /* @__PURE__ */ jsx(Toast.Root, {
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== props || $[7] !== t1 || $[8] !== t2 || $[9] !== toast) {
+		t3 = /* @__PURE__ */ jsx(Toast.Root, {
 			toast,
-			"data-tone": t2,
+			"data-tone": t1,
 			...props,
-			className: t3
+			className: t2
 		});
 		$[6] = props;
-		$[7] = t2;
-		$[8] = t3;
+		$[7] = t1;
+		$[8] = t2;
 		$[9] = toast;
-		$[10] = t4;
-	} else t4 = $[10];
-	let t5;
-	if ($[11] !== t4 || $[12] !== toast.id) {
-		t5 = /* @__PURE__ */ jsx(ToastIdContext, {
-			value: t1,
-			children: t4
-		});
-		$[11] = t4;
-		$[12] = toast.id;
-		$[13] = t5;
-	} else t5 = $[13];
-	return t5;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
 };
 /** The caller's glyph before the title, sized and coloured by the toast. Renders nothing without children. */
 var Icon = (t0) => {
@@ -188,57 +249,67 @@ var Actions = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-/** The icon-only button that closes the toast, named for every input. */
+/**
+* The button that closes the toast, exposed to assistive tech whether or not
+* the stack is expanded. It renders whichever button it is given.
+*
+* @example
+* <Toast.Close render={<IconButton label="Close" variant="tertiary" size="sm"><CloseIcon /></IconButton>} />
+*/
 var Close = (t0) => {
-	const $ = c(10);
-	const { label, children, className } = t0;
-	const id = useRequiredContext(ToastIdContext, "Toast.Close must be rendered inside <Toast.Root>.");
-	const { close } = Toast.useToastManager();
+	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(toast_provider_module_default.close, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[2] !== close || $[3] !== id) {
-		t2 = () => {
-			close(id);
-		};
-		$[2] = close;
-		$[3] = id;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== children || $[6] !== label || $[7] !== t1 || $[8] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Button, {
-			className: t1,
-			variant: "tertiary",
-			size: "sm",
-			iconOnly: true,
-			icon: children,
-			label,
-			onClick: t2
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Toast.Close, {
+			"aria-hidden": void 0,
+			...props,
+			className: t1
 		});
-		$[5] = children;
-		$[6] = label;
-		$[7] = t1;
-		$[8] = t2;
-		$[9] = t3;
-	} else t3 = $[9];
-	return t3;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 };
 /**
-* The parts of one toast: the `Root` frame in its tone, the `Icon`, `Title`,
-* `Description` and `Actions`, and the `Close` button.
+* The parts of the toast system: the `Provider`, the `Portal` and the
+* `Viewport` the toasts stack in, and for one toast the `Root` frame in its
+* tone, the `Icon`, `Title`, `Description` and `Actions`, and the `Close`
+* button. `ToastProvider` assembles the first three.
 *
 * @example
 * <Toast.Root toast={toast}>
 * 	<Toast.Title>{toast.data?.body}</Toast.Title>
-* 	<Toast.Close label="Close"><CloseIcon /></Toast.Close>
+* 	<Toast.Close
+* 		render={
+* 			<IconButton label="Close" variant="tertiary" size="sm">
+* 				<CloseIcon />
+* 			</IconButton>
+* 		}
+* 	/>
 * </Toast.Root>
 */
 var Toast$1 = {
+	Provider,
+	Portal: Toast.Portal,
+	Viewport,
 	Root,
 	Icon,
 	Title,
@@ -255,10 +326,12 @@ var DefaultToast = (t0) => {
 		t1 = data === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(Icon, { children: data.icon }),
 			/* @__PURE__ */ jsx(Title, { children: data.title ?? data.body }),
-			/* @__PURE__ */ jsx(Close, {
+			/* @__PURE__ */ jsx(Close, { render: /* @__PURE__ */ jsx(IconButton, {
+				variant: "tertiary",
+				size: "sm",
 				label: closeLabel,
 				children: closeIcon
-			}),
+			}) }),
 			data.title === void 0 ? null : /* @__PURE__ */ jsx(Description, { children: data.body }),
 			data.actions && data.actions.length > 0 ? /* @__PURE__ */ jsx(Actions, { children: data.actions.map(_temp) }) : null
 		] });
@@ -299,8 +372,8 @@ var ToastList = (t0) => {
 	return t1;
 };
 /**
-* Mounts the toast system once at the app root: provides the global
-* {@link toastManager} to base-ui and renders the viewport alongside the app.
+* Mounts the toast system once at the app root: the `Toast.Provider`, and the
+* `Toast.Viewport` in its `Toast.Portal` alongside the app, drawing each toast.
 *
 * @example
 * <ToastProvider closeLabel="Close" closeIcon={<CloseIcon />} viewportLabel="Notifications">
@@ -308,54 +381,44 @@ var ToastList = (t0) => {
 * </ToastProvider>
 */
 var ToastProvider = (t0) => {
-	const $ = c(13);
+	const $ = c(12);
 	const { closeLabel, closeIcon, viewportLabel, renderToast, children } = t0;
 	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = [];
-		$[0] = t1;
-	} else t1 = $[0];
-	useEffect(flushBufferedToasts, t1);
-	let t2;
-	if ($[1] !== closeIcon || $[2] !== closeLabel || $[3] !== renderToast) {
-		t2 = renderToast ?? ((toast) => /* @__PURE__ */ jsx(DefaultToast, {
+	if ($[0] !== closeIcon || $[1] !== closeLabel || $[2] !== renderToast) {
+		t1 = renderToast ?? ((toast) => /* @__PURE__ */ jsx(DefaultToast, {
 			toast,
 			closeLabel,
 			closeIcon
 		}));
-		$[1] = closeIcon;
-		$[2] = closeLabel;
-		$[3] = renderToast;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== t2) {
-		t3 = /* @__PURE__ */ jsx(ToastList, { renderToast: t2 });
+		$[0] = closeIcon;
+		$[1] = closeLabel;
+		$[2] = renderToast;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ToastList, { renderToast: t1 });
+		$[4] = t1;
 		$[5] = t2;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== t3 || $[8] !== viewportLabel) {
-		t4 = /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
-			className: toast_provider_module_default.viewport,
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2 || $[7] !== viewportLabel) {
+		t3 = /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Viewport, {
 			"aria-label": viewportLabel,
-			children: t3
+			children: t2
 		}) });
-		$[7] = t3;
-		$[8] = viewportLabel;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== children || $[11] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(Toast.Provider, {
-			toastManager,
-			children: [children, t4]
-		});
-		$[10] = children;
+		$[6] = t2;
+		$[7] = viewportLabel;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== children || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Provider, { children: [children, t3] });
+		$[9] = children;
+		$[10] = t3;
 		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
-	return t5;
+	} else t4 = $[11];
+	return t4;
 };
 function _temp(action) {
 	return /* @__PURE__ */ jsx(Button, {

package/dist/components/toast/toast-provider.module.js

@@ -1,11 +1,11 @@
 import './toast-provider.css';// src/components/toast/toast-provider.module.scss
-var viewport = "_viewport_x67qw_3";
-var toast = "_toast_x67qw_19";
-var icon = "_icon_x67qw_59";
-var title = "_title_x67qw_71";
-var close = "_close_x67qw_76";
-var description = "_description_x67qw_81";
-var actions = "_actions_x67qw_86";
+var viewport = "_viewport_1majn_3";
+var toast = "_toast_1majn_19";
+var icon = "_icon_1majn_59";
+var title = "_title_1majn_71";
+var close = "_close_1majn_76";
+var description = "_description_1majn_81";
+var actions = "_actions_1majn_86";
 var toast_provider_module_default = {
 	viewport,
 	toast,

package/dist/components/toggle-group-field/toggle-group-field.d.ts

@@ -1,6 +1,6 @@
 import type { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 import type { ReactNode } from "react";
-import type { FieldBlurHandler, ChoiceOption, FieldProps } from "../field/index.ts";
+import { type FieldBlurHandler, type ChoiceOption, type FieldProps } from "../field/index.ts";
 export type ToggleGroupFieldProps = FieldProps & Readonly<{
     /** The choices, in the order they read. */
     options: readonly ChoiceOption[];