@atom-learning/components 9.0.0 → 10.0.1

package/dist/index.cjs.js

@@ -30,21 +30,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 //#endregion
+let _radix_ui_react_accordion = require("@radix-ui/react-accordion");
 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");
 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");
 invariant = __toESM(invariant, 1);
 let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
+let _radix_ui_react_alert_dialog = require("@radix-ui/react-alert-dialog");
 let throttle_debounce = require("throttle-debounce");
 let embla_carousel_react = require("embla-carousel-react");
 embla_carousel_react = __toESM(embla_carousel_react, 1);
@@ -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");
@@ -74,11 +73,8 @@ let dayzed = require("dayzed");
 let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
 let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 let mdast_util_directive = require("mdast-util-directive");
-mdast_util_directive = __toESM(mdast_util_directive, 1);
 let mdast_util_from_markdown = require("mdast-util-from-markdown");
-mdast_util_from_markdown = __toESM(mdast_util_from_markdown, 1);
 let micromark_extension_directive = require("micromark-extension-directive");
-micromark_extension_directive = __toESM(micromark_extension_directive, 1);
 let _radix_ui_react_navigation_menu = require("@radix-ui/react-navigation-menu");
 _radix_ui_react_navigation_menu = __toESM(_radix_ui_react_navigation_menu, 1);
 let _radix_ui_react_progress = require("@radix-ui/react-progress");
@@ -92,18 +88,6 @@ let _radix_ui_react_tabs = require("@radix-ui/react-tabs");
 let react_hot_toast = require("react-hot-toast");
 let react_player_vimeo_js = require("react-player/vimeo.js");
 react_player_vimeo_js = __toESM(react_player_vimeo_js, 1);
-//#region src/utilities/hooks/useIsMountedRef.ts
-var useIsMountedRef = () => {
-	const isMountedRef = (0, react.useRef)(void 0);
-	(0, react.useEffect)(() => {
-		isMountedRef.current = true;
-		return () => {
-			isMountedRef.current = false;
-		};
-	});
-	return isMountedRef;
-};
-//#endregion
 //#region src/styled.tsx
 tailwind_variants.defaultConfig.twMerge = false;
 var isArbitraryNumber = (value) => /^\[[\d.]+\]$/.test(value) || !Number.isNaN(Number(value));
@@ -212,7 +196,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");
@@ -223,169 +210,650 @@ function styled(el, styles, options) {
 	return Comp;
 }
 //#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;
+//#region src/utilities/css-wrapper/CSSWrapper.tsx
+var CSSWrapper = ({ className, children }) => className ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className,
+	children
+}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+CSSWrapper.displayName = "CSSWrapper";
+//#endregion
+//#region src/components/accordion/AccordionContent.tsx
+var StyledContent$4 = styled(_radix_ui_react_accordion.Content, { base: [
+	"border-none",
+	"w-full",
+	"bg-(--base-1)",
+	"overflow-hidden",
+	"data-[state=open]:rounded-b-sm",
+	"data-[state=open]:rounded-t-none",
+	"motion-safe:data-[state=open]:animate-accordion-open",
+	"motion-safe:data-[state=closed]:animate-accordion-close"
+] });
+var AccordionContent = ({ children, className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledContent$4, {
+	...rest,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CSSWrapper, {
+		className,
+		children
+	})
+});
+//#endregion
+//#region src/components/accordion/AccordionItem.tsx
+var AccordionItem = styled(_radix_ui_react_accordion.Item, { base: ["w-full", "not-last:mb-1"] }, { enablePolymorphism: false });
+//#endregion
+//#region src/experiments/color-scheme/ColorScheme.config.ts
+var generateColors = ({ prefix, colorName, color0 = "" }) => {
+	const colors = {};
+	let i = 1;
+	if (color0) {
+		colors[`--${prefix}-${i}`] = `var(--color-${color0})`;
+		i++;
+	}
+	let k = 1;
+	for (; i <= 11; i++) {
+		colors[`--${prefix}-${i}`] = `var(--color-${colorName}-${k * 100})`;
+		k++;
+	}
+	return colors;
 };
-var getExternalAnchorProps = (url) => isExternalUrl(url) ? {
-	target: "_blank",
-	rel: "noopener noreferrer"
-} : {};
+var colorSchemes$4 = {};
+colorSchemes$4["interactive-loContrast"] = {
+	"--interactive-foreground": "var(--foreground)",
+	"--interactive-1": "var(--accent-1)",
+	"--interactive-2": "var(--accent-2)",
+	"--interactive-3": "var(--accent-3)"
+};
+colorSchemes$4["interactive-hiContrast"] = {
+	"--interactive-foreground": "var(--foreground-7-plus)",
+	"--interactive-1": "var(--accent-9)",
+	"--interactive-2": "var(--accent-10)",
+	"--interactive-3": "var(--accent-11)"
+};
+var colorNames = [
+	"primary",
+	"grey",
+	"blue",
+	"pink",
+	"purple",
+	"cyan",
+	"green",
+	"magenta",
+	"red",
+	"teal",
+	"orange",
+	"yellow",
+	"lime"
+];
+var createVariants = () => Object.fromEntries(colorNames.flatMap((c) => [[`${c}1`, {
+	colorName: c,
+	color0: "white"
+}], [`${c}2`, { colorName: c }]]));
+var bases = createVariants();
+var accents = bases;
+(() => {
+	Object.entries(bases).forEach(([name, config]) => {
+		const themeName = `base-${name}`;
+		colorSchemes$4[themeName] = {
+			"--foreground": "var(--color-grey-1000)",
+			"--foreground-7-plus": "var(--color-white)",
+			...generateColors({
+				prefix: "base",
+				colorName: config.colorName,
+				color0: config.color0
+			})
+		};
+	});
+	Object.entries(accents).forEach(([name, config]) => {
+		colorSchemes$4[`accent-${name}`] = generateColors({
+			prefix: "accent",
+			colorName: config.colorName,
+			color0: config.color0
+		});
+	});
+})();
 //#endregion
-//#region src/components/loader/Loader.tsx
-var Dot$1 = styled("div", {
+//#region src/experiments/color-scheme/ColorScheme.tsx
+/**
+* @experimental Component has not been finalised. Further design input required. Use with caution.
+*/
+var ColorScheme = ({ ref, base = "", accent = "", interactive, asChild = false, ...rest }) => {
+	const Component = asChild ? _radix_ui_react_slot.Slot : "div";
+	const style = {
+		...interactive && colorSchemes$4[`interactive-${interactive}`],
+		...accent && colorSchemes$4[`accent-${accent}`],
+		...base && colorSchemes$4[`base-${base}`]
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		...rest,
+		ref,
+		style
+	});
+};
+//#endregion
+//#region src/components/icon/Icon.tsx
+var StyledIcon$3 = styled("svg", {
 	base: [
-		"animate-pulse",
-		"bg-current",
-		"rounded-full",
-		"animation-duration-900",
-		"nth-3:animation-delay-300",
-		"nth-4:animation-delay-600"
+		"inline-block",
+		"fill-none",
+		"shrink-0",
+		"stroke-current",
+		"[stroke-linecap:round]",
+		"[stroke-linejoin:round]",
+		"align-middle"
 	],
 	variants: { size: {
-		sm: ["size-1", "mx-0.5"],
-		md: ["size-1.5", "mx-0.5"],
-		lg: ["size-2", "mx-[3px]"]
+		sm: ["size-4", "stroke-[1.5]"],
+		md: ["size-6", "stroke-[1.75]"],
+		lg: ["size-8", "stroke-2"]
 	} }
-});
-var Loader = ({ className, message = "Loading", size = "md", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-	className: cn("flex", "justify-center", className),
-	role: "alert",
+}, { enableResponsiveVariants: true });
+var Icon = ({ ref, is: SVG, size = "md", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon$3, {
+	size,
+	"aria-hidden": "true",
 	...rest,
-	children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "sr-only",
-			children: message
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot$1, { size }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot$1, { size }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot$1, { size })
-	]
+	as: SVG,
+	ref
 });
 //#endregion
