@atom-learning/components 10.0.1 → 10.1.0

package/dist/index.cjs.js

@@ -41,8 +41,8 @@ let tailwind_variants = require("tailwind-variants");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _atom_learning_icons = require("@atom-learning/icons");
 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");
@@ -79,8 +79,8 @@ 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);
@@ -90,7 +90,9 @@ let react_player_vimeo_js = require("react-player/vimeo.js");
 react_player_vimeo_js = __toESM(react_player_vimeo_js, 1);
 //#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] }],
@@ -112,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]) => {
@@ -128,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;
@@ -146,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, {
@@ -178,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;
@@ -499,7 +503,8 @@ var OptionalTooltipWrapper = ({ hasTooltip, label, tooltipSide, children }) => {
 OptionalTooltipWrapper.displayName = "OptionalTooltipWrapper";
 //#endregion
 //#region src/utilities/uri/index.ts
-var isExternalUrl = (url) => !!url && /^https?:\/\//.test(url);
+var EXTERNAL_URL_RE = /^https?:\/\//;
+var isExternalUrl = (url) => !!url && EXTERNAL_URL_RE.test(url);
 var getExternalAnchorProps = (url) => isExternalUrl(url) ? {
 	target: "_blank",
 	rel: "noopener noreferrer"
@@ -611,7 +616,7 @@ var StyledButton$5 = styled("button", {
 }, { 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);
+	(0, tiny_invariant.default)(react.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionalTooltipWrapper, {
 		hasTooltip,
 		label,
@@ -633,7 +638,7 @@ var ActionIcon = ({ ref, children, theme = "primary", appearance = "simple", siz
 			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`);
+				(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] });
 			})
 		})
@@ -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: [
@@ -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,