@atom-learning/components 6.16.0-beta.3 → 6.16.0

package/dist/index.cjs.js

@@ -32,64 +32,66 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 //#endregion
 let _radix_ui_react_accordion = require("@radix-ui/react-accordion");
 let react = require("react");
-react = __toESM(react, 1);
+react = __toESM(react);
 let clsx = require("clsx");
-clsx = __toESM(clsx, 1);
+clsx = __toESM(clsx);
 let tailwind_merge = require("tailwind-merge");
 let tailwind_variants = require("tailwind-variants");
 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);
+invariant = __toESM(invariant);
 let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
 let _radix_ui_react_alert_dialog = require("@radix-ui/react-alert-dialog");
 let uid = require("uid");
 let throttle_debounce = require("throttle-debounce");
 let pure_react_carousel = require("pure-react-carousel");
 let _radix_ui_react_checkbox = require("@radix-ui/react-checkbox");
-_radix_ui_react_checkbox = __toESM(_radix_ui_react_checkbox, 1);
+_radix_ui_react_checkbox = __toESM(_radix_ui_react_checkbox);
 let _radix_ui_react_collapsible = require("@radix-ui/react-collapsible");
 let react_hook_form = require("react-hook-form");
 let _radix_ui_react_radio_group = require("@radix-ui/react-radio-group");
-_radix_ui_react_radio_group = __toESM(_radix_ui_react_radio_group, 1);
+_radix_ui_react_radio_group = __toESM(_radix_ui_react_radio_group);
 let dlv = require("dlv");
-dlv = __toESM(dlv, 1);
+dlv = __toESM(dlv);
 let _radix_ui_react_toggle_group = require("@radix-ui/react-toggle-group");
-_radix_ui_react_toggle_group = __toESM(_radix_ui_react_toggle_group, 1);
+_radix_ui_react_toggle_group = __toESM(_radix_ui_react_toggle_group);
 let _reach_combobox = require("@reach/combobox");
 let _lukeed_uuid = require("@lukeed/uuid");
 let _tanstack_react_table = require("@tanstack/react-table");
 let use_deep_compare_effect = require("use-deep-compare-effect");
-use_deep_compare_effect = __toESM(use_deep_compare_effect, 1);
+use_deep_compare_effect = __toESM(use_deep_compare_effect);
 let react_aria = require("react-aria");
 let _dnd_kit_sortable = require("@dnd-kit/sortable");
 let _dnd_kit_core = require("@dnd-kit/core");
 let _radix_ui_react_popover = require("@radix-ui/react-popover");
 let dayjs = require("dayjs");
-dayjs = __toESM(dayjs, 1);
+dayjs = __toESM(dayjs);
 let dayjs_plugin_customParseFormat_js = require("dayjs/plugin/customParseFormat.js");
-dayjs_plugin_customParseFormat_js = __toESM(dayjs_plugin_customParseFormat_js, 1);
+dayjs_plugin_customParseFormat_js = __toESM(dayjs_plugin_customParseFormat_js);
 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);
+mdast_util_directive = __toESM(mdast_util_directive);
 let mdast_util_from_markdown = require("mdast-util-from-markdown");
-mdast_util_from_markdown = __toESM(mdast_util_from_markdown, 1);
+mdast_util_from_markdown = __toESM(mdast_util_from_markdown);
 let micromark_extension_directive = require("micromark-extension-directive");
-micromark_extension_directive = __toESM(micromark_extension_directive, 1);
+micromark_extension_directive = __toESM(micromark_extension_directive);
 let _radix_ui_react_navigation_menu = require("@radix-ui/react-navigation-menu");
-_radix_ui_react_navigation_menu = __toESM(_radix_ui_react_navigation_menu, 1);
+_radix_ui_react_navigation_menu = __toESM(_radix_ui_react_navigation_menu);
 let _radix_ui_react_progress = require("@radix-ui/react-progress");
-_radix_ui_react_progress = __toESM(_radix_ui_react_progress, 1);
+_radix_ui_react_progress = __toESM(_radix_ui_react_progress);
+let _radix_ui_react_select = require("@radix-ui/react-select");
+_radix_ui_react_select = __toESM(_radix_ui_react_select);
 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);
+_radix_ui_react_switch = __toESM(_radix_ui_react_switch);
 let _radix_ui_react_tabs = require("@radix-ui/react-tabs");
 let react_hot_toast = require("react-hot-toast");
-react_hot_toast = __toESM(react_hot_toast, 1);
+react_hot_toast = __toESM(react_hot_toast);
 let react_player_vimeo_js = require("react-player/vimeo.js");