-//#region src/components/button/Button.tsx
-var StyledButton = styled("button", {
+//#region src/components/accordion/AccordionTrigger.tsx
+var RotatingIcon = styled(Icon, { base: [
+	"transition-transform",
+	"duration-300",
+	"[[data-state=open]>&]:rotate-180",
+	"[[data-state=closed]>&]:rotate-0"
+] });
+var StyledTrigger$1 = styled(_radix_ui_react_accordion.Trigger, {
 	base: [
+		"border-none",
+		"py-3",
+		"px-4",
+		"w-full",
+		"flex",
+		"justify-between",
 		"items-center",
-		"bg-[unset]",
-		"rounded-md",
 		"cursor-pointer",
-		"flex",
-		"font-body",
-		"font-semibold",
-		"justify-center",
-		"no-underline",
-		"transition-all",
-		"duration-100",
-		"ease-out",
-		"whitespace-nowrap",
-		"w-max",
+		"bg-(--interactive-2)",
+		"text-(--interactive-foreground)",
 		"disabled:cursor-not-allowed",
-		"disabled:opacity-30"
+		"disabled:opacity-30",
+		"not-disabled:active:bg-(--interactive-3)",
+		"not-disabled:focus-visible:bg-(--interactive-3)",
+		"not-disabled:focus-visible:outline-none",
+		"not-disabled:focus-visible:relative",
+		"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
+		"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
+		"not-disabled:focus-visible:z-1",
+		"not-disabled:hover:bg-(--interactive-3)",
+		"data-[state=open]:rounded-b-none",
+		"data-[state=open]:rounded-t-sm",
+		"data-[state=closed]:rounded-sm"
 	],
-	variants: {
-		theme: {
-			primary: [
-				"[--base:var(--color-primary-800)]",
-				"[--interact:var(--color-primary-900)]",
-				"[--active:var(--color-primary-1000)]"
-			],
-			secondary: [
-				"[--base:var(--color-primary-1000)]",
-				"[--interact:var(--color-primary-1100)]",
-				"[--active:var(--color-primary-1200)]"
-			],
-			success: [
-				"[--base:var(--color-success)]",
-				"[--interact:var(--color-success-mid)]",
-				"[--active:var(--color-success-dark)]"
-			],
-			warning: [
-				"[--base:var(--color-warning)]",
-				"[--interact:var(--color-warning-mid)]",
-				"[--active:var(--color-warning-dark)]",
-				"[--text:var(--color-grey-800)]"
-			],
-			danger: [
-				"[--base:var(--color-danger)]",
-				"[--interact:var(--color-danger-mid)]",
-				"[--active:var(--color-danger-dark)]"
-			],
-			neutral: [
-				"[--base:white]",
-				"[--interact:rgba(255,255,255,0.9)]",
-				"[--active:rgba(255,255,255,0.75)]",
-				"[--text:var(--color-primary-800)]"
+	variants: { arrowPosition: {
+		left: [
+			"flex-row-reverse",
+			"gap-2",
+			"justify-end"
+		],
+		right: []
+	} }
+});
+var AccordionTrigger = ({ children, colorScheme = {}, asChild, arrowPosition = "right", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorScheme, {
+	asChild: true,
+	accent: "grey1",
+	interactive: "loContrast",
+	...colorScheme,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTrigger$1, {
+		asChild,
+		arrowPosition,
+		...rest,
+		children: asChild ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RotatingIcon, {
+			is: _atom_learning_icons.ChevronDown,
+			"data-testid": "accordion-chevron"
+		})] })
+	})
+});
+//#endregion
+//#region src/components/accordion/Accordion.tsx
+var AccordionBase = ({ ref, type = "single", className, children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_accordion.Root, {
+	ref,
+	type,
+	className: cn("w-full", className),
+	...rest,
+	children
+});
+var Accordion = /* @__PURE__ */ Object.assign(AccordionBase, {
+	Item: AccordionItem,
+	Content: AccordionContent,
+	Trigger: AccordionTrigger
+});
+//#endregion
+//#region src/components/tooltip/TooltipContent.tsx
+var StyledContent$3 = styled(_radix_ui_react_tooltip.Content, {
+	base: [
+		"bg-grey-900",
+		"rounded-sm",
+		"shadow-sm",
+		"text-white",
+		"font-body",
+		"text-sm",
+		"leading-normal",
+		"whitespace-normal",
+		"px-3",
+		"py-2",
+		"z-10",
+		"will-change-transform",
+		"will-change-[opacity]",
+		"[--slide-opacity-out:0]",
+		"data-[side=top]:[--slide-direction-out-y:-4px]",
+		"data-[side=right]:[--slide-direction-out-x:4px]",
+		"data-[side=bottom]:[--slide-direction-out-y:4px]",
+		"data-[side=left]:[--slide-direction-out-x:-4px]",
+		"motion-safe:data-[state=delayed-open]:animate-slide-direction-in",
+		"motion-safe:data-[state=closed]:animate-slide-direction-out"
+	],
+	variants: { size: {
+		sm: ["max-w-25"],
+		md: ["max-w-[250px]"],
+		lg: ["max-w-100"]
+	} }
+});
+var StyledArrow$1 = styled(_radix_ui_react_tooltip.Arrow, { base: [
+	"fill-grey-900",
+	"in-data-[align=end]:mr-2",
+	"in-data-[align=start]:ml-2"
+] });
+var TooltipContent = ({ children, side = "top", sideOffset = 4, size = "md", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledContent$3, {
+	side,
+	sideOffset,
+	size,
+	...rest,
+	children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledArrow$1, {})]
+});
+//#endregion
+//#region src/components/tooltip/Tooltip.tsx
+var TooltipComponent = ({ children, delayDuration = 350, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Root, {
+	delayDuration,
+	...rest,
+	children
+});
+var Tooltip = /* @__PURE__ */ Object.assign(TooltipComponent, {
+	Content: TooltipContent,
+	Trigger: _radix_ui_react_tooltip.Trigger,
+	Portal: _radix_ui_react_tooltip.Portal,
+	Provider: _radix_ui_react_tooltip.Provider
+});
+TooltipComponent.displayName = "Tooltip";
+//#endregion
+//#region src/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.tsx
+var OptionalTooltipWrapper = ({ hasTooltip, label, tooltipSide, children }) => {
+	if (hasTooltip) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip.Trigger, {
+		asChild: true,
+		onFocus: (e) => {
+			if (!e.currentTarget.matches(":focus-visible")) e.preventDefault();
+		},
+		children
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip.Content, {
+		side: tooltipSide,
+		children: label
+	})] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+};
+OptionalTooltipWrapper.displayName = "OptionalTooltipWrapper";
+//#endregion
+//#region src/utilities/uri/index.ts
+var isExternalUrl = (url) => !!url && /^https?:\/\//.test(url);
+var getExternalAnchorProps = (url) => isExternalUrl(url) ? {
+	target: "_blank",
+	rel: "noopener noreferrer"
+} : {};
+//#endregion
+//#region src/components/action-icon/ActionIcon.constants.ts
+var ActionIconSizeMap = {
+	xs: "sm",
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+};
+//#endregion
+//#region src/components/action-icon/ActionIcon.tsx
+var StyledButton$5 = styled("button", {
+	base: [
+		"items-center",
+		"appearance-none",
+		"bg-white",
+		"rounded-md",
+		"box-border",
+		"cursor-pointer",
+		"flex",
+		"shrink-0",
+		"justify-center",
+		"transition-all",
+		"duration-100",
+		"ease-out",
+		"disabled:cursor-not-allowed",
+		"disabled:opacity-30"
+	],
+	variants: {
+		theme: {
+			neutral: [
+				"[--solid-base:var(--color-white)]",
+				"[--solid-interact:var(--color-grey-100)]",
+				"[--solid-active:var(--color-grey-200)]",
+				"[--solid-text:var(--color-grey-1200)]",
+				"[--base:var(--color-grey-700)]",
+				"[--interact:var(--color-primary-900)]",
+				"[--active:var(--color-primary-1100)]"
+			],
+			primary: [
+				"[--base:var(--color-primary-800)]",
+				"[--interact:var(--color-primary-900)]",
+				"[--active:var(--color-primary-1000)]"
+			],
+			primaryDark: [
+				"[--base:var(--color-primary-1000)]",
+				"[--interact:var(--color-primary-1100)]",
+				"[--active:var(--color-primary-1200)]"
+			],
+			success: [
+				"[--base:var(--color-success)]",
+				"[--interact:var(--color-success-mid)]",
+				"[--active:var(--color-success-dark)]"
+			],
+			warning: [
+				"[--base:var(--color-warning)]",
+				"[--interact:var(--color-warning-mid)]",
+				"[--active:var(--color-warning-dark)]"
+			],
+			danger: [
+				"[--base:var(--color-danger)]",
+				"[--interact:var(--color-danger-mid)]",
+				"[--active:var(--color-danger-dark)]"
+			],
+			white: [
+				"[--base:var(--color-white)]",
+				"[--interact:var(--color-white)]",
+				"[--active:var(--color-white)]"
 			]
 		},
 		appearance: {
-			solid: [
-				"bg-(--base)",
-				"text-(--text,white)",
-				"disabled:opacity-30",
-				"disabled:cursor-not-allowed",
-				"not-disabled:hover:bg-(--interact)",
-				"not-disabled:hover:text-(--text,white)",
-				"not-disabled:focus:bg-(--interact)",
-				"not-disabled:focus:text-(--text,white)",
-				"not-disabled:active:bg-(--active)"
+			simple: [
+				"bg-transparent",
+				"text-(--base)",
+				"not-disabled:hover:text-(--interact)",
+				"not-disabled:focus:text-(--interact)",
+				"not-disabled:active:text-(--active)"
 			],
 			outline: [
+				"bg-[unset]",
 				"border",
 				"border-current",
 				"text-(--base)",
-				"disabled:opacity-30",
-				"disabled:cursor-not-allowed",
-				"not-disabled:hover:no-underline",
 				"not-disabled:hover:text-(--interact)",
-				"not-disabled:focus:no-underline",
 				"not-disabled:focus:text-(--interact)",
 				"not-disabled:active:text-(--active)"
+			],
+			solid: [
+				"bg-(--solid-base,var(--base))",
+				"text-(--solid-text,white)",
+				"not-disabled:hover:bg-(--solid-interact,var(--interact))",
+				"not-disabled:hover:text-(--solid-text,white)",
+				"not-disabled:focus:bg-(--solid-interact,var(--interact))",
+				"not-disabled:focus:text-(--solid-text,white)",
+				"not-disabled:active:bg-(--solid-active,var(--active))"
 			]
 		},
 		size: {
-			sm: [
-				"text-sm",
-				"leading-[1.53]",
-				"h-8",
-				"px-4",
-				"gap-2",
-				"[&_svg]:size-4"
-			],
-			md: [
-				"text-md",
-				"leading-normal",
-				"h-10",
-				"px-8",
-				"gap-3",
-				"[&_svg]:size-5"
-			],
-			lg: [
-				"text-lg",
-				"leading-normal",
-				"h-12",
-				"px-8",
-				"gap-3",
-				"[&_svg]:size-[22px]"
-			],
-			xl: [
-				"text-lg",
-				"leading-normal",
-				"h-16",
-				"px-8",
-				"gap-3",
-				"[&_svg]:size-[22px]"
-			]
+			xs: ["size-6"],
+			sm: ["size-8"],
+			md: ["size-10"],
+			lg: ["size-12"]
 		},
-		isLoading: { true: [
-			"cursor-not-allowed",
-			"opacity-60",
-			"pointer-events-none"
-		] },
-		fullWidth: {
+		isRounded: { true: ["rounded-full"] }
+	}
+}, { enableResponsiveVariants: true });
+var ActionIcon = ({ ref, children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, ...rest }) => {
+	const INVALID_CHILDREN_MESSAGE = `A single ${Icon.name} component is permitted as a child of ActionIcon`;
+	(0, invariant.default)(react.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionalTooltipWrapper, {
+		hasTooltip,
+		label,
+		tooltipSide,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton$5, {
+			...href ? {
+				as: "a",
+				href: disabled ? void 0 : href,
+				onClick: void 0,
+				"aria-disabled": !!disabled
+			} : { type: "button" },
+			...getExternalAnchorProps(href),
+			...rest,
+			"aria-label": label,
+			theme,
+			appearance,
+			size,
+			ref,
+			disabled,
+			children: react.Children.map(children, (child) => {
+				if (!react.isValidElement(child)) throw new Error(INVALID_CHILDREN_MESSAGE);
+				(0, invariant.default)(child.type === Icon, `Children of type ${child?.type} aren't permitted. Only an ${Icon.name} component is allowed in ActionIcon`);
+				return react.cloneElement(child, { size: ActionIconSizeMap[size] });
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/alert-dialog/AlertDialogContent.tsx
+var StyledAlertDialogOverlay = styled(_radix_ui_react_alert_dialog.Overlay, { base: [
+	"bg-alpha-600",
+	"top-0",
+	"right-0",
+	"bottom-0",
+	"left-0",
+	"fixed",
+	"z-1147483646",
+	"motion-safe:data-[state=open]:animate-fade-in",
+	"motion-safe:data-[state=closed]:animate-fade-out"
+] });
+var StyledAlertDialogContent = styled(_radix_ui_react_alert_dialog.Content, {
+	base: [
+		"transform-[translate(-50%,-50%)]",
+		"bg-white",
+		"rounded-md",
+		"shadow-xl",
+		"box-border",
+		"left-1/2",
+		"max-w-[90vw]",
+		"p-8",
+		"fixed",
+		"top-1/2",
+		"focus:outline-none",
+		"z-1147483646",
+		"motion-safe:data-[state=open]:animate-slide-in-center",
+		"motion-safe:data-[state=closed]:animate-slide-out-center"
+	],
+	variants: { size: {
+		sm: ["w-95"],
+		md: ["w-120"],
+		lg: ["w-150"]
+	} }
+});
+var AlertDialogContent = ({ size = "sm", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_alert_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAlertDialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAlertDialogContent, {
+	size,
+	...rest
+})] });
+//#endregion
+//#region src/components/alert-dialog/AlertDialog.tsx
+var AlertDialog = /* @__PURE__ */ Object.assign(_radix_ui_react_alert_dialog.Root, {
+	Description: _radix_ui_react_alert_dialog.Description,
+	Title: _radix_ui_react_alert_dialog.Title,
+	Action: _radix_ui_react_alert_dialog.Action,
+	Cancel: _radix_ui_react_alert_dialog.Cancel,
+	Content: AlertDialogContent,
+	Trigger: _radix_ui_react_alert_dialog.Trigger
+});
+AlertDialog.displayName = "AlertDialog";
+//#endregion
+//#region src/utilities/hooks/useIsMountedRef.ts
+var useIsMountedRef = () => {
+	const isMountedRef = (0, react.useRef)(void 0);
+	(0, react.useEffect)(() => {
+		isMountedRef.current = true;
+		return () => {
+			isMountedRef.current = false;
+		};
+	});
+	return isMountedRef;
+};
+//#endregion
+//#region src/components/loader/Loader.tsx
+var Dot$1 = styled("div", {
+	base: [
+		"animate-pulse",
+		"bg-current",
+		"rounded-full",
+		"animation-duration-900",
+		"nth-3:animation-delay-300",
+		"nth-4:animation-delay-600"
+	],
+	variants: { size: {
+		sm: ["size-1", "mx-0.5"],
+		md: ["size-1.5", "mx-0.5"],
+		lg: ["size-2", "mx-[3px]"]
+	} }
+});
+var Loader = ({ className, message = "Loading", size = "md", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: cn("flex", "justify-center", className),
+	role: "alert",
+	...rest,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: message
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot$1, { size }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot$1, { size }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot$1, { size })
+	]
+});
+//#endregion
+//#region src/components/button/Button.tsx
+var StyledButton = styled("button", {
+	base: [
+		"items-center",
+		"bg-[unset]",
+		"rounded-md",
+		"cursor-pointer",
+		"flex",
+		"font-body",
+		"font-semibold",
+		"justify-center",
+		"no-underline",
+		"transition-all",
+		"duration-100",
+		"ease-out",
+		"whitespace-nowrap",
+		"w-max",
+		"disabled:cursor-not-allowed",
+		"disabled:opacity-30"
+	],
+	variants: {
+		theme: {
+			primary: [
+				"[--base:var(--color-primary-800)]",
+				"[--interact:var(--color-primary-900)]",
+				"[--active:var(--color-primary-1000)]"
+			],
+			secondary: [
+				"[--base:var(--color-primary-1000)]",
+				"[--interact:var(--color-primary-1100)]",
+				"[--active:var(--color-primary-1200)]"
+			],
+			success: [
+				"[--base:var(--color-success)]",
+				"[--interact:var(--color-success-mid)]",
+				"[--active:var(--color-success-dark)]"
+			],
+			warning: [
+				"[--base:var(--color-warning)]",
+				"[--interact:var(--color-warning-mid)]",
+				"[--active:var(--color-warning-dark)]",
+				"[--text:var(--color-grey-800)]"
+			],
+			danger: [
+				"[--base:var(--color-danger)]",
+				"[--interact:var(--color-danger-mid)]",
+				"[--active:var(--color-danger-dark)]"
+			],
+			neutral: [
+				"[--base:white]",
+				"[--interact:rgba(255,255,255,0.9)]",
+				"[--active:rgba(255,255,255,0.75)]",
+				"[--text:var(--color-primary-800)]"
+			]
+		},
+		appearance: {
+			solid: [
+				"bg-(--base)",
+				"text-(--text,white)",
+				"disabled:opacity-30",
+				"disabled:cursor-not-allowed",
+				"not-disabled:hover:bg-(--interact)",
+				"not-disabled:hover:text-(--text,white)",
+				"not-disabled:focus:bg-(--interact)",
+				"not-disabled:focus:text-(--text,white)",
+				"not-disabled:active:bg-(--active)"
+			],
+			outline: [
+				"border",
+				"border-current",
+				"text-(--base)",
+				"disabled:opacity-30",
+				"disabled:cursor-not-allowed",
+				"not-disabled:hover:no-underline",
+				"not-disabled:hover:text-(--interact)",
+				"not-disabled:focus:no-underline",
+				"not-disabled:focus:text-(--interact)",
+				"not-disabled:active:text-(--active)"
+			]
+		},
+		size: {
+			sm: [
+				"text-sm",
+				"leading-[1.53]",
+				"h-8",
+				"px-4",
+				"gap-2",
+				"[&_svg]:size-4"
+			],
+			md: [
+				"text-md",
+				"leading-normal",
+				"h-10",
+				"px-8",
+				"gap-3",
+				"[&_svg]:size-5"
+			],
+			lg: [
+				"text-lg",
+				"leading-normal",
+				"h-12",
+				"px-8",
+				"gap-3",
+				"[&_svg]:size-[22px]"
+			],
+			xl: [
+				"text-lg",
+				"leading-normal",
+				"h-16",
+				"px-8",
+				"gap-3",
+				"[&_svg]:size-[22px]"
+			]
+		},
+		isLoading: { true: [
+			"cursor-not-allowed",
+			"opacity-60",
+			"pointer-events-none"
+		] },
+		fullWidth: {
 			true: ["w-full"],
 			false: ["w-max"]
 		}
@@ -481,664 +949,193 @@ var Heading = styled("h2", {
 				"capsize-before-[0.1]",
 				"capsize-after-[0.2]"
 			]
-		},
-		noCapsize: { true: ["capsize-none"] },
-		weight: {
-			medium: ["font-medium"],
-			bold: ["font-bold"]
-		}
-	},
-	defaultVariants: {
-		size: "md",
-		weight: "bold"
-	}
-}, { enableResponsiveVariants: true });
-//#endregion
-//#region src/components/text/Text.tsx
-var Text = styled("p", {
-	base: ["m-0"],
-	variants: {
-		size: {
-			xs: [
-				"text-xs",
-				"leading-[1.6]",
-				"capsize-[0.4364]"
-			],
-			sm: [
-				"text-sm",
-				"leading-[1.53]",
-				"capsize-[0.4056]"
-			],
-			md: [
-				"text-md",
-				"leading-normal",
-				"capsize-[0.3864]"
-			],
-			lg: [
-				"text-lg",
-				"leading-[1.52]",
-				"capsize-[0.3983]"
-			],
-			xl: [
-				"text-xl",
-				"leading-[1.42]",
-				"capsize-[0.3506]"
-			],
-			"2xl": [
-				"text-2xl",
-				"leading-[1.40]",
-				"capsize-[0.3336]"
-			],
-			"3xl": [
-				"text-3xl",
-				"leading-[1.28]",
-				"capsize-[0.2709]"
-			],
-			"4xl": [
-				"text-4xl",
-				"leading-none",
-				"capsize-[0.1309]"
-			]
-		},
-		noCapsize: { true: ["capsize-none"] },
-		weight: {
-			normal: ["font-normal"],
-			bold: ["font-semibold"]
-		},
-		family: {
-			body: ["font-body"],
-			display: ["font-display"],
-			mono: ["font-mono"]
-		}
-	},
-	defaultVariants: {
-		size: "md",
-		family: "body"
-	}
-}, { enableResponsiveVariants: true });
-//#endregion
-//#region src/components/alert-dialog/AlertDialogContent.tsx
-var StyledAlertDialogOverlay = styled(_radix_ui_react_alert_dialog.Overlay, { base: [
-	"bg-alpha-600",
-	"top-0",
-	"right-0",
-	"bottom-0",
-	"left-0",
-	"fixed",
-	"z-1147483646",
-	"motion-safe:data-[state=open]:animate-fade-in",
-	"motion-safe:data-[state=closed]:animate-fade-out"
-] });
-var StyledAlertDialogContent = styled(_radix_ui_react_alert_dialog.Content, {
-	base: [
-		"transform-[translate(-50%,-50%)]",
-		"bg-white",
-		"rounded-md",
-		"shadow-xl",
-		"box-border",
-		"left-1/2",
-		"max-w-[90vw]",
-		"p-8",
-		"fixed",
-		"top-1/2",
-		"focus:outline-none",
-		"z-1147483646",
-		"motion-safe:data-[state=open]:animate-slide-in-center",
-		"motion-safe:data-[state=closed]:animate-slide-out-center"
-	],
-	variants: { size: {
-		sm: ["w-95"],
-		md: ["w-120"],
-		lg: ["w-150"]
-	} }
-});
-var AlertDialogContent = ({ size = "sm", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_alert_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAlertDialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAlertDialogContent, {
-	size,
-	...rest
-})] });
-//#endregion
-//#region src/components/alert-dialog/AlertDialog.tsx
-var AlertDialog = /* @__PURE__ */ Object.assign(_radix_ui_react_alert_dialog.Root, {
-	Description: _radix_ui_react_alert_dialog.Description,
-	Title: _radix_ui_react_alert_dialog.Title,
-	Action: _radix_ui_react_alert_dialog.Action,
-	Cancel: _radix_ui_react_alert_dialog.Cancel,
-	Content: AlertDialogContent,
-	Trigger: _radix_ui_react_alert_dialog.Trigger
-});
-AlertDialog.displayName = "AlertDialog";
-//#endregion
-//#region src/components/icon/Icon.tsx
-var StyledIcon$3 = styled("svg", {
-	base: [
-		"inline-block",
-		"fill-none",
-		"shrink-0",
-		"stroke-current",
-		"[stroke-linecap:round]",
-		"[stroke-linejoin:round]",
-		"align-middle"
-	],
-	variants: { size: {
-		sm: ["size-4", "stroke-[1.5]"],
-		md: ["size-6", "stroke-[1.75]"],
-		lg: ["size-8", "stroke-2"]
-	} }
-}, { enableResponsiveVariants: true });
-var Icon = ({ ref, is: SVG, size = "md", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon$3, {
-	size,
-	"aria-hidden": "true",
-	...rest,
-	as: SVG,
-	ref
-});
-//#endregion
-//#region src/components/alert-dialog/alert-context/AlertDialogIcon.tsx
-var StyledIcon$2 = styled(Icon, {
-	base: ["self-start"],
-	variants: { theme: {
-		info: ["text-info"],
-		warning: ["text-warning-mid"],
-		danger: ["rotate-180", "text-danger"],
-		success: ["text-success"]
-	} }
-});
-var iconMap = {
-	info: _atom_learning_icons.Info,
-	warning: _atom_learning_icons.Danger,
-	danger: _atom_learning_icons.Info,
-	success: _atom_learning_icons.OkCircle
-};
-var AlertDialogIcon = ({ theme }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon$2, {
-	theme,
-	is: iconMap[theme]
-});
-//#endregion
-//#region src/components/alert-dialog/alert-context/AlertDialog.tsx
-var Alert$1 = ({ title, size, theme, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialog, {
-	defaultOpen: true,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertDialog.Content, {
-		size,
-		onEscapeKeyDown: (e) => e.preventDefault(),
-		onCloseAutoFocus: onClose,
-		...rest,
-		className: "flex max-h-[90vh] flex-col gap-8",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [theme && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogIcon, { theme }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
-					as: AlertDialog.Title,
-					size: "sm",
-					className: "mr-4",
-					children: title
-				})]
-			}),
-			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
-				as: AlertDialog.Description,
-				className: "flex overflow-y-auto",
-				children: description
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-wrap justify-end gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialog.Cancel, {
-					asChild: true,
-					children: cancelElement || cancelActionText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-						size: "sm",
-						appearance: "outline",
-						onClick: () => onAction?.(false),
-						children: cancelActionText
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialog.Action, {
-					asChild: true,
-					children: confirmElement || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-						size: "sm",
-						onClick: () => onAction?.(true),
-						children: confirmActionText
-					})
-				})]
-			})
-		]
-	})
-});
-//#endregion
-//#region src/components/alert-dialog/alert-context/reducer.ts
-var initialState = [];
-var reducer = (state, action) => {
-	switch (action.type) {
-		case "ADD": return [...state, {
-			...action.payload,
-			id: (0, uid.uid)()
-		}];
-		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 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,
-			type: "ADD"
-		}) },
-		children: [Boolean(alerts.length) && /* @__PURE__ */ (0, react.createElement)(Alert$1, {
-			...alerts[0],
-			key: alerts[0].id,
-			onClose: () => {
-				if (isMountedRef.current) dispatch({
-					payload: alerts[0].id,
-					type: "REMOVE"
-				});
-			}
-		}), children]
-	});
-};
-var useAlert = () => {
-	const context = react.useContext(AlertContext);
-	if (context === void 0) throw new Error("useAlert must be used within a AlertProvider");
-	return context;
-};
-//#endregion
-//#region src/utilities/css-wrapper/CSSWrapper.tsx
-var CSSWrapper = ({ className, children }) => className ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className,
-	children
-}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
-CSSWrapper.displayName = "CSSWrapper";
-//#endregion
-//#region src/components/accordion/AccordionContent.tsx
-var StyledContent$4 = styled(_radix_ui_react_accordion.Content, { base: [
-	"border-none",
-	"w-full",
-	"bg-(--base-1)",
-	"overflow-hidden",
-	"data-[state=open]:rounded-b-sm",
-	"data-[state=open]:rounded-t-none",
-	"motion-safe:data-[state=open]:animate-accordion-open",
-	"motion-safe:data-[state=closed]:animate-accordion-close"
-] });
-var AccordionContent = ({ children, className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledContent$4, {
-	...rest,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CSSWrapper, {
-		className,
-		children
-	})
-});
-//#endregion
-//#region src/components/accordion/AccordionItem.tsx
-var AccordionItem = styled(_radix_ui_react_accordion.Item, { base: ["w-full", "not-last:mb-1"] }, { enablePolymorphism: false });
-//#endregion
-//#region src/experiments/color-scheme/ColorScheme.config.ts
-var generateColors = ({ prefix, colorName, color0 = "" }) => {
-	const colors = {};
-	let i = 1;
-	if (color0) {
-		colors[`--${prefix}-${i}`] = `var(--color-${color0})`;
-		i++;
-	}
-	let k = 1;
-	for (; i <= 11; i++) {
-		colors[`--${prefix}-${i}`] = `var(--color-${colorName}-${k * 100})`;
-		k++;
-	}
-	return colors;
-};
-var colorSchemes$4 = {};
-colorSchemes$4["interactive-loContrast"] = {
-	"--interactive-foreground": "var(--foreground)",
-	"--interactive-1": "var(--accent-1)",
-	"--interactive-2": "var(--accent-2)",
-	"--interactive-3": "var(--accent-3)"
-};
-colorSchemes$4["interactive-hiContrast"] = {
-	"--interactive-foreground": "var(--foreground-7-plus)",
-	"--interactive-1": "var(--accent-9)",
-	"--interactive-2": "var(--accent-10)",
-	"--interactive-3": "var(--accent-11)"
-};
-var colorNames = [
-	"primary",
-	"grey",
-	"blue",
-	"pink",
-	"purple",
-	"cyan",
-	"green",
-	"magenta",
-	"red",
-	"teal",
-	"orange",
-	"yellow",
-	"lime"
-];
-var createVariants = () => Object.fromEntries(colorNames.flatMap((c) => [[`${c}1`, {
-	colorName: c,
-	color0: "white"
-}], [`${c}2`, { colorName: c }]]));
-var bases = createVariants();
-var accents = bases;
-(() => {
-	Object.entries(bases).forEach(([name, config]) => {
-		const themeName = `base-${name}`;
-		colorSchemes$4[themeName] = {
-			"--foreground": "var(--color-grey-1000)",
-			"--foreground-7-plus": "var(--color-white)",
-			...generateColors({
-				prefix: "base",
-				colorName: config.colorName,
-				color0: config.color0
-			})
-		};
-	});
-	Object.entries(accents).forEach(([name, config]) => {
-		colorSchemes$4[`accent-${name}`] = generateColors({
-			prefix: "accent",
-			colorName: config.colorName,
-			color0: config.color0
-		});
-	});
-})();
-//#endregion
-//#region src/experiments/color-scheme/ColorScheme.tsx
-/**
-* @experimental Component has not been finalised. Further design input required. Use with caution.
-*/
-var ColorScheme = ({ ref, base = "", accent = "", interactive, asChild = false, ...rest }) => {
-	const Component = asChild ? _radix_ui_react_slot.Slot : "div";
-	const style = {
-		...interactive && colorSchemes$4[`interactive-${interactive}`],
-		...accent && colorSchemes$4[`accent-${accent}`],
-		...base && colorSchemes$4[`base-${base}`]
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
-		...rest,
-		ref,
-		style
-	});
-};
-//#endregion
-//#region src/components/accordion/AccordionTrigger.tsx
-var RotatingIcon = styled(Icon, { base: [
-	"transition-transform",
-	"duration-300",
-	"[[data-state=open]>&]:rotate-180",
-	"[[data-state=closed]>&]:rotate-0"
-] });
-var StyledTrigger$1 = styled(_radix_ui_react_accordion.Trigger, {
-	base: [
-		"border-none",
-		"py-3",
-		"px-4",
-		"w-full",
-		"flex",
-		"justify-between",
-		"items-center",
-		"cursor-pointer",
-		"bg-(--interactive-2)",
-		"text-(--interactive-foreground)",
-		"disabled:cursor-not-allowed",
-		"disabled:opacity-30",
-		"not-disabled:active:bg-(--interactive-3)",
-		"not-disabled:focus-visible:bg-(--interactive-3)",
-		"not-disabled:focus-visible:outline-none",
-		"not-disabled:focus-visible:relative",
-		"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
-		"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
-		"not-disabled:focus-visible:z-1",
-		"not-disabled:hover:bg-(--interactive-3)",
-		"data-[state=open]:rounded-b-none",
-		"data-[state=open]:rounded-t-sm",
-		"data-[state=closed]:rounded-sm"
-	],
-	variants: { arrowPosition: {
-		left: [
-			"flex-row-reverse",
-			"gap-2",
-			"justify-end"
-		],
-		right: []
-	} }
-});
-var AccordionTrigger = ({ children, colorScheme = {}, asChild, arrowPosition = "right", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorScheme, {
-	asChild: true,
-	accent: "grey1",
-	interactive: "loContrast",
-	...colorScheme,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTrigger$1, {
-		asChild,
-		arrowPosition,
-		...rest,
-		children: asChild ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RotatingIcon, {
-			is: _atom_learning_icons.ChevronDown,
-			"data-testid": "accordion-chevron"
-		})] })
-	})
-});
-//#endregion
-//#region src/components/accordion/Accordion.tsx
-var AccordionBase = ({ ref, type = "single", className, children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_accordion.Root, {
-	ref,
-	type,
-	className: cn("w-full", className),
-	...rest,
-	children
-});
-var Accordion = /* @__PURE__ */ Object.assign(AccordionBase, {
-	Item: AccordionItem,
-	Content: AccordionContent,
-	Trigger: AccordionTrigger
-});
-//#endregion
-//#region src/components/tooltip/TooltipContent.tsx
-var StyledContent$3 = styled(_radix_ui_react_tooltip.Content, {
-	base: [
-		"bg-grey-900",
-		"rounded-sm",
-		"shadow-sm",
-		"text-white",
-		"font-body",
-		"text-sm",
-		"leading-normal",
-		"whitespace-normal",
-		"px-3",
-		"py-2",
-		"z-10",
-		"will-change-transform",
-		"will-change-[opacity]",
-		"[--slide-opacity-out:0]",
-		"data-[side=top]:[--slide-direction-out-y:-4px]",
-		"data-[side=right]:[--slide-direction-out-x:4px]",
-		"data-[side=bottom]:[--slide-direction-out-y:4px]",
-		"data-[side=left]:[--slide-direction-out-x:-4px]",
-		"motion-safe:data-[state=delayed-open]:animate-slide-direction-in",
-		"motion-safe:data-[state=closed]:animate-slide-direction-out"
-	],
-	variants: { size: {
-		sm: ["max-w-25"],
-		md: ["max-w-[250px]"],
-		lg: ["max-w-100"]
-	} }
-});
-var StyledArrow$1 = styled(_radix_ui_react_tooltip.Arrow, { base: [
-	"fill-grey-900",
-	"in-data-[align=end]:mr-2",
-	"in-data-[align=start]:ml-2"
-] });
-var TooltipContent = ({ children, side = "top", sideOffset = 4, size = "md", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledContent$3, {
-	side,
-	sideOffset,
-	size,
-	...rest,
-	children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledArrow$1, {})]
-});
-//#endregion
-//#region src/components/tooltip/Tooltip.tsx
-var TooltipComponent = ({ children, delayDuration = 350, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Root, {
-	delayDuration,
-	...rest,
-	children
-});
-var Tooltip = /* @__PURE__ */ Object.assign(TooltipComponent, {
-	Content: TooltipContent,
-	Trigger: _radix_ui_react_tooltip.Trigger,
-	Portal: _radix_ui_react_tooltip.Portal,
-	Provider: _radix_ui_react_tooltip.Provider
-});
-TooltipComponent.displayName = "Tooltip";
-//#endregion
-//#region src/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.tsx
-var OptionalTooltipWrapper = ({ hasTooltip, label, tooltipSide, children }) => {
-	if (hasTooltip) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip.Trigger, {
-		asChild: true,
-		onFocus: (e) => {
-			if (!e.currentTarget.matches(":focus-visible")) e.preventDefault();
-		},
-		children
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip.Content, {
-		side: tooltipSide,
-		children: label
-	})] });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
-};
-OptionalTooltipWrapper.displayName = "OptionalTooltipWrapper";
-//#endregion
-//#region src/components/action-icon/ActionIcon.constants.ts
-var ActionIconSizeMap = {
-	xs: "sm",
-	sm: "sm",
-	md: "md",
-	lg: "lg"
-};
+		},
+		noCapsize: { true: ["capsize-none"] },
+		weight: {
+			medium: ["font-medium"],
+			bold: ["font-bold"]
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		weight: "bold"
+	}
+}, { enableResponsiveVariants: true });
 //#endregion
