@atom-learning/components 10.0.0 → 10.1.0

package/dist/index.cjs.js

@@ -30,6 +30,7 @@ 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");
@@ -38,13 +39,12 @@ 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 _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 tiny_invariant = require("tiny-invariant");
+tiny_invariant = __toESM(tiny_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);
@@ -73,17 +73,14 @@ 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");
 _radix_ui_react_progress = __toESM(_radix_ui_react_progress, 1);
-let _radix_ui_react_select = require("@radix-ui/react-select");
-_radix_ui_react_select = __toESM(_radix_ui_react_select, 1);
+let react_aria_components = require("react-aria-components");
+react_aria_components = __toESM(react_aria_components, 1);
 let _radix_ui_react_slider = require("@radix-ui/react-slider");
 let _radix_ui_react_switch = require("@radix-ui/react-switch");
 _radix_ui_react_switch = __toESM(_radix_ui_react_switch, 1);
@@ -91,21 +88,11 @@ 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));
+var ARBITRARY_NUMBER_RE = /^\[[\d.]+\]$/;
+var isArbitraryNumber = (value) => ARBITRARY_NUMBER_RE.test(value) || !Number.isNaN(Number(value));
+var DATA_STATE_VARIANT_RE = /^data-\[state=[^\]]+\]:/;
 var twMerge = (0, tailwind_merge.extendTailwindMerge)({ extend: {
 	classGroups: {
 		capsize: [{ capsize: ["none", isArbitraryNumber] }],
@@ -127,11 +114,12 @@ var Theme = ({ children, theme }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
 var createTheme = (config) => Object.fromEntries(Object.values(config).flatMap((tokens) => Object.entries(tokens).map(([token, value]) => [`--${token}`, value])));
 function styled(el, styles, options) {
 	const variantKeys = Object.keys(styles.variants || {});
+	const variantKeySet = new Set(variantKeys);
 	const enableResponsiveVariants = options?.enableResponsiveVariants === true;
 	const tvFn = (0, tailwind_variants.tv)(styles);
 	const Comp = (props) => {
-		const { ref, ...propsWithoutRef } = props;
-		const additionalStyles = enableResponsiveVariants ? variantKeys.map((variantKey) => {
+		const { ref } = props;
+		const additionalStyles = enableResponsiveVariants ? variantKeys.flatMap((variantKey) => {
 			const responsiveVariantConfig = props[variantKey];
 			const variantStyles = styles.variants[variantKey];
 			if (typeof responsiveVariantConfig === "object" && responsiveVariantConfig && !Array.isArray(responsiveVariantConfig)) return Object.entries(responsiveVariantConfig).flatMap(([key, val]) => {
@@ -143,16 +131,17 @@ function styled(el, styles, options) {
 				return [];
 			});
 			return [];
-		}).flat() : [];
-		const cls = tvFn(variantKeys.length > 0 ? Object.fromEntries(Object.entries(props).filter(([key]) => variantKeys.includes(key)).map(([key, value]) => {
+		}) : [];
+		const cls = tvFn(variantKeys.length > 0 ? Object.fromEntries(Object.entries(props).flatMap(([key, value]) => {
+			if (!variantKeySet.has(key)) return [];
 			const variantConfig = styles.variants?.[key];
 			if (variantConfig && "true" in variantConfig && "false" in variantConfig) {
-				if (value === true || value === false) return [key, value];
-				return [key, null];
+				if (value === true || value === false) return [[key, value]];
+				return [[key, null]];
 			}
-			return [key, value];
+			return [[key, value]];
 		})) : {});
-		const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => !variantKeys.includes(key) && key !== "as" && key !== "__wrapperClasses"));
+		const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => !variantKeySet.has(key) && key !== "as" && key !== "__wrapperClasses"));
 		const mergedClassName = (0, clsx.default)(cls, additionalStyles).trim();
 		const propsClassName = props.className;
 		const wrapperClasses = props.__wrapperClasses;
@@ -161,7 +150,7 @@ function styled(el, styles, options) {
 			if (typeof el === "string") {
 				const { className: _, ...restFilteredProps } = filteredProps;
 				const finalClassName = wrapperClasses && propsClassName ? twMerge(mergedClassName, wrapperClasses, propsClassName) : wrapperClasses ? twMerge(mergedClassName, wrapperClasses) : propsClassName ? (() => {
-					if (propsClassName.split(" ").some((cls) => /^data-\[state=[^\]]+\]:/.test(cls))) return twMerge(propsClassName, mergedClassName);
+					if (propsClassName.split(" ").some((cls) => DATA_STATE_VARIANT_RE.test(cls))) return twMerge(propsClassName, mergedClassName);
 					else return twMerge(mergedClassName, propsClassName);
 				})() : twMerge(mergedClassName);
 				return react.default.createElement(props.as || elementType, {
@@ -193,7 +182,7 @@ function styled(el, styles, options) {
 					ref
 				};
 				if (isStyledComponent) {
-					const hasDataAttributeVariants = propsClassName ? propsClassName.split(" ").some((cls) => /^data-\[state=[^\]]+\]:/.test(cls)) : false;
+					const hasDataAttributeVariants = propsClassName ? propsClassName.split(" ").some((cls) => DATA_STATE_VARIANT_RE.test(cls)) : false;
 					const mergedPropsAndComponent = propsClassName ? hasDataAttributeVariants ? twMerge(propsClassName, mergedClassName) : twMerge(mergedClassName, propsClassName) : mergedClassName;
 					propsForComponent.__wrapperClasses = mergedClassName;
 					propsForComponent.className = mergedPropsAndComponent || void 0;
@@ -225,670 +214,181 @@ function styled(el, styles, options) {
 	return Comp;
 }
 //#endregion
-//#region src/utilities/uri/index.ts
-var isExternalUrl = (url) => !!url && /^https?:\/\//.test(url);
-var getExternalAnchorProps = (url) => isExternalUrl(url) ? {
-	target: "_blank",
-	rel: "noopener noreferrer"
-} : {};
+//#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/loader/Loader.tsx
-var Dot$1 = styled("div", {
+//#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/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"
-	],
-	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"]
-		}
-	},
-	defaultVariants: {
-		appearance: "solid",
-		size: "md",
-		theme: "primary"
-	}
-}, { enableResponsiveVariants: true });
-// @__PURE__ keeps this tree-shakable for consumers importing only
-var LoaderContentsWrapper = /* @__PURE__ */ styled("span", {
-	base: [
-		"items-center",
-		"flex",
-		"justify-center",
-		"invisible"
-	],
-	variants: { size: {
-		sm: ["gap-2"],
-		md: ["gap-3"],
-		lg: ["gap-3"],
-		xl: ["gap-3"]
-	} },
-	defaultVariants: { size: "md" }
-}, { enableResponsiveVariants: true });
-var WithLoader = ({ size, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Loader, { className: "absolute" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderContentsWrapper, {
-	size,
-	children
-})] });
-var Button = (({ ref, children, as, href, isLoading = false, onClick, disabled, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton, {
-	as: as || (href ? "a" : void 0),
-	...!disabled && !isLoading && {
-		href,
-		onClick
-	},
-	isLoading,
-	type: !href ? "button" : void 0,
-	disabled,
-	...rest,
-	...getExternalAnchorProps(href),
-	ref,
-	children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WithLoader, {
-		size: rest.size,
-		children
-	}) : children
-}));
-//#endregion
-//#region src/components/heading/Heading.tsx
-var Heading = styled("h2", {
-	base: ["m-0"],
-	variants: {
-		size: {
-			xs: [
-				"font-body",
-				"text-md",
-				"leading-normal",
-				"capsize-[0.3864]"
-			],
-			sm: [
-				"font-body",
-				"text-lg",
-				"leading-[1.14]",
-				"capsize-[0.2078]"
-			],
-			md: [
-				"font-display",
-				"text-xl",
-				"leading-[1.14]",
-				"tracking-[0.01em]",
-				"capsize-before-[0.2114]",
-				"capsize-after-[0.2634]"
-			],
-			lg: [
-				"font-display",
-				"text-2xl",
-				"leading-[1.08]",
-				"tracking-[0.01em]",
-				"capsize-before-[0.1405]",
-				"capsize-after-[0.2405]"
-			],
-			xl: [
-				"font-display",
-				"text-3xl",
-				"leading-[1.12]",
-				"capsize-before-[0.16]",
-				"capsize-after-[0.26]"
-			],
-			xxl: [
-				"font-display",
-				"text-4xl",
-				"leading-none",
-				"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];
-		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/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"
+		"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: [
@@ -1002,6 +502,14 @@ var OptionalTooltipWrapper = ({ hasTooltip, label, tooltipSide, children }) => {
 };
 OptionalTooltipWrapper.displayName = "OptionalTooltipWrapper";
 //#endregion
+//#region src/utilities/uri/index.ts
+var EXTERNAL_URL_RE = /^https?:\/\//;
+var isExternalUrl = (url) => !!url && EXTERNAL_URL_RE.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",
@@ -1010,41 +518,255 @@ var ActionIconSizeMap = {
 	lg: "lg"
 };
 //#endregion
-//#region src/components/action-icon/ActionIcon.tsx
-var StyledButton$5 = styled("button", {
+//#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: {
+			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)",
+				"not-disabled:hover:text-(--interact)",
+				"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: {
+			xs: ["size-6"],
+			sm: ["size-8"],
+			md: ["size-10"],
+			lg: ["size-12"]
+		},
+		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, tiny_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, tiny_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",
-		"appearance-none",
-		"bg-white",
+		"bg-[unset]",
 		"rounded-md",
-		"box-border",
 		"cursor-pointer",
 		"flex",
-		"shrink-0",
+		"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: {
-			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: [
+			secondary: [
 				"[--base:var(--color-primary-1000)]",
 				"[--interact:var(--color-primary-1100)]",
 				"[--active:var(--color-primary-1200)]"
@@ -1057,85 +779,368 @@ var StyledButton$5 = styled("button", {
 			warning: [
 				"[--base:var(--color-warning)]",
 				"[--interact:var(--color-warning-mid)]",
-				"[--active:var(--color-warning-dark)]"
+				"[--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)]"
 			],
-			white: [
-				"[--base:var(--color-white)]",
-				"[--interact:var(--color-white)]",
-				"[--active:var(--color-white)]"
+			neutral: [
+				"[--base:white]",
+				"[--interact:rgba(255,255,255,0.9)]",
+				"[--active:rgba(255,255,255,0.75)]",
+				"[--text:var(--color-primary-800)]"
 			]
 		},
 		appearance: {
-			simple: [
-				"bg-transparent",
+			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"]
+		}
+	},
+	defaultVariants: {
+		appearance: "solid",
+		size: "md",
+		theme: "primary"
+	}
+}, { enableResponsiveVariants: true });
+// @__PURE__ keeps this tree-shakable for consumers importing only
+var LoaderContentsWrapper = /* @__PURE__ */ styled("span", {
+	base: [
+		"items-center",
+		"flex",
+		"justify-center",
+		"invisible"
+	],
+	variants: { size: {
+		sm: ["gap-2"],
+		md: ["gap-3"],
+		lg: ["gap-3"],
+		xl: ["gap-3"]
+	} },
+	defaultVariants: { size: "md" }
+}, { enableResponsiveVariants: true });
+var WithLoader = ({ size, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Loader, { className: "absolute" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderContentsWrapper, {
+	size,
+	children
+})] });
+var Button = (({ ref, children, as, href, isLoading = false, onClick, disabled, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton, {
+	as: as || (href ? "a" : void 0),
+	...!disabled && !isLoading && {
+		href,
+		onClick
+	},
+	isLoading,
+	type: !href ? "button" : void 0,
+	disabled,
+	...rest,
+	...getExternalAnchorProps(href),
+	ref,
+	children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WithLoader, {
+		size: rest.size,
+		children
+	}) : children
+}));
+//#endregion
+//#region src/components/heading/Heading.tsx
+var Heading = styled("h2", {
+	base: ["m-0"],
+	variants: {
+		size: {
+			xs: [
+				"font-body",
+				"text-md",
+				"leading-normal",
+				"capsize-[0.3864]"
+			],
+			sm: [
+				"font-body",
+				"text-lg",
+				"leading-[1.14]",
+				"capsize-[0.2078]"
+			],
+			md: [
+				"font-display",
+				"text-xl",
+				"leading-[1.14]",
+				"tracking-[0.01em]",
+				"capsize-before-[0.2114]",
+				"capsize-after-[0.2634]"
+			],
+			lg: [
+				"font-display",
+				"text-2xl",
+				"leading-[1.08]",
+				"tracking-[0.01em]",
+				"capsize-before-[0.1405]",
+				"capsize-after-[0.2405]"
+			],
+			xl: [
+				"font-display",
+				"text-3xl",
+				"leading-[1.12]",
+				"capsize-before-[0.16]",
+				"capsize-after-[0.26]"
+			],
+			xxl: [
+				"font-display",
+				"text-4xl",
+				"leading-none",
+				"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]"
 			],
-			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({
@@ -1657,9 +1662,7 @@ var useResizeObserver = ({ delay = 500, elements, onResize }) => {
 		elements.forEach((element) => {
 			if (element) observer.observe(element);
 		});
-		return () => {
-			elements.forEach((element) => element && observer.unobserve(element));
-		};
+		return () => observer.disconnect();
 	}, [observer, elements]);
 	return observer;
 };
@@ -1669,7 +1672,7 @@ var ObserveBadgeTextOverflow = ({ elRef }) => {
 	const { setIsOverflowing } = react.use(BadgeContext);
 	useResizeObserver({
 		delay: 0,
-		elements: [elRef],
+		elements: react.useMemo(() => [elRef], [elRef]),
 		onResize: () => {
 			if (!elRef?.scrollWidth || !elRef?.clientWidth) return;
 			setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth);
@@ -1945,14 +1948,14 @@ var BannerRegularActions = ({ children, className, ...rest }) => {
 	const { size } = useBannerContext();
 	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}`);
+	(0, tiny_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),
 		...rest,
 		children: react.Children.map(children, (child, index) => {
 			if (child == null) return child;
 			if (!react.isValidElement(child)) throw new Error(`Child passed to ${BannerRegularActions.displayName} is not a valid element`);
-			(0, invariant.default)(child.type === BannerRegularButton, `Children of type ${child?.type} aren't permitted. Only an ${BannerRegularButton.displayName} component is allowed in ${BannerRegularActions.displayName}`);
+			(0, tiny_invariant.default)(child.type === BannerRegularButton, `Children of type ${child?.type} aren't permitted. Only an ${BannerRegularButton.displayName} component is allowed in ${BannerRegularActions.displayName}`);
 			const propsToInject = { appearance: index > 0 ? "outline" : void 0 };
 			return react.cloneElement(child, propsToInject);
 		})
@@ -2653,7 +2656,7 @@ var generateNewCheckedFn = (currentChecked) => {
 		const newCheckedSet = new Set(currentChecked);
 		if (newItemChecked) newCheckedSet.add(itemValue);
 		else newCheckedSet.delete(itemValue);
-		return Array.from(newCheckedSet);
+		return [...newCheckedSet];
 	};
 };
 var CheckboxGroupCheckedProvider = ({ checked: controlledChecked, defaultChecked = [], onCheckedChange, ...rest }) => {
@@ -2701,7 +2704,7 @@ var CheckboxGroupMountedProvider = (props) => {
 			const newMountedSet = new Set(prevMounted);
 			if (newItemMounted) newMountedSet.add(itemValue);
 			else newMountedSet.delete(itemValue);
-			return Array.from(newMountedSet);
+			return [...newMountedSet];
 		});
 	}, [handleItemMountedChangeFurtherUpContext]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxGroupMountedContext, {
@@ -2727,8 +2730,9 @@ var CheckboxGroupAllItem = ({ onCheckedChange, title = "all", ...rest }) => {
 		onCheckedChange: handleItemCheckedChange,
 		checked: (() => {
 			if (!checkedItems.length || !mountedItems.length) return false;
-			if (mountedItems.every((mountedItem) => checkedItems.includes(mountedItem))) return true;
-			if (mountedItems.some((mountedItem) => checkedItems.includes(mountedItem))) return "indeterminate";
+			const checkedSet = new Set(checkedItems);
+			if (mountedItems.every((mountedItem) => checkedSet.has(mountedItem))) return true;
+			if (mountedItems.some((mountedItem) => checkedSet.has(mountedItem))) return "indeterminate";
 			return false;
 		})(),
 		title,
@@ -3234,9 +3238,10 @@ var InlineFieldWrapper = ({ align = "start", children, className, description, d
 InlineFieldWrapper.displayName = "InlineFieldWrapper";
 //#endregion
 //#region src/components/form/useFieldError.ts
+var FIELD_PATH_SEPARATOR_RE = /[,[\].]+?/;
 var useFieldError = (fieldName) => {
 	const { errors } = (0, react_hook_form.useFormContext)();
-	const fieldPath = fieldName.split(/[,[\].]+?/).filter(Boolean);
+	const fieldPath = fieldName.split(FIELD_PATH_SEPARATOR_RE).filter(Boolean);
 	const getErrors = () => (0, dlv.default)(errors, fieldPath);
 	return { error: getErrors()?.message };
 };
@@ -3309,14 +3314,14 @@ var ChipContent = ({ children, ...rest }) => {
 	const isSingleChild = childrenArray.length <= 1;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledChipContent, {
 		...rest,
-		children: childrenArray.map((child, index) => {
+		children: childrenArray.map((child) => {
 			if (!isSingleChild && typeof child === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "overflow-hidden text-ellipsis whitespace-nowrap",
 				children: child
 			}, child);
 			if (react.isValidElement(child) && child.type === Icon) {
 				const iconProps = child.props;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipIcon, { ...iconProps }, `icon-${index}`);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipIcon, { ...iconProps }, child.key);
 			}
 			return child;
 		})
@@ -3905,6 +3910,10 @@ var PasswordField = ({ className, hideLabel, label = "Password", name, prompt =
 PasswordField.displayName = "PasswordField";
 //#endregion
 //#region src/components/create-password-field/CreatePasswordField.tsx
+var getMessageTheme = (result, isFocused) => {
+	if (result) return "success";
+	return isFocused ? "neutral" : "error";
+};
 var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "row", label = "Create a password", name = "password", className, validation, appearance, ...rest }) => {
 	const { formState, control } = (0, react_hook_form.useFormContext)();
 	const [isFocused, setIsFocused] = react.useState(false);
@@ -3914,17 +3923,13 @@ var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "ro
 	const validatePassword = react.useCallback(async (password) => {
 		const result = await validate(password);
 		if (result) {
-			(0, invariant.default)(typeof result === "object", "The validate function must return an object");
+			(0, tiny_invariant.default)(typeof result === "object", "The validate function must return an object");
 			setValidationResult(result);
 			return Object.values(result).every((isValid) => isValid);
 		}
 		return false;
 	}, [setValidationResult]);
 	const handleChange = react.useMemo(() => (0, throttle_debounce.throttle)(500, validatePassword), [validatePassword]);
-	const getMessageTheme = (result, isFocused) => {
-		if (result) return "success";
-		return isFocused ? "neutral" : "error";
-	};
 	const showValidation = control.mode.isOnBlur && (isFocused || touched) || control.mode.isOnSubmit && (isFocused || formState.isSubmitted && error);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className,
@@ -3974,8 +3979,8 @@ var getNewAsyncData = async (getAsyncData, asyncDataOptions, paginationState, so
 		sortDirection: asyncDataOptions?.sortDirection ?? getSortDirection(sorting),
 		globalFilter: asyncDataOptions.globalFilter ?? globalFilter
 	});
-	(0, invariant.default)(Array.isArray(newData?.results), "The getAsyncData function must return an object with a property `result` which must be an array");
-	(0, invariant.default)(newData && Number.isInteger(newData.total) && newData.total >= 0, "The getAsyncData function must return an object with a property `total` which must be a positive integer or zero");
+	(0, tiny_invariant.default)(Array.isArray(newData?.results), "The getAsyncData function must return an object with a property `result` which must be an array");
+	(0, tiny_invariant.default)(newData && Number.isInteger(newData.total) && newData.total >= 0, "The getAsyncData function must return an object with a property `total` which must be a positive integer or zero");
 	return newData;
 };
 //#endregion
@@ -4266,7 +4271,7 @@ var useStickyColumnsStyle = ({ numberOfStickyColumns, wrapperRef }) => {
 	const generateColumnsStyle = react.useCallback(() => {
 		let accWidth = 0;
 		const tableHeaderCells = wrapperRef.current?.querySelectorAll("th");
-		return Array.from(tableHeaderCells || []).slice(0, numberOfStickyColumns).reduce((acc, column, index) => {
+		return [...tableHeaderCells || []].slice(0, numberOfStickyColumns).reduce((acc, column, index) => {
 			const elementNumber = index + 1;
 			const styleObject = {
 				...acc,
@@ -4975,18 +4980,18 @@ var SortIcon = ({ direction }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Ico
 	size: "sm",
 	className: "stroke-primary-900 absolute left-1"
 });
+var handleKeyDown = (event, callback) => {
+	if (event.key === "Enter" || event.key === " ") {
+		event.preventDefault();
+		callback(event);
+	}
+};
 var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items", children, className, ...rest }) => {
 	const sortDirection = header.column.getIsSorted();
 	const { isSortable: isSortableTable, getRowModel } = useDataTable();
 	const isDataColumn = header.column.getCanSort();
 	const totalRows = getRowModel()?.rows?.length;
 	const { hoverProps, isHovered } = (0, react_aria.useHover)({});
-	const handleKeyDown = (event, callback) => {
-		if (event.key === "Enter" || event.key === " ") {
-			event.preventDefault();
-			callback(event);
-		}
-	};
 	const headerSortingHandler = header.column.getToggleSortingHandler();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableHeaderCell, {
 		isSortable: isSortableTable && isDataColumn,
@@ -5005,7 +5010,7 @@ var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items"
 					className: cn("flex", "items-center", "relative", "size-6", "ml-2", isHovered ? "bg-primary-200" : "bg-primary-100", "rounded-sm"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortIcon, { direction: sortDirection })
 				}),
-				includeTotal && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledCount, {
+				includeTotal ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledCount, {
 					size: "sm",
 					weight: "normal",
 					children: [
@@ -5015,7 +5020,7 @@ var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items"
 						totalSuffix,
 						")"
 					]
-				})
+				}) : null
 			]
 		})
 	});
@@ -5456,7 +5461,7 @@ var getPaginationElementsToRender = (currentPage, pagesCount, visibleElementsCou
 	if (canFitViewAllPopover) visiblePagesCount -= 1;
 	if (canFitEdgePage) visiblePagesCount -= 1;
 	const firstPage = paginationPages[0];
-	const lastPage = paginationPages[paginationPages.length - 1];
+	const lastPage = paginationPages.at(-1);
 	/**
 	* If we're truncating and current page is at the start of the page list,
 	* render the initial truncated page list, e.g.
@@ -5531,14 +5536,16 @@ var getPaginationElementsToRender = (currentPage, pagesCount, visibleElementsCou
 };
 var findNextAvailablePage = (startPage, disabledPages, pagesCount) => {
 	if (startPage > pagesCount) return;
+	const disabledSet = new Set(disabledPages);
 	let nextPage = startPage;
-	while (disabledPages.includes(nextPage)) nextPage++;
+	while (disabledSet.has(nextPage)) nextPage++;
 	return nextPage;
 };
 var findPreviousAvailablePage = (startPage, disabledPages) => {
 	if (startPage < 1) return;
+	const disabledSet = new Set(disabledPages);
 	let previousPage = startPage;
-	while (disabledPages.includes(previousPage)) previousPage--;
+	while (disabledSet.has(previousPage)) previousPage--;
 	return previousPage;
 };
 //#endregion
@@ -5853,9 +5860,9 @@ var PaginationPreviousButton = (props) => {
 //#region src/components/pagination/PaginationItems.tsx
 var PaginationItems = () => {
 	const { paginationItems } = usePagination();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: paginationItems.map((paginationItem, i) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: paginationItems.map((paginationItem) => {
 		switch (paginationItem) {
-			case VIEW_ALL_POPOVER: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationPopover, {}, paginationItem + i);
+			case VIEW_ALL_POPOVER: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationPopover, {}, paginationItem);
 			case GO_TO_PREVIOUS_PAGE: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationPreviousButton, {}, paginationItem);
 			case GO_TO_NEXT_PAGE: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationNextButton, {}, paginationItem);
 			default: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationPage, { pageNumber: paginationItem }, paginationItem);
@@ -6136,7 +6143,7 @@ var StyledButton$2 = styled(Button, {
 });
 var offsetWeekdayNames = (weekdayNames, firstDayOfWeek) => {
 	const start = weekdayNames.slice(0, firstDayOfWeek);
-	return weekdayNames.slice(firstDayOfWeek).concat(start);
+	return [...weekdayNames.slice(firstDayOfWeek), ...start];
 };
 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());
@@ -6198,7 +6205,7 @@ var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0,
 						onClick: () => handleSetYear(year),
 						selected: isCurrentYear,
 						children: year
-					}, `${year}${i}`);
+					}, year);
 				})
 			}),
 			!showYears && calendars.map(({ month, year, weeks }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
@@ -7108,9 +7115,9 @@ var generateNodeKey = (node, index) => {
 	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,
@@ -7357,7 +7364,7 @@ var NavigationMenuComponent = ({ children, className, ...rest }) => {
 	}, [react.Children.toArray(children).length]);
 	react.useEffect(() => {
 		let timer;
-		if (activeItem === "") timer = setTimeout(() => setOffset(null), 200);
+		if (activeItem === "") timer = setTimeout(setOffset, 200, null);
 		return () => {
 			if (timer !== null) clearTimeout(timer);
 		};
@@ -8503,72 +8510,33 @@ var SelectMenuContext = react.createContext({
 var useSelectMenuContext = () => react.use(SelectMenuContext);
 //#endregion
 //#region src/components/select-menu/SelectMenuContent.tsx
-var Content$2 = styled(_radix_ui_react_select.Content, {
-	base: [
-		"bg-white",
-		"rounded-md",
-		"shadow-lg",
-		"z-10",
-		"overflow-hidden",
-		"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=open]:animate-slide-direction-in",
-		"motion-safe:data-[state=closed]:animate-slide-direction-out"
-	],
-	variants: { position: {
-		popper: ["max-h-(--radix-select-content-available-height)", "min-w-(--radix-select-trigger-width)"],
-		"item-aligned": []
-	} }
-});
-var Viewport = styled(_radix_ui_react_select.Viewport, {
-	base: ["p-1", "w-full"],
-	variants: { position: {
-		popper: ["h-(--radix-select-content-available-height)"],
-		"item-aligned": []
-	} }
-});
-var ScrollUpButton = styled(_radix_ui_react_select.ScrollUpButton, { base: [
-	"flex",
-	"items-center",
-	"justify-center",
-	"h-6",
-	"cursor-default"
-] });
-var ScrollDownButton = styled(_radix_ui_react_select.ScrollDownButton, { base: [
-	"flex",
-	"items-center",
-	"justify-center",
-	"h-6",
-	"cursor-default"
-] });
-var SelectMenuContent = ({ ref, children, position = "popper", sideOffset = 4, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Content$2, {
+var Content$2 = styled(react_aria_components.Popover, { base: [
+	"bg-white",
+	"rounded-md",
+	"shadow-lg",
+	"z-10",
+	"overflow-hidden",
+	"will-change-transform",
+	"min-w-[var(--trigger-width)]",
+	"max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]"
+] }, { enablePolymorphism: false });
+var Viewport = styled(react_aria_components.ListBox, { base: [
+	"max-h-[inherit]",
+	"w-full",
+	"overflow-auto",
+	"p-1",
+	"outline-none"
+] }, { enablePolymorphism: false });
+var SelectMenuContent = ({ ref, children, offset = 4, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Content$2, {
 	ref,
-	position,
-	sideOffset,
+	offset,
+	containerPadding: 8,
 	...rest,
-	children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollUpButton, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-			is: _atom_learning_icons.ChevronUp,
-			className: "text-grey-700 size-4"
-		}) }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Viewport, {
-			position,
-			children
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollDownButton, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-			is: _atom_learning_icons.ChevronDown,
-			className: "text-grey-700 size-4"
-		}) })
-	]
-}) });
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Viewport, { children })
+});
 //#endregion
 //#region src/components/select-menu/SelectMenuItem.tsx
-var Item = styled(_radix_ui_react_select.Item, {
+var Item = styled(react_aria_components.ListBoxItem, {
 	base: [
 		"relative",
 		"flex",
@@ -8579,11 +8547,11 @@ var Item = styled(_radix_ui_react_select.Item, {
 		"cursor-pointer",
 		"rounded-sm",
 		"outline-none",
-		"data-disabled:cursor-not-allowed",
-		"data-disabled:opacity-30",
-		"data-disabled:pointer-events-none",
-		"data-highlighted:bg-grey-100",
-		"data-highlighted:outline-none"
+		"data-[disabled]:cursor-not-allowed",
+		"data-[disabled]:opacity-30",
+		"data-[hovered]:bg-grey-100",
+		"data-[focused]:bg-grey-100",
+		"data-[focus-visible]:outline-none"
 	],
 	variants: { size: {
 		sm: [
@@ -8603,26 +8571,26 @@ var Item = styled(_radix_ui_react_select.Item, {
 			"pr-6"
 		]
 	} }
-});
-var SelectMenuItem = ({ ref, children, ...rest }) => {
+}, { enablePolymorphism: false });
+var SelectMenuItem = ({ children, textValue, ...rest }) => {
 	const { size } = useSelectMenuContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Item, {
-		ref,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Item, {
 		size,
+		textValue: textValue ?? (typeof children === "string" ? children : void 0),
 		...rest,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.ItemIndicator, {
+		children: ({ isSelected }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "absolute left-2 inline-flex items-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 				is: _atom_learning_icons.Ok,
 				className: size === "sm" ? "size-3" : "size-4"
 			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.ItemText, { children })]
+		}), children] })
 	});
 };
 //#endregion
 //#region src/components/select-menu/SelectMenuLabel.tsx
 var SelectMenuLabel = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
-	as: _radix_ui_react_select.Label,
+	as: react_aria_components.Header,
 	size: "sm",
 	className: cn("p-2", "mb-1", "text-text-subtle", className),
 	...rest
@@ -8630,7 +8598,7 @@ var SelectMenuLabel = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_
 SelectMenuLabel.displayName = "SelectMenuLabel";
 //#endregion
 //#region src/components/select-menu/SelectMenuSeparator.tsx
-var SelectMenuSeparator = styled(_radix_ui_react_select.Separator, { base: [
+var SelectMenuSeparator = styled(react_aria_components.Separator, { base: [
 	"h-px",
 	"bg-grey-200",
 	"my-2",
@@ -8638,7 +8606,7 @@ var SelectMenuSeparator = styled(_radix_ui_react_select.Separator, { base: [
 ] }, { enablePolymorphism: false });
 //#endregion
 //#region src/components/select-menu/SelectMenuTrigger.tsx
-var Trigger$2 = styled(_radix_ui_react_select.Trigger, {
+var Trigger$2 = styled(react_aria_components.Button, {
 	base: [
 		"appearance-none",
 		"rounded-md",
@@ -8656,11 +8624,11 @@ var Trigger$2 = styled(_radix_ui_react_select.Trigger, {
 		"hover:cursor-pointer",
 		"disabled:opacity-30",
 		"disabled:cursor-not-allowed",
-		"focus:outline-2",
-		"focus:outline-blue-800",
-		"focus:outline-offset-1",
-		"focus:outline-solid",
-		"focus:z-1"
+		"data-[focus-visible]:outline-2",
+		"data-[focus-visible]:outline-blue-800",
+		"data-[focus-visible]:outline-offset-1",
+		"data-[focus-visible]:outline-solid",
+		"data-[focus-visible]:z-1"
 	],
 	variants: {
 		size: {
@@ -8687,9 +8655,9 @@ var Trigger$2 = styled(_radix_ui_react_select.Trigger, {
 			white: ["bg-white"],
 			grey: ["bg-grey-100"]
 		},
-		state: { error: ["bg-danger-light", "focus:outline-danger"] }
+		state: { error: ["bg-danger-light", "data-[focus-visible]:outline-danger"] }
 	}
-});
+}, { enablePolymorphism: false });
 var TriggerIcon = styled(Icon, {
 	base: [
 		"absolute",
@@ -8712,9 +8680,9 @@ var SelectMenuTrigger = ({ ref, placeholder, children, ...rest }) => {
 		theme,
 		state,
 		...rest,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Value, {
-			placeholder,
-			children
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.SelectValue, {
+			className: "truncate",
+			children: ({ isPlaceholder, selectedText }) => isPlaceholder ? placeholder ?? "" : children ?? selectedText
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriggerIcon, {
 			is: _atom_learning_icons.ChevronDown,
 			size
@@ -8723,7 +8691,7 @@ var SelectMenuTrigger = ({ ref, placeholder, children, ...rest }) => {
 };
 //#endregion
 //#region src/components/select-menu/SelectMenu.tsx
-var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...rest }) => {
+var SelectMenuRoot = ({ size = "md", theme = "grey", state, className, children, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectMenuContext, {
 		value: react.useMemo(() => ({
 			size,
@@ -8734,7 +8702,8 @@ var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...rest })
 			theme,
 			state
 		]),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Root, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Select, {
+			className: cn("w-full", className),
 			...rest,
 			children
 		})
@@ -8744,7 +8713,7 @@ var SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {
 	Trigger: SelectMenuTrigger,
 	Content: SelectMenuContent,
 	Item: SelectMenuItem,
-	Group: _radix_ui_react_select.Group,
+	Group: react_aria_components.ListBoxSection,
 	Label: SelectMenuLabel,
 	Separator: SelectMenuSeparator
 });
@@ -8771,17 +8740,17 @@ var SelectMenuField = ({ className, hideLabel, children, name, label, validation
 		prompt,
 		required: Boolean(validation?.required),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SelectMenu, {
-			value,
-			onValueChange: onChange,
+			"aria-label": label,
+			selectedKey: value === "" ? null : value,
+			onSelectionChange: onChange,
 			size,
 			theme: formTheme,
-			disabled,
+			isDisabled: disabled,
 			...error && { state: "error" },
 			...rest,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectMenu.Trigger, {
 				ref,
-				placeholder,
-				"aria-label": label
+				placeholder
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectMenu.Content, { children })]
 		})
 	});
@@ -9036,7 +9005,8 @@ 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 }) => {
+var DEFAULT_STEPS = [];
+var SliderField = ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min = 0, max = 100, steps = DEFAULT_STEPS, ...rest }) => {
 	const { control, setValue } = (0, react_hook_form.useFormContext)();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = (0, react_hook_form.useController)({
 		name,
@@ -9577,14 +9547,16 @@ var StepperStepsContainer = styled("div", {
 });
 var StepperSteps = ({ className }) => {
 	const { steps, goToStep, activeStep, viewedSteps, allowSkip, direction, hideLabels, completedSteps, showCompletedIcons } = useStepper();
+	const viewedStepsSet = new Set(viewedSteps);
+	const completedStepsSet = new Set(completedSteps);
 	const getBulletStatus = (index) => {
 		const activeBullet = steps[index];
 		if (activeBullet.status) return activeBullet.status;
 		if (completedSteps.length === steps.length) return Status.SUCCESS;
-		if (activeStep === index && completedSteps.includes(activeStep)) return Status.REVIEWED;
+		if (activeStep === index && completedStepsSet.has(activeStep)) return Status.REVIEWED;
 		if (activeStep === index) return Status.ACTIVE;
-		if (completedSteps.includes(index)) return Status.COMPLETED;
-		if (viewedSteps.includes(index)) return Status.VIEWED;
+		if (completedStepsSet.has(index)) return Status.COMPLETED;
+		if (viewedStepsSet.has(index)) return Status.VIEWED;
 		return Status.DEFAULT;
 	};
 	const getSeparatorStatus = (index) => {
@@ -9610,12 +9582,12 @@ var StepperSteps = ({ className }) => {
 				canInteract: allowSkip,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperStepBullet, {
 					as: allowSkip ? "button" : "div",
-					onClick: () => allowSkip && viewedSteps.includes(index) ? goToStep?.(index) : void 0,
+					onClick: () => allowSkip && viewedStepsSet.has(index) ? goToStep?.(index) : void 0,
 					status: bulletStatus,
 					"aria-current": index === activeStep ? "step" : void 0,
 					"aria-label": !step.label ? `step ${index + 1}` : "",
 					"aria-labelledby": step.label ? `step-${index}` : void 0,
-					className: allowSkip && viewedSteps.includes(index) ? "cursor-pointer" : "cursor-auto",
+					className: allowSkip && viewedStepsSet.has(index) ? "cursor-pointer" : "cursor-auto",
 					children: step.status === Status.SUCCESS || showCompletedIcons && bulletStatus === Status.COMPLETED ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: _atom_learning_icons.Ok }) : index + 1
 				}), step.label && !hideLabels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperStepLabel, {
 					as: "span",
@@ -9631,7 +9603,7 @@ var StepperSteps = ({ className }) => {
 //#endregion
 //#region src/components/stepper/Stepper.tsx
 var StepperComponent = ({ children, stepCount, allowSkip, onComplete, onStepChange, direction = "horizontal", steps, hideLabels = false, showCompletedIcons = false, className }) => {
-	(0, invariant.default)(!(stepCount && steps), "`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.");
+	(0, tiny_invariant.default)(!(stepCount && steps), "`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.");
 	const count = steps?.length || stepCount || 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperProvider, {
 		stepCount: count,
@@ -11039,12 +11011,12 @@ var FileDrop = ({ children, accept, multiple, onDrop, ...rest }) => {
 	const handleDrop = (fileList) => {
 		if (!fileList) return;
 		setIsDragging(false);
-		const files = Array.from(fileList);
+		const files = [...fileList];
 		onDrop(files);
 		setFiles(files);
 	};
 	const handleKeyDown = (event) => {
-		if (["Space", "Enter"].includes(event.key)) fileUploadInputRef.current?.click();
+		if ("Space" === event.key || "Enter" === event.key) fileUploadInputRef.current?.click();
 	};
 	const value = react.useMemo(() => ({
 		isDragging,
@@ -11082,9 +11054,6 @@ FileDrop.displayName = "FileDrop";
 //#region src/components/file-drop/useFileDrop.ts
 var useFileDrop = () => react.use(FileDropContext);
 //#endregion
-//#region src/components/index.ts
-var Alert = { Provider: AlertProvider };
-//#endregion
 exports.Accordion = Accordion;
 exports.ActionIcon = ActionIcon;
 exports.Alert = Alert;