@optiaxiom/react 3.0.0 → 3.0.1

package/dist/esm/packages/react/src/time/formatDate.js

@@ -1,18 +1,23 @@
+//#region src/time/formatDate.ts
 const options = {
-  date: {
-    day: "numeric",
-    month: "short",
-    year: "numeric"
-  },
-  time: {
-    hour: "numeric",
-    minute: "numeric"
-  }};
+	date: {
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	},
+	hideYear: { year: void 0 },
+	time: {
+		hour: "numeric",
+		minute: "numeric"
+	},
+	timeZone: { timeZoneName: "short" },
+	weekday: { weekday: "short" }
+};
 function formatDate(date, { showDate = true, showTime = false }) {
-  return date.toLocaleString(["default", "en-US"], {
-    ...showDate ? options.date : {},
-    ...showTime ? options.time : {}
-  });
+	return date.toLocaleString(["default", "en-US"], {
+		...showDate ? options.date : {},
+		...showTime ? options.time : {}
+	});
 }
-
+//#endregion
 export { formatDate };

package/dist/esm/packages/react/src/toast/Toast-css.js

@@ -1,10 +1,39 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-DV5cw3Ee.css';
-import './../../../../assets/src/toast/Toast.css.ts.vanilla-COlsKcWr.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var icon$3 = recipeRuntime({base:[{alignSelf:'start',mt:'4'},'_23finp']});
-var offsetVar = 'var(--_80le0c)';
-var root$2 = recipeRuntime({base:['_4k3kpm',{alignItems:'center',bg:'bg.default.inverse',color:'fg.default.inverse',display:'flex',fontSize:'md',gap:'8',maxW:'full',p:'12',pl:'16',rounded:'md',shadow:'md',w:['full','max']},'_154wjo3'],variants:{intent:{danger:'_16i52g3',information:'_1hiopn7',neutral:'_1f9vh9w',success:'_14iscbq',warning:'zs4dnf'}}});
-
-export { icon$3 as icon, offsetVar, root$2 as root };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/toast/ToastProvider.css.ts.vanilla-BvpMxeml.css";
+import "./../../../../assets/src/toast/Toast.css.ts.vanilla-BfH7_kna.css";
+//#region src/toast/Toast.css.ts
+var icon = recipeRuntime({ base: [{
+	alignSelf: "start",
+	mt: "4"
+}, "qefyy"] });
+var offsetVar = "var(--c0g20u)";
+var root = recipeRuntime({
+	base: [
+		"eihjko",
+		{
+			alignItems: "center",
+			bg: "bg.default.inverse",
+			color: "fg.default.inverse",
+			display: "flex",
+			fontSize: "md",
+			gap: "8",
+			maxW: "full",
+			p: "12",
+			pl: "16",
+			rounded: "md",
+			shadow: "md",
+			w: ["full", "max"]
+		},
+		"_1v44qx6"
+	],
+	variants: { intent: {
+		danger: "_15hkh7z",
+		information: "cqjebj",
+		neutral: "_1qsok38",
+		success: "_10acx2d",
+		warning: "_10jxbm1"
+	} }
+});
+//#endregion
+export { icon, offsetVar, root };

package/dist/esm/packages/react/src/toast/Toast.js

