@atom-learning/components 9.0.0-beta.5 → 10.0.0

package/dist/index.cjs.js

@@ -32,6 +32,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 //#endregion
 let react = require("react");
 react = __toESM(react, 1);
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
 let clsx = require("clsx");
 clsx = __toESM(clsx, 1);
 let tailwind_merge = require("tailwind-merge");
@@ -39,7 +40,6 @@ let tailwind_variants = require("tailwind-variants");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_alert_dialog = require("@radix-ui/react-alert-dialog");
 let _atom_learning_icons = require("@atom-learning/icons");
-let uid = require("uid");
 let _radix_ui_react_accordion = require("@radix-ui/react-accordion");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
 let invariant = require("invariant");
@@ -59,7 +59,6 @@ dlv = __toESM(dlv, 1);
 let _radix_ui_react_toggle_group = require("@radix-ui/react-toggle-group");
 _radix_ui_react_toggle_group = __toESM(_radix_ui_react_toggle_group, 1);
 let _reach_combobox = require("@reach/combobox");
-let _lukeed_uuid = require("@lukeed/uuid");
 let _tanstack_react_table = require("@tanstack/react-table");
 let use_deep_compare_effect = require("use-deep-compare-effect");
 let react_aria = require("react-aria");
@@ -212,7 +211,10 @@ function styled(el, styles, options) {
 				as: props.as || element.props.as,
 				className: finalClassName
 			};
-			if (ref) cloneProps.ref = ref;
+			if (ref) {
+				const existingRef = element.props.ref;
+				cloneProps.ref = existingRef ? (0, _radix_ui_react_compose_refs.composeRefs)(existingRef, ref) : ref;
+			}
 			return react.default.cloneElement(element, cloneProps);
 		}
 		throw Error("Something is wrong");
@@ -224,12 +226,7 @@ function styled(el, styles, options) {
 }
 //#endregion
 //#region src/utilities/uri/index.ts