-//#region src/components/action-icon/ActionIcon.tsx
-var StyledButton$5 = styled("button", {
-	base: [
-		"items-center",
-		"appearance-none",
-		"bg-white",
-		"rounded-md",
-		"box-border",
-		"cursor-pointer",
-		"flex",
-		"shrink-0",
-		"justify-center",
-		"transition-all",
-		"duration-100",
-		"ease-out",
-		"disabled:cursor-not-allowed",
-		"disabled:opacity-30"
-	],
+//#region src/components/text/Text.tsx
+var Text = styled("p", {
+	base: ["m-0"],
 	variants: {
-		theme: {
-			neutral: [
-				"[--solid-base:var(--color-white)]",
-				"[--solid-interact:var(--color-grey-100)]",
-				"[--solid-active:var(--color-grey-200)]",
-				"[--solid-text:var(--color-grey-1200)]",
-				"[--base:var(--color-grey-700)]",
-				"[--interact:var(--color-primary-900)]",
-				"[--active:var(--color-primary-1100)]"
-			],
-			primary: [
-				"[--base:var(--color-primary-800)]",
-				"[--interact:var(--color-primary-900)]",
-				"[--active:var(--color-primary-1000)]"
+		size: {
+			xs: [
+				"text-xs",
+				"leading-[1.6]",
+				"capsize-[0.4364]"
 			],
-			primaryDark: [
-				"[--base:var(--color-primary-1000)]",
-				"[--interact:var(--color-primary-1100)]",
-				"[--active:var(--color-primary-1200)]"
+			sm: [
+				"text-sm",
+				"leading-[1.53]",
+				"capsize-[0.4056]"
 			],
-			success: [
-				"[--base:var(--color-success)]",
-				"[--interact:var(--color-success-mid)]",
-				"[--active:var(--color-success-dark)]"
+			md: [
+				"text-md",
+				"leading-normal",
+				"capsize-[0.3864]"
 			],
-			warning: [
-				"[--base:var(--color-warning)]",
-				"[--interact:var(--color-warning-mid)]",
-				"[--active:var(--color-warning-dark)]"
+			lg: [
+				"text-lg",
+				"leading-[1.52]",
+				"capsize-[0.3983]"
 			],
-			danger: [
-				"[--base:var(--color-danger)]",
-				"[--interact:var(--color-danger-mid)]",
-				"[--active:var(--color-danger-dark)]"
+			xl: [
+				"text-xl",
+				"leading-[1.42]",
+				"capsize-[0.3506]"
 			],
-			white: [
-				"[--base:var(--color-white)]",
-				"[--interact:var(--color-white)]",
-				"[--active:var(--color-white)]"
-			]
-		},
-		appearance: {
-			simple: [
-				"bg-transparent",
-				"text-(--base)",
-				"not-disabled:hover:text-(--interact)",
-				"not-disabled:focus:text-(--interact)",
-				"not-disabled:active:text-(--active)"
+			"2xl": [
+				"text-2xl",
+				"leading-[1.40]",
+				"capsize-[0.3336]"
 			],
-			outline: [
-				"bg-[unset]",
-				"border",
-				"border-current",
-				"text-(--base)",
-				"not-disabled:hover:text-(--interact)",
-				"not-disabled:focus:text-(--interact)",
-				"not-disabled:active:text-(--active)"
+			"3xl": [
+				"text-3xl",
+				"leading-[1.28]",
+				"capsize-[0.2709]"
 			],
-			solid: [
-				"bg-(--solid-base,var(--base))",
-				"text-(--solid-text,white)",
-				"not-disabled:hover:bg-(--solid-interact,var(--interact))",
-				"not-disabled:hover:text-(--solid-text,white)",
-				"not-disabled:focus:bg-(--solid-interact,var(--interact))",
-				"not-disabled:focus:text-(--solid-text,white)",
-				"not-disabled:active:bg-(--solid-active,var(--active))"
+			"4xl": [
+				"text-4xl",
+				"leading-none",
+				"capsize-[0.1309]"
 			]
 		},
-		size: {
-			xs: ["size-6"],
-			sm: ["size-8"],
-			md: ["size-10"],
-			lg: ["size-12"]
+		noCapsize: { true: ["capsize-none"] },
+		weight: {
+			normal: ["font-normal"],
+			bold: ["font-semibold"]
 		},
-		isRounded: { true: ["rounded-full"] }
+		family: {
+			body: ["font-body"],
+			display: ["font-display"],
+			mono: ["font-mono"]
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		family: "body"
 	}
 }, { enableResponsiveVariants: true });
-var ActionIcon = ({ ref, children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, ...rest }) => {
-	const INVALID_CHILDREN_MESSAGE = `A single ${Icon.name} component is permitted as a child of ActionIcon`;
-	(0, invariant.default)(react.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionalTooltipWrapper, {
-		hasTooltip,
-		label,
-		tooltipSide,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton$5, {
-			...href ? {
-				as: "a",
-				href: disabled ? void 0 : href,
-				onClick: void 0,
-				"aria-disabled": !!disabled
-			} : { type: "button" },
-			...getExternalAnchorProps(href),
-			...rest,
-			"aria-label": label,
-			theme,
-			appearance,
-			size,
-			ref,
-			disabled,
-			children: react.Children.map(children, (child) => {
-				if (!react.isValidElement(child)) throw new Error(INVALID_CHILDREN_MESSAGE);
-				(0, invariant.default)(child.type === Icon, `Children of type ${child?.type} aren't permitted. Only an ${Icon.name} component is allowed in ActionIcon`);
-				return react.cloneElement(child, { size: ActionIconSizeMap[size] });
+//#endregion
+//#region src/components/alert-dialog/alert-context/AlertDialogIcon.tsx
+var StyledIcon$2 = styled(Icon, {
+	base: ["self-start"],
+	variants: { theme: {
+		info: ["text-info"],
+		warning: ["text-warning-mid"],
+		danger: ["rotate-180", "text-danger"],
+		success: ["text-success"]
+	} }
+});
+var iconMap = {
+	info: _atom_learning_icons.Info,
+	warning: _atom_learning_icons.Danger,
+	danger: _atom_learning_icons.Info,
+	success: _atom_learning_icons.OkCircle
+};
+var AlertDialogIcon = ({ theme }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon$2, {
+	theme,
+	is: iconMap[theme]
+});
+//#endregion
+//#region src/components/alert-dialog/alert-context/AlertDialog.tsx
+var Alert$1 = ({ title, size, theme, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialog, {
+	defaultOpen: true,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertDialog.Content, {
+		size,
+		onEscapeKeyDown: (e) => e.preventDefault(),
+		onCloseAutoFocus: onClose,
+		...rest,
+		className: "flex max-h-[90vh] flex-col gap-8",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [theme && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogIcon, { theme }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+					as: AlertDialog.Title,
+					size: "sm",
+					className: "mr-4",
+					children: title
+				})]
+			}),
+			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
+				as: AlertDialog.Description,
+				className: "flex overflow-y-auto",
+				children: description
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap justify-end gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialog.Cancel, {
+					asChild: true,
+					children: cancelElement || cancelActionText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						size: "sm",
+						appearance: "outline",
+						onClick: () => onAction?.(false),
+						children: cancelActionText
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialog.Action, {
+					asChild: true,
+					children: confirmElement || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						size: "sm",
+						onClick: () => onAction?.(true),
+						children: confirmActionText
+					})
+				})]
 			})
-		})
+		]
+	})
+});
+//#endregion
+//#region src/components/alert-dialog/alert-context/reducer.ts
+var initialState = [];
+var reducer = (state, action) => {
+	switch (action.type) {
+		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(void 0);
+var AlertProvider = ({ children }) => {
+	const [alerts, dispatch] = react.useReducer(reducer, initialState);
+	const isMountedRef = useIsMountedRef();
+	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,
+			onClose: () => {
+				if (isMountedRef.current) dispatch({
+					payload: alerts[0].id,
+					type: "REMOVE"
+				});
+			}
+		}), children]
 	});
 };
+var useAlert = () => {
+	const context = react.use(AlertContext);
+	if (context === void 0) throw new Error("useAlert must be used within a AlertProvider");
+	return context;
+};
+//#endregion
+//#region src/components/alert-dialog/Alert.ts
+var Alert = { Provider: AlertProvider };
 //#endregion
 //#region src/components/avatar/Avatar.context.tsx
 var AvatarRootContext = react.createContext({
@@ -1172,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
 	});
 };
@@ -1348,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,
@@ -1430,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
 	});
 };