@@ -1,72 +1,70 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useToastProviderContext } from '@optiaxiom/globals';
-import { IconTriangleExclamation, IconCheckCircleSolid, IconCircleInfo, IconCircleExclamation, IconXmark } from '@optiaxiom/icons';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import * as RadixToast from '@radix-ui/react-toast';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { forwardRef, createElement } from 'react';
-import { Box } from '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { Icon } from '../icon/Icon.js';
-import { icon, root, offsetVar } from './Toast-css.js';
-
-const mapIntentToIcon$1 = {
-  danger: IconCircleExclamation,
-  information: IconCircleInfo,
-  neutral: IconCircleInfo,
-  success: IconCheckCircleSolid,
-  warning: IconTriangleExclamation
+import { extractBoxProps } from "../box/extractBoxProps.js";
+import { Box } from "../box/Box.js";
+import { Icon } from "../icon/Icon.js";
+import { Button } from "../button/Button.js";
+import { icon, offsetVar, root } from "./Toast-css.js";
+import { IconCheckCircleSolid, IconCircleExclamation, IconCircleInfo, IconTriangleExclamation, IconXmark } from "@optiaxiom/icons";
+import { createElement, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useToastProviderContext } from "@optiaxiom/globals";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import * as RadixToast from "@radix-ui/react-toast";
+//#region src/toast/Toast.tsx
+const mapIntentToIcon = {
+	danger: IconCircleExclamation,
+	information: IconCircleInfo,
+	neutral: IconCircleInfo,
+	success: IconCheckCircleSolid,
+	warning: IconTriangleExclamation
 };
-const Toast = forwardRef(
-  ({ children, className, intent = "neutral", onOpenChange, style, ...props }, outerRef) => {
-    const { boxProps, restProps } = extractBoxProps(props);
-    const context = useToastProviderContext("@optiaxiom/react/Toast");
-    const ref = useComposedRefs(outerRef, context.toastRef);
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        style: {
-          ...style,
-          ...assignInlineVars({
-            [offsetVar]: `${context.offset}px`
-          })
-        },
-        ...root({ intent }, className),
-        ...boxProps,
-        children: /* @__PURE__ */ jsxs(
-          RadixToast.Root,
-          {
-            forceMount: !!context,
-            onOpenChange: (open) => {
-              onOpenChange?.(open);
-              context.onOpenChange(open);
-            },
-            open: context.open,
-            ref,
-            ...restProps,
-            children: [
-              /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon(), children: createElement(mapIntentToIcon$1[intent], { filled: true }) }),
-              children,
-              /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  appearance: "inverse",
-                  "aria-label": "close",
-                  icon: /* @__PURE__ */ jsx(IconXmark, {}),
-                  size: "sm"
-                }
-              ) })
-            ]
-          }
-        )
-      }
-    );
-  }
-);
+/**
+* Display a brief notification.
+*
+* @since 0.1.0
+*/
+const Toast = forwardRef(({ children, className, intent = "neutral", onOpenChange, style, ...props }, outerRef) => {
+	const { boxProps, restProps } = extractBoxProps(props);
+	const context = useToastProviderContext("@optiaxiom/react/Toast");
+	const ref = useComposedRefs(outerRef, context.toastRef);
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		style: {
+			...style,
+			...assignInlineVars({ [offsetVar]: `${context.offset}px` })
+		},
+		...root({ intent }, className),
+		...boxProps,
+		children: /* @__PURE__ */ jsxs(RadixToast.Root, {
+			forceMount: !!context,
+			onOpenChange: (open) => {
+				onOpenChange?.(open);
+				context.onOpenChange(open);
+			},
+			open: context.open,
+			ref,
+			...restProps,
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					asChild: true,
+					...icon(),
+					children: createElement(mapIntentToIcon[intent], { filled: true })
+				}),
+				children,
+				/* @__PURE__ */ jsx(RadixToast.Close, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						appearance: "inverse",
+						"aria-label": "close",
+						icon: /* @__PURE__ */ jsx(IconXmark, {}),
+						size: "sm"
+					})
+				})
+			]
+		})
+	});
+});
 Toast.displayName = "@optiaxiom/react/Toast";
-
+//#endregion
 export { Toast };

package/dist/esm/packages/react/src/toast/ToastAction.js

@@ -1,19 +1,32 @@
 "use client";
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import * as RadixToast from '@radix-ui/react-toast';
-import { forwardRef } from 'react';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { Separator } from '../separator/Separator.js';
-
-const ToastAction = forwardRef(
-  ({ altText, appearance = "inverse", children, size = "sm", ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Separator, { alignSelf: "center", h: "sm", ml: "12", orientation: "vertical" }),
-      /* @__PURE__ */ jsx(Button, { appearance, asChild: true, size, ...props, children: /* @__PURE__ */ jsx(RadixToast.Action, { altText, ref, children }) })
-    ] });
-  }
-);
+import { Button } from "../button/Button.js";
+import { Separator } from "../separator/Separator.js";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as RadixToast from "@radix-ui/react-toast";
+//#region src/toast/ToastAction.tsx
+/**
+* @group Toast
+* @extends Button
+*/
+const ToastAction = forwardRef(({ altText, appearance = "inverse", children, size = "sm", ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator, {
+		alignSelf: "center",
+		h: "sm",
+		ml: "12",
+		orientation: "vertical"
+	}), /* @__PURE__ */ jsx(Button, {
+		appearance,
+		asChild: true,
+		size,
+		...props,
+		children: /* @__PURE__ */ jsx(RadixToast.Action, {
+			altText,
+			ref,
+			children
+		})
+	})] });
+});
 ToastAction.displayName = "@optiaxiom/react/ToastAction";
