@atom-learning/components 8.0.3 → 8.1.0

package/dist/index.cjs.js

@@ -32,68 +32,68 @@ 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);
+react = __toESM(react, 1);
 let clsx = require("clsx");
-clsx = __toESM(clsx);
+clsx = __toESM(clsx, 1);
 let tailwind_merge = require("tailwind-merge");
 let tailwind_variants = require("tailwind-variants");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _atom_learning_icons = require("@atom-learning/icons");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
 let invariant = require("invariant");
-invariant = __toESM(invariant);
+invariant = __toESM(invariant, 1);
 let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
 let _radix_ui_react_alert_dialog = require("@radix-ui/react-alert-dialog");
 let uid = require("uid");
 let throttle_debounce = require("throttle-debounce");
 let embla_carousel_react = require("embla-carousel-react");
-embla_carousel_react = __toESM(embla_carousel_react);
+embla_carousel_react = __toESM(embla_carousel_react, 1);
 let _radix_ui_react_checkbox = require("@radix-ui/react-checkbox");
-_radix_ui_react_checkbox = __toESM(_radix_ui_react_checkbox);
+_radix_ui_react_checkbox = __toESM(_radix_ui_react_checkbox, 1);
 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);
+_radix_ui_react_radio_group = __toESM(_radix_ui_react_radio_group, 1);
 let dlv = require("dlv");
-dlv = __toESM(dlv);
+dlv = __toESM(dlv, 1);
 let _radix_ui_react_toggle_group = require("@radix-ui/react-toggle-group");
-_radix_ui_react_toggle_group = __toESM(_radix_ui_react_toggle_group);
+_radix_ui_react_toggle_group = __toESM(_radix_ui_react_toggle_group, 1);
 let _reach_combobox = require("@reach/combobox");
 let _lukeed_uuid = require("@lukeed/uuid");
 let _tanstack_react_table = require("@tanstack/react-table");
 let use_deep_compare_effect = require("use-deep-compare-effect");
-use_deep_compare_effect = __toESM(use_deep_compare_effect);
+use_deep_compare_effect = __toESM(use_deep_compare_effect, 1);
 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);
+dayjs = __toESM(dayjs, 1);
 let dayjs_plugin_customParseFormat_js = require("dayjs/plugin/customParseFormat.js");
-dayjs_plugin_customParseFormat_js = __toESM(dayjs_plugin_customParseFormat_js);
+dayjs_plugin_customParseFormat_js = __toESM(dayjs_plugin_customParseFormat_js, 1);
 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);
+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);
+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);
+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);
+_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);
+_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);
+_radix_ui_react_select = __toESM(_radix_ui_react_select, 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);
+_radix_ui_react_switch = __toESM(_radix_ui_react_switch, 1);
 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);
+react_hot_toast = __toESM(react_hot_toast, 1);
 let react_player_vimeo_js = require("react-player/vimeo.js");