@@ -1494,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 = () => {
@@ -1608,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
 	});
 };
@@ -1644,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;
@@ -1658,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],
@@ -1686,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,
@@ -1759,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");
@@ -1777,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 });
@@ -1811,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`]: "" },
@@ -1854,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 = () => {
@@ -1883,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;
 };
@@ -1892,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
 	});
 };
@@ -1918,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
 	});
@@ -1937,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),
@@ -2046,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, {
@@ -2188,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)
@@ -2218,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,
@@ -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,
@@ -6613,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",
@@ -6634,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
 	});
 };
@@ -6832,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),
@@ -7081,28 +7100,28 @@ 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, {
-		extensions: [(0, micromark_extension_directive.default)()],
-		mdastExtensions: [mdast_util_directive.default.fromMarkdown]
+	const AST = (0, mdast_util_from_markdown.fromMarkdown)(content, {
+		extensions: [(0, micromark_extension_directive.directive)()],
+		mdastExtensions: [(0, mdast_util_directive.directiveFromMarkdown)()]
 	});
 	const componentsMap = {
 		...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,
@@ -7133,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;
 };
@@ -7331,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);
-	react.useEffect(() => {
-		if (listRef.current) setListWidth(listRef.current.offsetWidth);
+	const listWidthRef = react.useRef(0);
+	react.useLayoutEffect(() => {
+		if (listRef.current) listWidthRef.current = listRef.current.offsetWidth;
 	}, [react.Children.toArray(children).length]);
 	react.useEffect(() => {
 		let timer;
@@ -7343,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"],
@@ -7400,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
 	});
 };
@@ -7423,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") {
@@ -7481,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, {
@@ -7534,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, {
@@ -7716,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",
@@ -7733,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);
@@ -7746,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,
@@ -7766,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;
@@ -7798,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,
@@ -7822,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, {
@@ -7868,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,
@@ -7880,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,
@@ -7990,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,
@@ -7999,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: [
@@ -8176,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;
 };
@@ -8475,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, {
@@ -8698,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,
@@ -8869,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, {
@@ -9006,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,
@@ -9270,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,
@@ -9318,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;
 };
@@ -9709,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
@@ -10043,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;
 };
@@ -10157,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",
@@ -10454,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",
@@ -10598,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({
@@ -10609,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
 	});
 };
@@ -10663,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],
@@ -10688,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
@@ -10705,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
@@ -10719,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]
@@ -10787,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,
@@ -10828,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({
@@ -10847,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, {
@@ -10883,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;
+					};
+				})
 			});
 		})]
 	});
@@ -10908,24 +10970,20 @@ var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, v
 		if (!isControlled) setInternalValue(newValue);
 		onValueChange?.(newValue);
 	}, [isControlled, onValueChange]);
-	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,
+	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,
@@ -10988,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,
@@ -11022,10 +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);
-//#endregion
-//#region src/components/index.ts
-var Alert = { Provider: AlertProvider };
+var useFileDrop = () => react.use(FileDropContext);
 //#endregion
 exports.Accordion = Accordion;
 exports.ActionIcon = ActionIcon;