-
+//#endregion
 export { ToastAction };

package/dist/esm/packages/react/src/toast/ToastProvider-css.js

@@ -1,8 +1,25 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-DV5cw3Ee.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var gap = '16';
-var viewport = recipeRuntime({base:[{flexDirection:'column',gap:'16',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'_3zg1xj'],variants:{position:{bottom:'qtq0we','bottom-left':'_1r72eqf','bottom-right':['right-scroll-bar-position','_1n61rcy'],top:'_1ffacvq','top-left':'f148ee','top-right':['right-scroll-bar-position','_2xjs99']}}});
-
-export { gap, viewport };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/toast/ToastProvider.css.ts.vanilla-BvpMxeml.css";
+var viewport = recipeRuntime({
+	base: [{
+		flexDirection: "column",
+		gap: "16",
+		maxH: "full",
+		overflowX: "hidden",
+		overflowY: "auto",
+		p: "24",
+		w: ["full", "384"],
+		z: "toast"
+	}, "icc6rc"],
+	variants: { position: {
+		bottom: "l5is08",
+		"bottom-left": "csgm6s",
+		"bottom-right": ["right-scroll-bar-position", "lguv14"],
+		top: "_1tr685e",
+		"top-left": "_1anwhir",
+		"top-right": ["right-scroll-bar-position", "y2kv37"]
+	} }
+});
+//#endregion
+export { viewport };

package/dist/esm/packages/react/src/toast/ToastProvider.js

@@ -1,91 +1,81 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { toaster, ToastProviderProvider } from '@optiaxiom/globals';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import * as RadixToast from '@radix-ui/react-toast';
-import { forwardRef, useRef } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
-import { Group } from '../group/Group.js';
-import { Portal } from '../portal/Portal.js';
-import { Toast } from './Toast.js';
-import { ToastAction } from './ToastAction.js';
-import { gap, viewport } from './ToastProvider-css.js';
-import { ToastTitle } from './ToastTitle.js';
-import { useOverflowAnchor } from './useOverflowAnchor.js';
-
+import { extractBoxProps } from "../box/extractBoxProps.js";
+import { Group } from "../group/Group.js";
+import { Portal } from "../portal/Portal.js";
+import { Toast } from "./Toast.js";
+import { ToastAction } from "./ToastAction.js";
+import { viewport } from "./ToastProvider-css.js";
+import { ToastTitle } from "./ToastTitle.js";
+import { useOverflowAnchor } from "./useOverflowAnchor.js";
+import { forwardRef, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ToastProviderProvider, toaster } from "@optiaxiom/globals";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+import * as RadixToast from "@radix-ui/react-toast";
+//#region src/toast/ToastProvider.tsx
 const mapPositionToSwipeDirection = {
-  bottom: "down",
-  "bottom-left": "left",
-  "bottom-right": "right",
-  top: "up",
-  "top-left": "left",
-  "top-right": "right"
+	bottom: "down",
+	"bottom-left": "left",
+	"bottom-right": "right",
+	top: "up",
+	"top-left": "left",
+	"top-right": "right"
 };
-const ToastProvider = forwardRef(
-  ({
-    className,
-    container,
-    duration,
-    label,
-    position = "top-right",
-    swipeDirection,
-    swipeThreshold,
-    toaster: toasterProp = toaster,
-    ...props
-  }, outerRef) => {
-    const { boxProps, restProps } = extractBoxProps(props);
-    const toasts = useSyncExternalStore(...toasterProp.store);
-    const innerRef = useRef(null);
-    const ref = useComposedRefs(innerRef, outerRef);
-    useOverflowAnchor(
-      innerRef,
-      position.startsWith("bottom") ? "top" : "bottom"
-    );
-    if (!toasts.length) {
-      return null;
-    }
-    let exitingToastOffsets = 0;
-    return /* @__PURE__ */ jsxs(
-      RadixToast.ToastProvider,
-      {
-        duration,
-        label,
-        swipeDirection: swipeDirection ?? mapPositionToSwipeDirection[position],
-        swipeThreshold,
-        children: [
-          toasts.map(({ id, open, ref: ref2, toast }) => /* @__PURE__ */ jsx(
-            ToastProviderProvider,
-            {
-              offset: exitingToastOffsets += !open && ref2.current ? ref2.current.offsetHeight + parseInt(gap) : 0,
-              onOpenChange: () => toasterProp.remove(id),
-              open,
-              toastRef: ref2,
-              children: /* @__PURE__ */ jsxs(Toast, { intent: toast.intent || toast.type, children: [
-                /* @__PURE__ */ jsx(ToastTitle, { children: toast.title }),
-                toast.action && /* @__PURE__ */ jsx(ToastAction, { altText: toast.action, onClick: toast.onAction, children: toast.action })
-              ] }, id)
-            },
-            id
-          )),
-          /* @__PURE__ */ jsx(Portal, { asChild: true, ...container && { container }, children: /* @__PURE__ */ jsx(
-            Group,
-            {
-              alignItems: position.endsWith("left") ? "start" : position.endsWith("right") ? "end" : "center",
-              asChild: true,
-              "data-position": position,
-              flexDirection: position.startsWith("bottom") ? "column-reverse" : "column",
-              ...viewport({ position }, className),
-              ...boxProps,
-              children: /* @__PURE__ */ jsx(RadixToast.Viewport, { ref, ...restProps })
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
+/**
+* Provider component for toast notifications. This is included in AxiomProvider
+* by default - you only need to use this component directly for advanced
+* customization. Use `toaster.create()` to display toast messages.
+*
+* @category provider
+* @category feedback
+* @category overlay
+* @since 0.1.0
+*/
+const ToastProvider = forwardRef(({ className, container, duration, label, position = "top-right", swipeDirection, swipeThreshold, toaster: toasterProp = toaster, ...props }, outerRef) => {
+	const { boxProps, restProps } = extractBoxProps(props);
+	const toasts = useSyncExternalStore(...toasterProp.store);
+	const innerRef = useRef(null);
+	const ref = useComposedRefs(innerRef, outerRef);
+	useOverflowAnchor(innerRef, position.startsWith("bottom") ? "top" : "bottom");
+	if (!toasts.length) return null;
+	let exitingToastOffsets = 0;
+	return /* @__PURE__ */ jsxs(RadixToast.ToastProvider, {
+		duration,
+		label,
+		swipeDirection: swipeDirection ?? mapPositionToSwipeDirection[position],
+		swipeThreshold,
+		children: [toasts.map(({ id, open, ref, toast }) => /* @__PURE__ */ jsx(ToastProviderProvider, {
+			offset: exitingToastOffsets += !open && ref.current ? ref.current.offsetHeight + parseInt("16") : 0,
+			onOpenChange: () => toasterProp.remove(id),
+			open,
+			toastRef: ref,
+			children: /* @__PURE__ */ jsxs(Toast, {
+				intent: toast.intent || toast.type,
+				children: [/* @__PURE__ */ jsx(ToastTitle, { children: toast.title }), toast.action && /* @__PURE__ */ jsx(ToastAction, {
+					altText: toast.action,
+					onClick: toast.onAction,
+					children: toast.action
+				})]
+			}, id)
+		}, id)), /* @__PURE__ */ jsx(Portal, {
+			asChild: true,
+			...container && { container },
+			children: /* @__PURE__ */ jsx(Group, {
+				alignItems: position.endsWith("left") ? "start" : position.endsWith("right") ? "end" : "center",
+				asChild: true,
+				"data-position": position,
+				flexDirection: position.startsWith("bottom") ? "column-reverse" : "column",
+				...viewport({ position }, className),
+				...boxProps,
+				children: /* @__PURE__ */ jsx(RadixToast.Viewport, {
+					ref,
+					...restProps
+				})
+			})
+		})]
+	});
+});
 ToastProvider.displayName = "@optiaxiom/react/ToastProvider";
-
+//#endregion
 export { ToastProvider };

package/dist/esm/packages/react/src/toast/ToastTitle-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/toast/ToastTitle.css.ts.vanilla-D4o0J6xe.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var title = recipeRuntime({base:[{flex:'1'},'_3zasc8']});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/toast/ToastTitle.css.ts.vanilla-CLDEXq-2.css";
+//#region src/toast/ToastTitle.css.ts
+var title = recipeRuntime({ base: [{ flex: "1" }, "v4clh6"] });
+//#endregion
 export { title };

package/dist/esm/packages/react/src/toast/ToastTitle.js

@@ -1,15 +1,26 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixToast from '@radix-ui/react-toast';
-import { forwardRef } from 'react';
-import { Text } from '../text/Text.js';
-import { title } from './ToastTitle-css.js';
-
-const ToastTitle = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Text, { asChild: true, lineClamp: "2", ...title({}, className), ...props, children: /* @__PURE__ */ jsx(RadixToast.Title, { ref, children }) });
-  }
-);
+import { Text } from "../text/Text.js";
+import { title } from "./ToastTitle-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadixToast from "@radix-ui/react-toast";
+//#region src/toast/ToastTitle.tsx
+/**
+* @group Toast
+* @extends Text
+*/
+const ToastTitle = forwardRef(({ children, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Text, {
+		asChild: true,
+		lineClamp: "2",
+		...title({}, className),
+		...props,
+		children: /* @__PURE__ */ jsx(RadixToast.Title, {
+			ref,
+			children
+		})
+	});
+});
 ToastTitle.displayName = "@optiaxiom/react/ToastTitle";
-
+//#endregion
 export { ToastTitle };

package/dist/esm/packages/react/src/toast/useOverflowAnchor.js

@@ -1,35 +1,38 @@
 "use client";
-import { useState, useEffect, useRef } from 'react';
-
+"use client";
+import { useEffect, useRef, useState } from "react";
+//#region src/toast/useOverflowAnchor.ts
 const useOverflowAnchor = (scrollingElementRef, scrollAnchor) => {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
-  const previousScrollAnchor = useRef(scrollAnchor);
-  useEffect(() => {
-    previousScrollAnchor.current = scrollAnchor;
-  }, [scrollAnchor]);
-  useEffect(() => {
-    if (!scrollingElementRef.current) {
-      return;
-    }
-    const element = scrollingElementRef.current;
-    const listener = () => previousScrollAnchor.current = Math.ceil(Math.abs(element.scrollTop)) === element.scrollHeight - element.offsetHeight ? scrollAnchor : null;
-    element.addEventListener("scroll", listener);
-    return () => element.removeEventListener("scroll", listener);
-  }, [mounted, scrollAnchor, scrollingElementRef]);
-  useEffect(() => {
-    if (!scrollingElementRef.current) {
-      return;
-    }
-    const element = scrollingElementRef.current;
-    const mutation = new MutationObserver(() => {
-      if (previousScrollAnchor.current === scrollAnchor) {
-        element.scrollTop = (scrollAnchor === "top" ? -1 : 1) * element.scrollHeight - element.offsetHeight;
-      }
-    });
-    mutation.observe(element, { childList: true });
-    return () => mutation.disconnect();
-  }, [mounted, scrollAnchor, scrollingElementRef]);
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => setMounted(true), []);
+	const previousScrollAnchor = useRef(scrollAnchor);
+	useEffect(() => {
+		previousScrollAnchor.current = scrollAnchor;
+	}, [scrollAnchor]);
+	useEffect(() => {
+		if (!scrollingElementRef.current) return;
+		const element = scrollingElementRef.current;
+		const listener = () => previousScrollAnchor.current = Math.ceil(Math.abs(element.scrollTop)) === element.scrollHeight - element.offsetHeight ? scrollAnchor : null;
+		element.addEventListener("scroll", listener);
+		return () => element.removeEventListener("scroll", listener);
+	}, [
+		mounted,
+		scrollAnchor,
+		scrollingElementRef
+	]);
+	useEffect(() => {
+		if (!scrollingElementRef.current) return;
+		const element = scrollingElementRef.current;
+		const mutation = new MutationObserver(() => {
+			if (previousScrollAnchor.current === scrollAnchor) element.scrollTop = (scrollAnchor === "top" ? -1 : 1) * element.scrollHeight - element.offsetHeight;
+		});
+		mutation.observe(element, { childList: true });
+		return () => mutation.disconnect();
+	}, [
+		mounted,
+		scrollAnchor,
+		scrollingElementRef
+	]);
 };
-
+//#endregion
 export { useOverflowAnchor };