-react_player_vimeo_js = __toESM(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));
@@ -125,8 +125,7 @@ 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 valStr = String(val);
-				const styleArr = variantStyles && variantStyles[valStr];
+				const styleArr = variantStyles && variantStyles[String(val)];
 				if (styleArr && Array.isArray(styleArr)) return styleArr.flatMap((cls) => {
 					if (key === "@initial") return cls;
 					return `${key.replace("@", "")}:${cls}`;
@@ -229,8 +228,8 @@ var StyledContent$4 = styled(_radix_ui_react_accordion.Content, { base: [
 	"motion-safe:data-[state=open]:animate-accordion-open",
 	"motion-safe:data-[state=closed]:animate-accordion-close"
 ] });
-var AccordionContent = ({ children, className, ...remainingProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledContent$4, {
-	...remainingProps,
+var AccordionContent = ({ children, className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledContent$4, {
+	...rest,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CSSWrapper, {
 		className,
 		children
@@ -347,10 +346,10 @@ var StyledIcon$3 = styled("svg", {
 		lg: ["size-8", "stroke-2"]
 	} }
 }, { enabledResponsiveVariants: true });
-var Icon = react.forwardRef(({ is: SVG, size = "md", ...remainingProps }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon$3, {
+var Icon = react.forwardRef(({ is: SVG, size = "md", ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon$3, {
 	size,
 	"aria-hidden": "true",
-	...remainingProps,
+	...rest,
 	as: SVG,
 	ref
 }));
@@ -397,7 +396,7 @@ var StyledTrigger$1 = styled(_radix_ui_react_accordion.Trigger, {
 		right: []
 	} }
 });
-var AccordionTrigger = ({ children, colorScheme = {}, asChild, arrowPosition = "right", ...remainingProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorScheme, {
+var AccordionTrigger = ({ children, colorScheme = {}, asChild, arrowPosition = "right", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorScheme, {
 	asChild: true,
 	accent: "grey1",
 	interactive: "loContrast",
@@ -405,7 +404,7 @@ var AccordionTrigger = ({ children, colorScheme = {}, asChild, arrowPosition = "
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTrigger$1, {
 		asChild,
 		arrowPosition,
-		...remainingProps,
+		...rest,
 		children: asChild ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RotatingIcon, {
 			is: _atom_learning_icons.ChevronDown,
 			"data-testid": "accordion-chevron"
@@ -414,11 +413,11 @@ var AccordionTrigger = ({ children, colorScheme = {}, asChild, arrowPosition = "
 });
 //#endregion
 //#region src/components/accordion/Accordion.tsx
-var Accordion = react.default.forwardRef(({ type = "single", className, children, ...remainingProps }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_accordion.Root, {
+var Accordion = react.forwardRef(({ type = "single", className, children, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_accordion.Root, {
 	ref,
 	type,
 	className: cn("w-full", className),
-	...remainingProps,
+	...rest,
 	children
 }));
 Accordion.Item = AccordionItem;
@@ -461,18 +460,18 @@ var StyledArrow$1 = styled(_radix_ui_react_tooltip.Arrow, { base: [
 	"in-data-[align=end]:mr-2",
 	"in-data-[align=start]:ml-2"
 ] });
-var TooltipContent = ({ children, side = "top", sideOffset = 4, size = "md", ...remainingProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledContent$3, {
+var TooltipContent = ({ children, side = "top", sideOffset = 4, size = "md", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledContent$3, {
 	side,
 	sideOffset,
 	size,
-	...remainingProps,
+	...rest,
 	children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledArrow$1, {})]
 });
 //#endregion
 //#region src/components/tooltip/Tooltip.tsx
-var TooltipComponent = ({ children, delayDuration = 350, ...remainingProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Root, {
+var TooltipComponent = ({ children, delayDuration = 350, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Root, {
 	delayDuration,
-	...remainingProps,
+	...rest,
 	children
 });
 var Tooltip = Object.assign(TooltipComponent, {
@@ -501,8 +500,10 @@ OptionalTooltipWrapper.displayName = "OptionalTooltipWrapper";
 //#endregion
 //#region src/utilities/uri/index.ts
 var isExternalUrl = (url) => {
-	if (typeof window === "undefined" || !url) return false;
-	return /^https?:\/\//.test(url) && new URL(url).origin !== window.location.origin;
+	if (!url) return false;
+	const isAbsoluteUrl = /^https?:\/\//.test(url);
+	if (typeof window === "undefined") return isAbsoluteUrl;
+	return isAbsoluteUrl && new URL(url).origin !== window.location.origin;
 };
 var getExternalAnchorProps = (url) => isExternalUrl(url) ? {
 	target: "_blank",
@@ -613,7 +614,7 @@ 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, ...remainingProps }, ref) => {
+var ActionIcon = react.forwardRef(({ children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, ...rest }, 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);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionalTooltipWrapper, {
@@ -628,7 +629,7 @@ var ActionIcon = react.forwardRef(({ children, theme = "primary", appearance = "
 				"aria-disabled": !!disabled
 			} : { type: "button" },
 			...getExternalAnchorProps(href),
-			...remainingProps,
+			...rest,
 			"aria-label": label,
 			theme,
 			appearance,
@@ -680,9 +681,9 @@ var StyledAlertDialogContent = styled(_radix_ui_react_alert_dialog.Content, {
 		lg: ["w-150"]
 	} }
 });
-var AlertDialogContent = ({ size = "sm", ...remainingProps }) => /* @__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, {
+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,
-	...remainingProps
+	...rest
 })] });
 //#endregion
 //#region src/components/alert-dialog/AlertDialog.tsx
@@ -724,10 +725,10 @@ var Dot$1 = styled("div", {
 		lg: ["size-2", "mx-[3px]"]
 	} }
 });
-var Loader = ({ className, message = "Loading", size = "md", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+var Loader = ({ className, message = "Loading", size = "md", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	className: cn("flex", "justify-center", className),
 	role: "alert",
-	...props,
+	...rest,
 	children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sr-only",
@@ -884,7 +885,7 @@ var WithLoader = ({ size, children }) => /* @__PURE__ */ (0, react_jsx_runtime.j
 	size,
 	children
 })] });
-var Button = react.forwardRef(({ children, as, href, isLoading = false, onClick, disabled, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton, {
+var Button = react.forwardRef(({ children, as, href, isLoading = false, onClick, disabled, size, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton, {
 	as: as || (href ? "a" : void 0),
 	...!disabled && !isLoading && {
 		href,
@@ -893,11 +894,12 @@ var Button = react.forwardRef(({ children, as, href, isLoading = false, onClick,
 	isLoading,
 	type: !href ? "button" : void 0,
 	disabled,
+	size,
 	...rest,
 	...getExternalAnchorProps(href),
 	ref,
 	children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WithLoader, {
-		size: rest.size,
+		size,
 		children
 	}) : children
 }));
@@ -958,11 +960,11 @@ var StyledHeading$2 = styled("h2", {
 		}
 	}
 }, { enabledResponsiveVariants: true });
-var Heading = react.forwardRef(({ size = "md", weight = "bold", ...remainingProps }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledHeading$2, {
+var Heading = react.forwardRef(({ size = "md", weight = "bold", ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledHeading$2, {
 	ref,
 	size,
 	weight,
-	...remainingProps
+	...rest
 }));
 Heading.displayName = "Heading";
 //#endregion
@@ -1024,10 +1026,10 @@ var StyledText$3 = styled("p", {
 		}
 	}
 }, { enabledResponsiveVariants: true });
-var Text = react.forwardRef(({ size = "md", family = "body", ...remainingProps }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText$3, {
+var Text = react.forwardRef(({ size = "md", family = "body", ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText$3, {
 	size,
 	family,
-	...remainingProps,
+	...rest,
 	ref
 }));
 Text.displayName = "Text";
@@ -1054,13 +1056,13 @@ var AlertDialogIcon = ({ theme }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
 });
 //#endregion
 //#region src/components/alert-dialog/alert-context/AlertDialog.tsx
-var Alert = ({ title, size, theme, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...remainingProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialog, {
+var Alert = ({ 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,
-		...remainingProps,
+		...rest,
 		className: "flex max-h-[90vh] flex-col gap-8",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1113,7 +1115,7 @@ var reducer = (state, action) => {
 	}
 };
 //#endregion
-//#region src/components/alert-dialog/alert-context/AlertContext.tsx
+//#region src/components/alert-dialog/AlertDialog.context.tsx
 var AlertContext = react.createContext({ showAlert: () => null });
 var AlertProvider = ({ children }) => {
 	const [alerts, dispatch] = react.useReducer(reducer, initialState);
@@ -1141,7 +1143,7 @@ var useAlert = () => {
 	return context;
 };
 //#endregion
-//#region src/components/avatar/AvatarContext.tsx
+//#region src/components/avatar/Avatar.context.tsx
 var AvatarRootContext = react.createContext({
 	name: void 0,
 	size: "lg"
@@ -1180,6 +1182,128 @@ var AvatarIcon = ({ is }) => {
 	});
 };
 //#endregion
+//#region src/components/link/Link.tsx
+var StyledLink = styled("a", {
+	base: [
+		"bg-[unset]",
+		"text-primary-800",
+		"cursor-pointer",
+		"font-body",
+		"no-underline",
+		"focus:text-primary-900",
+		"focus:underline",
+		"hover:text-primary-900",
+		"hover:underline",
+		"active:text-primary-1000",
+		"disabled:cursor-not-allowed",
+		"disabled:opacity-30",
+		"disabled:pointer-events-none",
+		"[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:after:content-none",
+		"[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:before:content-none",
+		"[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:text-[100%]/none"
+	],
+	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]"
+			]
+		},
+		noCapsize: { true: ["capsize-none"] }
+	},
+	defaultVariants: { size: "md" }
+}, { enabledResponsiveVariants: true });
+var Link = react.forwardRef(({ as, disabled, href, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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/image/ImageCredit.tsx
+var overlayControlClasses = [
+	"not-disabled:hover:bg-black/75",
+	"focus:outline-none",
+	"focus-visible:ring-2",
+	"focus-visible:ring-white/70"
+];
+var overlayLinkClasses = [
+	"text-white",
+	"underline-offset-2",
+	"hover:text-white",
+	"focus:text-white",
+	"active:text-white"
+];
+var ImageCredit = ({ author, sourceUrl, licenseName, licenseUrl }) => {
+	const [expanded, setExpanded] = react.useState(false);
+	if (!expanded) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
+		label: "Show image credit",
+		theme: "white",
+		isRounded: true,
+		hasTooltip: false,
+		onClick: () => setExpanded(true),
+		className: cn("absolute", "right-2", "bottom-2", "bg-black/60", "backdrop-blur-sm", overlayControlClasses),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: _atom_learning_icons.Info })
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("absolute", "right-2", "bottom-2", "flex", "max-w-[calc(100%-1rem)]", "items-center", "gap-1", "rounded-md", "bg-black/60", "pl-2", "text-xs", "text-white", "backdrop-blur-sm"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figcaption", {
+			className: "flex min-w-0 flex-wrap items-center gap-x-1",
+			children: [sourceUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Link, {
+				href: sourceUrl,
+				size: "xs",
+				className: cn(overlayLinkClasses),
+				children: author
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: author }), licenseName ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "flex items-center gap-x-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": "true",
+					children: "·"
+				}), licenseUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Link, {
+					href: licenseUrl,
+					size: "xs",
+					className: cn(overlayLinkClasses),
+					children: licenseName
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: licenseName })]
+			}) : null]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
+			label: "Hide credit",
+			theme: "white",
+			isRounded: true,
+			hasTooltip: false,
+			onClick: () => setExpanded(false),
+			className: cn(overlayControlClasses),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: _atom_learning_icons.Close })
+		})]
+	});
+};
+ImageCredit.displayName = "Image.Credit";
+//#endregion
 //#region src/components/image/Image.tsx
 var StyledImage$2 = styled("img", {
 	base: ["align-middle", "max-w-full"],
@@ -1191,22 +1315,30 @@ var StyledImage$2 = styled("img", {
 		"[[width]]:w-auto"
 	] } }
 });
-var Image = react.forwardRef((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledImage$2, {
-	...props,
-	ref
-}));
-Image.displayName = "Image";
+var ImageComponent = react.forwardRef(({ children, ...props }, ref) => {
+	if (!children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledImage$2, {
+		...props,
+		ref
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figure", {
+		className: "relative overflow-hidden",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledImage$2, {
+			...props,
+			ref
+		}), children]
+	});
+});
+ImageComponent.displayName = "Image";
+var Image = Object.assign(ImageComponent, { Credit: ImageCredit });
 //#endregion
 //#region src/components/avatar/AvatarPlaceholder.tsx
-var AvatarPlaceholder = () => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "relative size-full",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-			is: _atom_learning_icons.User,
-			className: "size-full"
-		})
-	});
-};
+var AvatarPlaceholder = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: "relative size-full",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+		is: _atom_learning_icons.User,
+		className: "size-full"
+	})
+});
 //#endregion
 //#region src/components/avatar/AvatarInitial.tsx
 var toTextSize$2 = {
@@ -1657,16 +1789,14 @@ var BadgeInner = react.forwardRef(({ theme = "info", emphasis = "subtle", childr
 		})
 	});
 });
-var BadgeComponent = react.forwardRef(({ size = "sm", overflow = "wrap", ...rest }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BadgeProvider, {
-		size,
-		overflow,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BadgeInner, {
-			...rest,
-			ref
-		})
-	});
-});
+var BadgeComponent = react.forwardRef(({ size = "sm", overflow = "wrap", ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BadgeProvider, {
+	size,
+	overflow,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BadgeInner, {
+		...rest,
+		ref
+	})
+}));
 var Badge = Object.assign(BadgeComponent, {
 	Icon: BadgeIcon,
 	Text: BadgeText
@@ -1742,7 +1872,7 @@ var DismissibleTrigger = ({ asChild = false, ...rest }) => {
 //#region src/components/dismissible/index.ts
 var Dismissible = Object.assign(DismissibleRoot, { Trigger: DismissibleTrigger });
 //#endregion
-//#region src/components/banner/BannerContext.tsx
+//#region src/components/banner/Banner.context.tsx
 var BannerContext = react.createContext({
 	emphasis: "minimal",
 	size: {
@@ -1805,7 +1935,7 @@ var toDirection$1 = {
 	sm: "flex-col",
 	md: "flex-row"
 };
-var BannerRegularActions = ({ children, className, ...props }) => {
+var BannerRegularActions = ({ children, className, ...rest }) => {
 	const { size } = useBannerContext();
 	const gap = react.useMemo(() => {
 		if (typeof size === "string") return toGap[size];
@@ -1818,7 +1948,7 @@ var BannerRegularActions = ({ children, className, ...props }) => {
 	(0, invariant.default)(react.Children.count(children) <= MAX_ALLOWED_CHILDREN, `A maximum of ${MAX_ALLOWED_CHILDREN} ${BannerRegularButton.displayName} component(s) are permitted as children of ${BannerRegularActions.displayName}`);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: cn("flex", gap, direction, className),
-		...props,
+		...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`);
@@ -1859,7 +1989,7 @@ var StyledBannerContainer = styled("section", {
 		}
 	}
 }, { enabledResponsiveVariants: true });
-var BannerContainer = ({ colorScheme = {}, onDismiss, dismissed, ...props }) => {
+var BannerContainer = ({ colorScheme = {}, onDismiss, dismissed, ...rest }) => {
 	const { emphasis } = useBannerContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorScheme, {
 		...colorScheme,
@@ -1871,7 +2001,7 @@ var BannerContainer = ({ colorScheme = {}, onDismiss, dismissed, ...props }) =>
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledBannerContainer, {
 				role: "banner",
 				emphasis,
-				...props
+				...rest
 			})
 		})
 	});
@@ -2043,24 +2173,24 @@ var StyledBannerSlimActions = styled("div", {
 		md: ["w-auto"]
 	} }
 }, { enabledResponsiveVariants: true });
-var BannerSlimActions = ({ children, ...props }) => {
+var BannerSlimActions = ({ children, ...rest }) => {
 	const { size } = useBannerContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledBannerSlimActions, {
 		size,
-		...props,
+		...rest,
 		children
 	});
 };
 BannerSlimActions.displayName = "BannerSlimActions";
 //#endregion
 //#region src/components/banner/banner-slim/BannerSlimButton.tsx
-var BannerSlimButton = ({ className, ...props }) => {
+var BannerSlimButton = ({ className, ...rest }) => {
 	const { emphasis, size } = useBannerContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 		size: "md",
 		fullWidth: react.useMemo(() => overrideStyledVariantValue(size, (s) => s === "sm"), [size]),
 		theme: emphasis === "bold" ? "neutral" : "primary",
-		...props,
+		...rest,
 		className: cn("ml-auto", className)
 	});
 };
@@ -2342,10 +2472,9 @@ var CarouselSlider = ({ children, className, gap = 3, overflow, tabIndex = 0, ..
 var CarouselSlide = ({ children, className, index, ...rest }) => {
 	const { selectedIndex } = useCarousel();
 	const gap = react.useContext(CarouselSlideGapContext);
-	const isSelected = selectedIndex === index;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "option",
-		"aria-selected": isSelected,
+		"aria-selected": selectedIndex === index,
 		className: cn("min-w-0", "basis-full", "shrink-0", className),
 		...rest,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2357,7 +2486,7 @@ var CarouselSlide = ({ children, className, index, ...rest }) => {
 //#endregion
 //#region src/components/carousel/Carousel.tsx
 var CarouselContext = react.createContext(null);
-var CarouselComponent = ({ children, currentSlide = 0, ...props }) => {
+var CarouselComponent = ({ children, currentSlide = 0, className, ...rest }) => {
 	const [emblaRef, emblaApi] = (0, embla_carousel_react.default)({
 		startIndex: currentSlide,
 		align: "center"
@@ -2423,7 +2552,6 @@ var CarouselComponent = ({ children, currentSlide = 0, ...props }) => {
 		scrollNext,
 		scrollTo
 	]);
-	const { className, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: cn("relative", "w-full", className),
 		...rest,
@@ -2529,7 +2657,7 @@ var Checkbox = react.forwardRef(({ size = "md", checked, ...rest }, ref) => {
 });
 Checkbox.displayName = "Checkbox";
 //#endregion
-//#region src/components/checkbox-group/context/CheckboxGroupChecked.context.tsx
+//#region src/components/checkbox-group/CheckboxGroupChecked.context.tsx
 var CheckboxGroupCheckedContext = react.createContext({
 	checked: [],
 	handleItemCheckedChange: () => null
@@ -2574,7 +2702,7 @@ var CheckboxGroupCheckedProvider = ({ checked: controlledChecked, defaultChecked
 	});
 };
 //#endregion
-//#region src/components/checkbox-group/context/CheckboxGroupMounted.context.tsx
+//#region src/components/checkbox-group/CheckboxGroupMounted.context.tsx
 var CheckboxGroupMountedContext = react.createContext({
 	mounted: [],
 	handleItemMountedChange: () => null
@@ -2667,8 +2795,8 @@ var CheckboxGroup = Object.assign(CheckboxGroupRoot, {
 });
 //#endregion
 //#region src/components/tree/TreeListItem.tsx
-var TreeListItem = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-	...props,
+var TreeListItem = react.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+	...rest,
 	ref,
 	role: "treeitem",
 	className: cn("flex", "items-center", "gap-2", "not-first:mt-0.5", className)
@@ -2687,12 +2815,10 @@ var TreeCollapsibleProvider = ({ children }) => {
 	});
 };
 var StyledCollapsibleTreeItemRoot = styled(_radix_ui_react_collapsible.Root, { base: ["w-full"] });
-var TreeCollapsible = react.forwardRef((props, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeListItem, {
-		ref,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeCollapsibleProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCollapsibleTreeItemRoot, { ...props }) })
-	});
-});
+var TreeCollapsible = react.forwardRef((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeListItem, {
+	ref,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeCollapsibleProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCollapsibleTreeItemRoot, { ...props }) })
+}));
 //#endregion
 //#region src/components/tree/TreeList.tsx
 var TreeList = styled("ul", { base: [
@@ -2706,8 +2832,8 @@ var TreeList = styled("ul", { base: [
 ] });
 //#endregion
 //#region src/components/tree/TreeCollapsibleContent.tsx
-var TreeCollapsibleContent = react.default.forwardRef(({ children, className, ...rest }, ref) => {
-	const { triggerRef } = react.default.useContext(TreeCollapsibleContext);
+var TreeCollapsibleContent = react.forwardRef(({ children, className, ...rest }, ref) => {
+	const { triggerRef } = react.useContext(TreeCollapsibleContext);
 	const handleOnKeydown = (e) => {
 		if (!triggerRef?.current) return;
 		if (e.key === "Escape") {
@@ -2731,9 +2857,9 @@ var TreeCollapsibleContent = react.default.forwardRef(({ children, className, ..
 });
 //#endregion
 //#region src/components/tree/TreeIcon.tsx
-var TreeIcon = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+var TreeIcon = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 	size: "md",
-	...props,
+	...rest,
 	className: cn("my-1", "shrink-0", "self-start", className)
 });
 //#endregion
@@ -2776,13 +2902,13 @@ var StyledActionIcon$2 = styled(ActionIcon, { base: [
 	"[&[data-state=closed]>svg]:-rotate-90",
 	"[&[data-state=open]>svg]:rotate-0"
 ] });
-var TreeCollapsibleTrigger = ({ children, label, className, ...rest }) => {
-	const { setTriggerRef, triggerRef } = react.default.useContext(TreeCollapsibleContext);
+var TreeCollapsibleTrigger = ({ children, label, className, onClick, ...rest }) => {
+	const { setTriggerRef, triggerRef } = react.useContext(TreeCollapsibleContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TreeItemContent, {
 		...rest,
 		className: cn("cursor-pointer", className),
 		onClick: (event) => {
-			rest.onClick?.(event);
+			onClick?.(event);
 			triggerRef?.current?.click();
 		},
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_collapsible.Trigger, {
@@ -2801,22 +2927,18 @@ var TreeCollapsibleTrigger = ({ children, label, className, ...rest }) => {
 };
 //#endregion
 //#region src/components/tree/TreeItem.tsx
-var TreeItem = ({ children, ...rest }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeListItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeItemContent, {
-		...rest,
-		children
-	}) });
-};
+var TreeItem = ({ children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeListItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeItemContent, {
+	...rest,
+	children
+}) });
 //#endregion
 //#region src/components/tree/Tree.tsx
-var TreeRoot = react.default.forwardRef(({ children, ...rest }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeList, {
-		...rest,
-		ref,
-		role: "tree",
-		children
-	});
-});
+var TreeRoot = react.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeList, {
+	...rest,
+	ref,
+	role: "tree",
+	children
+}));
 var Tree = Object.assign(TreeRoot, {
 	Collapsible: TreeCollapsible,
 	CollapsibleContent: TreeCollapsibleContent,
@@ -2827,27 +2949,23 @@ var Tree = Object.assign(TreeRoot, {
 });
 //#endregion
 //#region src/components/checkbox-tree/CheckboxTreeCollapsible.tsx
-var CheckboxTreeCollapsible = ({ children, ...rest }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxGroup.Sub, {
-		asChild: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tree.Collapsible, {
-			...rest,
-			children
-		})
-	});
-};
+var CheckboxTreeCollapsible = ({ children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxGroup.Sub, {
+	asChild: true,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tree.Collapsible, {
+		...rest,
+		children
+	})
+});
 //#endregion
 //#region src/components/checkbox-tree/CheckboxTreeCollapsibleContent.tsx
-var CheckboxTreeCollapsibleContent = ({ children, ...rest }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxGroup.Sub, {
-		asChild: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tree.CollapsibleContent, {
-			...rest,
-			forceMount: true,
-			children
-		})
-	});
-};
+var CheckboxTreeCollapsibleContent = ({ children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxGroup.Sub, {
+	asChild: true,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tree.CollapsibleContent, {
+		...rest,
+		forceMount: true,
+		children
+	})
+});
 //#endregion
 //#region src/components/checkbox-tree/CheckboxTreeItemContent.tsx
 var StyledItemContent = styled("label", { base: [
@@ -2856,16 +2974,14 @@ var StyledItemContent = styled("label", { base: [
 	"items-center",
 	"gap-2"
 ] });
-var CheckboxTreeItemContent = ({ children, ...rest }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledItemContent, {
-		...rest,
-		children: react.Children.map(children, (child) => {
-			if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tree.Text, { children: child });
-			if (react.isValidElement(child) && child.type === Icon) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tree.Icon, { ...child.props });
-			return child;
-		})
-	});
-};
+var CheckboxTreeItemContent = ({ children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledItemContent, {
+	...rest,
+	children: react.Children.map(children, (child) => {
+		if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tree.Text, { children: child });
+		if (react.isValidElement(child) && child.type === Icon) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tree.Icon, { ...child.props });
+		return child;
+	})
+});
 //#endregion
 //#region src/components/checkbox-tree/CheckboxTreeCollapsibleTrigger.tsx
 var CheckboxTreeCollapsibleTrigger = ({ onCheckedChange, title, label, children, disabled, ...rest }) => {
@@ -3084,13 +3200,11 @@ var StyledIndicator$1 = styled(_radix_ui_react_radio_group.Indicator, {
 		lg: ["size-3"]
 	} }
 }, { enabledResponsiveVariants: true });
-var RadioButton = ({ size, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledRadioButton, {
-		...props,
-		size,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIndicator$1, { size })
-	});
-};
+var RadioButton = ({ size, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledRadioButton, {
+	...rest,
+	size,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIndicator$1, { size })
+});
 RadioButton.displayName = "RadioButton";
 //#endregion
 //#region src/components/field-wrapper/FieldDescription.tsx
@@ -3135,12 +3249,7 @@ 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 }) => {
+var CheckboxField = ({ className, label, name, validation, description, defaultChecked = false, checked, onCheckedChange, ...rest }) => {
 	const { control } = (0, react_hook_form.useFormContext)();
 	const { error } = useFieldError(name);
 	const { field: { ref, onChange, value: innerChecked, name: innerName } } = (0, react_hook_form.useController)({
@@ -3161,12 +3270,12 @@ var CheckboxField = ({ className, label, name, validation, description, defaultC
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Checkbox, {
 			ref,
 			name: innerName,
-			...remainingProps,
+			...rest,
 			onCheckedChange: (newChecked) => {
 				onChange(newChecked);
 				onCheckedChange?.(newChecked);
 			},
-			value: innerChecked ? CheckboxValue.ON : CheckboxValue.OFF,
+			value: innerChecked ? "on" : "off",
 			checked: innerChecked,
 			...error && { state: "error" }
 		})
@@ -3267,16 +3376,14 @@ var ChipRootProvider = ({ size, children }) => {
 		children
 	});
 };
-var ChipRoot = react.forwardRef(({ size = "md", ...rest }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipRootProvider, {
+var ChipRoot = react.forwardRef(({ size = "md", ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipRootProvider, {
+	size,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledRoot$4, {
+		ref,
 		size,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledRoot$4, {
-			ref,
-			size,
-			...rest
-		})
-	});
-});
+		...rest
+	})
+}));
 var Chip = Object.assign(ChipRoot, {
 	Content: ChipContent,
 	Icon: ChipIcon
@@ -3303,13 +3410,11 @@ var DismissibleGroupProvider = ({ children, disabled, onDismiss }) => {
 		children
 	});
 };
-var DismissibleGroupRoot = ({ as: Component = "div", disabled, onDismiss, ...rest }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DismissibleGroupProvider, {
-		disabled,
-		onDismiss,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...rest })
-	});
-};
+var DismissibleGroupRoot = ({ as: Component = "div", disabled, onDismiss, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DismissibleGroupProvider, {
+	disabled,
+	onDismiss,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...rest })
+});
 DismissibleGroupRoot.displayName = "DismissibleGroup";
 //#endregion
 //#region src/components/dismissible-group/DismissibleGroupItem.tsx
@@ -3333,24 +3438,22 @@ var DismissibleGroup = Object.assign(DismissibleGroupRoot, {
 //#endregion
 //#region src/components/chip-dismissible-group/ChipDismissibleGroupItem.tsx
 var StyledChipDismissibleGroupItem = styled(Chip, { base: ["flex", "px-1"] });
-var ChipDismissibleGroupItem = ({ size = "md", children, dismissActionLabel = "Dismiss", ...rest }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DismissibleGroup.Item, {
-		asChild: true,
-		...rest,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledChipDismissibleGroupItem, {
-			size,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip.Content, { children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DismissibleGroup.Trigger, {
-				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
-					label: dismissActionLabel,
-					size: size === "sm" ? "xs" : "sm",
-					className: "text-grey-600",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: _atom_learning_icons.Close })
-				})
-			})]
-		})
-	});
-};
+var ChipDismissibleGroupItem = ({ size = "md", children, dismissActionLabel = "Dismiss", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DismissibleGroup.Item, {
+	asChild: true,
+	...rest,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledChipDismissibleGroupItem, {
+		size,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip.Content, { children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DismissibleGroup.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
+				label: dismissActionLabel,
+				size: size === "sm" ? "xs" : "sm",
+				className: "text-grey-600",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: _atom_learning_icons.Close })
+			})
+		})]
+	})
+});
 //#endregion
 //#region src/components/chip-dismissible-group/index.ts
 var ChipDismissibleGroup = react.forwardRef((props, ref) => {
@@ -3396,20 +3499,18 @@ var StyledChipToggleGroupItem = styled(Chip, {
 		]
 	} }
 });
-var ChipToggleGroupItem = ({ size = "md", appearance, children, ...rest }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_toggle_group.Item, {
-		...rest,
-		asChild: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledChipToggleGroupItem, {
-			as: "button",
-			appearance,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledChipToggleIcon, {
-				is: _atom_learning_icons.Ok,
-				size: size === "lg" ? "md" : "sm"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip.Content, { children })]
-		})
-	});
-};
+var ChipToggleGroupItem = ({ size = "md", appearance, children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_toggle_group.Item, {
+	...rest,
+	asChild: true,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledChipToggleGroupItem, {
+		as: "button",
+		appearance,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledChipToggleIcon, {
+			is: _atom_learning_icons.Ok,
+			size: size === "lg" ? "md" : "sm"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip.Content, { children })]
+	})
+});
 //#endregion
 //#region src/utilities/radix-overrides/toggle-group/index.ts
 var ToggleGroup$1 = { Root: react.forwardRef(({ disableDeselect = false, onValueChange, defaultValue, ...rest }, ref) => {
@@ -3428,14 +3529,12 @@ var ToggleGroup$1 = { Root: react.forwardRef(({ disableDeselect = false, onValue
 }) };
 //#endregion
 //#region src/components/chip-toggle-group/index.ts
-var ChipToggleGroup = react.forwardRef((props, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipGroup, {
-		ref,
-		as: ToggleGroup$1.Root,
-		orientation: "horizontal",
-		...props
-	});
-});
+var ChipToggleGroup = react.forwardRef((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipGroup, {
+	ref,
+	as: ToggleGroup$1.Root,
+	orientation: "horizontal",
+	...props
+}));
 ChipToggleGroup.Item = ChipToggleGroupItem;
 ChipToggleGroup.displayName = "ChipToggleGroupItem";
 //#endregion
@@ -3585,69 +3684,6 @@ var Combobox = Object.assign(_reach_combobox.Combobox, {
 	OptionText: _reach_combobox.ComboboxOptionText
 });
 //#endregion
-//#region src/components/link/Link.tsx
-var StyledLink = styled("a", {
-	base: [
-		"bg-[unset]",
-		"text-primary-800",
-		"cursor-pointer",
-		"font-body",
-		"no-underline",
-		"focus:text-primary-900",
-		"focus:underline",
-		"hover:text-primary-900",
-		"hover:underline",
-		"active:text-primary-1000",
-		"disabled:cursor-not-allowed",
-		"disabled:opacity-30",
-		"disabled:pointer-events-none",
-		"[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:after:content-none",
-		"[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:before:content-none",
-		"[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:text-[100%]/none"
-	],
-	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]"
-			]
-		},
-		noCapsize: { true: ["capsize-none"] }
-	},
-	defaultVariants: { size: "md" }
-}, { enabledResponsiveVariants: true });
-var Link = react.forwardRef(({ as, disabled, href, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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
 var FieldWrapper = ({ children, error, fieldId, label, prompt, description, required, hideLabel, appearance, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	...rest,
@@ -3683,6 +3719,14 @@ FieldWrapper.displayName = "FieldWrapper";
 var FormCustomContext = react.createContext({ appearance: "standard" });
 var useFormCustomContext = () => react.useContext(FormCustomContext);
 //#endregion
+//#region src/utilities/style/get-icon-size.ts
+var toIconSize = {
+	sm: "sm",
+	md: "md",
+	lg: "md"
+};
+var getFieldIconSize = (size) => overrideStyledVariantValue(size, (s) => toIconSize[s]);
+//#endregion
 //#region src/components/input/Input.tsx
 var InputBackground = styled("div", {
 	base: [
@@ -3782,33 +3826,23 @@ var InputText = react.forwardRef(({ type = "text", size, ...rest }, ref) => {
 	});
 });
 InputText.displayName = "InputText";
-var Input = react.forwardRef(({ className, size = "md", appearance = "standard", theme, state, disabled, style, ...rest }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputBackground, {
+var Input = react.forwardRef(({ className, size = "md", appearance = "standard", theme, state, disabled, style, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputBackground, {
+	size,
+	appearance,
+	theme,
+	disabled,
+	state,
+	className,
+	style,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputText, {
 		size,
-		appearance,
-		theme,
+		ref,
 		disabled,
-		state,
-		className,
-		style,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputText, {
-			size,
-			ref,
-			disabled,
-			...rest
-		})
-	});
-});
+		...rest
+	})
+}));
 Input.displayName = "Input";
 //#endregion
-//#region src/utilities/style/get-icon-size.ts
-var toIconSize = {
-	sm: "sm",
-	md: "md",
-	lg: "md"
-};
-var getFieldIconSize = (size) => overrideStyledVariantValue(size, (s) => toIconSize[s]);
-//#endregion
 //#region src/components/password-input/PasswordInput.tsx
 var PasswordInput = react.forwardRef(({ className, hidePasswordText = "Hide password", showPasswordText = "Show password", size = "md", ...restProps }, ref) => {
 	const [isPasswordVisible, setIsPasswordVisible] = (0, react.useState)(false);
@@ -3837,7 +3871,7 @@ var PasswordInput = react.forwardRef(({ className, hidePasswordText = "Hide pass
 PasswordInput.displayName = "PasswordInput";
 //#endregion
 //#region src/components/password-field/PasswordField.tsx
-var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, theme, ...remainingProps }) => {
+var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, theme, ...rest }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -3862,14 +3896,14 @@ var PasswordField = ({ className, hideLabel, label = "Password", name, prompt =
 			appearance: formAppearance,
 			theme: formTheme,
 			...error !== void 0 && { state: "error" },
-			...remainingProps
+			...rest
 		})
 	});
 };
 PasswordField.displayName = "PasswordField";
 //#endregion
 //#region src/components/create-password-field/CreatePasswordField.tsx
-var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "row", label = "Create a password", name = "password", className, validation, appearance, ...remainingProps }) => {
+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);
 	const [validationResult, setValidationResult] = react.useState(defaultValidation);
@@ -3903,7 +3937,7 @@ var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "ro
 				validate: validatePassword
 			},
 			appearance,
-			...remainingProps
+			...rest
 		}), showValidation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			style: { "--direction": messageDirection },
 			className: "direction-(--direction) mt-2 flex flex-wrap gap-2",
@@ -3916,6 +3950,199 @@ var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "ro
 };
 CreatePasswordField.displayName = "CreatePasswordField";
 //#endregion
+//#region src/components/data-table/DataTable.types.ts
+var AsyncDataState = /* @__PURE__ */ function(AsyncDataState) {
+	AsyncDataState["NONE"] = "none";
+	AsyncDataState["PENDING"] = "pending";
+	AsyncDataState["FULFILLED"] = "fulfilled";
+	AsyncDataState["REJECTED"] = "rejected";
+	return AsyncDataState;
+}({});
+//#endregion
+//#region src/components/data-table/getNewAsyncData.ts
+var getSortDirection = (sorting) => {
+	if (sorting[0]) return sorting[0].desc ? "desc" : "asc";
+};
+var getNewAsyncData = async (getAsyncData, asyncDataOptions, paginationState, sorting, globalFilter) => {
+	const { pageIndex, pageSize } = paginationState;
+	const newData = await getAsyncData({
+		pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,
+		pageSize: asyncDataOptions?.pageSize ?? pageSize,
+		sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,
+		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");
+	return newData;
+};
+//#endregion
+//#region src/components/data-table/usePagination.ts
+var defaultPaginationState = {
+	pageIndex: 0,
+	pageSize: 10
+};
+var usePagination$1 = (initialPaginationState) => {
+	const [isPaginated, setIsPaginated] = react.useState(!!initialPaginationState);
+	const [paginationState, setPaginationState] = react.useState({
+		...defaultPaginationState,
+		...initialPaginationState || {}
+	});
+	return {
+		isPaginated,
+		paginationState,
+		setPaginationState,
+		applyPagination: react.useCallback(() => {
+			setIsPaginated(true);
+		}, [])
+	};
+};
+//#endregion
+//#region src/components/data-table/useSorting.ts
+var useSortByColumn = (defaultSort) => {
+	const [isSortable, setIsSortable] = react.useState(false);
+	const [sorting, setSorting] = react.useState(defaultSort ? [{
+		id: defaultSort.column,
+		desc: defaultSort.direction === "desc"
+	}] : []);
+	return {
+		isSortable,
+		setIsSortable,
+		sorting,
+		setSorting
+	};
+};
+//#endregion
+//#region src/components/data-table/DataTable.context.tsx
+var DataTableContext = react.createContext(null);
+var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSort, initialState = void 0, disabledRows, enableRowSelection, onRowSelectionChange, children }) => {
+	const tableId = react.useRef((0, _lukeed_uuid.v4)());
+	const [data, setData] = react.useState({
+		results: dataProp ?? [],
+		total: dataProp?.length ?? 0
+	});
+	const [rowSelection, setRowSelection] = react.useState({});
+	const [expanded, setExpanded] = react.useState({});
+	const [tablePosition, setTablePosition] = react.useState({
+		top: null,
+		bottom: null,
+		offsetTop: 0,
+		isVisible: true
+	});
+	const { isPaginated, applyPagination, paginationState, setPaginationState } = usePagination$1(initialState?.pagination);
+	const [asyncDataState, setAsyncDataState] = react.useState(AsyncDataState.NONE);
+	const [globalFilter, setGlobalFilter] = react.useState("");
+	const { setIsSortable, isSortable, sorting, setSorting } = useSortByColumn(defaultSort);
+	const runAsyncData = react.useCallback(async (overrideAsyncDataOptions) => {
+		if (!getAsyncData) return;
+		try {
+			setAsyncDataState(AsyncDataState.PENDING);
+			setData(await getNewAsyncData(getAsyncData, overrideAsyncDataOptions, paginationState, sorting, globalFilter));
+			setAsyncDataState(AsyncDataState.FULFILLED);
+		} catch (_error) {
+			setAsyncDataState(AsyncDataState.REJECTED);
+		}
+	}, [
+		getAsyncData,
+		paginationState?.pageIndex,
+		paginationState?.pageSize,
+		sorting,
+		globalFilter
+	]);
+	react.useEffect(() => {
+		runAsyncData({});
+	}, [runAsyncData]);
+	(0, use_deep_compare_effect.default)(() => {
+		if (!dataProp) return;
+		setData({
+			results: dataProp,
+			total: dataProp.length
+		});
+	}, [dataProp]);
+	const getTotalRows = () => data.total;
+	const table = (0, _tanstack_react_table.useReactTable)({
+		columns,
+		data: data.results,
+		pageCount: getAsyncData && paginationState ? Math.ceil(getTotalRows() / paginationState.pageSize) : -1,
+		initialState,
+		state: {
+			sorting,
+			globalFilter,
+			pagination: paginationState,
+			rowSelection,
+			expanded
+		},
+		manualPagination: getAsyncData && isPaginated,
+		manualSorting: getAsyncData && isPaginated,
+		enableSorting: asyncDataState !== AsyncDataState.PENDING,
+		enableGlobalFilter: !getAsyncData,
+		enableRowSelection,
+		onExpandedChange: setExpanded,
+		getSubRows: (row) => row.subRows,
+		onRowSelectionChange: (updaterOrValue) => {
+			if (onRowSelectionChange) onRowSelectionChange(updaterOrValue);
+			setRowSelection(updaterOrValue);
+		},
+		getCoreRowModel: (0, _tanstack_react_table.getCoreRowModel)(),
+		getPaginationRowModel: isPaginated ? (0, _tanstack_react_table.getPaginationRowModel)() : void 0,
+		getSortedRowModel: isSortable || sorting.length ? (0, _tanstack_react_table.getSortedRowModel)() : void 0,
+		getFilteredRowModel: (0, _tanstack_react_table.getFilteredRowModel)(),
+		getExpandedRowModel: (0, _tanstack_react_table.getExpandedRowModel)(),
+		onPaginationChange: isPaginated ? setPaginationState : void 0,
+		onSortingChange: setSorting,
+		onGlobalFilterChange: setGlobalFilter,
+		globalFilterFn: (row, columnId, filterValue) => {
+			const checkFilterMatchesCell = (cellValue) => cellValue.toLowerCase().includes(filterValue.toLowerCase());
+			if (row.depth > 0) return true;
+			const value = row.getValue(columnId);
+			switch (typeof value) {
+				case "string": return checkFilterMatchesCell(value);
+				case "boolean":
+				case "number": return checkFilterMatchesCell(String(value));
+				default: return false;
+			}
+		}
+	});
+	const value = react.useMemo(() => {
+		return {
+			...table,
+			columns,
+			data,
+			setData,
+			setIsSortable,
+			applyPagination,
+			getTotalRows,
+			isSortable,
+			asyncDataState,
+			runAsyncData,
+			hasAsyncData: !!getAsyncData,
+			disabledRows,
+			enableRowSelection,
+			rowSelection,
+			tablePosition,
+			setTablePosition,
+			tableId: tableId.current
+		};
+	}, [
+		table,
+		applyPagination,
+		getTotalRows,
+		isSortable,
+		enableRowSelection,
+		tableId,
+		getAsyncData
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableContext.Provider, {
+		value,
+		children
+	});
+};
+var useDataTable = () => {
+	const context = react.useContext(DataTableContext);
+	if (!context) throw new Error("useDataTable can only be called from inside a DataTableProvider");
+	return context;
+};
+//#endregion
 //#region src/components/table/TableBody.tsx
 var StyledTableBody = styled("tbody", {
 	base: [],
@@ -4042,8 +4269,8 @@ var useStickyColumnsStyle = ({ numberOfStickyColumns, wrapperRef }) => {
 //#endregion
 //#region src/components/table/TableStickyColumnsContainer.tsx
 var TableStickyColumnsContainer = ({ children, numberOfStickyColumns = 0, className, ...restProps }) => {
-	const [hasScroll, setHasScroll] = react.default.useState(false);
-	const wrapperRef = react.default.useRef(null);
+	const [hasScroll, setHasScroll] = react.useState(false);
+	const wrapperRef = react.useRef(null);
 	const { columnsStyle } = useStickyColumnsStyle({
 		numberOfStickyColumns,
 		wrapperRef
@@ -4130,222 +4357,27 @@ var TableComponent = react.forwardRef(({ size = "md", corners = "round", numberO
 		corners,
 		...rest
 	});
-	if (numberOfStickyColumns) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableStickyColumnsContainer, {
-		className: cn(scrollContainerCls),
-		numberOfStickyColumns,
-		children: tableComponent
-	}, scrollContainerkey);
-	return tableComponent;
-});
-var Table = Object.assign(TableComponent, {
-	Body: TableBody,
-	Cell: TableCell,
-	Footer: TableFooter,
-	FooterCell: TableFooterCell,
-	Header: TableHeader,
-	HeaderCell: TableHeaderCell,
-	Row: TableRow,
-	StickyColumnsContainer: TableStickyColumnsContainer
-});
-TableComponent.displayName = "Table";
-//#endregion
-//#region src/components/data-table/DataTable.types.ts
-var AsyncDataState = /* @__PURE__ */ function(AsyncDataState) {
-	AsyncDataState["NONE"] = "none";
-	AsyncDataState["PENDING"] = "pending";
-	AsyncDataState["FULFILLED"] = "fulfilled";
-	AsyncDataState["REJECTED"] = "rejected";
-	return AsyncDataState;
-}({});
-//#endregion
-//#region src/components/data-table/getNewAsyncData.ts
-var getSortDirection = (sorting) => {
-	if (sorting[0]) return sorting[0].desc ? "desc" : "asc";
-};
-var getNewAsyncData = async (getAsyncData, asyncDataOptions, paginationState, sorting, globalFilter) => {
-	const { pageIndex, pageSize } = paginationState;
-	const newData = await getAsyncData({
-		pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,
-		pageSize: asyncDataOptions?.pageSize ?? pageSize,
-		sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,
-		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");
-	return newData;
-};
-//#endregion
-//#region src/components/data-table/usePagination.ts
-var defaultPaginationState = {
-	pageIndex: 0,
-	pageSize: 10
-};
-var usePagination$1 = (initialPaginationState) => {
-	const [isPaginated, setIsPaginated] = react.default.useState(!!initialPaginationState);
-	const [paginationState, setPaginationState] = react.default.useState({
-		...defaultPaginationState,
-		...initialPaginationState || {}
-	});
-	return {
-		isPaginated,
-		paginationState,
-		setPaginationState,
-		applyPagination: react.default.useCallback(() => {
-			setIsPaginated(true);
-		}, [])
-	};
-};
-//#endregion
-//#region src/components/data-table/useSorting.ts
-var useSortByColumn = (defaultSort) => {
-	const [isSortable, setIsSortable] = react.default.useState(false);
-	const [sorting, setSorting] = react.default.useState(defaultSort ? [{
-		id: defaultSort.column,
-		desc: defaultSort.direction === "desc"
-	}] : []);
-	return {
-		isSortable,
-		setIsSortable,
-		sorting,
-		setSorting
-	};
-};
-//#endregion
-//#region src/components/data-table/DataTableContext.tsx
-var DataTableContext = react.createContext(null);
-var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSort, initialState = void 0, disabledRows, enableRowSelection, onRowSelectionChange, children }) => {
-	const tableId = react.useRef((0, _lukeed_uuid.v4)());
-	const [data, setData] = react.useState({
-		results: dataProp ?? [],
-		total: dataProp?.length ?? 0
-	});
-	const [rowSelection, setRowSelection] = react.useState({});
-	const [expanded, setExpanded] = react.useState({});
-	const [tablePosition, setTablePosition] = react.useState({
-		top: null,
-		bottom: null,
-		offsetTop: 0,
-		isVisible: true
-	});
-	const { isPaginated, applyPagination, paginationState, setPaginationState } = usePagination$1(initialState?.pagination);
-	const [asyncDataState, setAsyncDataState] = react.useState(AsyncDataState.NONE);
-	const [globalFilter, setGlobalFilter] = react.useState("");
-	const { setIsSortable, isSortable, sorting, setSorting } = useSortByColumn(defaultSort);
-	const runAsyncData = react.useCallback(async (overrideAsyncDataOptions) => {
-		if (!getAsyncData) return;
-		try {
-			setAsyncDataState(AsyncDataState.PENDING);
-			setData(await getNewAsyncData(getAsyncData, overrideAsyncDataOptions, paginationState, sorting, globalFilter));
-			setAsyncDataState(AsyncDataState.FULFILLED);
-		} catch (_error) {
-			setAsyncDataState(AsyncDataState.REJECTED);
-		}
-	}, [
-		getAsyncData,
-		paginationState?.pageIndex,
-		paginationState?.pageSize,
-		sorting,
-		globalFilter
-	]);
-	react.useEffect(() => {
-		runAsyncData({});
-	}, [runAsyncData]);
-	(0, use_deep_compare_effect.default)(() => {
-		if (!dataProp) return;
-		setData({
-			results: dataProp,
-			total: dataProp.length
-		});
-	}, [dataProp]);
-	const getTotalRows = () => data.total;
-	const table = (0, _tanstack_react_table.useReactTable)({
-		columns,
-		data: data.results,
-		pageCount: getAsyncData && paginationState ? Math.ceil(getTotalRows() / paginationState.pageSize) : -1,
-		initialState,
-		state: {
-			sorting,
-			globalFilter,
-			pagination: paginationState,
-			rowSelection,
-			expanded
-		},
-		manualPagination: getAsyncData && isPaginated,
-		manualSorting: getAsyncData && isPaginated,
-		enableSorting: asyncDataState !== AsyncDataState.PENDING,
-		enableGlobalFilter: !getAsyncData,
-		enableRowSelection,
-		onExpandedChange: setExpanded,
-		getSubRows: (row) => row.subRows,
-		onRowSelectionChange: (updaterOrValue) => {
-			if (onRowSelectionChange) onRowSelectionChange(updaterOrValue);
-			setRowSelection(updaterOrValue);
-		},
-		getCoreRowModel: (0, _tanstack_react_table.getCoreRowModel)(),
-		getPaginationRowModel: isPaginated ? (0, _tanstack_react_table.getPaginationRowModel)() : void 0,
-		getSortedRowModel: isSortable || sorting.length ? (0, _tanstack_react_table.getSortedRowModel)() : void 0,
-		getFilteredRowModel: (0, _tanstack_react_table.getFilteredRowModel)(),
-		getExpandedRowModel: (0, _tanstack_react_table.getExpandedRowModel)(),
-		onPaginationChange: isPaginated ? setPaginationState : void 0,
-		onSortingChange: setSorting,
-		onGlobalFilterChange: setGlobalFilter,
-		globalFilterFn: (row, columnId, filterValue) => {
-			const checkFilterMatchesCell = (cellValue) => cellValue.toLowerCase().includes(filterValue.toLowerCase());
-			if (row.depth > 0) return true;
-			const value = row.getValue(columnId);
-			switch (typeof value) {
-				case "string": return checkFilterMatchesCell(value);
-				case "boolean":
-				case "number": return checkFilterMatchesCell(String(value));
-				default: return false;
-			}
-		}
-	});
-	const value = react.useMemo(() => {
-		return {
-			...table,
-			columns,
-			data,
-			setData,
-			setIsSortable,
-			applyPagination,
-			getTotalRows,
-			isSortable,
-			asyncDataState,
-			runAsyncData,
-			hasAsyncData: !!getAsyncData,
-			disabledRows,
-			enableRowSelection,
-			rowSelection,
-			tablePosition,
-			setTablePosition,
-			tableId: tableId.current
-		};
-	}, [
-		table,
-		applyPagination,
-		getTotalRows,
-		isSortable,
-		enableRowSelection,
-		tableId,
-		getAsyncData
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableContext.Provider, {
-		value,
-		children
-	});
-};
-var useDataTable = () => {
-	const context = react.useContext(DataTableContext);
-	if (!context) throw new Error("useDataTable can only be called from inside a DataTableProvider");
-	return context;
-};
+	if (numberOfStickyColumns) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableStickyColumnsContainer, {
+		className: cn(scrollContainerCls),
+		numberOfStickyColumns,
+		children: tableComponent
+	}, scrollContainerkey);
+	return tableComponent;
+});
+var Table = Object.assign(TableComponent, {
+	Body: TableBody,
+	Cell: TableCell,
+	Footer: TableFooter,
+	FooterCell: TableFooterCell,
+	Header: TableHeader,
+	HeaderCell: TableHeaderCell,
+	Row: TableRow,
+	StickyColumnsContainer: TableStickyColumnsContainer
+});
+TableComponent.displayName = "Table";
 //#endregion
 //#region src/components/data-table/DataTableDataCell.tsx
-var DataTableDataCell = ({ cell }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Cell, { children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
-};
+var DataTableDataCell = ({ cell }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Cell, { children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
 //#endregion
 //#region src/components/data-table/DataTableRowSelectionCheckbox.tsx
 var DataTableRowSelectionCheckbox = ({ row, checked, onCheckedChange, label = `Row ${row.id} selection` }) => {
@@ -4458,10 +4490,10 @@ var DataTableRow = ({ row, rowAction }) => {
 };
 //#endregion
 //#region src/components/data-table/DataTableBody.tsx
-var DataTableBody = ({ striped = false, rowAction, ...props }) => {
+var DataTableBody = ({ striped = false, rowAction, ...rest }) => {
 	const { getRowModel } = useDataTable();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Body, {
-		...props,
+		...rest,
 		striped,
 		children: getRowModel().rows.map((row) => {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableRow, {
@@ -4484,7 +4516,7 @@ var StyledDivider = styled("hr", {
 		]
 	} }
 }, { enabledResponsiveVariants: true });
-var Divider = react.default.forwardRef(({ orientation = "horizontal", ...rest }, ref) => {
+var Divider = react.forwardRef(({ orientation = "horizontal", ...rest }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledDivider, {
 		ref,
 		orientation,
@@ -4724,7 +4756,7 @@ var StyledEmptyStateImage = styled(Image, {
 	} }
 }, { enabledResponsiveVariants: true });
 var EmptyStateImage = (props) => {
-	const { size } = react.default.useContext(EmptyStateContext);
+	const { size } = react.useContext(EmptyStateContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledEmptyStateImage, {
 		size,
 		...props
@@ -4804,11 +4836,6 @@ 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",
@@ -4821,14 +4848,14 @@ var StyledIcon$1 = styled(Icon, {
 		lg: ["right-2.5", "size-5"]
 	} }
 });
-var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...remainingProps }, ref) => {
+var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...rest }, ref) => {
 	const [inputElRef, setInputElRef] = useCallbackRef();
 	const [innerValue, setInnerValue] = react.useState(defaultValue);
-	const [activeIcon, setActiveIcon] = react.useState(defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
+	const [activeIcon, setActiveIcon] = react.useState(defaultValue ? "CLEAR" : "SEARCH");
 	react.useEffect(() => {
 		if (typeof value === "undefined") return;
 		setInnerValue(value);
-		setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
+		setActiveIcon(value ? "CLEAR" : "SEARCH");
 	}, [value]);
 	const iconSize = react.useMemo(() => getFieldIconSize(size), [size]);
 	react.useImperativeHandle(ref, () => inputElRef.current);
@@ -4846,10 +4873,10 @@ var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", them
 		const newValue = event.target.value;
 		setInnerValue(newValue);
 		onValueChange?.(newValue);
-		setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
+		setActiveIcon(newValue ? "CLEAR" : "SEARCH");
 	};
 	const getIcon = () => {
-		if (activeIcon === INPUT_ICON.SEARCH) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon$1, {
+		if (activeIcon === "SEARCH") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon$1, {
 			is: _atom_learning_icons.Search,
 			size,
 			className: cn(size == "sm" ? "size-4" : "size-5", "top-1/2", "-translate-y-1/2")
@@ -4872,7 +4899,7 @@ var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", them
 			ref: setInputElRef,
 			size,
 			type: "search",
-			...remainingProps,
+			...rest,
 			value: innerValue,
 			onChange: handleOnChange,
 			className: cn(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
@@ -4882,7 +4909,7 @@ var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", them
 SearchInput.displayName = "SearchInput";
 //#endregion
 //#region src/components/data-table/DataTableGlobalFilter.tsx
-var DataTableGlobalFilter = ({ onChange, label, hideLabel = false, ...props }) => {
+var DataTableGlobalFilter = ({ onChange, label, hideLabel = false, ...rest }) => {
 	const { setGlobalFilter, getState, resetPagination, getTotalRows, asyncDataState } = useDataTable();
 	const { globalFilter } = getState();
 	if (!(asyncDataState === AsyncDataState.PENDING) && getTotalRows() === 0) return null;
@@ -4897,7 +4924,7 @@ var DataTableGlobalFilter = ({ onChange, label, hideLabel = false, ...props }) =
 		className: cn("mb-3", hideLabel && "sr-only"),
 		children: label
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchInput, {
-		...props,
+		...rest,
 		defaultValue: globalFilter,
 		onChange: handleChange,
 		name: label
@@ -4936,7 +4963,7 @@ var SortIcon = ({ direction }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Ico
 	size: "sm",
 	className: "stroke-primary-900 absolute left-1"
 });
-var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items", children, className, ...props }) => {
+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();
@@ -4957,7 +4984,7 @@ var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items"
 		tabIndex: isSortableTable && isDataColumn ? 0 : -1,
 		...hoverProps,
 		className,
-		...props,
+		...rest,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: cn("flex", "gap-1", "items-center", header.colSpan > 1 ? "justify-center" : "justify-start"),
 			children: [
@@ -5007,7 +5034,7 @@ var DataTableSelectAllRowsCheckbox = ({ label = "All rows selection" }) => {
 };
 //#endregion
 //#region src/components/data-table/DataTableHead.tsx
-var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stickyOffset = 0, showTotalInFirstColumn, totalSuffix, style, className, ...props }) => {
+var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stickyOffset = 0, showTotalInFirstColumn, totalSuffix, style, className, ...rest }) => {
 	const { getHeaderGroups, setIsSortable, enableRowSelection, getCanSomeRowsExpand, tablePosition, setTablePosition } = useDataTable();
 	react.useEffect(() => {
 		setIsSortable(sortable);
@@ -5050,7 +5077,7 @@ var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stick
 			...style,
 			"--header-offset": `${headerOffset}px`
 		},
-		...props,
+		...rest,
 		className: cn("relative", "z-3", "[&_tr:not(:last-child)>th]:border-b-none", "[&_tr:not(:first-child)>th]:rounded-none!", className),
 		children: getHeaderGroups().map((headerGroup) => {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table.Row, {
@@ -5100,7 +5127,7 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 	hasStickyHeader: false,
 	showTotalInFirstColumn: true,
 	totalSuffix: "items"
-}, rowAction, withContainer = false, ...props }) => {
+}, rowAction, withContainer = false, ...rest }) => {
 	const { asyncDataState, getTotalRows, getCanSomeRowsExpand, rowSelection, enableRowSelection, tableId, setTablePosition } = useDataTable();
 	const tableRef = react.useRef(null);
 	const isTableVisible = react.useRef(false);
@@ -5171,7 +5198,7 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 	const tableComponent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
 		corners: "round",
 		size: "lg",
-		...props,
+		...rest,
 		ref: tableRef,
 		numberOfStickyColumns: scrollOptions.numberOfStickyColumns,
 		scrollContainerCls: scrollOptions.scrollContainerCls,
@@ -5217,17 +5244,15 @@ var StyledHandle = styled(ActionIcon, {
 		false: ["cursor-grab"]
 	} }
 });
-var Handle = react.forwardRef(({ isDragging, size, ...rest }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledHandle, {
-		ref,
-		isDragging,
-		appearance: "simple",
-		hasTooltip: false,
-		size,
-		...rest,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: _atom_learning_icons.DragHandle })
-	});
-});
+var Handle = react.forwardRef(({ isDragging, size, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledHandle, {
+	ref,
+	isDragging,
+	appearance: "simple",
+	hasTooltip: false,
+	size,
+	...rest,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: _atom_learning_icons.DragHandle })
+}));
 Handle.displayName = "Handle";
 //#endregion
 //#region src/components/sortable/SortableHandle.tsx
@@ -5323,10 +5348,10 @@ var DragAndDropTableRow = ({ row, idColumn = "id" }) => {
 };
 //#endregion
 //#region src/components/data-table/drag-and-drop/DragAndDropTableBody.tsx
-var DragAndDropTableBody = ({ striped = false, idColumn = "id", ...props }) => {
+var DragAndDropTableBody = ({ striped = false, idColumn = "id", ...rest }) => {
 	const { getRowModel } = useDataTable();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Body, {
-		...props,
+		...rest,
 		striped,
 		children: getRowModel().rows.map((row) => {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragAndDropTableRow, {
@@ -5338,7 +5363,7 @@ var DragAndDropTableBody = ({ striped = false, idColumn = "id", ...props }) => {
 };
 //#endregion
 //#region src/components/data-table/drag-and-drop/DragAndDropTable.tsx
-var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, theme, className, ...props }) => {
+var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, theme, className, ...rest }) => {
 	const { asyncDataState, data, setData } = useDataTable();
 	const isPending = asyncDataState === AsyncDataState.PENDING;
 	const rowIds = react.useMemo(() => data.results.map((row) => {
@@ -5364,7 +5389,7 @@ var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, the
 		onSortChange: handleSortChange,
 		sortableIds: rowIds,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableLoading, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
-			...props,
+			...rest,
 			className: cn(isPending && [
 				"opacity-50",
 				"pointer-events-none",
@@ -5510,7 +5535,7 @@ var findPreviousAvailablePage = (startPage, disabledPages) => {
 	return previousPage;
 };
 //#endregion
-//#region src/components/pagination/pagination-context/PaginationContext.tsx
+//#region src/components/pagination/Pagination.context.tsx
 var PaginationContext = react.createContext({
 	goToPage: () => null,
 	goToPreviousPage: () => null,
@@ -5727,11 +5752,11 @@ var StyledArrow = styled(_radix_ui_react_popover.Arrow, { base: [
 	"z-1",
 	"in-data-[align=end]:mx-6"
 ] });
-var PopoverContent = ({ children, side = "top", sideOffset = 8, closePopoverText = "Close popover", showCloseButton = true, size = "md", ...remainingProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledContent$2, {
+var PopoverContent = ({ children, side = "top", sideOffset = 8, closePopoverText = "Close popover", showCloseButton = true, size = "md", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledContent$2, {
 	size,
 	side,
 	sideOffset,
-	...remainingProps,
+	...rest,
 	children: [
 		showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
 			as: _radix_ui_react_popover.Close,
@@ -5763,7 +5788,7 @@ _radix_ui_react_popover.Root.displayName = "Popover";
 var PaginationPopover = ({ children }) => {
 	const { pagesCount, labels } = usePagination();
 	const paginationItems = Array.from({ length: pagesCount }, (_, index) => index + 1);
-	const [isOpen, setIsOpen] = react.default.useState(false);
+	const [isOpen, setIsOpen] = react.useState(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Popover, {
 		open: isOpen,
 		onOpenChange: setIsOpen,
@@ -5866,7 +5891,7 @@ var StyledNav = styled("nav", { base: [
 	"md:flex-row"
 ] });
 /** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */
-var Pagination$1 = ({ colorScheme, ...props }) => {
+var Pagination$1 = ({ colorScheme, ...rest }) => {
 	const { applyPagination, getState, getExpandedRowModel, getRowModel, setPageIndex, getTotalRows, getPageCount, asyncDataState, hasAsyncData } = useDataTable();
 	react.useEffect(() => {
 		applyPagination();
@@ -5884,7 +5909,7 @@ var Pagination$1 = ({ colorScheme, ...props }) => {
 	};
 	const pageCount = hasAsyncData ? getPageCount() : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledNav, {
-		...props,
+		...rest,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
 			size: "sm",
 			children: `${start} - ${end} of ${hasAsyncData ? getTotalRows() : totalVisibleRows} items`
@@ -5905,22 +5930,110 @@ 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
@@ -6010,7 +6123,7 @@ var offsetWeekdayNames = (weekdayNames, firstDayOfWeek) => {
 	const start = weekdayNames.slice(0, firstDayOfWeek);
 	return weekdayNames.slice(firstDayOfWeek).concat(start);
 };
-var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0, monthNames = monthNamesShort, weekdayNames = weekdayNamesShort, labels = DEFAULT_LABELS, date = /* @__PURE__ */ new Date(), minDate, maxDate, setYear, ...remainingProps }) => {
+var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0, monthNames = monthNamesShort, weekdayNames = weekdayNamesShort, labels = DEFAULT_LABELS, date = /* @__PURE__ */ new Date(), minDate, maxDate, setYear, ...rest }) => {
 	const [showYears, setShowYears] = react.useState(false);
 	const [currentYear, setCurrentYear] = react.useState(date?.getFullYear());
 	const handleSetYear = (year) => {
@@ -6032,7 +6145,7 @@ var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0,
 		date,
 		minDate,
 		maxDate,
-		...remainingProps
+		...rest
 	});
 	if (!calendars.length) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -6124,7 +6237,7 @@ var DEFAULT_DATE_FORMAT = "DD/MM/YYYY";
 //#region src/components/date-input/DateInput.tsx
 dayjs.default.extend(dayjs_plugin_customParseFormat_js.default);
 var formatDateToString = (date, dateFormat = DEFAULT_DATE_FORMAT) => date ? (0, dayjs.default)(date).format(dateFormat) : "";
-var DateInput = react.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", appearance, theme, labels, revalidate, onChange, minDate, maxDate, ...remainingProps }, ref) => {
+var DateInput = react.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", appearance, theme, labels, revalidate, onChange, minDate, maxDate, ...rest }, ref) => {
 	const [date, setDate] = react.useState(initialDate ? (0, dayjs.default)(initialDate).toDate() : void 0);
 	const [inputElRef, setInputElRef] = useCallbackRefState();
 	react.useImperativeHandle(ref, () => inputElRef);
@@ -6162,7 +6275,7 @@ var DateInput = react.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FORMA
 			size,
 			appearance,
 			theme,
-			...remainingProps,
+			...rest,
 			onChange: handleInputChange,
 			ref: setInputElRef,
 			defaultValue: dateString
@@ -6219,7 +6332,7 @@ var DateInput = react.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FORMA
 DateInput.displayName = "DateInput";
 //#endregion
 //#region src/components/date-field/DateField.tsx
-var DateField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
+var DateField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...rest }) => {
 	const { register, trigger } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -6243,7 +6356,7 @@ var DateField = ({ className, hideLabel, label, name, validation, prompt, descri
 			appearance: formAppearance,
 			theme: formTheme,
 			...error && { state: "error" },
-			...remainingProps,
+			...rest,
 			revalidate: trigger
 		})
 	});
@@ -6363,15 +6476,15 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 		] }
 	}
 }, { enabledResponsiveVariants: true });
-var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog", showCloseButton = true, ...remainingProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledDialogOverlay, {
+var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog", showCloseButton = true, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledDialogOverlay, {
 	id: modalOverlayId,
-	children: [react.Children.map(children, (child) => child?.type === DialogBackground && child), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledDialogContent, {
+	children: [react.Children.map(children, (child) => react.isValidElement(child) && child.type === DialogBackground ? child : null), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledDialogContent, {
 		size,
 		"aria-label": "Dialog",
 		onPointerDownOutside: (event) => {
 			if (event.target?.id !== modalOverlayId) event.preventDefault();
 		},
-		...remainingProps,
+		...rest,
 		children: [showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
 			as: _radix_ui_react_dialog.Close,
 			label: closeDialogText,
@@ -6380,7 +6493,7 @@ var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog",
 			theme: "neutral",
 			className: "absolute top-4 right-4 size-12",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: _atom_learning_icons.Close })
-		}), react.Children.map(children, (child) => child?.type !== DialogBackground && child)]
+		}), react.Children.map(children, (child) => react.isValidElement(child) && child.type === DialogBackground ? null : child)]
 	})]
 }) });
 //#endregion
@@ -6432,29 +6545,6 @@ var Dialog = Object.assign(_radix_ui_react_dialog.Root, {
 });
 Dialog.displayName = "Dialog";
 //#endregion
-//#region src/components/drawer/Drawer.context.tsx
-var DrawerContext = react.createContext({ position: "left" });
-var DrawerProvider = ({ position = "left", ...rest }) => {
-	const value = react.useMemo(() => ({ position }), [position]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerContext.Provider, {
-		value,
-		...rest
-	});
-};
-//#endregion
-//#region src/components/drawer/DrawerClose.tsx
-var DrawerClose = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Close, {
-	asChild: true,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
-		theme: "neutral",
-		appearance: "simple",
-		size: "md",
-		hasTooltip: false,
-		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: _atom_learning_icons.Close })
-	})
-});
-//#endregion
 //#region src/components/drawer/DrawerOverlay.tsx
 var DrawerOverlay = styled(_radix_ui_react_dialog.Overlay, { base: backdropOverlay });
 //#endregion
@@ -6513,7 +6603,7 @@ var StyledContent$1 = styled(_radix_ui_react_dialog.Content, {
 	}
 });
 var DrawerContent = ({ children, ...rest }) => {
-	const { position } = react.default.useContext(DrawerContext);
+	const { position } = react.useContext(DrawerContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorScheme, {
 		base: "grey1",
 		accent: "primary1",
@@ -6531,6 +6621,29 @@ var DrawerContent = ({ children, ...rest }) => {
 	})] });
 };
 //#endregion
+//#region src/components/drawer/Drawer.context.tsx
+var DrawerContext = react.createContext({ position: "left" });
+var DrawerProvider = ({ position = "left", ...rest }) => {
+	const value = react.useMemo(() => ({ position }), [position]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerContext.Provider, {
+		value,
+		...rest
+	});
+};
+//#endregion
+//#region src/components/drawer/DrawerClose.tsx
+var DrawerClose = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Close, {
+	asChild: true,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
+		theme: "neutral",
+		appearance: "simple",
+		size: "md",
+		hasTooltip: false,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: _atom_learning_icons.Close })
+	})
+});
+//#endregion
 //#region src/components/drawer/DrawerFooter.tsx
 var DrawerFooter = styled("div", { base: [
 	"p-4",
@@ -6560,15 +6673,13 @@ var DrawerMain = styled("div", { base: [
 var DrawerTrigger = _radix_ui_react_dialog.Trigger;
 //#endregion
 //#region src/components/drawer/Drawer.tsx
-var Drawer = ({ children, position, ...rest }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerProvider, {
-		position,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Root, {
-			...rest,
-			children
-		})
-	});
-};
+var Drawer = ({ children, position, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerProvider, {
+	position,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Root, {
+		...rest,
+		children
+	})
+});
 Drawer.Close = DrawerClose;
 Drawer.Content = DrawerContent;
 Drawer.Main = DrawerMain;
@@ -6628,18 +6739,18 @@ var DropdownMenuItem = styled(_radix_ui_react_dropdown_menu.Item, { base: [
 ] });
 //#endregion
 //#region src/components/dropdown-menu/DropdownMenuLabel.tsx
-var DropdownMenuLabel = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
+var DropdownMenuLabel = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
 	as: _radix_ui_react_dropdown_menu.Label,
 	size: "sm",
 	className: cn("px-3", "py-2", "text-text-subtle", className),
-	...props
+	...rest
 });
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
 //#endregion
 //#region src/components/dropdown-menu/DropdownMenuLinkItem.tsx
 var StyledLink$2 = styled("a", { base: ["no-underline"] });
-var DropdownMenuLinkItem = ({ children, href, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuItem, {
-	...props,
+var DropdownMenuLinkItem = ({ children, href, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuItem, {
+	...rest,
 	asChild: true,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLink$2, {
 		href,
@@ -6821,8 +6932,8 @@ var GridContainer = styled("div", {
 		9: ["gap-20"]
 	} }
 }, { enabledResponsiveVariants: true });
-var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...remainingProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridContainer, {
-	...remainingProps,
+var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridContainer, {
+	...rest,
 	style: {
 		...style,
 		...minItemSize && { "--min-item-size": minItemSize },
@@ -6834,7 +6945,7 @@ var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...
 Grid.displayName = "Grid";
 //#endregion
 //#region src/components/input-field/InputField.tsx
-var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...remainingProps }) => {
+var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...rest }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -6858,7 +6969,7 @@ var InputField = ({ className, label, name, validation, prompt, description, hid
 			appearance: formAppearance,
 			theme: formTheme,
 			...error && { state: "error" },
-			...remainingProps
+			...rest
 		})
 	});
 };
@@ -6914,13 +7025,13 @@ var StyledList$2 = styled("ul", {
 		theme: { primary: ["marker:text-primary-800"] }
 	}
 });
-var List = react.forwardRef(({ size = "md", noCapsize = true, ordered = false, ...remainingProps }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledList$2, {
+var List = react.forwardRef(({ size = "md", noCapsize = true, ordered = false, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledList$2, {
 	ref,
 	as: ordered ? "ol" : "ul",
 	ordered,
 	size,
 	noCapsize,
-	...remainingProps
+	...rest
 }));
 List.Item = StyledLi;
 //#endregion
@@ -7113,10 +7224,10 @@ var colorSchemes$2 = { light: {
 	"--dropdown-background": "white"
 } };
 //#endregion
-//#region src/components/navigation/NavigationMenuContext.tsx
-var NavigationMenuContext = react.default.createContext(void 0);
+//#region src/components/navigation/NavigationMenu.context.tsx
+var NavigationMenuContext = react.createContext(void 0);
 var useNavigationMenuContext = () => {
-	const context = react.default.useContext(NavigationMenuContext);
+	const context = react.useContext(NavigationMenuContext);
 	if (context === void 0) throw new Error("useNavigationMenuContext must be used within a NavigationMenuContextProvider");
 	return context;
 };
@@ -7190,9 +7301,9 @@ var StyledTrigger = styled(_radix_ui_react_navigation_menu.Trigger, {
 	],
 	variants: { active: { true: navigationMenuActiveItemStyles } }
 });
-var NavigationMenuDropdownTrigger = react.default.forwardRef(({ children, active, ...props }, forwardedRef) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTrigger, {
+var NavigationMenuDropdownTrigger = react.forwardRef(({ children, active, ...rest }, forwardedRef) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTrigger, {
 	active,
-	...props,
+	...rest,
 	ref: forwardedRef,
 	onPointerMove: preventEvent,
 	onPointerLeave: preventEvent,
@@ -7205,7 +7316,7 @@ var NavigationMenuDropdownTrigger = react.default.forwardRef(({ children, active
 NavigationMenuDropdownTrigger.displayName = "NavigationMenuDropdownTrigger";
 //#endregion
 //#region src/components/navigation/NavigationMenuDropdown.tsx
-var NavigationMenuDropdown = ({ children, id, ...props }) => {
+var NavigationMenuDropdown = ({ children, id, ...rest }) => {
 	const { onNodeUpdate } = useNavigationMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_navigation_menu.Item, {
 		value: id,
@@ -7214,7 +7325,7 @@ var NavigationMenuDropdown = ({ children, id, ...props }) => {
 			const isContent = react.default.isValidElement(child) && child.type === NavigationMenuDropdownContent;
 			if (!isTrigger && !isContent) throw new Error("Only NavigationMenu.Trigger and NavigationMenu.Content can be the passed as a \"children\" of NavigationMenu.Dropdown");
 			return isTrigger ? react.default.cloneElement(child, {
-				...props,
+				...rest,
 				ref: (node) => {
 					onNodeUpdate(node, id);
 				}
@@ -7267,7 +7378,7 @@ var StyledLink$1 = styled(_radix_ui_react_navigation_menu.Link, {
 		]
 	} }
 });
-var NavigationMenuLink = react.default.forwardRef(({ children, href, disabled, className, variant = "link", ...props }, forwardedRef) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItem, { children: disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DisabledButton, {
+var NavigationMenuLink = react.forwardRef(({ children, href, disabled, className, variant = "link", ...rest }, forwardedRef) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItem, { children: disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DisabledButton, {
 	disabled: true,
 	className,
 	children
@@ -7277,19 +7388,17 @@ var NavigationMenuLink = react.default.forwardRef(({ children, href, disabled, c
 	elementType: variant,
 	className,
 	...getExternalAnchorProps(href),
-	...props,
+	...rest,
 	children
 }) }));
 NavigationMenuLink.displayName = "NavigationMenuLink";
 //#endregion
 //#region src/components/navigation/NavigationMenuDropdownItem.tsx
-var NavigationMenuDropdownItem = react.default.forwardRef((props, forwardedRef) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationMenuLink, {
-		ref: forwardedRef,
-		variant: "dropdownItem",
-		...props
-	});
-});
+var NavigationMenuDropdownItem = react.forwardRef((props, forwardedRef) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationMenuLink, {
+	ref: forwardedRef,
+	variant: "dropdownItem",
+	...props
+}));
 var NavigationMenuDropdownItemTitle = styled(Text, { base: ["text-grey-900", "font-semibold"] });
 NavigationMenuDropdownItem.displayName = "NavigationMenuDropdownItem";
 NavigationMenuDropdownItemTitle.displayName = "NavigationMenuDropdownItemTitle";
@@ -7316,15 +7425,15 @@ var ViewportPosition = styled("div", { base: [
 	"flex",
 	"justify-center"
 ] });
-var NavigationMenuComponent = ({ children, className, ...props }) => {
-	const [offset, setOffset] = react.default.useState();
-	const [activeItem, setActiveItem] = react.default.useState();
-	const [listWidth, setListWidth] = react.default.useState(0);
-	const listRef = react.default.useRef(null);
-	react.default.useLayoutEffect(() => {
+var NavigationMenuComponent = ({ children, className, ...rest }) => {
+	const [offset, setOffset] = react.useState();
+	const [activeItem, setActiveItem] = react.useState();
+	const [listWidth, setListWidth] = react.useState(0);
+	const listRef = react.useRef(null);
+	react.useLayoutEffect(() => {
 		if (listRef.current) setListWidth(listRef.current.offsetWidth);
-	}, [react.default.Children.toArray(children).length]);
-	react.default.useEffect(() => {
+	}, [react.Children.toArray(children).length]);
+	react.useEffect(() => {
 		let timer;
 		if (activeItem === "") timer = setTimeout(() => setOffset(null), 200);
 		return () => {
@@ -7345,7 +7454,7 @@ var NavigationMenuComponent = ({ children, className, ...props }) => {
 			className: cn(className),
 			style: colorSchemes$2["light"],
 			onValueChange: setActiveItem,
-			...props,
+			...rest,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledList$1, {
 				ref: listRef,
 				children
@@ -7411,7 +7520,7 @@ var NavigationMenuVerticalList = styled(_radix_ui_react_navigation_menu.List, {
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.tsx
 var StyledNavigationMenuVerticalAccordionContent = _radix_ui_react_collapsible.Content;
 var NavigationMenuVerticalAccordionContent = ({ children, ...rest }) => {
-	const { triggerRef } = react.default.useContext(NavigationMenuVerticalAccordionContext);
+	const { triggerRef } = react.useContext(NavigationMenuVerticalAccordionContext);
 	const handleOnKeydown = (e) => {
 		if (!triggerRef?.current) return;
 		if (e.key === "Escape") {
@@ -7467,7 +7576,7 @@ var NavigationMenuVerticalIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtim
 	...props
 });
 //#endregion
-//#region src/components/side-bar/SideBarContext.tsx
+//#region src/components/side-bar/SideBar.context.tsx
 var SideBarContext = react.createContext({ isExpanded: void 0 });
 var useSidebarState = () => react.useContext(SideBarContext);
 //#endregion
@@ -7522,7 +7631,7 @@ var StyledIcon = styled(Icon, { base: [
 	"[[data-state=open]>&]:rotate-180"
 ] });
 var NavigationMenuVerticalAccordionTrigger = ({ children, ...rest }) => {
-	const { setTriggerRef } = react.default.useContext(NavigationMenuVerticalAccordionContext);
+	const { setTriggerRef } = react.useContext(NavigationMenuVerticalAccordionContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_navigation_menu.Link, {
 		asChild: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledNavigationMenuVerticalAccordionTrigger, {
@@ -7857,7 +7966,7 @@ var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, mi
 NumberInput.displayName = "NumberInput";
 //#endregion
 //#region src/components/number-input-field/NumberInputField.tsx
-var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...remainingProps }) => {
+var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...rest }) => {
 	const { control } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = (0, react_hook_form.useController)({
@@ -7898,7 +8007,7 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 			value: innerValue,
 			appearance: formAppearance,
 			theme: formTheme,
-			...remainingProps
+			...rest
 		})
 	});
 };
@@ -7938,12 +8047,12 @@ var StyledIndicator = styled(_radix_ui_react_progress.Indicator, { base: [
 	"duration-300",
 	"ease-out"
 ] });
-var ProgressBar = ({ value, max = 100, size = "md", theme = "primary", ...remainingProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledProgressBar, {
+var ProgressBar = ({ value, max = 100, size = "md", theme = "primary", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledProgressBar, {
 	value,
 	max,
 	theme,
 	size,
-	...remainingProps,
+	...rest,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIndicator, {
 		className: "w-full translate-x-(--progress)",
 		style: { "--progress": `-${100 - (value || 0) / max * 100}%` }
@@ -7962,12 +8071,12 @@ var RadioButtonGroup = styled(_radix_ui_react_radio_group.Root, {
 RadioButtonGroup.displayName = "RadioButtonGroup";
 //#endregion
 //#region src/components/radio-button-field/RadioField.tsx
-var RadioField = ({ className, label, value, ...remainingProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineFieldWrapper, {
+var RadioField = ({ className, label, value, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineFieldWrapper, {
 	className,
 	label,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioButton, {
 		value,
-		...remainingProps
+		...rest
 	})
 });
 RadioField.displayName = "RadioField";
@@ -7979,7 +8088,7 @@ var Fieldset = styled("fieldset", { base: [
 	"m-0",
 	"min-w-0"
 ] });
-var RadioButtonFieldComponent = ({ children, className, direction = "column", defaultValue, value, description, label, name, validation, onValueChange, ...remainingProps }) => {
+var RadioButtonFieldComponent = ({ children, className, direction = "column", defaultValue, value, description, label, name, validation, onValueChange, ...rest }) => {
 	const { control } = (0, react_hook_form.useFormContext)();
 	const { field: { ref, onChange, value: innerValue } } = (0, react_hook_form.useController)({
 		name,
@@ -8013,7 +8122,7 @@ var RadioButtonFieldComponent = ({ children, className, direction = "column", de
 					onValueChange?.(newValue);
 				},
 				value: innerValue,
-				...remainingProps,
+				...rest,
 				children
 			}),
 			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineMessage, {
@@ -8131,7 +8240,7 @@ var RadioCardGroup = ({ className, children, size, isFullWidth, align, ...rest }
 });
 //#endregion
 //#region src/components/search-field/SearchField.tsx
-var SearchField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
+var SearchField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...rest }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -8155,18 +8264,18 @@ var SearchField = ({ className, hideLabel, label, name, validation, prompt, desc
 			appearance: formAppearance,
 			theme: formTheme,
 			...error && { state: "error" },
-			...remainingProps
+			...rest
 		})
 	});
 };
 SearchField.displayName = "SearchField";
 //#endregion
-//#region src/components/section-message/SectionMessageContext.tsx
-var SectionMessageContext = react.default.createContext(null);
+//#region src/components/section-message/SectionMessage.context.tsx
+var SectionMessageContext = react.createContext(null);
 var SectionMessageProvider = ({ theme = "info", children }) => {
-	const [hasIcon, setHasIcon] = react.default.useState(false);
-	const [hasDismiss, setHasDismiss] = react.default.useState(false);
-	const value = react.default.useMemo(() => ({
+	const [hasIcon, setHasIcon] = react.useState(false);
+	const [hasDismiss, setHasDismiss] = react.useState(false);
+	const value = react.useMemo(() => ({
 		theme,
 		hasIcon,
 		setHasIcon,
@@ -8185,7 +8294,7 @@ var SectionMessageProvider = ({ theme = "info", children }) => {
 	});
 };
 var useSectionMessageContext = () => {
-	const context = react.default.useContext(SectionMessageContext);
+	const context = react.useContext(SectionMessageContext);
 	if (!context) throw new Error("useSectionMessageContext must be used within a SectionMessageProvider");
 	return context;
 };
@@ -8404,14 +8513,16 @@ var StyledSelect = styled("select", {
 		}
 	]
 }, { enabledResponsiveVariants: true });
-var Select = react.forwardRef(({ placeholder, children, size = "md", appearance = "standard", ...remainingProps }, ref) => {
+var Select = react.forwardRef(({ placeholder, children, size = "md", appearance = "standard", value, defaultValue, ...rest }, ref) => {
 	const props = {
 		size,
 		appearance,
 		ref,
-		...remainingProps
+		value,
+		defaultValue,
+		...rest
 	};
-	if ([remainingProps.value, remainingProps.defaultValue].every((value) => value === void 0)) props.defaultValue = "";
+	if ([value, defaultValue].every((v) => v === void 0)) props.defaultValue = "";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSelect, {
 		...props,
 		children: [placeholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
@@ -8425,7 +8536,7 @@ var Select = react.forwardRef(({ placeholder, children, size = "md", appearance
 Select.displayName = "Select";
 //#endregion
 //#region src/components/select-field/SelectField.tsx
-var SelectField = ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, theme, ...remainingProps }) => {
+var SelectField = ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, theme, ...rest }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -8447,7 +8558,7 @@ var SelectField = ({ className, hideLabel, children, name, label, validation, pr
 			id: name,
 			appearance: formAppearance,
 			theme: formTheme,
-			...remainingProps,
+			...rest,
 			ref,
 			...error && { state: "error" },
 			children
@@ -8456,6 +8567,13 @@ var SelectField = ({ className, hideLabel, children, name, label, validation, pr
 };
 SelectField.displayName = "SelectField";
 //#endregion
+//#region src/components/select-menu/SelectMenu.context.tsx
+var SelectMenuContext = react.createContext({
+	size: "md",
+	theme: "grey"
+});
+var useSelectMenuContext = () => react.useContext(SelectMenuContext);
+//#endregion
 //#region src/components/select-menu/SelectMenuContent.tsx
 var Content$2 = styled(_radix_ui_react_select.Content, {
 	base: [
@@ -8500,11 +8618,11 @@ var ScrollDownButton = styled(_radix_ui_react_select.ScrollDownButton, { base: [
 	"h-6",
 	"cursor-default"
 ] });
-var SelectMenuContent = react.forwardRef(({ children, position = "popper", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Content$2, {
+var SelectMenuContent = react.forwardRef(({ children, position = "popper", sideOffset = 4, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Content$2, {
 	ref,
 	position,
 	sideOffset,
-	...props,
+	...rest,
 	children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollUpButton, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 			is: _atom_learning_icons.ChevronUp,
@@ -8522,13 +8640,6 @@ var SelectMenuContent = react.forwardRef(({ children, position = "popper", sideO
 }) }));
 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: [
@@ -8566,12 +8677,12 @@ var Item = styled(_radix_ui_react_select.Item, {
 		]
 	} }
 });
-var SelectMenuItem = react.forwardRef(({ children, ...props }, ref) => {
+var SelectMenuItem = react.forwardRef(({ children, ...rest }, ref) => {
 	const { size } = useSelectMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Item, {
 		ref,
 		size,
-		...props,
+		...rest,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.ItemIndicator, {
 			className: "absolute left-2 inline-flex items-center",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
@@ -8584,11 +8695,11 @@ var SelectMenuItem = react.forwardRef(({ children, ...props }, ref) => {
 SelectMenuItem.displayName = "SelectMenuItem";
 //#endregion
 //#region src/components/select-menu/SelectMenuLabel.tsx
-var SelectMenuLabel = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
+var SelectMenuLabel = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
 	as: _radix_ui_react_select.Label,
 	size: "sm",
 	className: cn("p-2", "mb-1", "text-text-subtle", className),
-	...props
+	...rest
 });
 SelectMenuLabel.displayName = "SelectMenuLabel";
 //#endregion
@@ -8667,14 +8778,14 @@ var TriggerIcon = styled(Icon, {
 		lg: ["right-3", "size-5"]
 	} }
 });
-var SelectMenuTrigger = react.forwardRef(({ placeholder, children, ...props }, ref) => {
+var SelectMenuTrigger = react.forwardRef(({ placeholder, children, ...rest }, ref) => {
 	const { size, theme, state } = useSelectMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Trigger$2, {
 		ref,
 		size,
 		theme,
 		state,
-		...props,
+		...rest,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Value, {
 			placeholder,
 			children
@@ -8687,14 +8798,14 @@ var SelectMenuTrigger = react.forwardRef(({ placeholder, children, ...props }, r
 SelectMenuTrigger.displayName = "SelectMenuTrigger";
 //#endregion
 //#region src/components/select-menu/SelectMenu.tsx
-var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectMenuContext.Provider, {
+var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectMenuContext.Provider, {
 	value: {
 		size,
 		theme,
 		state
 	},
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Root, {
-		...props,
+		...rest,
 		children
 	})
 });
@@ -8708,7 +8819,7 @@ var SelectMenu = Object.assign(SelectMenuRoot, {
 });
 //#endregion
 //#region src/components/select-menu-field/SelectMenuField.tsx
-var SelectMenuField = ({ className, hideLabel, children, name, label, validation, prompt, description, theme, size, placeholder, disabled, ...remainingProps }) => {
+var SelectMenuField = ({ className, hideLabel, children, name, label, validation, prompt, description, theme, size, placeholder, disabled, ...rest }) => {
 	const { control } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -8735,7 +8846,7 @@ var SelectMenuField = ({ className, hideLabel, children, name, label, validation
 			theme: formTheme,
 			disabled,
 			...error && { state: "error" },
-			...remainingProps,
+			...rest,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectMenu.Trigger, {
 				ref,
 				placeholder,
@@ -8837,8 +8948,8 @@ var PointerBlocker = styled("div", {
 	} }
 });
 var SideBar = ({ theme, className, children, type = "expandable", offset = "0px", style, ...rest }) => {
-	const [isExpanded, setIsExpanded] = react.default.useState(type === "static");
-	const ref = react.default.useRef(null);
+	const [isExpanded, setIsExpanded] = react.useState(type === "static");
+	const ref = react.useRef(null);
 	(0, react_aria.useInteractOutside)({
 		ref,
 		onInteractOutside: () => setIsExpanded(false)
@@ -8915,12 +9026,10 @@ var SliderSteps = ({ min, max, steps = [] }) => {
 };
 //#endregion
 //#region src/components/slider/SliderValue.tsx
-var SliderValue = ({ value = [], outputLabel = (value) => `Current value is ${value}` }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
-		className: "text-grey-700 mt-4 w-full",
-		children: outputLabel(value.length === 1 ? value[0] : value)
-	});
-};
+var SliderValue = ({ value = [], outputLabel = (value) => `Current value is ${value}` }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
+	className: "text-grey-700 mt-4 w-full",
+	children: outputLabel(value.length === 1 ? value[0] : value)
+});
 //#endregion
 //#region src/components/slider/Slider.tsx
 var StyledTrack = styled(_radix_ui_react_slider.Track, {
@@ -8970,7 +9079,7 @@ var StyledThumb$1 = styled(_radix_ui_react_slider.Thumb, { base: [
 	"disabled:cursor-not-allowed",
 	"disabled:opacity-30"
 ] });
-var Slider = react.forwardRef(({ value, defaultValue, min = 0, max = 100, theme = "tonal", className, children, ...remainingProps }, ref) => {
+var Slider = react.forwardRef(({ value, defaultValue, min = 0, max = 100, theme = "tonal", className, children, ...rest }, ref) => {
 	const values = value || defaultValue;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CSSWrapper, {
 		className,
@@ -8980,7 +9089,7 @@ var Slider = react.forwardRef(({ value, defaultValue, min = 0, max = 100, theme
 			min,
 			max,
 			ref,
-			...remainingProps,
+			...rest,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTrack, {
 				theme,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledRange, {})
@@ -8993,7 +9102,7 @@ Slider.Steps = SliderSteps;
 Slider.displayName = "Slider";
 //#endregion
 //#region src/components/slider-field/SliderField.tsx
-var SliderField = ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min = 0, max = 100, steps = [], ...remainingProps }) => {
+var SliderField = ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min = 0, max = 100, steps = [], ...rest }) => {
 	const { control } = (0, react_hook_form.useFormContext)();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = (0, react_hook_form.useController)({
 		name,
@@ -9001,7 +9110,7 @@ var SliderField = ({ className, hideLabel, label, name, defaultValue, value, val
 		rules: validation,
 		defaultValue
 	});
-	react.default.useEffect(() => {
+	react.useEffect(() => {
 		if (value?.length) onChange(value);
 	}, [JSON.stringify(value)]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
@@ -9016,7 +9125,7 @@ var SliderField = ({ className, hideLabel, label, name, defaultValue, value, val
 			value: innerValue,
 			min,
 			max,
-			...remainingProps,
+			...rest,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slider.Steps, {
 				min,
 				max,
@@ -9066,7 +9175,7 @@ var StyledTile = styled("div", {
 		diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] }
 	}
 }, { enabledResponsiveVariants: true });
-var Tile = react.default.forwardRef(({ children, borderRadius = "lg", colorScheme = {}, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorScheme, {
+var Tile = react.forwardRef(({ children, borderRadius = "lg", colorScheme = {}, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorScheme, {
 	asChild: true,
 	base: "grey1",
 	accent: "primary2",
@@ -9112,30 +9221,28 @@ var SkeletonDoughnutChart = ({ className }) => /* @__PURE__ */ (0, react_jsx_run
 });
 //#endregion
 //#region src/components/skeleton-loader/SkeletonTable.tsx
-var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, className }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
-		className: cn("p-6", "flex-row", "gap-4", "relative", className),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
-			size: "md",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Header, {
-				theme: "white",
-				children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.HeaderCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonLoader, {
+var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
+	className: cn("p-6", "flex-row", "gap-4", "relative", className),
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
+		size: "md",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Header, {
+			theme: "white",
+			children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.HeaderCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonLoader, {
+				style: { "--width": columnWidth?.[columnIndex] || "100px" },
+				className: "h-4 w-(--width) rounded-xl"
+			}) }, columnIndex))
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Body, {
+			striped: false,
+			children: Array.from({ length: numberOfRows }, (_, index) => index).map((rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Row, { children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Cell, {
+				className: "border-none",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonLoader, {
 					style: { "--width": columnWidth?.[columnIndex] || "100px" },
-					className: "h-4 w-(--width) rounded-xl"
-				}) }, columnIndex))
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Body, {
-				striped: false,
-				children: Array.from({ length: numberOfRows }, (_, index) => index).map((rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Row, { children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Cell, {
-					className: "border-none",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonLoader, {
-						style: { "--width": columnWidth?.[columnIndex] || "100px" },
-						className: "bg-grey-200 h-4 w-(--width) rounded-xl"
-					})
-				}, columnIndex)) }, rowIndex))
-			})]
-		})
-	});
-};
+					className: "bg-grey-200 h-4 w-(--width) rounded-xl"
+				})
+			}, columnIndex)) }, rowIndex))
+		})]
+	})
+});
 //#endregion
 //#region src/components/skeleton-loader/SkeletonCard.tsx
 var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tile, {
@@ -9260,7 +9367,7 @@ var Spacer = styled("div", { base: [
 ] });
 Spacer.displayName = "Spacer";
 //#endregion
-//#region src/components/stepper/stepper-context/StepperContext.tsx
+//#region src/components/stepper/Stepper.context.tsx
 var StepperContext = react.createContext({
 	steps: [],
 	goToPreviousStep: () => null,
@@ -9761,8 +9868,7 @@ var StyledTriggerList$1 = styled(_radix_ui_react_tabs.List, { base: [
 	"flex",
 	"w-full",
 	"overflow-x-auto",
-	"-webkit-scrollbar:hidden",
-	"[scrollbar-width:none]"
+	"scrollbar-none"
 ] });
 var StyledChevronActionIcon = styled(ActionIcon, { base: [
 	"h-full!",
@@ -9787,15 +9893,15 @@ var TabsTriggerList = ({ children, colorScheme = {}, ...rest }) => {
 		delay: 100,
 		delayMethod: "debounce"
 	});
-	const canScrollXAxis = react.default.useMemo(() => {
+	const canScrollXAxis = react.useMemo(() => {
 		if (!listRef) return false;
 		return listRef.scrollWidth > listRef.clientWidth;
 	}, [width, listRef]);
-	const canScrollLeft = react.default.useMemo(() => {
+	const canScrollLeft = react.useMemo(() => {
 		if (!canScrollXAxis) return false;
 		return left > 0;
 	}, [left, canScrollXAxis]);
-	const canScrollRight = react.default.useMemo(() => {
+	const canScrollRight = react.useMemo(() => {
 		if (!listRef || !canScrollXAxis) return false;
 		return listRef.scrollWidth - left - listRef.clientWidth > 1;
 	}, [
@@ -9803,7 +9909,7 @@ var TabsTriggerList = ({ children, colorScheme = {}, ...rest }) => {
 		left,
 		canScrollXAxis
 	]);
-	const scrollList = react.default.useCallback((stepModifier) => {
+	const scrollList = react.useCallback((stepModifier) => {
 		if (!listRef) return;
 		listRef.scroll({
 			left: listRef.scrollLeft + listRef.clientWidth * stepModifier,
@@ -9824,7 +9930,7 @@ var TabsTriggerList = ({ children, colorScheme = {}, ...rest }) => {
 			canScrollLeft && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledChevronActionIcon, {
 				label: "scroll left",
 				size: "md",
-				onClick: () => scrollList(-SCROLL_STEP),
+				onClick: () => scrollList(-.8),
 				tabIndex: -1,
 				className: "left-0",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: _atom_learning_icons.ChevronLeft })
@@ -9931,7 +10037,7 @@ var Textarea = react.forwardRef((props, ref) => /* @__PURE__ */ (0, react_jsx_ru
 Textarea.displayName = "Textarea";
 //#endregion
 //#region src/components/textarea-field/TextareaField.tsx
-var TextareaField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
+var TextareaField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...rest }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -9955,7 +10061,7 @@ var TextareaField = ({ className, hideLabel, label, name, validation, prompt, de
 			appearance: formAppearance,
 			theme: formTheme,
 			...error && { state: "error" },
-			...remainingProps
+			...rest
 		})
 	});
 };
@@ -9988,7 +10094,7 @@ var StyledTileInteractive = styled(Tile, { base: [
 	"not-disabled:transition-transform",
 	"not-disabled:translate-y-0"
 ] });
-var TileInteractive = react.default.forwardRef(({ onClick, href, type = "button", as, ...rest }, ref) => {
+var TileInteractive = react.forwardRef(({ onClick, href, type = "button", as, ...rest }, ref) => {
 	const elementSpecificProps = !!href ? {
 		as: as || "a",
 		href,
@@ -10037,7 +10143,7 @@ var TileToggleGroup = react.forwardRef(({ orientation, className, ...rest }, ref
 TileToggleGroup.Item = TileToggleGroupItem;
 TileToggleGroup.displayName = "TileToggleGroup";
 //#endregion
-//#region src/components/toast/ToastContext.tsx
+//#region src/components/toast/Toast.context.tsx
 var ToastContext = react.createContext(null);
 var useToastContext = () => {
 	const context = react.useContext(ToastContext);
@@ -10472,25 +10578,21 @@ var colorSchemes = { light: {
 } };
 //#endregion
 //#region src/components/top-bar/TopBarActionIcon.tsx
-var TopBarActionIcon = react.default.forwardRef(({ icon, ...rest }, forwardedRef) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
-		size: "md",
-		appearance: "simple",
-		theme: "neutral",
-		ref: forwardedRef,
-		...rest,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: icon })
-	});
-});
+var TopBarActionIcon = react.forwardRef(({ icon, ...rest }, forwardedRef) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
+	size: "md",
+	appearance: "simple",
+	theme: "neutral",
+	ref: forwardedRef,
+	...rest,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: icon })
+}));
 //#endregion
 //#region src/components/top-bar/TopBarBrand.tsx
-var TopBarBrandLogo = ({ src, alt = "Atom Learning logo", className }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Image, {
-		src,
-		alt,
-		className: cn("h-8", "mr-3", "w-auto", className)
-	});
-};
+var TopBarBrandLogo = ({ src, alt = "Atom Learning logo", className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Image, {
+	src,
+	alt,
+	className: cn("h-8", "mr-3", "w-auto", className)
+});
 var TopBarBrandName = styled(Text, { base: ["text-grey-800"] });
 var TopBarBrand = styled("a", { base: [
 	"flex",
@@ -10574,13 +10676,13 @@ var TopBar = Object.assign(TopBarComponent, {
 TopBarComponent.displayName = "TopBar";
 //#endregion
 //#region src/components/video/Video.tsx
-var Video = react.forwardRef(({ id, ratio = 9 / 16, className, ...remainingProps }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CSSWrapper, {
+var Video = react.forwardRef(({ id, ratio = 9 / 16, className, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CSSWrapper, {
 	className,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		style: { "--ratio": `${ratio * 100}%` },
 		className: "relative h-0 w-full overflow-hidden rounded-sm pt-(--ratio)",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_player_vimeo_js.default, {
-			...remainingProps,
+			...rest,
 			role: "figure",
 			url: `https://player.vimeo.com/video/${id}`,
 			height: "100%",
@@ -10646,7 +10748,7 @@ KeyboardShortcutIndicator.displayName = "KeyboardShortcut";
 var KeyboardShortcut = Object.assign(KeyboardShortcut$1, { Indicator: KeyboardShortcutIndicator });
 KeyboardShortcut.displayName = "KeyboardShortcut";
 //#endregion
-//#region src/components/segmented-control/SegmentedControlContext.tsx
+//#region src/components/segmented-control/SegmentedControl.context.tsx
 var SegmentedControlContext = react.createContext({
 	size: "md",
 	theme: "primary",
@@ -10661,10 +10763,10 @@ var badgeSizeMap = {
 	md: "xs",
 	lg: "sm"
 };
-var SegmentedControlBadge = ({ className, ...props }) => {
+var SegmentedControlBadge = ({ className, ...rest }) => {
 	const { size } = react.useContext(SegmentedControlContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
-		...props,
+		...rest,
 		size: badgeSizeMap[size],
 		className: cn("border-none", "font-normal", className)
 	});
@@ -10785,10 +10887,10 @@ var StyledItem = styled(_radix_ui_react_tabs.Trigger, {
 		theme: "primary"
 	}
 }, { enabledResponsiveVariants: true });
-var SegmentedControlItem = react.forwardRef(({ children, ...props }, ref) => {
+var SegmentedControlItem = react.forwardRef(({ children, ...rest }, ref) => {
 	const { size, theme } = react.useContext(SegmentedControlContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledItem, {
-		...props,
+		...rest,
 		theme,
 		size,
 		ref,
@@ -10900,15 +11002,15 @@ var StyledSegmentedControlRoot = styled(Tabs, {
 		lg: []
 	} }
 }, { enabledResponsiveVariants: true });
-var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, ...props }) => {
-	const isControlled = props.value !== void 0;
+var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, value, onValueChange, ...rest }) => {
+	const isControlled = value !== void 0;
 	const [internalValue, setInternalValue] = react.useState(defaultValue);
-	const currentValue = isControlled ? props.value : internalValue;
-	const handleValueChange = isControlled ? props.onValueChange : setInternalValue;
+	const currentValue = isControlled ? value : internalValue;
+	const handleValueChange = isControlled ? onValueChange : setInternalValue;
 	react.useEffect(() => {
 		if (!isControlled && defaultValue) setInternalValue(defaultValue);
 	}, [defaultValue, isControlled]);
-	const value = react.useMemo(() => ({
+	const contextValue = react.useMemo(() => ({
 		size,
 		theme,
 		defaultValue,
@@ -10922,12 +11024,12 @@ var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, .
 		currentValue
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedControlContext.Provider, {
-		value,
+		value: contextValue,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSegmentedControlRoot, {
 			size,
 			value: currentValue,
 			onValueChange: handleValueChange,
-			...props,
+			...rest,
 			children
 		})
 	});
@@ -10945,8 +11047,8 @@ var SegmentedControl = {
 	ItemList: SegmentedControlItemList
 };
 //#endregion
-//#region src/components/file-drop/FileDropContext.ts
-var FileDropContext = react.default.createContext({
+//#region src/components/file-drop/FileDrop.context.ts
+var FileDropContext = react.createContext({
 	isDragging: false,
 	files: []
 });
@@ -10966,7 +11068,7 @@ var StyledContainer = styled("div", { base: [
 	"cursor-pointer",
 	"**:pointer-events-none"
 ] });
-var FileDrop = ({ children, accept, multiple, onDrop, ...props }) => {
+var FileDrop = ({ children, accept, multiple, onDrop, ...rest }) => {
 	const [isDragging, setIsDragging] = react.useState(false);
 	const [files, setFiles] = react.useState([]);
 	const fileUploadInputRef = react.useRef(null);
@@ -11002,7 +11104,7 @@ var FileDrop = ({ children, accept, multiple, onDrop, ...props }) => {
 			role: "button",
 			onKeyDown: handleKeyDown,
 			tabIndex: 0,
-			...props,
+			...rest,
 			children: [typeof children === "function" ? children(value) : children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				type: "file",
 				ref: fileUploadInputRef,
@@ -11019,7 +11121,7 @@ var FileDrop = ({ children, accept, multiple, onDrop, ...props }) => {
 FileDrop.displayName = "FileDrop";
 //#endregion
 //#region src/components/file-drop/useFileDrop.ts
-var useFileDrop = () => react.default.useContext(FileDropContext);
+var useFileDrop = () => react.useContext(FileDropContext);
 //#endregion
 exports.Accordion = Accordion;
 exports.ActionIcon = ActionIcon;