-var isExternalUrl = (url) => {
-	if (!url) return false;
-	const isAbsoluteUrl = /^https?:\/\//.test(url);
-	if (typeof window === "undefined") return isAbsoluteUrl;
-	return isAbsoluteUrl && new URL(url).origin !== window.location.origin;
-};
+var isExternalUrl = (url) => !!url && /^https?:\/\//.test(url);
 var getExternalAnchorProps = (url) => isExternalUrl(url) ? {
 	target: "_blank",
 	rel: "noopener noreferrer"
@@ -380,7 +377,11 @@ var StyledButton = styled("button", {
 				"[&_svg]:size-[22px]"
 			]
 		},
-		isLoading: { true: ["cursor-not-allowed opacity-60 pointer-events-none"] },
+		isLoading: { true: [
+			"cursor-not-allowed",
+			"opacity-60",
+			"pointer-events-none"
+		] },
 		fullWidth: {
 			true: ["w-full"],
 			false: ["w-max"]
@@ -701,25 +702,25 @@ var Alert$1 = ({ title, size, theme, description, onAction, cancelActionText, co
 var initialState = [];
 var reducer = (state, action) => {
 	switch (action.type) {
-		case "ADD": return [...state, {
-			...action.payload,
-			id: (0, uid.uid)()
-		}];
+		case "ADD": return [...state, action.payload];
 		case "REMOVE": return state.filter(({ id }) => id !== action.payload);
 		default: return state;
 	}
 };
 //#endregion
 //#region src/components/alert-dialog/AlertDialog.context.tsx
-var AlertContext = react.createContext({ showAlert: () => null });
+var AlertContext = react.createContext(void 0);
 var AlertProvider = ({ children }) => {
 	const [alerts, dispatch] = react.useReducer(reducer, initialState);
 	const isMountedRef = useIsMountedRef();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertContext.Provider, {
-		value: { showAlert: (content) => dispatch({
-			payload: content,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertContext, {
+		value: react.useMemo(() => ({ showAlert: (content) => dispatch({
+			payload: {
+				...content,
+				id: crypto.randomUUID()
+			},
 			type: "ADD"
-		}) },
+		}) }), []),
 		children: [Boolean(alerts.length) && /* @__PURE__ */ (0, react.createElement)(Alert$1, {
 			...alerts[0],
 			key: alerts[0].id,
@@ -733,7 +734,7 @@ var AlertProvider = ({ children }) => {
 	});
 };
 var useAlert = () => {
-	const context = react.useContext(AlertContext);
+	const context = react.use(AlertContext);
 	if (context === void 0) throw new Error("useAlert must be used within a AlertProvider");
 	return context;
 };
@@ -1168,9 +1169,9 @@ var toIconSize$3 = {
 	xxl: "lg"
 };
 var AvatarIcon = ({ is }) => {
-	const { size } = react.useContext(AvatarRootContext);
+	const { size } = react.use(AvatarRootContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-		size: react.useMemo(() => overrideStyledVariantValue(size, (s) => toIconSize$3[s]), [size]),
+		size: overrideStyledVariantValue(size, (s) => toIconSize$3[s]),
 		is
 	});
 };
@@ -1344,8 +1345,8 @@ var toTextSize$2 = {
 	xxl: "lg"
 };
 var AvatarInitial = () => {
-	const { name, size } = react.useContext(AvatarRootContext);
-	const textSize = react.useMemo(() => overrideStyledVariantValue(size, (s) => toTextSize$2[s]), [size]);
+	const { name, size } = react.use(AvatarRootContext);
+	const textSize = overrideStyledVariantValue(size, (s) => toTextSize$2[s]);
 	if (!name) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarPlaceholder, {});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
 		size: textSize,
@@ -1426,12 +1427,11 @@ var StyledButton$4 = /* @__PURE__ */ styled("button", {
 	}
 });
 var AvatarRootProvider = ({ children, name, size }) => {
-	const value = react.useMemo(() => ({
-		name,
-		size
-	}), [name, size]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarRootContext.Provider, {
-		value,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarRootContext, {
+		value: react.useMemo(() => ({
+			name,
+			size
+		}), [name, size]),
 		children
 	});
 };
@@ -1490,7 +1490,10 @@ AvatarRoot.displayName = "Avatar";
 var useCallbackRef = () => {
 	const elRef = react.useRef(null);
 	return [elRef, react.useCallback((el) => {
-		if (el) elRef.current = el;
+		elRef.current = el;
+		return () => {
+			elRef.current = null;
+		};
 	}, [])];
 };
 var useCallbackRefState = () => {
@@ -1604,19 +1607,18 @@ var colorSchemes$3 = {
 var BadgeContext = react.createContext({});
 var BadgeProvider = ({ size, overflow, children }) => {
 	const [isOverflowing, setIsOverflowing] = react.useState(false);
-	const value = react.useMemo(() => ({
-		size,
-		overflow,
-		isOverflowing,
-		setIsOverflowing
-	}), [
-		size,
-		overflow,
-		isOverflowing,
-		setIsOverflowing
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BadgeContext.Provider, {
-		value,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BadgeContext, {
+		value: react.useMemo(() => ({
+			size,
+			overflow,
+			isOverflowing,
+			setIsOverflowing
+		}), [
+			size,
+			overflow,
+			isOverflowing,
+			setIsOverflowing
+		]),
 		children
 	});
 };
@@ -1640,13 +1642,23 @@ var useResizeObserver = ({ delay = 500, elements, onResize }) => {
 	react.useLayoutEffect(() => {
 		onResizeRef.current = onResize;
 	});
-	const observer = react.useMemo(() => createResizeObserver((0, throttle_debounce.debounce)(delay, (entries) => onResizeRef.current(entries))), [delay]);
+	const [observer, setObserver] = react.useState(null);
+	react.useEffect(() => {
+		const debouncedOnResize = (0, throttle_debounce.debounce)(delay, (entries) => onResizeRef.current(entries));
+		const resizeObserver = createResizeObserver(debouncedOnResize);
+		setObserver(resizeObserver);
+		return () => {
+			debouncedOnResize.cancel();
+			resizeObserver?.disconnect();
+		};
+	}, [delay]);
 	react.useEffect(() => {
+		if (!observer) return;
 		elements.forEach((element) => {
-			if (element) observer?.observe(element);
+			if (element) observer.observe(element);
 		});
 		return () => {
-			elements.forEach((element) => element && observer?.unobserve(element));
+			elements.forEach((element) => element && observer.unobserve(element));
 		};
 	}, [observer, elements]);
 	return observer;
@@ -1654,7 +1666,7 @@ var useResizeObserver = ({ delay = 500, elements, onResize }) => {
 //#endregion
 //#region src/components/badge/BadgeText.tsx
 var ObserveBadgeTextOverflow = ({ elRef }) => {
-	const { setIsOverflowing } = react.useContext(BadgeContext);
+	const { setIsOverflowing } = react.use(BadgeContext);
 	useResizeObserver({
 		delay: 0,
 		elements: [elRef],
@@ -1682,8 +1694,8 @@ var toTextSize$1 = {
 	md: "md"
 };
 var BadgeText = ({ children, ...rest }) => {
-	const { size: badgeSize, overflow } = react.useContext(BadgeContext);
-	const size = react.useMemo(() => overrideStyledVariantValue(badgeSize, (s) => toTextSize$1[s]), [badgeSize]);
+	const { size: badgeSize, overflow } = react.use(BadgeContext);
+	const size = overrideStyledVariantValue(badgeSize, (s) => toTextSize$1[s]);
 	const [elRef, setElRef] = useCallbackRefState();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [overflow === "ellipsis" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ObserveBadgeTextOverflow, { elRef }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledBadgeText, {
 		size,
@@ -1755,9 +1767,9 @@ var StyledBadge$1 = styled("div", {
 	]
 }, { enableResponsiveVariants: true });
 var BadgeInner = ({ ref, theme = "info", emphasis = "subtle", children, style, ...rest }) => {
-	const { size, overflow, isOverflowing } = react.useContext(BadgeContext);
+	const { size, overflow, isOverflowing } = react.use(BadgeContext);
 	const [badgeElRef, setBadgeElRef] = useCallbackRefState();
-	react.useImperativeHandle(ref, () => badgeElRef);
+	const composedBadgeRef = (0, _radix_ui_react_compose_refs.useComposedRefs)(ref, setBadgeElRef);
 	const label = badgeElRef?.textContent;
 	const isInfoOnly = badgeSemanticNames.includes(theme);
 	const isClickable = Object.keys(rest).includes("onClick") || Object.keys(rest).includes("href");
@@ -1773,7 +1785,7 @@ var BadgeInner = ({ ref, theme = "info", emphasis = "subtle", children, style, .
 				...style
 			},
 			...rest,
-			ref: setBadgeElRef,
+			ref: composedBadgeRef,
 			isClickable: isClickable && !isInfoOnly,
 			children: react.Children.map(children, (child) => {
 				if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BadgeText, { children: child });
@@ -1807,27 +1819,26 @@ var DismissibleRootContext = react.createContext({
 });
 var DismissibleRootProvider = ({ dismissed: controlledIsDismissed, children, disabled, onDismiss = () => null }) => {
 	const [isDismissed, setIsDismissed] = react.useState(false);
-	const value = react.useMemo(() => {
-		const isControlled = typeof controlledIsDismissed === "boolean";
-		return {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DismissibleRootContext, {
+		value: react.useMemo(() => {
+			const isControlled = typeof controlledIsDismissed === "boolean";
+			return {
+				disabled,
+				isDismissed: isControlled ? controlledIsDismissed : isDismissed,
+				setIsDismissed: isControlled ? () => null : setIsDismissed,
+				onDismiss
+			};
+		}, [
 			disabled,
-			isDismissed: isControlled ? controlledIsDismissed : isDismissed,
-			setIsDismissed: isControlled ? () => null : setIsDismissed,
-			onDismiss
-		};
-	}, [
-		disabled,
-		isDismissed,
-		onDismiss,
-		controlledIsDismissed
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DismissibleRootContext.Provider, {
-		value,
+			isDismissed,
+			onDismiss,
+			controlledIsDismissed
+		]),
 		children
 	});
 };
 var DismissibleRootInternal = ({ asChild = false, ...rest }) => {
-	const { isDismissed, disabled } = react.useContext(DismissibleRootContext);
+	const { isDismissed, disabled } = react.use(DismissibleRootContext);
 	if (isDismissed) return null;
 	const props = {
 		...disabled && { [`data-disabled`]: "" },
@@ -1850,7 +1861,7 @@ var DefaultTrigger = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("butt
 	children: "Dismiss"
 });
 var DismissibleTrigger = ({ asChild = false, ...rest }) => {
-	const context = react.useContext(DismissibleRootContext);
+	const context = react.use(DismissibleRootContext);
 	if (context === void 0) throw new Error("Dismissible.Trigger can only be used within a Dismissible.Item");
 	const { setIsDismissed, disabled, onDismiss } = context;
 	const handleDismiss = () => {
@@ -1879,7 +1890,7 @@ var BannerContext = react.createContext({
 	setHasDismiss: () => null
 });
 var useBannerContext = () => {
-	const context = react.useContext(BannerContext);
+	const context = react.use(BannerContext);
 	if (context === void 0) throw new Error("useBannerContext must be used within a BannerProvider");
 	return context;
 };
@@ -1888,19 +1899,18 @@ var BannerProvider = ({ emphasis = "minimal", size = {
 	"@md": "md"
 }, children }) => {
 	const [hasDismiss, setHasDismiss] = react.useState(false);
-	const value = react.useMemo(() => ({
-		emphasis,
-		size,
-		hasDismiss,
-		setHasDismiss
-	}), [
-		emphasis,
-		size,
-		hasDismiss,
-		setHasDismiss
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BannerContext.Provider, {
-		value,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BannerContext, {
+		value: react.useMemo(() => ({
+			emphasis,
+			size,
+			hasDismiss,
+			setHasDismiss
+		}), [
+			emphasis,
+			size,
+			hasDismiss,
+			setHasDismiss
+		]),
 		children
 	});
 };
@@ -1914,7 +1924,7 @@ var BannerRegularButton = (props) => {
 	const { emphasis, size } = useBannerContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 		size,
-		fullWidth: react.useMemo(() => overrideStyledVariantValue(size, (s) => s === "sm"), [size]),
+		fullWidth: overrideStyledVariantValue(size, (s) => s === "sm"),
 		theme: emphasis === "bold" ? "neutral" : "primary",
 		...props
 	});
@@ -1933,14 +1943,8 @@ var toDirection$1 = {
 };
 var BannerRegularActions = ({ children, className, ...rest }) => {
 	const { size } = useBannerContext();
-	const gap = react.useMemo(() => {
-		if (typeof size === "string") return toGap[size];
-		return "gap-2 md:gap-4";
-	}, [size]);
-	const direction = react.useMemo(() => {
-		if (typeof size === "string") return toDirection$1[size];
-		return "flex-col md:flex-row";
-	}, [size]);
+	const gap = typeof size === "string" ? toGap[size] : "gap-2 md:gap-4";
+	const direction = typeof size === "string" ? toDirection$1[size] : "flex-col md:flex-row";
 	(0, invariant.default)(react.Children.count(children) <= MAX_ALLOWED_CHILDREN, `A maximum of ${MAX_ALLOWED_CHILDREN} ${BannerRegularButton.displayName} component(s) are permitted as children of ${BannerRegularActions.displayName}`);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: cn("flex", gap, direction, className),
@@ -2042,7 +2046,7 @@ var BannerRegularDismiss = ({ label = "dismiss", ...rest }) => {
 			setHasDismiss(false);
 		};
 	}, [setHasDismiss]);
-	const actionIconSize = react.useMemo(() => overrideStyledVariantValue(size, (s) => toActionIconSize[s]), [size]);
+	const actionIconSize = overrideStyledVariantValue(size, (s) => toActionIconSize[s]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Banner.Dismiss, {
 		asChild: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledDismiss$1, {
@@ -2184,7 +2188,7 @@ var BannerSlimButton = (({ className, ...rest }) => {
 	const { emphasis, size } = useBannerContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 		size: "md",
-		fullWidth: react.useMemo(() => overrideStyledVariantValue(size, (s) => s === "sm"), [size]),
+		fullWidth: overrideStyledVariantValue(size, (s) => s === "sm"),
 		theme: emphasis === "bold" ? "neutral" : "primary",
 		...rest,
 		className: cn("ml-auto", className)
@@ -2214,18 +2218,9 @@ var StyledBannerSlimContainer = styled(BannerContainer, {
 }, { enableResponsiveVariants: true });
 var BannerSlimContainer = ({ className, ...rest }) => {
 	const { size } = useBannerContext();
-	const direction = react.useMemo(() => {
-		if (typeof size === "string") return toDirection[size];
-		return "flex-col md:flex-row";
-	}, [size]);
-	const align = react.useMemo(() => {
-		if (typeof size === "string") return toAlign[size];
-		return "items-start md:items-center";
-	}, [size]);
-	const wrap = react.useMemo(() => {
-		if (typeof size === "string") return toWrap[size];
-		return "flex-wrap md:flex-nowrap";
-	}, [size]);
+	const direction = typeof size === "string" ? toDirection[size] : "flex-col md:flex-row";
+	const align = typeof size === "string" ? toAlign[size] : "items-start md:items-center";
+	const wrap = typeof size === "string" ? toWrap[size] : "flex-wrap md:flex-nowrap";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledBannerSlimContainer, {
 		...rest,
 		sizeWorkaround: size,
@@ -2359,10 +2354,6 @@ var BannerSlim = /* @__PURE__ */ Object.assign(BannerSlimComponent, {
 });
 BannerSlimComponent.displayName = "BannerSlim";
 //#endregion
-//#region src/components/box/Box.tsx
-var Box = styled("div", { base: [] });
-Box.displayName = "Box";
-//#endregion
 //#region src/components/carousel/CarouselArrows.tsx
 var ArrowButton = /* @__PURE__ */ styled("button", { base: [
 	"items-center",
@@ -2456,7 +2447,7 @@ var CarouselSlider = ({ children, className, gap = 3, overflow, tabIndex = 0, ..
 		...rest,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselSlideGapContext.Provider, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselSlideGapContext, {
 				value: gap,
 				children
 			})
@@ -2467,7 +2458,7 @@ var CarouselSlider = ({ children, className, gap = 3, overflow, tabIndex = 0, ..
 //#region src/components/carousel/CarouselSlide.tsx
 var CarouselSlide = ({ children, className, index, ...rest }) => {
 	const { selectedIndex } = useCarousel();
-	const gap = react.useContext(CarouselSlideGapContext);
+	const gap = react.use(CarouselSlideGapContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "option",
 		"aria-selected": selectedIndex === index,
@@ -2551,14 +2542,14 @@ var CarouselComponent = ({ children, currentSlide = 0, className, ...rest }) =>
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: cn("relative", "w-full", className),
 		...rest,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselContext.Provider, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselContext, {
 			value: contextValue,
 			children
 		})
 	});
 };
 var useCarousel = () => {
-	const context = react.useContext(CarouselContext);
+	const context = react.use(CarouselContext);
 	if (!context) throw new Error("useCarousel must be used within a Carousel");
 	return {
 		...context,
@@ -2632,7 +2623,7 @@ var toIconSize$2 = {
 	lg: "sm"
 };
 var Checkbox = ({ ref, size = "md", checked, ...rest }) => {
-	const iconSize = react.useMemo(() => overrideStyledVariantValue(size, (s) => toIconSize$2[s]), [size]);
+	const iconSize = overrideStyledVariantValue(size, (s) => toIconSize$2[s]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "relative z-1",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledCheckbox, {
@@ -2679,20 +2670,19 @@ var CheckboxGroupCheckedProvider = ({ checked: controlledChecked, defaultChecked
 			return newChecked;
 		});
 	}, [onCheckedChange]);
-	const value = react.useMemo(() => {
-		const isControlled = Array.isArray(controlledChecked);
-		return {
-			checked: isControlled ? controlledChecked : checked,
-			handleItemCheckedChange: isControlled ? handleItemControlledCheckedChange : handleItemCheckedChange
-		};
-	}, [
-		checked,
-		handleItemCheckedChange,
-		handleItemControlledCheckedChange,
-		controlledChecked
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxGroupCheckedContext.Provider, {
-		value,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxGroupCheckedContext, {
+		value: react.useMemo(() => {
+			const isControlled = Array.isArray(controlledChecked);
+			return {
+				checked: isControlled ? controlledChecked : checked,
+				handleItemCheckedChange: isControlled ? handleItemControlledCheckedChange : handleItemCheckedChange
+			};
+		}, [
+			checked,
+			handleItemCheckedChange,
+			handleItemControlledCheckedChange,
+			controlledChecked
+		]),
 		...rest
 	});
 };
@@ -2703,7 +2693,7 @@ var CheckboxGroupMountedContext = react.createContext({
 	handleItemMountedChange: () => null
 });
 var CheckboxGroupMountedProvider = (props) => {
-	const { handleItemMountedChange: handleItemMountedChangeFurtherUpContext } = react.useContext(CheckboxGroupMountedContext);
+	const { handleItemMountedChange: handleItemMountedChangeFurtherUpContext } = react.use(CheckboxGroupMountedContext);
 	const [mounted, setMounted] = react.useState([]);
 	const handleItemMountedChange = react.useCallback((newItemMounted, itemValue) => {
 		handleItemMountedChangeFurtherUpContext?.(newItemMounted, itemValue);
@@ -2714,20 +2704,19 @@ var CheckboxGroupMountedProvider = (props) => {
 			return Array.from(newMountedSet);
 		});
 	}, [handleItemMountedChangeFurtherUpContext]);
-	const value = react.useMemo(() => ({
-		mounted,
-		handleItemMountedChange
-	}), [mounted, handleItemMountedChange]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxGroupMountedContext.Provider, {
-		value,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxGroupMountedContext, {
+		value: react.useMemo(() => ({
+			mounted,
+			handleItemMountedChange
+		}), [mounted, handleItemMountedChange]),
 		...props
 	});
 };
 //#endregion
 //#region src/components/checkbox-group/CheckboxGroupAllItem.tsx
 var CheckboxGroupAllItem = ({ onCheckedChange, title = "all", ...rest }) => {
-	const { checked: checkedItems, handleItemCheckedChange: handleItemCheckedChangeContext } = react.useContext(CheckboxGroupCheckedContext);
-	const { mounted: mountedItems } = react.useContext(CheckboxGroupMountedContext);
+	const { checked: checkedItems, handleItemCheckedChange: handleItemCheckedChangeContext } = react.use(CheckboxGroupCheckedContext);
+	const { mounted: mountedItems } = react.use(CheckboxGroupMountedContext);
 	const handleItemCheckedChange = (newChecked) => {
 		mountedItems.forEach((value) => {
 			handleItemCheckedChangeContext(newChecked, value);
@@ -2749,8 +2738,8 @@ var CheckboxGroupAllItem = ({ onCheckedChange, title = "all", ...rest }) => {
 //#endregion
 //#region src/components/checkbox-group/CheckboxGroupItem.tsx
 var CheckboxGroupItem = ({ value, title, onCheckedChange, ...rest }) => {
-	const { checked: checkedItems, handleItemCheckedChange: handleItemCheckedChangeContext } = react.useContext(CheckboxGroupCheckedContext);
-	const { handleItemMountedChange } = react.useContext(CheckboxGroupMountedContext);
+	const { checked: checkedItems, handleItemCheckedChange: handleItemCheckedChangeContext } = react.use(CheckboxGroupCheckedContext);
+	const { handleItemMountedChange } = react.use(CheckboxGroupMountedContext);
 	const handleItemCheckedChange = (newChecked) => {
 		handleItemCheckedChangeContext(newChecked, value);
 		onCheckedChange?.(newChecked);
@@ -2801,11 +2790,11 @@ var TreeListItem = ({ ref, className, ...rest }) => /* @__PURE__ */ (0, react_js
 var TreeCollapsibleContext = react.createContext({});
 var TreeCollapsibleProvider = ({ children }) => {
 	const [triggerRef, setTriggerRef] = useCallbackRef();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeCollapsibleContext.Provider, {
-		value: {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeCollapsibleContext, {
+		value: react.useMemo(() => ({
 			triggerRef,
 			setTriggerRef
-		},
+		}), [triggerRef, setTriggerRef]),
 		children
 	});
 };
@@ -2828,7 +2817,7 @@ var TreeList = styled("ul", { base: [
 //#endregion
 //#region src/components/tree/TreeCollapsibleContent.tsx
 var TreeCollapsibleContent = ({ ref, children, className, ...rest }) => {
-	const { triggerRef } = react.useContext(TreeCollapsibleContext);
+	const { triggerRef } = react.use(TreeCollapsibleContext);
 	const handleOnKeydown = (e) => {
 		if (!triggerRef?.current) return;
 		if (e.key === "Escape") {
@@ -2901,7 +2890,7 @@ var StyledActionIcon$2 = styled(ActionIcon, { base: [
 	"[&[data-state=open]>svg]:rotate-0"
 ] });
 var TreeCollapsibleTrigger = ({ children, label, className, onClick, ...rest }) => {
-	const { setTriggerRef, triggerRef } = react.useContext(TreeCollapsibleContext);
+	const { setTriggerRef, triggerRef } = react.use(TreeCollapsibleContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TreeItemContent, {
 		...rest,
 		className: cn("cursor-pointer", className),
@@ -3254,7 +3243,7 @@ var useFieldError = (fieldName) => {
 //#endregion
 //#region src/components/checkbox-field/CheckboxField.tsx
 var CheckboxField = ({ className, label, name, validation, description, defaultChecked = false, checked, onCheckedChange, ...rest }) => {
-	const { control } = (0, react_hook_form.useFormContext)();
+	const { control, setValue } = (0, react_hook_form.useFormContext)();
 	const { error } = useFieldError(name);
 	const { field: { ref, onChange, value: innerChecked, name: innerName } } = (0, react_hook_form.useController)({
 		name,
@@ -3263,8 +3252,12 @@ var CheckboxField = ({ className, label, name, validation, description, defaultC
 		defaultValue: defaultChecked
 	});
 	react.useEffect(() => {
-		if (typeof checked !== "undefined") onChange(checked);
-	}, [checked]);
+		if (typeof checked !== "undefined") setValue(name, checked, { shouldDirty: false });
+	}, [
+		checked,
+		name,
+		setValue
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineFieldWrapper, {
 		className,
 		description,
@@ -3304,8 +3297,8 @@ var toIconSize$1 = {
 	lg: "md"
 };
 var ChipIcon = (props) => {
-	const { size } = react.useContext(ChipRootContext);
-	const iconSize = react.useMemo(() => overrideStyledVariantValue(size, (s) => toIconSize$1[s]), [size]);
+	const { size } = react.use(ChipRootContext);
+	const iconSize = overrideStyledVariantValue(size, (s) => toIconSize$1[s]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 		...props,
 		size: iconSize
@@ -3377,9 +3370,8 @@ var StyledRoot$4 = styled("div", {
 });
 var ChipRootContext = react.createContext({});
 var ChipRootProvider = ({ size, children }) => {
-	const value = react.useMemo(() => ({ size }), [size]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipRootContext.Provider, {
-		value,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipRootContext, {
+		value: react.useMemo(() => ({ size }), [size]),
 		children
 	});
 };
@@ -3407,12 +3399,11 @@ var ChipGroup = styled("div", { base: [
 //#region src/components/dismissible-group/DismissibleGroupRoot.tsx
 var DismissibleGroupContext = react.createContext({ onDismiss: () => null });
 var DismissibleGroupProvider = ({ children, disabled, onDismiss }) => {
-	const value = react.useMemo(() => ({
-		disabled,
-		onDismiss
-	}), [disabled, onDismiss]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DismissibleGroupContext.Provider, {
-		value,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DismissibleGroupContext, {
+		value: react.useMemo(() => ({
+			disabled,
+			onDismiss
+		}), [disabled, onDismiss]),
 		children
 	});
 };
@@ -3425,7 +3416,7 @@ DismissibleGroupRoot.displayName = "DismissibleGroup";
 //#endregion
 //#region src/components/dismissible-group/DismissibleGroupItem.tsx
 var DismissibleGroupItem = ({ children, value, disabled: itemDisabled = false, ...rest }) => {
-	const groupContext = react.useContext(DismissibleGroupContext);
+	const groupContext = react.use(DismissibleGroupContext);
 	if (groupContext === void 0) throw new Error("DismissibleGroup.Item can only be used within a DismissibleGroup");
 	const { onDismiss, disabled: groupDisabled } = groupContext;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dismissible, {
@@ -3730,7 +3721,7 @@ FieldWrapper.displayName = "FieldWrapper";
 //#endregion
 //#region src/components/form/useFormCustomContext.ts
 var FormCustomContext = react.createContext({ appearance: "standard" });
-var useFormCustomContext = () => react.useContext(FormCustomContext);
+var useFormCustomContext = () => react.use(FormCustomContext);
 //#endregion
 //#region src/utilities/style/get-icon-size.ts
 var toIconSize = {
@@ -3828,7 +3819,7 @@ var toTextSize = {
 	xl: "lg"
 };
 var InputText = ({ ref, type = "text", size, ...rest }) => {
-	const textSize = react.useMemo(() => overrideStyledVariantValue(size, (s) => toTextSize[s]), [size]);
+	const textSize = overrideStyledVariantValue(size, (s) => toTextSize[s]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledInputText, {
 		ref,
 		as: "input",
@@ -3859,7 +3850,7 @@ var Input = ({ ref, className, size = "md", appearance = "standard", theme, stat
 var PasswordInput = ({ ref, className, hidePasswordText = "Hide password", showPasswordText = "Show password", size = "md", ...restProps }) => {
 	const [isPasswordVisible, setIsPasswordVisible] = (0, react.useState)(false);
 	const togglePasswordVisibility = () => setIsPasswordVisible((currentState) => !currentState);
-	const iconSize = react.useMemo(() => getFieldIconSize(size), [size]);
+	const iconSize = getFieldIconSize(size);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn("relative", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
@@ -3929,7 +3920,7 @@ var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "ro
 		}
 		return false;
 	}, [setValidationResult]);
-	const handleChange = react.useCallback((0, throttle_debounce.throttle)(500, validatePassword), [validatePassword]);
+	const handleChange = react.useMemo(() => (0, throttle_debounce.throttle)(500, validatePassword), [validatePassword]);
 	const getMessageTheme = (result, isFocused) => {
 		if (result) return "success";
 		return isFocused ? "neutral" : "error";
@@ -3999,12 +3990,17 @@ var usePagination$1 = (initialPaginationState) => {
 		...defaultPaginationState,
 		...initialPaginationState || {}
 	});
+	const applyPagination = react.useCallback(() => {
+		setIsPaginated(true);
+	}, []);
+	const wasInitiallyPaginated = react.useRef(!!initialPaginationState);
 	return {
 		isPaginated,
 		paginationState,
 		setPaginationState,
-		applyPagination: react.useCallback(() => {
-			setIsPaginated(true);
+		applyPagination,
+		removePagination: react.useCallback(() => {
+			setIsPaginated(wasInitiallyPaginated.current);
 		}, [])
 	};
 };
@@ -4027,7 +4023,7 @@ var useSortByColumn = (defaultSort) => {
 //#region src/components/data-table/DataTable.context.tsx
 var DataTableContext = react.createContext(null);
 var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSort, initialState = void 0, disabledRows, enableRowSelection, onRowSelectionChange, children }) => {
-	const tableId = react.useRef((0, _lukeed_uuid.v4)());
+	const tableId = react.useId();
 	const [data, setData] = react.useState({
 		results: dataProp ?? [],
 		total: dataProp?.length ?? 0
@@ -4040,17 +4036,22 @@ var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSo
 		offsetTop: 0,
 		isVisible: true
 	});
-	const { isPaginated, applyPagination, paginationState, setPaginationState } = usePagination$1(initialState?.pagination);
+	const { isPaginated, applyPagination, removePagination, paginationState, setPaginationState } = usePagination$1(initialState?.pagination);
 	const [asyncDataState, setAsyncDataState] = react.useState(AsyncDataState.NONE);
 	const [globalFilter, setGlobalFilter] = react.useState("");
 	const { setIsSortable, isSortable, sorting, setSorting } = useSortByColumn(defaultSort);
+	const asyncRequestIdRef = react.useRef(0);
 	const runAsyncData = react.useCallback(async (overrideAsyncDataOptions) => {
 		if (!getAsyncData) return;
+		const requestId = ++asyncRequestIdRef.current;
 		try {
 			setAsyncDataState(AsyncDataState.PENDING);
-			setData(await getNewAsyncData(getAsyncData, overrideAsyncDataOptions, paginationState, sorting, globalFilter));
+			const newData = await getNewAsyncData(getAsyncData, overrideAsyncDataOptions, paginationState, sorting, globalFilter);
+			if (requestId !== asyncRequestIdRef.current) return;
+			setData(newData);
 			setAsyncDataState(AsyncDataState.FULFILLED);
 		} catch (_error) {
+			if (requestId !== asyncRequestIdRef.current) return;
 			setAsyncDataState(AsyncDataState.REJECTED);
 		}
 	}, [
@@ -4070,7 +4071,7 @@ var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSo
 			total: dataProp.length
 		});
 	}, [dataProp]);
-	const getTotalRows = () => data.total;
+	const getTotalRows = react.useCallback(() => data.total, [data.total]);
 	const table = (0, _tanstack_react_table.useReactTable)({
 		columns,
 		data: data.results,
@@ -4114,42 +4115,55 @@ var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSo
 			}
 		}
 	});
-	const value = react.useMemo(() => {
-		return {
-			...table,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableContext, {
+		value: react.useMemo(() => {
+			return {
+				...table,
+				columns,
+				data,
+				setData,
+				setIsSortable,
+				applyPagination,
+				removePagination,
+				getTotalRows,
+				isSortable,
+				asyncDataState,
+				runAsyncData,
+				hasAsyncData: !!getAsyncData,
+				disabledRows,
+				enableRowSelection,
+				rowSelection,
+				tablePosition,
+				setTablePosition,
+				tableId
+			};
+		}, [
+			table,
 			columns,
 			data,
-			setData,
-			setIsSortable,
 			applyPagination,
+			removePagination,
 			getTotalRows,
 			isSortable,
 			asyncDataState,
 			runAsyncData,
-			hasAsyncData: !!getAsyncData,
+			getAsyncData,
 			disabledRows,
 			enableRowSelection,
 			rowSelection,
 			tablePosition,
-			setTablePosition,
-			tableId: tableId.current
-		};
-	}, [
-		table,
-		applyPagination,
-		getTotalRows,
-		isSortable,
-		enableRowSelection,
-		tableId,
-		getAsyncData
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableContext.Provider, {
-		value,
+			expanded,
+			sorting,
+			globalFilter,
+			paginationState,
+			isPaginated,
+			tableId
+		]),
 		children
 	});
 };
 var useDataTable = () => {
-	const context = react.useContext(DataTableContext);
+	const context = react.use(DataTableContext);
 	if (!context) throw new Error("useDataTable can only be called from inside a DataTableProvider");
 	return context;
 };
@@ -4397,6 +4411,7 @@ var DataTableRowSelectionCheckbox = ({ row, checked, onCheckedChange, label = `R
 		style: { "--depth": row.depth },
 		checked,
 		onCheckedChange,
+		id: `${tableId}_row_${row.id}_selection`,
 		name: `${tableId}_row_${row.id}_selection`,
 		disabled: !row.getCanSelect(),
 		className: "mr-3 ml-[calc((var(--depth,0)*2)*4px)]"
@@ -4655,14 +4670,10 @@ var StyledContainer$2 = styled("div", { base: [
 ] });
 var DataTableBulkActionsFloating = /* @__PURE__ */ Object.assign(({ children, ...rest }) => {
 	const { rowSelection, toggleAllPageRowsSelected } = useDataTable();
-	const actionBarRef = react.useRef(null);
-	const numberOfSelectedRows = react.useMemo(() => {
-		return Object.keys(rowSelection || {}).length;
-	}, [rowSelection]);
+	const numberOfSelectedRows = Object.keys(rowSelection || {}).length;
 	const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false);
 	if (numberOfSelectedRows === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-		ref: actionBarRef,
 		className: "pointer-events-none sticky bottom-0 left-0 flex justify-center",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledContainer$2, {
 			...rest,
@@ -4698,9 +4709,8 @@ var DataTableBulkActionsFloating = /* @__PURE__ */ Object.assign(({ children, ..
 //#region src/components/empty-state/EmptyState.context.tsx
 var EmptyStateContext = react.createContext({});
 var EmptyStateProvider = ({ size, children }) => {
-	const value = react.useMemo(() => ({ size }), [size]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyStateContext.Provider, {
-		value,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyStateContext, {
+		value: react.useMemo(() => ({ size }), [size]),
 		children
 	});
 };
@@ -4717,7 +4727,7 @@ var StyledEmptyStateBody = styled(Text, {
 	} }
 }, { enableResponsiveVariants: true });
 var EmptyStateBody = (props) => {
-	const { size } = react.useContext(EmptyStateContext);
+	const { size } = react.use(EmptyStateContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledEmptyStateBody, {
 		...props,
 		size
@@ -4756,7 +4766,7 @@ var StyledEmptyStateImage = styled(Image, {
 	} }
 }, { enableResponsiveVariants: true });
 var EmptyStateImage = (props) => {
-	const { size } = react.useContext(EmptyStateContext);
+	const { size } = react.use(EmptyStateContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledEmptyStateImage, {
 		size,
 		...props
@@ -4780,7 +4790,7 @@ var StyledEmptyStateTitle = styled("h2", {
 	} }
 }, { enableResponsiveVariants: true });
 var EmptyStateTitle = (props) => {
-	const { size } = react.useContext(EmptyStateContext);
+	const { size } = react.use(EmptyStateContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledEmptyStateTitle, {
 		size,
 		...props
@@ -4851,14 +4861,10 @@ var StyledIcon$1 = styled(Icon, {
 var SearchInput = ({ ref, size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...rest }) => {
 	const [inputElRef, setInputElRef] = useCallbackRef();
 	const [innerValue, setInnerValue] = react.useState(defaultValue);
-	const [activeIcon, setActiveIcon] = react.useState(defaultValue ? "CLEAR" : "SEARCH");
-	react.useEffect(() => {
-		if (typeof value === "undefined") return;
-		setInnerValue(value);
-		setActiveIcon(value ? "CLEAR" : "SEARCH");
-	}, [value]);
-	const iconSize = react.useMemo(() => getFieldIconSize(size), [size]);
-	react.useImperativeHandle(ref, () => inputElRef.current);
+	const currentValue = value ?? innerValue;
+	const activeIcon = currentValue ? "CLEAR" : "SEARCH";
+	const iconSize = getFieldIconSize(size);
+	const composedInputRef = (0, _radix_ui_react_compose_refs.useComposedRefs)(ref, setInputElRef);
 	const handleClear = () => {
 		const inputEl = inputElRef.current;
 		if (!inputEl) return;
@@ -4873,7 +4879,6 @@ var SearchInput = ({ ref, size = "md", appearance = "standard", theme, className
 		const newValue = event.target.value;
 		setInnerValue(newValue);
 		onValueChange?.(newValue);
-		setActiveIcon(newValue ? "CLEAR" : "SEARCH");
 	};
 	const getIcon = () => {
 		if (activeIcon === "SEARCH") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon$1, {
@@ -4896,11 +4901,11 @@ var SearchInput = ({ ref, size = "md", appearance = "standard", theme, className
 		theme,
 		className: cn("relative", "w-auto", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputText, {
-			ref: setInputElRef,
+			ref: composedInputRef,
 			size,
 			type: "search",
 			...rest,
-			value: innerValue,
+			value: currentValue,
 			onChange: handleOnChange,
 			className: cn(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
 		}), getIcon()]
@@ -4911,19 +4916,27 @@ var SearchInput = ({ ref, size = "md", appearance = "standard", theme, className
 var DataTableGlobalFilter = ({ onChange, label, hideLabel = false, ...rest }) => {
 	const { setGlobalFilter, getState, resetPagination, getTotalRows, asyncDataState } = useDataTable();
 	const { globalFilter } = getState();
-	if (!(asyncDataState === AsyncDataState.PENDING) && getTotalRows() === 0) return null;
-	const handleChange = (0, throttle_debounce.debounce)(250, (event) => {
-		const { target: { value } } = event;
+	const inputId = react.useId();
+	const handleChange = react.useMemo(() => (0, throttle_debounce.debounce)(250, (event) => {
 		onChange?.(event);
-		resetPagination();
-		setGlobalFilter(value);
-	});
+		react.startTransition(() => {
+			resetPagination();
+			setGlobalFilter(event.target.value);
+		});
+	}), [
+		onChange,
+		resetPagination,
+		setGlobalFilter
+	]);
+	react.useEffect(() => () => handleChange.cancel(), [handleChange]);
+	if (!(asyncDataState === AsyncDataState.PENDING) && getTotalRows() === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
-		htmlFor: label,
+		htmlFor: inputId,
 		className: cn("mb-3", hideLabel && "sr-only"),
 		children: label
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchInput, {
 		...rest,
+		id: inputId,
 		defaultValue: globalFilter,
 		onChange: handleChange,
 		name: label
@@ -5028,29 +5041,21 @@ var DataTableSelectAllRowsCheckbox = ({ label = "All rows selection" }) => {
 		size: "lg",
 		checked: getCheckedState(),
 		onCheckedChange: updateCheckedState,
-		name: `${tableId}_allRowsSelection`
+		id: `${tableId}_all_rows_selection`,
+		name: `${tableId}_all_rows_selection`
 	})] });
 };
 //#endregion
 //#region src/components/data-table/DataTableHead.tsx
 var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stickyOffset = 0, showTotalInFirstColumn, totalSuffix, style, className, ...rest }) => {
-	const { getHeaderGroups, setIsSortable, enableRowSelection, getCanSomeRowsExpand, tablePosition, setTablePosition } = useDataTable();
+	const { getHeaderGroups, setIsSortable, enableRowSelection, getCanSomeRowsExpand, tablePosition } = useDataTable();
 	react.useEffect(() => {
 		setIsSortable(sortable);
 	}, [sortable, setIsSortable]);
 	const tableHeaderRowRef = react.useRef(null);
 	const tableRef = react.useRef(null);
-	const headerOffsetRef = react.useRef(0);
 	const [headerOffset, setHeaderOffset] = react.useState(0);
 	const [headerHide, setHeaderHide] = react.useState(false);
-	const tableHeadElement = tableHeaderRowRef?.current?.closest("thead");
-	if (tableHeadElement && tablePosition?.offsetTop === null) {
-		const intersectionOffset = stickyOffset + tableHeadElement.getBoundingClientRect().height;
-		if (tablePosition) setTablePosition({
-			...tablePosition,
-			offsetTop: intersectionOffset || 0
-		});
-	}
 	react.useEffect(() => {
 		if (!isSticky) return;
 		if (!tableRef.current && tableHeaderRowRef.current) tableRef.current = tableHeaderRowRef.current.closest("table");
@@ -5058,11 +5063,11 @@ var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stick
 			if (tablePosition?.top !== null && tablePosition?.bottom !== null) {
 				const newOffset = tablePosition?.top != null && tablePosition?.bottom != null && tablePosition.top < stickyOffset && tablePosition.bottom > 100 ? -tablePosition.top + stickyOffset : 0;
 				if (newOffset !== 0) setHeaderHide(true);
-				headerOffsetRef.current = newOffset;
 				setHeaderOffset(newOffset);
-				requestAnimationFrame(() => {
+				const rafId = requestAnimationFrame(() => {
 					setHeaderHide(false);
 				});
+				return () => cancelAnimationFrame(rafId);
 			}
 		}
 	}, [
@@ -5078,9 +5083,9 @@ var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stick
 		},
 		...rest,
 		className: cn("relative", "z-3", "[&_tr:not(:last-child)>th]:border-b-none", "[&_tr:not(:first-child)>th]:rounded-none!", className),
-		children: getHeaderGroups().map((headerGroup) => {
+		children: getHeaderGroups().map((headerGroup, headerGroupIndex) => {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table.Row, {
-				ref: tableHeaderRowRef,
+				ref: headerGroupIndex === 0 ? tableHeaderRowRef : void 0,
 				className: isSticky && headerOffset !== 0 ? cn("translate-y-(--header-offset)", headerHide ? "delay-0ms opacity-0 transition-none" : "delay-150ms opacity-100 transition-opacity duration-100", "[&_th]:last:before:absolute", "[&_th]:last:before:bottom-0", "[&_th]:last:before:pointer-events-none", "[&_th]:last:before:right-0", "[&_th]:last:before:shadow-sm", "[&_th]:last:before:top-0", "[&_th]:last:before:w-full") : void 0,
 				children: [
 					getCanSomeRowsExpand() && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.HeaderCell, { className: "w-10" }),
@@ -5131,10 +5136,8 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 	const tableRef = react.useRef(null);
 	const isTableVisible = react.useRef(false);
 	const isScrolling = react.useRef(false);
-	const scrollTarget = react.useMemo(() => {
-		if (typeof window === "undefined") return null;
-		return window;
-	}, []);
+	const scrollRafIdRef = react.useRef(null);
+	const scrollTarget = typeof window === "undefined" ? null : window;
 	react.useEffect(() => {
 		if (!scrollTarget || typeof IntersectionObserver === "undefined") return;
 		const updatePosition = () => {
@@ -5151,7 +5154,7 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 		};
 		const handleScroll = () => {
 			if (!isScrolling.current) {
-				requestAnimationFrame(updatePosition);
+				scrollRafIdRef.current = requestAnimationFrame(updatePosition);
 				isScrolling.current = true;
 			}
 		};
@@ -5176,13 +5179,17 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 		if (tableRef.current && (scrollOptions.hasStickyHeader || Object.keys(rowSelection || {}).length > 0)) tableObserver.observe(tableRef.current);
 		return () => {
 			tableObserver.disconnect();
+			if (scrollRafIdRef.current !== null) {
+				cancelAnimationFrame(scrollRafIdRef.current);
+				scrollRafIdRef.current = null;
+			}
+			isScrolling.current = false;
 			if (scrollTarget) scrollTarget?.removeEventListener("scroll", handleScroll);
 		};
 	}, [
 		rowSelection,
 		scrollOptions.hasStickyHeader,
 		scrollOptions?.stickyHeaderOffset,
-		scrollTarget,
 		setTablePosition
 	]);
 	const isPending = asyncDataState === AsyncDataState.PENDING;
@@ -5292,9 +5299,11 @@ SortableItem.displayName = "SortableItem";
 //#region src/components/sortable/SortableRoot.tsx
 var SortableRoot = ({ sortableIds, onSortChange, children }) => {
 	const [order, setOrder] = react.useState(sortableIds);
-	react.useEffect(() => {
-		setOrder(sortableIds);
-	}, [sortableIds]);
+	const [prevIds, setPrevIds] = react.useState(sortableIds);
+	if (prevIds !== sortableIds) {
+		setPrevIds(sortableIds);
+		if (prevIds.length !== sortableIds.length || sortableIds.some((id, index) => id !== prevIds[index])) setOrder(sortableIds);
+	}
 	const sensors = (0, _dnd_kit_core.useSensors)((0, _dnd_kit_core.useSensor)(_dnd_kit_core.PointerSensor), (0, _dnd_kit_core.useSensor)(_dnd_kit_core.KeyboardSensor, { coordinateGetter: _dnd_kit_sortable.sortableKeyboardCoordinates }));
 	const handleDragEnd = (event) => {
 		const { active, over } = event;
@@ -5366,7 +5375,7 @@ var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, the
 	const isPending = asyncDataState === AsyncDataState.PENDING;
 	const rowIds = react.useMemo(() => data.results.map((row) => {
 		return row[idColumn];
-	}), [data]);
+	}), [data, idColumn]);
 	const handleSortChange = react.useCallback(({ oldIndex, newIndex }) => {
 		const sortedResults = (0, _dnd_kit_sortable.arrayMove)(data.results, oldIndex, newIndex);
 		const newData = {
@@ -5546,7 +5555,11 @@ var PaginationContext = react.createContext({
 	indicatedPages: [],
 	disabledPages: []
 });
-var PaginationProvider = ({ onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children }) => {
+var DEFAULT_LABELS$1 = {};
+var DEFAULT_ON_ITEM_HOVER = () => null;
+var DEFAULT_INDICATED_PAGES = [];
+var DEFAULT_DISABLED_PAGES = [];
+var PaginationProvider = ({ onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = DEFAULT_INDICATED_PAGES, disabledPages = DEFAULT_DISABLED_PAGES, onItemHover = DEFAULT_ON_ITEM_HOVER, labels = DEFAULT_LABELS$1, children }) => {
 	const [internalCurrentPage, setInternalCurrentPage] = react.useState(1);
 	const currentPage = selectedPage || internalCurrentPage;
 	const goToPage = react.useCallback((pageNumber) => {
@@ -5561,45 +5574,48 @@ var PaginationProvider = ({ onSelectedPageChange, selectedPage, visibleElementsC
 	const goToNextPage = react.useCallback(() => {
 		if (nextAvailablePage) goToPage(nextAvailablePage);
 	}, [goToPage, nextAvailablePage]);
-	const paginationItems = getPaginationElementsToRender(currentPage, pagesCount, visibleElementsCount);
-	const value = react.useMemo(() => {
-		return {
+	const paginationItems = react.useMemo(() => getPaginationElementsToRender(currentPage, pagesCount, visibleElementsCount), [
+		currentPage,
+		pagesCount,
+		visibleElementsCount
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationContext, {
+		value: react.useMemo(() => {
+			return {
+				goToNextPage,
+				goToPreviousPage,
+				goToPage,
+				currentPage,
+				paginationItems,
+				indicatedPages,
+				disabledPages,
+				pagesCount,
+				onItemHover,
+				previousAvailablePage,
+				nextAvailablePage,
+				labels
+			};
+		}, [
 			goToNextPage,
 			goToPreviousPage,
 			goToPage,
 			currentPage,
-			paginationItems,
 			indicatedPages,
+			paginationItems,
 			disabledPages,
 			pagesCount,
 			onItemHover,
 			previousAvailablePage,
 			nextAvailablePage,
 			labels
-		};
-	}, [
-		goToNextPage,
-		goToPreviousPage,
-		goToPage,
-		currentPage,
-		indicatedPages,
-		paginationItems,
-		disabledPages,
-		pagesCount,
-		onItemHover,
-		previousAvailablePage,
-		nextAvailablePage,
-		labels
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationContext.Provider, {
-		value,
+		]),
 		children
 	});
 };
 //#endregion
 //#region src/components/pagination/usePagination.tsx
 var usePagination = () => {
-	const context = react.useContext(PaginationContext);
+	const context = react.use(PaginationContext);
 	if (!context) throw new Error("Ensure that you wrap any components with the PaginationProvider component");
 	return context;
 };
@@ -5890,10 +5906,11 @@ var StyledNav = styled("nav", { base: [
 ] });
 /** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */
 var Pagination$1 = ({ colorScheme, ...rest }) => {
-	const { applyPagination, getState, getExpandedRowModel, getRowModel, setPageIndex, getTotalRows, getPageCount, asyncDataState, hasAsyncData } = useDataTable();
+	const { applyPagination, removePagination, getState, getExpandedRowModel, getRowModel, setPageIndex, getTotalRows, getPageCount, asyncDataState, hasAsyncData } = useDataTable();
 	react.useEffect(() => {
 		applyPagination();
-	}, [applyPagination]);
+		return () => removePagination();
+	}, [applyPagination, removePagination]);
 	const { pagination: paginationState } = getState();
 	const isEmpty = !(asyncDataState === AsyncDataState.PENDING) && getTotalRows() === 0;
 	const showPagination = hasAsyncData ? getPageCount() > 1 : getExpandedRowModel().rows.length / paginationState.pageSize > 1;
@@ -6121,11 +6138,13 @@ var offsetWeekdayNames = (weekdayNames, firstDayOfWeek) => {
 	const start = weekdayNames.slice(0, firstDayOfWeek);
 	return weekdayNames.slice(firstDayOfWeek).concat(start);
 };
-var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0, monthNames = monthNamesShort, weekdayNames = weekdayNamesShort, labels = DEFAULT_LABELS, date = /* @__PURE__ */ new Date(), minDate, maxDate, setYear, ...rest }) => {
+var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0, monthNames = monthNamesShort, weekdayNames = weekdayNamesShort, labels = DEFAULT_LABELS, date: dateProp, minDate, maxDate, setYear, ...rest }) => {
+	const [fallbackDate] = react.useState(() => /* @__PURE__ */ new Date());
+	const date = dateProp ?? fallbackDate;
 	const [showYears, setShowYears] = react.useState(false);
 	const [currentYear, setCurrentYear] = react.useState(date?.getFullYear());
 	const handleSetYear = (year) => {
-		const newDate = date;
+		const newDate = new Date(date);
 		newDate.setFullYear(year);
 		setYear(newDate);
 		setShowYears(false);
@@ -6238,7 +6257,7 @@ var formatDateToString = (date, dateFormat = DEFAULT_DATE_FORMAT) => date ? (0,
 var DateInput = ({ ref, initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", appearance, theme, labels, revalidate, onChange, minDate, maxDate, ...rest }) => {
 	const [date, setDate] = react.useState(initialDate ? (0, dayjs.default)(initialDate).toDate() : void 0);
 	const [inputElRef, setInputElRef] = useCallbackRefState();
-	react.useImperativeHandle(ref, () => inputElRef);
+	const composedInputRef = (0, _radix_ui_react_compose_refs.useComposedRefs)(ref, setInputElRef);
 	const dateString = formatDateToString(date, dateFormat);
 	const handleInputChange = react.useCallback((event) => {
 		const newDateString = event.target.value;
@@ -6264,7 +6283,7 @@ var DateInput = ({ ref, initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayO
 	const [calendarOpen, setCalendarOpen] = react.useState(false);
 	const refDateToday = react.useRef(null);
 	const refDateSelected = react.useRef(null);
-	const iconSize = react.useMemo(() => getFieldIconSize(size), [size]);
+	const iconSize = getFieldIconSize(size);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "relative h-max",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
@@ -6275,7 +6294,7 @@ var DateInput = ({ ref, initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayO
 			theme,
 			...rest,
 			onChange: handleInputChange,
-			ref: setInputElRef,
+			ref: composedInputRef,
 			defaultValue: dateString
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Popover, {
 			modal: true,
@@ -6418,7 +6437,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-95"
+				"w-95",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			sm: [
 				"rounded-md",
@@ -6427,7 +6448,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-120"
+				"w-120",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			md: [
 				"rounded-md",
@@ -6436,7 +6459,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-150"
+				"w-150",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			lg: [
 				"rounded-md",
@@ -6445,7 +6470,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-200"
+				"w-200",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			xl: [
 				"rounded-md",
@@ -6454,7 +6481,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-275"
+				"w-275",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			fullscreen: [
 				"rounded-none",
@@ -6463,7 +6492,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-w-screen",
 				"max-h-screen",
 				"supports-svh:h-svh",
-				"supports-svh:max-h-svh"
+				"supports-svh:max-h-svh",
+				"[&>[data-dialog-close]]:top-safe-offset-4",
+				"[&>[data-dialog-close]]:right-safe-offset-4"
 			]
 		},
 		layout: { panel: [
@@ -6488,6 +6519,7 @@ var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog",
 			hasTooltip: false,
 			size: "md",
 			theme: "neutral",
+			"data-dialog-close": true,
 			className: "absolute top-4 right-4 size-12",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: _atom_learning_icons.Close })
 		}), react.Children.map(children, (child) => react.isValidElement(child) && child.type === DialogBackground ? null : child)]
@@ -6600,7 +6632,7 @@ var StyledContent$1 = styled(_radix_ui_react_dialog.Content, {
 	}
 });
 var DrawerContent = ({ children, ...rest }) => {
-	const { position } = react.useContext(DrawerContext);
+	const { position } = react.use(DrawerContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorScheme, {
 		base: "grey1",
 		accent: "primary1",
@@ -6621,9 +6653,8 @@ var DrawerContent = ({ children, ...rest }) => {
 //#region src/components/drawer/Drawer.context.tsx
 var DrawerContext = react.createContext({ position: "left" });
 var DrawerProvider = ({ position = "left", ...rest }) => {
-	const value = react.useMemo(() => ({ position }), [position]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerContext.Provider, {
-		value,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerContext, {
+		value: react.useMemo(() => ({ position }), [position]),
 		...rest
 	});
 };
@@ -6812,90 +6843,6 @@ var FileInput = ({ accept, children, className, disabled = false, multiple = fal
 };
 FileInput.displayName = "FileInput";
 //#endregion
-//#region src/components/flex/Flex.tsx
-var Flex = styled("div", {
-	base: ["flex"],
-	variants: {
-		direction: {
-			row: ["flex-row"],
-			"row-reverse": ["flex-row-reverse"],
-			column: ["flex-col"],
-			"column-reverse": ["flex-col-reverse"],
-			inherit: ["direction-[inherit]"],
-			initial: ["direction-[initial]"],
-			revert: ["direction-[revert]"],
-			"revert-layer": ["direction-[revert-layer]"],
-			unset: ["direction-[unset]"]
-		},
-		wrap: {
-			nowrap: ["flex-nowrap"],
-			wrap: ["flex-wrap"],
-			"wrap-reverse": ["flex-wrap-reverse"],
-			inherit: ["[flex-wrap:inherit]"],
-			initial: ["[flex-wrap:initial]"],
-			revert: ["[flex-wrap:revert]"],
-			"revert-layer": ["[flex-wrap:revert-layer]"],
-			unset: ["[flex-wrap:unset]"]
-		},
-		justify: {
-			normal: ["justify-normal"],
-			unsafe: ["[justify-content:unsafe]"],
-			safe: ["[justify-content:safe]"],
-			start: ["justify-start"],
-			center: ["justify-center"],
-			end: ["justify-end"],
-			"flex-start": ["justify-start"],
-			"flex-end": ["justify-end"],
-			left: ["[justify-content:left]"],
-			right: ["[justify-content:right]"],
-			"space-between": ["justify-between"],
-			"space-around": ["justify-around"],
-			"space-evenly": ["justify-evenly"],
-			stretch: ["justify-stretch"],
-			inherit: ["[justify-content:inherit]"],
-			initial: ["[justify-content:initial]"],
-			revert: ["[justify-content:revert]"],
-			"revert-layer": ["[justify-content:revert-layer]"],
-			unset: ["[justify-content:unset]"]
-		},
-		align: {
-			normal: ["[align-items:normal]"],
-			unsafe: ["[align-items:unsafe]"],
-			safe: ["[align-items:safe]"],
-			center: ["items-center"],
-			start: ["items-start"],
-			end: ["items-end"],
-			"self-start": ["[align-items:self-start]"],
-			"self-end": ["[align-items:self-end]"],
-			"flex-start": ["items-start"],
-			"flex-end": ["items-end"],
-			baseline: ["items-baseline"],
-			"first baseline": ["[align-items:first baseline]"],
-			"last baseline": ["[align-items:last baseline]"],
-			stretch: ["items-stretch"],
-			inherit: ["[align-items:inherit]"],
-			initial: ["[align-items:initial]"],
-			revert: ["[align-items:revert]"],
-			"revert-layer": ["[align-items:revert-layer]"],
-			unset: ["[align-items:unset]"]
-		},
-		gap: {
-			0: ["gap-0.5"],
-			1: ["gap-1"],
-			2: ["gap-2"],
-			3: ["gap-3"],
-			4: ["gap-4"],
-			24: ["gap-6"],
-			5: ["gap-8"],
-			6: ["gap-10"],
-			7: ["gap-12"],
-			8: ["gap-16"],
-			9: ["gap-20"]
-		}
-	}
-}, { enableResponsiveVariants: true });
-Flex.displayName = "Flex";
-//#endregion
 //#region src/components/form/Form.tsx
 var Form = (props) => {
 	const { children, defaultValues, validationMode = "onBlur", onSubmit, onError, appearance, theme, ...rest } = props;
@@ -6903,13 +6850,14 @@ var Form = (props) => {
 		defaultValues,
 		mode: validationMode
 	});
+	const customContextValue = react.useMemo(() => ({
+		appearance,
+		theme
+	}), [appearance, theme]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_hook_form.FormProvider, {
 		...methods,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormCustomContext.Provider, {
-			value: {
-				appearance,
-				theme
-			},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormCustomContext, {
+			value: customContextValue,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
 				"aria-label": "form",
 				onSubmit: methods.handleSubmit(onSubmit, onError),
@@ -6921,35 +6869,6 @@ var Form = (props) => {
 };
 Form.displayName = "Form";
 //#endregion
-//#region src/components/grid/Grid.tsx
-var GridContainer = styled("div", {
-	base: ["grid"],
-	variants: { gap: {
-		0: ["gap-0.5"],
-		1: ["gap-1"],
-		2: ["gap-2"],
-		3: ["gap-3"],
-		4: ["gap-4"],
-		24: ["gap-6"],
-		5: ["gap-8"],
-		6: ["gap-10"],
-		7: ["gap-12"],
-		8: ["gap-16"],
-		9: ["gap-20"]
-	} }
-}, { enableResponsiveVariants: true });
-var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridContainer, {
-	...rest,
-	style: {
-		...style,
-		...minItemSize && { "--min-item-size": minItemSize },
-		...maxItemSize && { "--max-item-size": maxItemSize }
-	},
-	gap,
-	className: cn(minItemSize && ["grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]"], className)
-});
-Grid.displayName = "Grid";
-//#endregion
 //#region src/components/input-field/InputField.tsx
 var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...rest }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
@@ -7181,12 +7100,12 @@ var defaultComponentsMap = {
 	text: MarkdownText,
 	thematicBreak: MarkdownThematicBreak
 };
-var generateNodeKey = (node) => {
+var generateNodeKey = (node, index) => {
 	if (node.position?.start) {
 		const { line, column, offset } = node.position.start;
 		return `${node.type}${line}${column}${offset}`;
 	}
-	return `${node.type}${+/* @__PURE__ */ new Date()}`;
+	return `${node.type}${index}`;
 };
 var MarkdownContent = ({ content, customComponents = {}, className }) => {
 	const AST = (0, mdast_util_from_markdown.default)(content, {
@@ -7197,12 +7116,12 @@ var MarkdownContent = ({ content, customComponents = {}, className }) => {
 		...defaultComponentsMap,
 		...customComponents
 	};
-	const handleNode = (node) => {
+	const handleNode = (node, index = 0) => {
 		const MarkdownComponent = componentsMap[node.type];
 		return MarkdownComponent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownComponent, {
 			node,
 			handleNode
-		}, generateNodeKey(node)) : null;
+		}, generateNodeKey(node, index)) : null;
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledMarkdownContent, {
 		className,
@@ -7233,7 +7152,7 @@ var colorSchemes$2 = { light: {
 //#region src/components/navigation/NavigationMenu.context.tsx
 var NavigationMenuContext = react.createContext(void 0);
 var useNavigationMenuContext = () => {
-	const context = react.useContext(NavigationMenuContext);
+	const context = react.use(NavigationMenuContext);
 	if (context === void 0) throw new Error("useNavigationMenuContext must be used within a NavigationMenuContextProvider");
 	return context;
 };
@@ -7431,10 +7350,10 @@ var ViewportPosition = styled("div", { base: [
 var NavigationMenuComponent = ({ children, className, ...rest }) => {
 	const [offset, setOffset] = react.useState();
 	const [activeItem, setActiveItem] = react.useState();
-	const [listWidth, setListWidth] = react.useState(0);
 	const listRef = react.useRef(null);
+	const listWidthRef = react.useRef(0);
 	react.useLayoutEffect(() => {
-		if (listRef.current) setListWidth(listRef.current.offsetWidth);
+		if (listRef.current) listWidthRef.current = listRef.current.offsetWidth;
 	}, [react.Children.toArray(children).length]);
 	react.useEffect(() => {
 		let timer;
@@ -7443,16 +7362,17 @@ var NavigationMenuComponent = ({ children, className, ...rest }) => {
 			if (timer !== null) clearTimeout(timer);
 		};
 	}, [activeItem]);
-	const onNodeUpdate = (trigger, itemValue) => {
+	const onNodeUpdate = react.useCallback((trigger, itemValue) => {
+		const listWidth = listWidthRef.current;
 		if (trigger && listWidth && activeItem === itemValue) {
 			const listCenter = listWidth / 2;
 			const triggerOffsetRight = listWidth - trigger.offsetLeft - trigger.offsetWidth + trigger.offsetWidth / 2;
 			setOffset(Math.round(listCenter - triggerOffsetRight));
 		}
 		return trigger;
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationMenuContext.Provider, {
-		value: { onNodeUpdate },
+	}, [activeItem]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationMenuContext, {
+		value: react.useMemo(() => ({ onNodeUpdate }), [onNodeUpdate]),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledMenu, {
 			className: cn(className),
 			style: colorSchemes$2["light"],
@@ -7500,11 +7420,11 @@ var NavigationMenuVerticalItem = (props) => /* @__PURE__ */ (0, react_jsx_runtim
 var NavigationMenuVerticalAccordionContext = react.createContext({});
 var NavigationMenuVerticalAccordionProvider = ({ children }) => {
 	const [triggerRef, setTriggerRef] = useCallbackRef();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationMenuVerticalAccordionContext.Provider, {
-		value: {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationMenuVerticalAccordionContext, {
+		value: react.useMemo(() => ({
 			triggerRef,
 			setTriggerRef
-		},
+		}), [triggerRef, setTriggerRef]),
 		children
 	});
 };
@@ -7523,7 +7443,7 @@ var NavigationMenuVerticalList = styled(_radix_ui_react_navigation_menu.List, {
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.tsx
 var StyledNavigationMenuVerticalAccordionContent = _radix_ui_react_collapsible.Content;
 var NavigationMenuVerticalAccordionContent = ({ children, ...rest }) => {
-	const { triggerRef } = react.useContext(NavigationMenuVerticalAccordionContext);
+	const { triggerRef } = react.use(NavigationMenuVerticalAccordionContext);
 	const handleOnKeydown = (e) => {
 		if (!triggerRef?.current) return;
 		if (e.key === "Escape") {
@@ -7581,7 +7501,7 @@ var NavigationMenuVerticalIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtim
 //#endregion
 //#region src/components/side-bar/SideBar.context.tsx
 var SideBarContext = react.createContext({ isExpanded: void 0 });
-var useSidebarState = () => react.useContext(SideBarContext);
+var useSidebarState = () => react.use(SideBarContext);
 //#endregion
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx
 var StyledNavigationMenuVerticalText = styled(Text, {
@@ -7634,7 +7554,7 @@ var StyledIcon = styled(Icon, { base: [
 	"[[data-state=open]>&]:rotate-180"
 ] });
 var NavigationMenuVerticalAccordionTrigger = ({ children, ...rest }) => {
-	const { setTriggerRef } = react.useContext(NavigationMenuVerticalAccordionContext);
+	const { setTriggerRef } = react.use(NavigationMenuVerticalAccordionContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_navigation_menu.Link, {
 		asChild: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledNavigationMenuVerticalAccordionTrigger, {
@@ -7816,13 +7736,11 @@ var NumberInputContainer = styled("div", {
 	}
 });
 var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", theme, emphasis, ...rest }) => {
-	const [internalValue, setInternalValue] = react.useState(value || defaultValue);
-	react.useEffect(() => {
-		if (typeof value !== "undefined") setInternalValue(value);
-	}, [value]);
+	const [internalValue, setInternalValue] = react.useState(value ?? defaultValue);
+	const currentValue = value ?? internalValue;
 	const inputRef = react.useRef(null);
-	react.useImperativeHandle(ref, () => inputRef.current);
-	const iconSize = react.useMemo(() => getFieldIconSize(size), [size]);
+	const composedInputRef = (0, _radix_ui_react_compose_refs.useComposedRefs)(ref, inputRef);
+	const iconSize = getFieldIconSize(size);
 	const stepperButtonLabels = {
 		increment: "increment",
 		decrement: "decrement",
@@ -7833,8 +7751,8 @@ var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max =
 		increment: `Cannot enter values above ${max}`,
 		...disabledTooltipContentProp
 	};
-	const isAtMax = internalValue >= max;
-	const isAtMin = internalValue <= min;
+	const isAtMax = currentValue >= max;
+	const isAtMin = currentValue <= min;
 	const clamp = react.useCallback((internalValue) => Math.min(Math.max(internalValue, min), max), [max, min]);
 	const updateValue = react.useCallback((newValue) => {
 		onValueChange?.(newValue);
@@ -7846,19 +7764,19 @@ var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max =
 	const increment = react.useCallback(() => {
 		if (isAtMax || isReadOnly) return;
 		inputRef?.current?.focus();
-		updateValue(clamp(Number(internalValue) + step));
+		updateValue(clamp(Number(currentValue) + step));
 	}, [
 		clamp,
 		isAtMax,
 		isReadOnly,
 		step,
 		updateValue,
-		internalValue
+		currentValue
 	]);
 	const decrement = react.useCallback(() => {
 		if (isAtMin || isReadOnly) return;
 		inputRef?.current?.focus();
-		updateValue(clamp(Number(internalValue) - step));
+		updateValue(clamp(Number(currentValue) - step));
 	}, [
 		clamp,
 		isAtMin,
@@ -7866,7 +7784,7 @@ var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max =
 		min,
 		step,
 		updateValue,
-		internalValue
+		currentValue
 	]);
 	const onKeyDown = react.useCallback((event) => {
 		if (event.nativeEvent.isComposing) return;
@@ -7898,11 +7816,11 @@ var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max =
 		min,
 		max
 	]);
-	const hasError = internalValue < min || internalValue > max;
+	const hasError = currentValue < min || currentValue > max;
 	const { state: externalState, "aria-invalid": externalAriaInvalid, ...restProps } = rest;
 	const inputProps = {
 		type: "number",
-		value: internalValue,
+		value: currentValue,
 		...restProps,
 		onChange: onInputChange,
 		onKeyDown,
@@ -7922,12 +7840,12 @@ var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max =
 			"focus-within:border-2",
 			"focus-within:border-blue-800"
 		]),
-		ref: inputRef,
+		ref: composedInputRef,
 		readOnly: isReadOnly,
 		disabled: isDisabled,
 		"aria-valuemin": min,
 		"aria-valuemax": max,
-		"aria-valuenow": internalValue,
+		"aria-valuenow": currentValue,
 		role: "spinbutton"
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NumberInputContainer, {
@@ -7968,7 +7886,7 @@ var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max =
 //#endregion
 //#region src/components/number-input-field/NumberInputField.tsx
 var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...rest }) => {
-	const { control } = (0, react_hook_form.useFormContext)();
+	const { control, setValue } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = (0, react_hook_form.useController)({
 		name,
@@ -7980,8 +7898,12 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 	const formAppearance = context?.appearance || appearance;
 	const formTheme = context?.theme ?? theme;
 	react.useEffect(() => {
-		if (typeof value !== "undefined") onChange(value);
-	}, [value]);
+		if (typeof value !== "undefined") setValue(name, value, { shouldDirty: false });
+	}, [
+		value,
+		name,
+		setValue
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
 		className,
 		description,
@@ -8090,7 +8012,7 @@ var Fieldset = styled("fieldset", { base: [
 	"min-w-0"
 ] });
 var RadioButtonFieldComponent = ({ children, className, direction = "column", defaultValue, value, description, label, name, validation, onValueChange, ...rest }) => {
-	const { control } = (0, react_hook_form.useFormContext)();
+	const { control, setValue } = (0, react_hook_form.useFormContext)();
 	const { field: { ref, onChange, value: innerValue } } = (0, react_hook_form.useController)({
 		name,
 		control,
@@ -8099,8 +8021,12 @@ var RadioButtonFieldComponent = ({ children, className, direction = "column", de
 	});
 	const { error } = useFieldError(name);
 	react.useEffect(() => {
-		if (typeof value !== "undefined") onChange(value);
-	}, [value]);
+		if (typeof value !== "undefined") setValue(name, value, { shouldDirty: false });
+	}, [
+		value,
+		name,
+		setValue
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Fieldset, {
 		className,
 		children: [
@@ -8276,26 +8202,25 @@ var SectionMessageContext = react.createContext(null);
 var SectionMessageProvider = ({ theme = "info", children }) => {
 	const [hasIcon, setHasIcon] = react.useState(false);
 	const [hasDismiss, setHasDismiss] = react.useState(false);
-	const value = react.useMemo(() => ({
-		theme,
-		hasIcon,
-		setHasIcon,
-		hasDismiss,
-		setHasDismiss
-	}), [
-		theme,
-		hasIcon,
-		setHasIcon,
-		hasDismiss,
-		setHasDismiss
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionMessageContext.Provider, {
-		value,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionMessageContext, {
+		value: react.useMemo(() => ({
+			theme,
+			hasIcon,
+			setHasIcon,
+			hasDismiss,
+			setHasDismiss
+		}), [
+			theme,
+			hasIcon,
+			setHasIcon,
+			hasDismiss,
+			setHasDismiss
+		]),
 		children
 	});
 };
 var useSectionMessageContext = () => {
-	const context = react.useContext(SectionMessageContext);
+	const context = react.use(SectionMessageContext);
 	if (!context) throw new Error("useSectionMessageContext must be used within a SectionMessageProvider");
 	return context;
 };
@@ -8575,7 +8500,7 @@ var SelectMenuContext = react.createContext({
 	size: "md",
 	theme: "grey"
 });
-var useSelectMenuContext = () => react.useContext(SelectMenuContext);
+var useSelectMenuContext = () => react.use(SelectMenuContext);
 //#endregion
 //#region src/components/select-menu/SelectMenuContent.tsx
 var Content$2 = styled(_radix_ui_react_select.Content, {
@@ -8798,17 +8723,23 @@ var SelectMenuTrigger = ({ ref, placeholder, children, ...rest }) => {
 };
 //#endregion
 //#region src/components/select-menu/SelectMenu.tsx
-var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectMenuContext.Provider, {
-	value: {
-		size,
-		theme,
-		state
-	},
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Root, {
-		...rest,
-		children
-	})
-});
+var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectMenuContext, {
+		value: react.useMemo(() => ({
+			size,
+			theme,
+			state
+		}), [
+			size,
+			theme,
+			state
+		]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Root, {
+			...rest,
+			children
+		})
+	});
+};
 var SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {
 	Trigger: SelectMenuTrigger,
 	Content: SelectMenuContent,
@@ -8969,8 +8900,8 @@ var SideBarComponent = ({ theme, className, children, type = "expandable", offse
 		...touchProps,
 		ref
 	} : {};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SideBarContext.Provider, {
-		value: { isExpanded },
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SideBarContext, {
+		value: react.useMemo(() => ({ isExpanded }), [isExpanded]),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Theme, {
 			theme: theme || light$1,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Root$2, {
@@ -9106,16 +9037,21 @@ var Slider = /* @__PURE__ */ Object.assign(SliderComponent, {
 //#endregion
 //#region src/components/slider-field/SliderField.tsx
 var SliderField = ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min = 0, max = 100, steps = [], ...rest }) => {
-	const { control } = (0, react_hook_form.useFormContext)();
+	const { control, setValue } = (0, react_hook_form.useFormContext)();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = (0, react_hook_form.useController)({
 		name,
 		control,
 		rules: validation,
 		defaultValue
 	});
+	const serializedValue = JSON.stringify(value);
 	react.useEffect(() => {
-		if (value?.length) onChange(value);
-	}, [JSON.stringify(value)]);
+		if (typeof value !== "undefined") setValue(name, value, { shouldDirty: false });
+	}, [
+		serializedValue,
+		name,
+		setValue
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
 		className,
 		fieldId: name,
@@ -9370,43 +9306,37 @@ var Spacer = styled("div", { base: [
 Spacer.displayName = "Spacer";
 //#endregion
 //#region src/components/stepper/Stepper.context.tsx
-var StepperContext = react.createContext({
-	steps: [],
-	goToPreviousStep: () => null,
-	goToNextStep: () => null,
-	goToStep: () => null,
-	activeStep: 0,
-	viewedSteps: [],
-	allowSkip: false,
-	direction: "horizontal",
-	hideLabels: false,
-	completedSteps: [],
-	showCompletedIcons: false
-});
+var StepperContext = react.createContext(null);
 var StepperProvider = ({ children, stepCount, allowSkip, onComplete, onStepChange, direction, steps, hideLabels, showCompletedIcons }) => {
 	const [activeStep, setActiveStep] = react.useState(0);
 	const [viewedSteps, setviewedSteps] = react.useState([0]);
 	const [completedSteps, setCompletedSteps] = react.useState([]);
 	const isControlled = !stepCount;
-	react.useEffect(() => {
-		setviewedSteps((prev) => prev.includes(activeStep) ? prev : [...prev, activeStep]);
-		onStepChange?.(activeStep);
-	}, [activeStep, onStepChange]);
-	const goToNextStep = () => {
+	const changeStep = react.useCallback((nextStep) => {
+		setActiveStep(nextStep);
+		setviewedSteps((prev) => prev.includes(nextStep) ? prev : [...prev, nextStep]);
+		onStepChange?.(nextStep);
+	}, [onStepChange]);
+	const goToNextStep = react.useCallback(() => {
 		const isCompleted = onComplete && activeStep === stepCount - 1;
 		const isNextStep = activeStep < stepCount - 1;
 		if (onComplete || isNextStep) setCompletedSteps((prev) => prev.includes(activeStep) ? prev : [...prev, activeStep]);
 		if (isCompleted) return onComplete?.();
-		if (isNextStep) return setActiveStep((current) => current + 1);
-	};
-	const goToPreviousStep = () => {
-		setActiveStep((current) => current - 1);
-	};
-	const goToStep = (index) => {
-		setActiveStep(index);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperContext.Provider, {
-		value: {
+		if (isNextStep) return changeStep(activeStep + 1);
+	}, [
+		activeStep,
+		stepCount,
+		onComplete,
+		changeStep
+	]);
+	const goToPreviousStep = react.useCallback(() => {
+		changeStep(activeStep - 1);
+	}, [activeStep, changeStep]);
+	const goToStep = react.useCallback((index) => {
+		changeStep(index);
+	}, [changeStep]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperContext, {
+		value: react.useMemo(() => ({
 			steps: steps || Array(stepCount).fill(""),
 			goToPreviousStep: isControlled ? void 0 : goToPreviousStep,
 			goToNextStep: isControlled ? void 0 : goToNextStep,
@@ -9418,12 +9348,26 @@ var StepperProvider = ({ children, stepCount, allowSkip, onComplete, onStepChang
 			direction,
 			hideLabels,
 			showCompletedIcons
-		},
+		}), [
+			steps,
+			stepCount,
+			isControlled,
+			goToPreviousStep,
+			goToNextStep,
+			goToStep,
+			activeStep,
+			viewedSteps,
+			completedSteps,
+			allowSkip,
+			direction,
+			hideLabels,
+			showCompletedIcons
+		]),
 		children
 	});
 };
 var useStepper = () => {
-	const context = react.useContext(StepperContext);
+	const context = react.use(StepperContext);
 	if (!context) throw new Error("Ensure that you wrap any components with the root component Stepper");
 	return context;
 };
@@ -9809,30 +9753,35 @@ var TabsTrigger = ({ ref, children, ...rest }) => /* @__PURE__ */ (0, react_jsx_
 });
 //#endregion
 //#region src/utilities/hooks/useScrollPosition.ts
+var NO_ELEMENT_SNAPSHOT = {
+	left: 0,
+	top: 0
+};
 var useScrollPosition = ({ element, delay = 500, delayMethod = "throttle" }) => {
-	const [scrollPosition, setScrollPosition] = (0, react.useState)({
-		left: 0,
-		top: 0
-	});
-	const delayMethodFn = (0, react.useMemo)(() => delayMethod === "debounce" ? throttle_debounce.debounce : throttle_debounce.throttle, [delayMethod]);
-	(0, react.useEffect)(() => {
-		if (!element) return;
-		const handleScroll = delayMethodFn(delay, () => {
-			setScrollPosition((prev) => prev.left === element.scrollLeft && prev.top === element.scrollTop ? prev : {
-				left: element.scrollLeft,
-				top: element.scrollTop
-			});
-		});
+	const snapshotRef = (0, react.useRef)(null);
+	const subscribe = (0, react.useCallback)((onStoreChange) => {
+		if (!element) return () => void 0;
+		const handleScroll = (delayMethod === "debounce" ? throttle_debounce.debounce : throttle_debounce.throttle)(delay, onStoreChange);
 		element.addEventListener("scroll", handleScroll);
 		return () => {
+			handleScroll.cancel();
 			element.removeEventListener("scroll", handleScroll);
 		};
 	}, [
 		element,
-		delayMethodFn,
-		delay
+		delay,
+		delayMethod
 	]);
-	return scrollPosition;
+	const getSnapshot = () => {
+		if (!element) return NO_ELEMENT_SNAPSHOT;
+		const prev = snapshotRef.current;
+		if (!prev || prev.left !== element.scrollLeft || prev.top !== element.scrollTop) snapshotRef.current = {
+			left: element.scrollLeft,
+			top: element.scrollTop
+		};
+		return snapshotRef.current;
+	};
+	return (0, react.useSyncExternalStore)(subscribe, getSnapshot, () => NO_ELEMENT_SNAPSHOT);
 };
 //#endregion
 //#region src/utilities/hooks/useSize.ts
@@ -10143,7 +10092,7 @@ TileToggleGroup.Item = TileToggleGroupItem;
 //#region src/components/toast/Toast.context.tsx
 var ToastContext = react.createContext(null);
 var useToastContext = () => {
-	const context = react.useContext(ToastContext);
+	const context = react.use(ToastContext);
 	if (!context) throw new Error("useToastContext must be used within a ToastProvider");
 	return context;
 };
@@ -10212,9 +10161,9 @@ var Toast$1 = /* @__PURE__ */ Object.assign(ToastComponent, {
 var ToastProviderBase = /* @__PURE__ */ styled("div", { base: [
 	"fixed",
 	"z-2147483647",
-	"inset-2",
+	"inset-safe-offset-2",
 	"pointer-events-none",
-	"sm:top-3"
+	"sm:top-safe-offset-3"
 ] });
 var ToastWrapper = /* @__PURE__ */ styled("div", {
 	base: [
@@ -10257,7 +10206,7 @@ var ToastProvider = ({ children, className }) => {
 				"aria-live": toast.ariaProps["aria-live"],
 				style: { "--offset": `${offset}px` },
 				className: "top-(--offset)",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastContext.Provider, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastContext, {
 					value: toast,
 					children: typeof children === "function" ? children(toast) : react.isValidElement(children) ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Toast$1, {
 						className: "w-100",
@@ -10554,25 +10503,29 @@ var ToggleGroup = {
 };
 //#endregion
 //#region src/utilities/hooks/useWindowScrollPosition.ts
+var SERVER_SNAPSHOT = {
+	x: 0,
+	y: 0
+};
 var useWindowScrollPosition = ({ delay = 500, delayMethod = "throttle" } = {}) => {
-	const [scrollPosition, setScrollPosition] = (0, react.useState)({
-		x: 0,
-		y: 0
-	});
-	const delayMethodFn = (0, react.useMemo)(() => delayMethod === "debounce" ? throttle_debounce.debounce : throttle_debounce.throttle, [delayMethod]);
-	(0, react.useEffect)(() => {
-		const handleScroll = delayMethodFn(delay, () => {
-			setScrollPosition({
-				x: window.scrollX,
-				y: window.scrollY
-			});
-		});
+	const snapshotRef = (0, react.useRef)(null);
+	const subscribe = (0, react.useCallback)((onStoreChange) => {
+		const handleScroll = (delayMethod === "debounce" ? throttle_debounce.debounce : throttle_debounce.throttle)(delay, onStoreChange);
 		window.addEventListener("scroll", handleScroll);
 		return () => {
+			handleScroll.cancel();
 			window.removeEventListener("scroll", handleScroll);
 		};
-	}, [delayMethodFn, delay]);
-	return scrollPosition;
+	}, [delay, delayMethod]);
+	const getSnapshot = () => {
+		const prev = snapshotRef.current;
+		if (!prev || prev.x !== window.scrollX || prev.y !== window.scrollY) snapshotRef.current = {
+			x: window.scrollX,
+			y: window.scrollY
+		};
+		return snapshotRef.current;
+	};
+	return (0, react.useSyncExternalStore)(subscribe, getSnapshot, () => SERVER_SNAPSHOT);
 };
 var colorSchemes = { light: {
 	"--background": "white",
@@ -10625,21 +10578,21 @@ var StyledRoot = styled("header", {
 	variants: {
 		hasScrolled: { true: ["shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]"] },
 		size: {
-			md: ["h-16"],
-			lg: ["h-24"]
+			md: ["h-safe-offset-top-16", "pt-safe"],
+			lg: ["h-safe-offset-top-24", "pt-safe"]
 		},
 		diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] },
 		appearance: {
 			standard: [
 				"w-screen",
 				"max-w-full",
-				"top-0",
+				"top-safe",
 				"border-b",
 				"border-b-(--border-bottom)"
 			],
 			rounded: [
 				"w-full",
-				"top-2",
+				"top-safe-offset-2",
 				"p-2",
 				"border",
 				"border-white",
@@ -10698,8 +10651,6 @@ var Video = ({ ref, id, ratio = 9 / 16, className, ...rest }) => /* @__PURE__ */
 //#endregion
 //#region src/components/keyboard-shortcut/KeyboardShortcut.tsx
 var KeyboardShortcut$1 = ({ ref, asChild, config, targetWindow = false, onKeyDown, ...rest }) => {
-	const [targetElRef, setTargetElRef] = useCallbackRefState();
-	react.useImperativeHandle(ref, () => targetElRef);
 	const handleOnKeydown = react.useCallback((e) => {
 		config.forEach(({ shortcut, action }) => {
 			if (Object.entries(shortcut).every(([key, value]) => e[key] === value)) action({
@@ -10709,15 +10660,21 @@ var KeyboardShortcut$1 = ({ ref, asChild, config, targetWindow = false, onKeyDow
 		});
 		onKeyDown?.(e);
 	}, [config, onKeyDown]);
+	const handleOnKeydownRef = react.useRef(handleOnKeydown);
+	react.useLayoutEffect(() => {
+		handleOnKeydownRef.current = handleOnKeydown;
+	});
 	react.useEffect(() => {
-		if (targetWindow) window.addEventListener("keydown", handleOnKeydown);
+		if (!targetWindow) return;
+		const listener = (e) => handleOnKeydownRef.current(e);
+		window.addEventListener("keydown", listener);
 		return () => {
-			window.removeEventListener("keydown", handleOnKeydown);
+			window.removeEventListener("keydown", listener);
 		};
-	}, [targetWindow, handleOnKeydown]);
+	}, [targetWindow]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "div", {
 		onKeyDown: targetWindow ? void 0 : handleOnKeydown,
-		ref: setTargetElRef,
+		ref,
 		...rest
 	});
 };
@@ -10763,7 +10720,7 @@ var badgeSizeMap = {
 	lg: "sm"
 };
 var SegmentedControlBadge = ({ className, ...rest }) => {
-	const { size } = react.useContext(SegmentedControlContext);
+	const { size } = react.use(SegmentedControlContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
 		...rest,
 		size: badgeSizeMap[size],
@@ -10788,7 +10745,7 @@ var StyledText = styled(Text, {
 	} }
 }, { enableResponsiveVariants: true });
 var SegmentedControlDescription = (props) => {
-	const { size } = react.useContext(SegmentedControlContext);
+	const { size } = react.use(SegmentedControlContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, {
 		...props,
 		size
@@ -10805,7 +10762,7 @@ var StyledHeading = styled(Text, {
 	} }
 }, { enableResponsiveVariants: true });
 var SegmentedControlHeading = (props) => {
-	const { size } = react.useContext(SegmentedControlContext);
+	const { size } = react.use(SegmentedControlContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledHeading, {
 		...props,
 		size
@@ -10819,7 +10776,7 @@ var sizeMap = {
 	lg: "md"
 };
 var SegmentedControlIcon = (props) => {
-	const { size } = react.useContext(SegmentedControlContext);
+	const { size } = react.use(SegmentedControlContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 		...props,
 		size: sizeMap[size]
@@ -10887,7 +10844,7 @@ var StyledItem = styled(_radix_ui_react_tabs.Trigger, {
 	}
 }, { enableResponsiveVariants: true });
 var SegmentedControlItem = ({ ref, children, ...rest }) => {
-	const { size, theme } = react.useContext(SegmentedControlContext);
+	const { size, theme } = react.use(SegmentedControlContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledItem, {
 		...rest,
 		theme,
@@ -10928,7 +10885,7 @@ var SelectionIndicator = styled("div", {
 	} }
 });
 var SegmentedControlItemList = (props) => {
-	const { theme, defaultValue, value } = react.useContext(SegmentedControlContext);
+	const { theme, defaultValue, value } = react.use(SegmentedControlContext);
 	const tabsRef = react.useRef([]);
 	const selectedIndex = react.Children.toArray(props.children).findIndex((child) => child?.props.value === value);
 	const [indicatorStyles, setIndicatorStyles] = react.useState({
@@ -10947,26 +10904,28 @@ var SegmentedControlItemList = (props) => {
 			width: Math.round(width)
 		});
 	}, [selectedIndex]);
+	const updateIndicatorPositionRef = react.useRef(updateIndicatorPosition);
+	react.useLayoutEffect(() => {
+		updateIndicatorPositionRef.current = updateIndicatorPosition;
+	});
+	const tabCount = react.Children.count(props.children);
 	react.useEffect(() => {
-		const resizeObserver = new ResizeObserver(updateIndicatorPosition);
-		const currentTabs = tabsRef.current;
-		currentTabs.forEach((tab) => {
+		const resizeObserver = new ResizeObserver(() => updateIndicatorPositionRef.current());
+		tabsRef.current.forEach((tab) => {
 			if (tab) resizeObserver.observe(tab);
 		});
 		return () => {
-			currentTabs.forEach((tab) => {
-				if (tab) resizeObserver.unobserve(tab);
-			});
 			resizeObserver.disconnect();
 		};
-	}, [selectedIndex, updateIndicatorPosition]);
+	}, [tabCount]);
 	react.useEffect(() => {
-		window.addEventListener("resize", updateIndicatorPosition);
+		const handleResize = () => updateIndicatorPositionRef.current();
+		window.addEventListener("resize", handleResize);
 		return () => {
-			window.removeEventListener("resize", updateIndicatorPosition);
+			window.removeEventListener("resize", handleResize);
 		};
-	}, [updateIndicatorPosition]);
-	react.useEffect(() => {
+	}, []);
+	react.useLayoutEffect(() => {
 		updateIndicatorPosition();
 	}, [selectedIndex, updateIndicatorPosition]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTriggerList, {
@@ -10983,9 +10942,12 @@ var SegmentedControlItemList = (props) => {
 					setHasInteracted(true);
 					if (child.props.onClick) child.props.onClick(e);
 				},
-				ref: (el) => {
+				ref: (0, _radix_ui_react_compose_refs.composeRefs)(child.props.ref, (el) => {
 					tabsRef.current[index] = el;
-				}
+					return () => {
+						tabsRef.current[index] = null;
+					};
+				})
 			});
 		})]
 	});
@@ -11004,25 +10966,24 @@ var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, v
 	const isControlled = value !== void 0;
 	const [internalValue, setInternalValue] = react.useState(defaultValue);
 	const currentValue = isControlled ? value : internalValue;
-	const handleValueChange = isControlled ? onValueChange : setInternalValue;
-	react.useEffect(() => {
-		if (!isControlled && defaultValue) setInternalValue(defaultValue);
-	}, [defaultValue, isControlled]);
-	const contextValue = react.useMemo(() => ({
-		size,
-		theme,
-		defaultValue,
-		onValueChange: handleValueChange,
-		value: currentValue
-	}), [
-		size,
-		theme,
-		defaultValue,
-		handleValueChange,
-		currentValue
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedControlContext.Provider, {
-		value: contextValue,
+	const handleValueChange = react.useCallback((newValue) => {
+		if (!isControlled) setInternalValue(newValue);
+		onValueChange?.(newValue);
+	}, [isControlled, onValueChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedControlContext, {
+		value: react.useMemo(() => ({
+			size,
+			theme,
+			defaultValue,
+			onValueChange: handleValueChange,
+			value: currentValue
+		}), [
+			size,
+			theme,
+			defaultValue,
+			handleValueChange,
+			currentValue
+		]),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSegmentedControlRoot, {
 			size,
 			value: currentValue,
@@ -11085,11 +11046,11 @@ var FileDrop = ({ children, accept, multiple, onDrop, ...rest }) => {
 	const handleKeyDown = (event) => {
 		if (["Space", "Enter"].includes(event.key)) fileUploadInputRef.current?.click();
 	};
-	const value = {
+	const value = react.useMemo(() => ({
 		isDragging,
 		files
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileDropContext.Provider, {
+	}), [isDragging, files]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileDropContext, {
 		value,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledContainer, {
 			onDragOver: handleDragOver,
@@ -11119,7 +11080,7 @@ var FileDrop = ({ children, accept, multiple, onDrop, ...rest }) => {
 FileDrop.displayName = "FileDrop";
 //#endregion
 //#region src/components/file-drop/useFileDrop.ts
-var useFileDrop = () => react.useContext(FileDropContext);
+var useFileDrop = () => react.use(FileDropContext);
 //#endregion
 //#region src/components/index.ts
 var Alert = { Provider: AlertProvider };
@@ -11132,7 +11093,6 @@ exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.BannerRegular = BannerRegular;
 exports.BannerSlim = BannerSlim;
-exports.Box = Box;
 exports.Button = Button;
 exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
@@ -11159,9 +11119,7 @@ exports.EmptyState = EmptyState;
 exports.FieldWrapper = FieldWrapper;
 exports.FileDrop = FileDrop;
 exports.FileInput = FileInput;
-exports.Flex = Flex;
 exports.Form = Form;
-exports.Grid = Grid;
 exports.Heading = Heading;
 exports.Icon = Icon;
 exports.Image = Image;