-react_player_vimeo_js = __toESM(react_player_vimeo_js, 1);
+react_player_vimeo_js = __toESM(react_player_vimeo_js);
 //#region src/styled.tsx
 tailwind_variants.defaultConfig.twMerge = false;
 var isArbitraryNumber = (value) => /^\[[\d.]+\]$/.test(value) || !Number.isNaN(Number(value));
@@ -120,7 +122,8 @@ function styled(el, styles, options) {
 			const responsiveVariantConfig = props[variantKey];
 			const variantStyles = styles.variants[variantKey];
 			if (typeof responsiveVariantConfig === "object" && responsiveVariantConfig && !Array.isArray(responsiveVariantConfig)) return Object.entries(responsiveVariantConfig).flatMap(([key, val]) => {
-				const styleArr = variantStyles && variantStyles[String(val)];
+				const valStr = String(val);
+				const styleArr = variantStyles && variantStyles[valStr];
 				if (styleArr && Array.isArray(styleArr)) return styleArr.flatMap((cls) => {
 					if (key === "@initial") return cls;
 					return `${key.replace("@", "")}:${cls}`;
@@ -485,21 +488,6 @@ var getExternalAnchorProps = (url) => isExternalUrl(url) ? {
 	rel: "noopener noreferrer"
 } : {};
 //#endregion
-//#region src/components/router-provider/RouterProvider.tsx
-var RouterContext = react.createContext({});
-var RouterProvider = ({ link, children }) => {
-	const value = react.useMemo(() => ({ link }), [link]);
-	return /* @__PURE__ */ react.createElement(RouterContext.Provider, { value }, children);
-};
-var isAbsoluteUrl = (url) => /^https?:\/\//.test(url || "");
-var EMPTY = {};
-var useRouterLinkProps = (href, { reloadDocument } = {}) => {
-	const { link } = react.useContext(RouterContext);
-	if (!link || !href || isAbsoluteUrl(href) || reloadDocument) return EMPTY;
-	return { as: link };
-};
-RouterProvider.displayName = "RouterProvider";
-//#endregion
 //#region src/components/action-icon/ActionIcon.constants.ts
 var ActionIconSizeMap = {
 	xs: "sm",
@@ -604,12 +592,11 @@ var StyledButton$5 = styled("button", {
 		isRounded: { true: ["rounded-full"] }
 	}
 }, { enabledResponsiveVariants: true });
-var ActionIcon = react.forwardRef(({ children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, reloadDocument, ...remainingProps }, ref) => {
+var ActionIcon = react.forwardRef(({ children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, ...remainingProps }, ref) => {
 	const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`;
 	(0, invariant.default)(react.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE);
-	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
 	const optionalLinkProps = href ? {
-		as: routerLinkProps.as || "a",
+		as: "a",
 		href: disabled ? void 0 : href,
 		onClick: void 0,
 		"aria-disabled": !!disabled
@@ -863,22 +850,19 @@ var LoaderContentsWrapper = styled("span", {
 	defaultVariants: { size: "md" }
 }, { enabledResponsiveVariants: true });
 var WithLoader = ({ size, children }) => /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(Loader, { className: "absolute" }), /* @__PURE__ */ react.createElement(LoaderContentsWrapper, { size }, children));
-var Button = react.forwardRef(({ children, as, href, isLoading = false, onClick, disabled, reloadDocument, ...rest }, ref) => {
-	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
-	return /* @__PURE__ */ react.createElement(StyledButton, {
-		as: as || routerLinkProps.as || (href ? "a" : void 0),
-		...!disabled && !isLoading && {
-			href,
-			onClick
-		},
-		isLoading,
-		type: !href ? "button" : void 0,
-		disabled,
-		...rest,
-		...getExternalAnchorProps(href),
-		ref
-	}, isLoading ? /* @__PURE__ */ react.createElement(WithLoader, { size: rest.size }, children) : children);
-});
+var Button = react.forwardRef(({ children, as, href, isLoading = false, onClick, disabled, ...rest }, ref) => /* @__PURE__ */ react.createElement(StyledButton, {
+	as: as || (href ? "a" : void 0),
+	...!disabled && !isLoading && {
+		href,
+		onClick
+	},
+	isLoading,
+	type: !href ? "button" : void 0,
+	disabled,
+	...rest,
+	...getExternalAnchorProps(href),
+	ref
+}, isLoading ? /* @__PURE__ */ react.createElement(WithLoader, { size: rest.size }, children) : children));
 Button.displayName = "Button";
 //#endregion
 //#region src/components/heading/Heading.tsx
@@ -1997,7 +1981,7 @@ var StyledBannerSlimContainer = styled(BannerContainer, {
 		md: ["px-6"]
 	} }
 }, { enabledResponsiveVariants: true });
-var BannerSlimContainer = (props) => {
+var BannerSlimContainer = ({ className, ...rest }) => {
 	const { size } = useBannerContext();
 	const direction = react.useMemo(() => {
 		if (typeof size === "string") return toDirection[size];
@@ -2012,9 +1996,9 @@ var BannerSlimContainer = (props) => {
 		return "flex-wrap md:flex-nowrap";
 	}, [size]);
 	return /* @__PURE__ */ react.createElement(StyledBannerSlimContainer, {
-		...props,
+		...rest,
 		sizeWorkaround: size,
-		className: cn(direction, align, "gap-4", wrap, props.className)
+		className: cn(direction, align, "gap-4", wrap, className)
 	});
 };
 BannerSlimContainer.displayName = "BannerSlimContainer";
@@ -2430,7 +2414,7 @@ var TreeListItem = react.forwardRef(({ className, ...props }, ref) => /* @__PURE
 	...props,
 	ref,
 	role: "treeitem",
-	className: cn("flex items-center gap-2 not-first:mt-0.5", className)
+	className: cn("flex", "items-center", "gap-2", "not-first:mt-0.5", className)
 }));
 //#endregion
 //#region src/components/tree/TreeCollapsible.tsx
@@ -2485,14 +2469,14 @@ var TreeCollapsibleContent = react.default.forwardRef(({ children, className, ..
 var TreeIcon = ({ className, ...props }) => /* @__PURE__ */ react.createElement(Icon, {
 	size: "md",
 	...props,
-	className: cn("my-1 shrink-0 self-start", className)
+	className: cn("my-1", "shrink-0", "self-start", className)
 });
 //#endregion
 //#region src/components/tree/TreeText.tsx
-var TreeText = (props) => /* @__PURE__ */ react.default.createElement(Text, {
+var TreeText = ({ className, ...rest }) => /* @__PURE__ */ react.default.createElement(Text, {
 	as: "span",
-	...props,
-	className: cn("py-0.5", "whitespace-nowrap", "overflow-x-hidden", "text-ellipsis", props.className),
+	...rest,
+	className: cn("py-0.5", "whitespace-nowrap", "overflow-x-hidden", "text-ellipsis", className),
 	size: "md"
 });
 //#endregion
@@ -2835,6 +2819,11 @@ var useFieldError = (fieldName) => {
 };
 //#endregion
 //#region src/components/checkbox-field/CheckboxField.tsx
+var CheckboxValue = /* @__PURE__ */ function(CheckboxValue) {
+	CheckboxValue["ON"] = "on";
+	CheckboxValue["OFF"] = "off";
+	return CheckboxValue;
+}(CheckboxValue || {});
 var CheckboxField = ({ className, label, name, validation, description, defaultChecked = false, checked, onCheckedChange, ...remainingProps }) => {
 	const { control } = (0, react_hook_form.useFormContext)();
 	const { error } = useFieldError(name);
@@ -2861,7 +2850,7 @@ var CheckboxField = ({ className, label, name, validation, description, defaultC
 			onChange(newChecked);
 			onCheckedChange?.(newChecked);
 		},
-		value: innerChecked ? "on" : "off",
+		value: innerChecked ? CheckboxValue.ON : CheckboxValue.OFF,
 		checked: innerChecked,
 		...error && { state: "error" }
 	}));
@@ -3310,18 +3299,15 @@ var StyledLink = styled("a", {
 	},
 	defaultVariants: { size: "md" }
 }, { enabledResponsiveVariants: true });
-var Link = react.forwardRef(({ as, disabled, href, reloadDocument, ...rest }, ref) => {
-	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
-	return /* @__PURE__ */ react.createElement(StyledLink, {
-		as: as || routerLinkProps.as || (!href ? "button" : void 0),
-		noCapsize: !href ? true : void 0,
-		href,
-		...disabled && { disabled: true },
-		...rest,
-		...getExternalAnchorProps(href),
-		ref
-	});
-});
+var Link = react.forwardRef(({ as, disabled, href, ...rest }, ref) => /* @__PURE__ */ react.createElement(StyledLink, {
+	as: as || (!href ? "button" : void 0),
+	noCapsize: !href ? true : void 0,
+	href,
+	...disabled && { disabled: true },
+	...rest,
+	...getExternalAnchorProps(href),
+	ref
+}));
 Link.displayName = "Link";
 //#endregion
 //#region src/components/field-wrapper/FieldWrapper.tsx
@@ -3505,7 +3491,7 @@ var PasswordField = ({ className, hideLabel, label = "Password", name, prompt =
 		prompt,
 		required: Boolean(validation?.required),
 		appearance: formAppearance,
-		className: cn(className, "relative")
+		className: cn("relative", className)
 	}, /* @__PURE__ */ react.createElement(PasswordInput, {
 		autoComplete: "current-password",
 		name,
@@ -4404,6 +4390,11 @@ var DataTableError = ({ children }) => {
 };
 //#endregion
 //#region src/components/search-input/SearchInput.tsx
+var INPUT_ICON = /* @__PURE__ */ function(INPUT_ICON) {
+	INPUT_ICON["SEARCH"] = "SEARCH";
+	INPUT_ICON["CLEAR"] = "CLEAR";
+	return INPUT_ICON;
+}(INPUT_ICON || {});
 var StyledIcon$1 = styled(Icon, {
 	base: [
 		"text-grey-700",
@@ -4419,11 +4410,11 @@ var StyledIcon$1 = styled(Icon, {
 var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...remainingProps }, ref) => {
 	const [inputElRef, setInputElRef] = useCallbackRef();
 	const [innerValue, setInnerValue] = react.useState(defaultValue);
-	const [activeIcon, setActiveIcon] = react.useState(defaultValue ? "CLEAR" : "SEARCH");
+	const [activeIcon, setActiveIcon] = react.useState(defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
 	react.useEffect(() => {
 		if (typeof value === "undefined") return;
 		setInnerValue(value);
-		setActiveIcon(value ? "CLEAR" : "SEARCH");
+		setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
 	}, [value]);
 	const iconSize = react.useMemo(() => getFieldIconSize(size), [size]);
 	react.useImperativeHandle(ref, () => inputElRef.current);
@@ -4441,10 +4432,10 @@ var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", them
 		const newValue = event.target.value;
 		setInnerValue(newValue);
 		onValueChange?.(newValue);
-		setActiveIcon(newValue ? "CLEAR" : "SEARCH");
+		setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
 	};
 	const getIcon = () => {
-		if (activeIcon === "SEARCH") return /* @__PURE__ */ react.createElement(StyledIcon$1, {
+		if (activeIcon === INPUT_ICON.SEARCH) return /* @__PURE__ */ react.createElement(StyledIcon$1, {
 			is: _atom_learning_icons.Search,
 			size,
 			className: cn(size == "sm" ? "size-4" : "size-5", "top-1/2", "-translate-y-1/2")
@@ -4742,14 +4733,14 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 		numberOfStickyColumns: scrollOptions.numberOfStickyColumns,
 		scrollContainerCls: scrollOptions.scrollContainerCls,
 		scrollContainerkey: buildScrollContainerKey(),
-		className: cn(className, isPending && [
+		className: cn(isPending && [
 			"opacity-50",
 			"pointer-events-none",
 			"transition-opacity",
 			"duration-250",
 			"linear",
 			"delay-150"
-		])
+		], className)
 	}, /* @__PURE__ */ react.createElement(DataTableHead, {
 		theme,
 		sortable,
@@ -4925,11 +4916,14 @@ var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, the
 		sortableIds: rowIds
 	}, /* @__PURE__ */ react.createElement(DataTableLoading, null), /* @__PURE__ */ react.createElement(Table, {
 		...props,
-		className: cn(className, isPending && [
+		className: cn(isPending && [
 			"opacity-50",
 			"pointer-events-none",
-			"transition-opacity,duration-250,linear,delay-150"
-		])
+			"transition-opacity",
+			"duration-250",
+			"linear",
+			"delay-150"
+		], className)
 	}, /* @__PURE__ */ react.createElement(DataTableHead, {
 		theme,
 		sortable
@@ -5437,110 +5431,22 @@ Pagination$1.displayName = "Pagination";
 * the functionality we've built on top.
 */
 var DataTable = Object.assign(DataTableProvider, {
-	/** Default table body implementation for `DataTable`.
-	*
-	* Can be configured with alternating colours of rows. If you need more customisation options,
-	* you can build your own implementation with `useDataTable()` and the UI-only `Table` components.
-	*/
 	Body: DataTableBody,
-	/** Default table data cell implementation for `DataTable`
-	*
-	*
-	*/
 	DataCell: DataTableDataCell,
-	/**
-	* Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop
-	*/
 	DragAndDropTable,
-	/** Default global search implementation for `DataTable`
-	*
-	* If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.
-	*/
 	GlobalFilter: DataTableGlobalFilter,
-	/** Default table head implementation
-	*
-	* Can be configured to be sortable and with different visual themes.
-	* If you need more customisation options, you can build your own implementation
-	* with `useDataTable` and the UI-only `Table` components.
-	*/
 	Head: DataTableHead,
-	/** Default header implementation for `DataTable`
-	*
-	* Can be configured to make the column sortable. If you need more customisation options,
-	* you can build your own implementation with the UI-only `Table` components.
-	*/
 	HeaderCell: DataTableHeaderCell,
-	/** Default pagination implementation for `DataTable`
-	*
-	* Can navigate forward, backward, or to any specific page. If you need more customisation options,
-	* you can build your own implementation with `useDataTable` and other UI components.
-	*
-	*/
 	MetaData: DataTableMetaData,
-	/** Default display of amount of items and current sorting status for 'DataTable'
-	*
-	*/
 	Pagination: Pagination$1,
-	/** Default row implementation for `DataTable`
-	*
-	* Renders all visible cells as `Table.Cell`. If you need more customisation options,
-	* you can build your own implementation with the UI-only `Table` components.
-	*/
 	Row: DataTableRow,
-	/** Default table implementation for `DataTable`.
-	*
-	* Can be configured with sortable columns and different visual themes.
-	*
-	* If you need more customisation options, you can compose your own implementation with
-	* lower-level `DataTable` components or build the whole thing from
-	* scratch with `useDataTable` and the UI-only `Table` components.
-	*
-	*/
 	Table: DataTableTable,
-	/** Default loading implementation for remote data
-	*
-	* Renders a loading component while fetching the paginated data using `getAsyncData`.
-	*
-	* If you need more customisation, you can compose your own implentation, `asyncDataState`
-	* can be retrieved from `useDataTable`
-	*/
 	Loading: DataTableLoading,
-	/** Default error implementation for remote data
-	*
-	* Renders an error component when `getAsyncData` promise rejects.
-	* Children are rendered as a function, it exposes a `runAsyncData` function to the children component.
-	* `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize
-	* and sorting parameters or your own custom paginated options.
-	*
-	* If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`
-	* can be retrieved from `useDataTable`
-	*
-	*/
 	Error: DataTableError,
-	/** Empty state implementation for `DataTable`.
-	*
-	* Extends the EmptyState component
-	*/
 	EmptyState: DataTableEmptyState,
-	/** Select all rows checkbox.
-	*
-	* Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows
-	*/
 	SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,
-	/** Individual row selection checkbox.
-	*
-	* Renders a checkbox on each row, allowing for individual selection/deselection of any selectable row
-	*/
 	RowSelectionCheckbox: DataTableRowSelectionCheckbox,
-	/** Bulk actions for selected rows.
-	*
-	* Renders a toolbar with actions that can be applied to all selected rows
-	*/
 	BulkActions: DataTableBulkActions,
-	/** Bulk actions for selected rows.
-	*
-	* Renders a toolbar with actions that can be applied to all selected rows
-	*/
 	BulkActionsFloating: DataTableBulkActionsFloating
 });
 //#endregion
@@ -6189,18 +6095,14 @@ var DropdownMenuItem = styled(_radix_ui_react_dropdown_menu.Item, { base: [
 //#endregion
 //#region src/components/dropdown-menu/DropdownMenuLinkItem.tsx
 var StyledLink$2 = styled("a", { base: ["no-underline"] });
-var DropdownMenuLinkItem = ({ children, href, reloadDocument, ...props }) => {
-	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
-	return /* @__PURE__ */ react.default.createElement(DropdownMenuItem, {
-		...props,
-		asChild: true
-	}, /* @__PURE__ */ react.default.createElement(StyledLink$2, {
-		as: routerLinkProps.as,
-		href,
-		role: "menuitem",
-		...getExternalAnchorProps(href)
-	}, children));
-};
+var DropdownMenuLinkItem = ({ children, href, ...props }) => /* @__PURE__ */ react.default.createElement(DropdownMenuItem, {
+	...props,
+	asChild: true
+}, /* @__PURE__ */ react.default.createElement(StyledLink$2, {
+	href,
+	role: "menuitem",
+	...getExternalAnchorProps(href)
+}, children));
 //#endregion
 //#region src/components/dropdown-menu/DropdownMenuSeparator.tsx
 var DropdownMenuSeparator = styled(_radix_ui_react_dropdown_menu.Separator, { base: [
@@ -6784,27 +6686,17 @@ var StyledLink$1 = styled(_radix_ui_react_navigation_menu.Link, {
 		]
 	} }
 });
-var NavigationMenuLink = react.default.forwardRef(({ children, href, disabled, className, variant = "link", ref: _ref, reloadDocument, ...props }, forwardedRef) => {
-	const RouterLink = useRouterLinkProps(href, { reloadDocument }).as;
-	return /* @__PURE__ */ react.default.createElement(ListItem, null, disabled ? /* @__PURE__ */ react.default.createElement(DisabledButton, {
-		disabled: true,
-		className
-	}, children) : RouterLink ? /* @__PURE__ */ react.default.createElement(StyledLink$1, {
-		href,
-		ref: forwardedRef,
-		elementType: variant,
-		className,
-		asChild: true,
-		...props
-	}, /* @__PURE__ */ react.default.createElement(RouterLink, { href }, children)) : /* @__PURE__ */ react.default.createElement(StyledLink$1, {
-		href,
-		ref: forwardedRef,
-		elementType: variant,
-		className,
-		...getExternalAnchorProps(href),
-		...props
-	}, children));
-});
+var NavigationMenuLink = react.default.forwardRef(({ children, href, disabled, className, variant = "link", ref: _ref, ...props }, forwardedRef) => /* @__PURE__ */ react.default.createElement(ListItem, null, disabled ? /* @__PURE__ */ react.default.createElement(DisabledButton, {
+	disabled: true,
+	className
+}, children) : /* @__PURE__ */ react.default.createElement(StyledLink$1, {
+	href,
+	ref: forwardedRef,
+	elementType: variant,
+	className,
+	...getExternalAnchorProps(href),
+	...props
+}, children)));
 NavigationMenuLink.displayName = "NavigationMenuLink";
 //#endregion
 //#region src/components/navigation/NavigationMenuDropdownItem.tsx
@@ -7060,10 +6952,9 @@ var StyledNavigationMenuVerticalLink = styled(_radix_ui_react_navigation_menu.Li
 		lg: ["min-h-12"]
 	} }
 });
-var NavigationMenuVerticalLink = ({ as, href, children, reloadDocument, ...rest }) => {
-	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
-	const Component = as || routerLinkProps.as || (href ? "a" : "button");
-	const componentProps = as || routerLinkProps.as ? {} : href ? getExternalAnchorProps(href) : { type: "button" };
+var NavigationMenuVerticalLink = ({ as, href, children, ...rest }) => {
+	const Component = as || (href ? "a" : "button");
+	const componentProps = as ? {} : href ? getExternalAnchorProps(href) : { type: "button" };
 	return /* @__PURE__ */ react.default.createElement(NavigationMenuVerticalItem, null, /* @__PURE__ */ react.default.createElement(StyledNavigationMenuVerticalLink, {
 		size: "lg",
 		href,
@@ -7323,7 +7214,7 @@ var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, mi
 	}, /* @__PURE__ */ react.createElement(NumberInputStepper, {
 		onClick: decrement,
 		icon: _atom_learning_icons.Minus,
-		className: cn(emphasis !== "bold" && "border-r-none rounded-r-none"),
+		className: cn(emphasis !== "bold" && ["border-r-none", "rounded-r-none"]),
 		size: iconSize,
 		fieldAppearance: appearance,
 		fieldTheme: theme,
@@ -7335,7 +7226,7 @@ var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, mi
 	}), /* @__PURE__ */ react.createElement(Input, inputProps), /* @__PURE__ */ react.createElement(NumberInputStepper, {
 		onClick: increment,
 		icon: _atom_learning_icons.Plus,
-		className: cn(emphasis !== "bold" && "border-l-none rounded-l-none"),
+		className: cn(emphasis !== "bold" && ["border-l-none", "rounded-l-none"]),
 		size: iconSize,
 		fieldAppearance: appearance,
 		fieldTheme: theme,
@@ -7897,6 +7788,272 @@ var SelectField = ({ className, hideLabel, children, name, label, validation, pr
 };
 SelectField.displayName = "SelectField";
 //#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 = react.forwardRef(({ children, position = "popper", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ react.createElement(_radix_ui_react_select.Portal, null, /* @__PURE__ */ react.createElement(Content$2, {
+	ref,
+	position,
+	sideOffset,
+	...props
+}, /* @__PURE__ */ react.createElement(ScrollUpButton, null, /* @__PURE__ */ react.createElement(Icon, {
+	is: _atom_learning_icons.ChevronUp,
+	className: "text-grey-700 size-4"
+})), /* @__PURE__ */ react.createElement(Viewport, { position }, children), /* @__PURE__ */ react.createElement(ScrollDownButton, null, /* @__PURE__ */ react.createElement(Icon, {
+	is: _atom_learning_icons.ChevronDown,
+	className: "text-grey-700 size-4"
+})))));
+SelectMenuContent.displayName = "SelectMenuContent";
+//#endregion
+//#region src/components/select-menu/SelectMenuContext.tsx
+var SelectMenuContext = react.createContext({
+	size: "md",
+	theme: "grey"
+});
+var useSelectMenuContext = () => react.useContext(SelectMenuContext);
+//#endregion
+//#region src/components/select-menu/SelectMenuItem.tsx
+var Item = styled(_radix_ui_react_select.Item, {
+	base: [
+		"relative",
+		"flex",
+		"items-center",
+		"text-grey-1000",
+		"font-body",
+		"font-normal",
+		"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"
+	],
+	variants: { size: {
+		sm: [
+			"py-1.5",
+			"pl-7",
+			"pr-4",
+			"text-sm"
+		],
+		md: [
+			"py-2",
+			"pl-8",
+			"pr-6"
+		],
+		lg: [
+			"py-2",
+			"pl-8",
+			"pr-6"
+		]
+	} }
+});
+var SelectMenuItem = react.forwardRef(({ children, ...props }, ref) => {
+	const { size } = useSelectMenuContext();
+	return /* @__PURE__ */ react.createElement(Item, {
+		ref,
+		size,
+		...props
+	}, /* @__PURE__ */ react.createElement(_radix_ui_react_select.ItemIndicator, { className: "absolute left-2 inline-flex items-center" }, /* @__PURE__ */ react.createElement(Icon, {
+		is: _atom_learning_icons.Ok,
+		className: size === "sm" ? "size-3" : "size-4"
+	})), /* @__PURE__ */ react.createElement(_radix_ui_react_select.ItemText, null, children));
+});
+SelectMenuItem.displayName = "SelectMenuItem";
+//#endregion
+//#region src/components/select-menu/SelectMenuLabel.tsx
+var SelectMenuLabel = ({ className, ...props }) => /* @__PURE__ */ react.createElement(Text, {
+	as: _radix_ui_react_select.Label,
+	size: "sm",
+	className: cn("p-2", "mb-1", "text-text-subtle", className),
+	...props
+});
+SelectMenuLabel.displayName = "SelectMenuLabel";
+//#endregion
+//#region src/components/select-menu/SelectMenuSeparator.tsx
+var SelectMenuSeparator = styled(_radix_ui_react_select.Separator, { base: [
+	"h-px",
+	"bg-grey-200",
+	"my-2",
+	"mx-1"
+] });
+//#endregion
+//#region src/components/select-menu/SelectMenuTrigger.tsx
+var Trigger$2 = styled(_radix_ui_react_select.Trigger, {
+	base: [
+		"appearance-none",
+		"rounded-md",
+		"block",
+		"w-full",
+		"font-body",
+		"font-normal",
+		"leading-[1.4]",
+		"text-grey-1000",
+		"text-left",
+		"relative",
+		"inline-flex",
+		"items-center",
+		"border-none",
+		"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"
+	],
+	variants: {
+		size: {
+			sm: [
+				"h-8",
+				"pl-2",
+				"pr-8",
+				"text-sm"
+			],
+			md: [
+				"h-10",
+				"pl-3",
+				"pr-10",
+				"text-md"
+			],
+			lg: [
+				"h-12",
+				"pl-3",
+				"pr-10",
+				"text-md"
+			]
+		},
+		theme: {
+			white: ["bg-white"],
+			grey: ["bg-grey-100"]
+		},
+		state: { error: ["bg-danger-light", "focus:outline-danger"] }
+	}
+});
+var TriggerIcon = styled(Icon, {
+	base: [
+		"absolute",
+		"top-1/2",
+		"-translate-y-1/2",
+		"pointer-events-none",
+		"text-grey-700"
+	],
+	variants: { size: {
+		sm: ["right-2", "size-4"],
+		md: ["right-3", "size-5"],
+		lg: ["right-3", "size-5"]
+	} }
+});
+var SelectMenuTrigger = react.forwardRef(({ placeholder, children, ...props }, ref) => {
+	const { size, theme, state } = useSelectMenuContext();
+	return /* @__PURE__ */ react.createElement(Trigger$2, {
+		ref,
+		size,
+		theme,
+		state,
+		...props
+	}, /* @__PURE__ */ react.createElement(_radix_ui_react_select.Value, { placeholder }, children), /* @__PURE__ */ react.createElement(TriggerIcon, {
+		is: _atom_learning_icons.ChevronDown,
+		size
+	}));
+});
+SelectMenuTrigger.displayName = "SelectMenuTrigger";
+//#endregion
+//#region src/components/select-menu/SelectMenu.tsx
+var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...props }) => /* @__PURE__ */ react.createElement(SelectMenuContext.Provider, { value: {
+	size,
+	theme,
+	state
+} }, /* @__PURE__ */ react.createElement(_radix_ui_react_select.Root, props, children));
+var SelectMenu = Object.assign(SelectMenuRoot, {
+	Trigger: SelectMenuTrigger,
+	Content: SelectMenuContent,
+	Item: SelectMenuItem,
+	Group: _radix_ui_react_select.Group,
+	Label: SelectMenuLabel,
+	Separator: SelectMenuSeparator
+});
+//#endregion
+//#region src/components/select-menu-field/SelectMenuField.tsx
+var SelectMenuField = ({ className, hideLabel, children, name, label, validation, prompt, description, theme, size, placeholder, disabled, ...remainingProps }) => {
+	const { control } = (0, react_hook_form.useFormContext)();
+	const context = useFormCustomContext();
+	const { error } = useFieldError(name);
+	const formTheme = context?.theme ?? theme;
+	const { field: { ref, onChange, value } } = (0, react_hook_form.useController)({
+		name,
+		control,
+		rules: validation,
+		defaultValue: ""
+	});
+	return /* @__PURE__ */ react.createElement(FieldWrapper, {
+		className,
+		description,
+		error,
+		fieldId: name,
+		hideLabel,
+		label,
+		prompt,
+		required: Boolean(validation?.required)
+	}, /* @__PURE__ */ react.createElement(SelectMenu, {
+		value,
+		onValueChange: onChange,
+		size,
+		theme: formTheme,
+		disabled,
+		...error && { state: "error" },
+		...remainingProps
+	}, /* @__PURE__ */ react.createElement(SelectMenu.Trigger, {
+		ref,
+		placeholder,
+		"aria-label": label
+	}), /* @__PURE__ */ react.createElement(SelectMenu.Content, null, children)));
+};
+SelectMenuField.displayName = "SelectMenuField";
+//#endregion
 //#region src/components/side-bar/SideBarComponents.tsx
 var SideBarHeader = styled("div", { base: [
 	"border-b",
@@ -8248,7 +8405,7 @@ var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, class
 };
 //#endregion
 //#region src/components/skeleton-loader/SkeletonCard.tsx
-var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: cn("relative", "w-full", "flex-col", "items-center", "gap-6 p-6", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "align-center flex w-full gap-6" }, withChart && /* @__PURE__ */ react.default.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ react.default.createElement("div", { className: "flex grow flex-col gap-6" }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: cn("relative", "w-full", "flex-col", "items-center", "gap-6", "p-6", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "align-center flex w-full gap-6" }, withChart && /* @__PURE__ */ react.default.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ react.default.createElement("div", { className: "flex grow flex-col gap-6" }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
 	key: rowNumber,
 	className: "bg-grey-200 h-10 w-full min-w-25 rounded-md"
 })))), /* @__PURE__ */ react.default.createElement(SkeletonButton, null));
@@ -9017,10 +9174,9 @@ var StyledTileInteractive = styled(Tile, { base: [
 	"not-disabled:transition-transform",
 	"not-disabled:translate-y-0"
 ] });
-var TileInteractive = react.default.forwardRef(({ onClick, href, type = "button", as, reloadDocument, ...rest }, ref) => {
-	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
+var TileInteractive = react.default.forwardRef(({ onClick, href, type = "button", as, ...rest }, ref) => {
 	const elementSpecificProps = !!href ? {
-		as: as || routerLinkProps.as || "a",
+		as: as || "a",
 		href,
 		onClick: void 0
 	} : {
@@ -9055,10 +9211,10 @@ var TileToggleGroupItem = ({ children, ...rest }) => /* @__PURE__ */ react.creat
 }, /* @__PURE__ */ react.createElement(StyledTileToggleGroupItem, { as: "button" }, children));
 //#endregion
 //#region src/components/tile-toggle-group/index.ts
-var TileToggleGroup = react.forwardRef((props, ref) => /* @__PURE__ */ react.createElement(ToggleGroup$1.Root, {
+var TileToggleGroup = react.forwardRef(({ orientation, className, ...rest }, ref) => /* @__PURE__ */ react.createElement(ToggleGroup$1.Root, {
 	ref,
-	...props,
-	className: cn(props.className, "flex", "gap-2", props.orientation === "horizontal" && "flex-row", props.orientation === "vertical" && "flex-col", "flex-wrap")
+	...rest,
+	className: cn("flex", "gap-2", orientation === "horizontal" && "flex-row", orientation === "vertical" && "flex-col", "flex-wrap", className)
 }));
 TileToggleGroup.Item = TileToggleGroupItem;
 TileToggleGroup.displayName = "TileToggleGroup";
@@ -9667,7 +9823,7 @@ var SegmentedControlBadge = ({ className, ...props }) => {
 	return /* @__PURE__ */ react.createElement(Badge, {
 		...props,
 		size: badgeSizeMap[size],
-		className: cn("border-none", className, "font-normal")
+		className: cn("border-none", "font-normal", className)
 	});
 };
 //#endregion
@@ -10078,13 +10234,14 @@ exports.RadioButtonField = RadioButtonField;
 exports.RadioButtonGroup = RadioButtonGroup;
 exports.RadioCard = RadioCard;
 exports.RadioCardGroup = RadioCardGroup;
-exports.RouterProvider = RouterProvider;
 exports.SearchField = SearchField;
 exports.SearchInput = SearchInput;
 exports.SectionMessage = SectionMessage;
 exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.SelectField = SelectField;
+exports.SelectMenu = SelectMenu;
+exports.SelectMenuField = SelectMenuField;
 exports.SideBar = SideBar;
 Object.defineProperty(exports, "Skeleton", {
 	enumerable: true,