@atom-learning/components 10.0.0 → 10.0.1

package/dist/index.cjs.js

@@ -30,6 +30,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 //#endregion
+let _radix_ui_react_accordion = require("@radix-ui/react-accordion");
 let react = require("react");
 react = __toESM(react, 1);
 let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
@@ -38,13 +39,12 @@ clsx = __toESM(clsx, 1);
 let tailwind_merge = require("tailwind-merge");
 let tailwind_variants = require("tailwind-variants");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _radix_ui_react_alert_dialog = require("@radix-ui/react-alert-dialog");
 let _atom_learning_icons = require("@atom-learning/icons");
-let _radix_ui_react_accordion = require("@radix-ui/react-accordion");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
 let invariant = require("invariant");
 invariant = __toESM(invariant, 1);
 let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
+let _radix_ui_react_alert_dialog = require("@radix-ui/react-alert-dialog");
 let throttle_debounce = require("throttle-debounce");
 let embla_carousel_react = require("embla-carousel-react");
 embla_carousel_react = __toESM(embla_carousel_react, 1);
@@ -73,11 +73,8 @@ let dayzed = require("dayzed");
 let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
 let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 let mdast_util_directive = require("mdast-util-directive");
-mdast_util_directive = __toESM(mdast_util_directive, 1);
 let mdast_util_from_markdown = require("mdast-util-from-markdown");
-mdast_util_from_markdown = __toESM(mdast_util_from_markdown, 1);
 let micromark_extension_directive = require("micromark-extension-directive");
-micromark_extension_directive = __toESM(micromark_extension_directive, 1);
 let _radix_ui_react_navigation_menu = require("@radix-ui/react-navigation-menu");
 _radix_ui_react_navigation_menu = __toESM(_radix_ui_react_navigation_menu, 1);
 let _radix_ui_react_progress = require("@radix-ui/react-progress");
@@ -91,18 +88,6 @@ let _radix_ui_react_tabs = require("@radix-ui/react-tabs");
 let react_hot_toast = require("react-hot-toast");
 let react_player_vimeo_js = require("react-player/vimeo.js");
 react_player_vimeo_js = __toESM(react_player_vimeo_js, 1);
-//#region src/utilities/hooks/useIsMountedRef.ts
-var useIsMountedRef = () => {
-	const isMountedRef = (0, react.useRef)(void 0);
-	(0, react.useEffect)(() => {
-		isMountedRef.current = true;
-		return () => {
-			isMountedRef.current = false;
-		};
-	});
-	return isMountedRef;
-};
-//#endregion
 //#region src/styled.tsx
 tailwind_variants.defaultConfig.twMerge = false;
 var isArbitraryNumber = (value) => /^\[[\d.]+\]$/.test(value) || !Number.isNaN(Number(value));
@@ -225,670 +210,181 @@ function styled(el, styles, options) {
 	return Comp;
 }
 //#endregion
-//#region src/utilities/uri/index.ts
-var isExternalUrl = (url) => !!url && /^https?:\/\//.test(url);
-var getExternalAnchorProps = (url) => isExternalUrl(url) ? {
-	target: "_blank",
-	rel: "noopener noreferrer"
-} : {};
+//#region src/utilities/css-wrapper/CSSWrapper.tsx
+var CSSWrapper = ({ className, children }) => className ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className,
+	children
+}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+CSSWrapper.displayName = "CSSWrapper";
 //#endregion
-//#region src/components/loader/Loader.tsx
-var Dot$1 = styled("div", {
+//#region src/components/accordion/AccordionContent.tsx
+var StyledContent$4 = styled(_radix_ui_react_accordion.Content, { base: [
+	"border-none",
+	"w-full",
+	"bg-(--base-1)",
+	"overflow-hidden",
+	"data-[state=open]:rounded-b-sm",
+	"data-[state=open]:rounded-t-none",
+	"motion-safe:data-[state=open]:animate-accordion-open",
+	"motion-safe:data-[state=closed]:animate-accordion-close"
+] });
+var AccordionContent = ({ children, className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledContent$4, {
+	...rest,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CSSWrapper, {
+		className,
+		children
+	})
+});
+//#endregion
+//#region src/components/accordion/AccordionItem.tsx
+var AccordionItem = styled(_radix_ui_react_accordion.Item, { base: ["w-full", "not-last:mb-1"] }, { enablePolymorphism: false });
+//#endregion
+//#region src/experiments/color-scheme/ColorScheme.config.ts
+var generateColors = ({ prefix, colorName, color0 = "" }) => {
+	const colors = {};
+	let i = 1;
+	if (color0) {
+		colors[`--${prefix}-${i}`] = `var(--color-${color0})`;
+		i++;
+	}
+	let k = 1;
+	for (; i <= 11; i++) {
+		colors[`--${prefix}-${i}`] = `var(--color-${colorName}-${k * 100})`;
+		k++;
+	}
+	return colors;
+};
+var colorSchemes$4 = {};
+colorSchemes$4["interactive-loContrast"] = {
+	"--interactive-foreground": "var(--foreground)",
+	"--interactive-1": "var(--accent-1)",
+	"--interactive-2": "var(--accent-2)",
+	"--interactive-3": "var(--accent-3)"
+};
+colorSchemes$4["interactive-hiContrast"] = {
+	"--interactive-foreground": "var(--foreground-7-plus)",
+	"--interactive-1": "var(--accent-9)",
+	"--interactive-2": "var(--accent-10)",
+	"--interactive-3": "var(--accent-11)"
+};
+var colorNames = [
+	"primary",
+	"grey",
+	"blue",
+	"pink",
+	"purple",
+	"cyan",
+	"green",
+	"magenta",
+	"red",
+	"teal",
+	"orange",
+	"yellow",
+	"lime"
+];
+var createVariants = () => Object.fromEntries(colorNames.flatMap((c) => [[`${c}1`, {
+	colorName: c,
+	color0: "white"
+}], [`${c}2`, { colorName: c }]]));
+var bases = createVariants();
+var accents = bases;
+(() => {
+	Object.entries(bases).forEach(([name, config]) => {
+		const themeName = `base-${name}`;
+		colorSchemes$4[themeName] = {
+			"--foreground": "var(--color-grey-1000)",
+			"--foreground-7-plus": "var(--color-white)",
+			...generateColors({
+				prefix: "base",
+				colorName: config.colorName,
+				color0: config.color0
+			})
+		};
+	});
+	Object.entries(accents).forEach(([name, config]) => {
+		colorSchemes$4[`accent-${name}`] = generateColors({
+			prefix: "accent",
+			colorName: config.colorName,
+			color0: config.color0
+		});
+	});
+})();
+//#endregion
+//#region src/experiments/color-scheme/ColorScheme.tsx
+/**
+* @experimental Component has not been finalised. Further design input required. Use with caution.
+*/
+var ColorScheme = ({ ref, base = "", accent = "", interactive, asChild = false, ...rest }) => {
+	const Component = asChild ? _radix_ui_react_slot.Slot : "div";
+	const style = {
+		...interactive && colorSchemes$4[`interactive-${interactive}`],
+		...accent && colorSchemes$4[`accent-${accent}`],
+		...base && colorSchemes$4[`base-${base}`]
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		...rest,
+		ref,
+		style
+	});
+};
+//#endregion
+//#region src/components/icon/Icon.tsx
+var StyledIcon$3 = styled("svg", {
 	base: [
-		"animate-pulse",
-		"bg-current",
-		"rounded-full",
-		"animation-duration-900",
-		"nth-3:animation-delay-300",
-		"nth-4:animation-delay-600"
+		"inline-block",
+		"fill-none",
+		"shrink-0",
+		"stroke-current",
+		"[stroke-linecap:round]",
+		"[stroke-linejoin:round]",
+		"align-middle"
 	],
 	variants: { size: {
-		sm: ["size-1", "mx-0.5"],
-		md: ["size-1.5", "mx-0.5"],
-		lg: ["size-2", "mx-[3px]"]
+		sm: ["size-4", "stroke-[1.5]"],
+		md: ["size-6", "stroke-[1.75]"],
+		lg: ["size-8", "stroke-2"]
 	} }
-});
-var Loader = ({ className, message = "Loading", size = "md", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-	className: cn("flex", "justify-center", className),
-	role: "alert",
+}, { enableResponsiveVariants: true });
+var Icon = ({ ref, is: SVG, size = "md", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon$3, {
+	size,
+	"aria-hidden": "true",
 	...rest,
-	children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "sr-only",
-			children: message
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot$1, { size }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot$1, { size }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot$1, { size })
-	]
+	as: SVG,
+	ref
 });
 //#endregion
-//#region src/components/button/Button.tsx
-var StyledButton = styled("button", {
+//#region src/components/accordion/AccordionTrigger.tsx
+var RotatingIcon = styled(Icon, { base: [
+	"transition-transform",
+	"duration-300",
+	"[[data-state=open]>&]:rotate-180",
+	"[[data-state=closed]>&]:rotate-0"
+] });
+var StyledTrigger$1 = styled(_radix_ui_react_accordion.Trigger, {
 	base: [
+		"border-none",
+		"py-3",
+		"px-4",
+		"w-full",
+		"flex",
+		"justify-between",
 		"items-center",
-		"bg-[unset]",
-		"rounded-md",
 		"cursor-pointer",
-		"flex",
-		"font-body",
-		"font-semibold",
-		"justify-center",
-		"no-underline",
-		"transition-all",
-		"duration-100",
-		"ease-out",
-		"whitespace-nowrap",
-		"w-max",
+		"bg-(--interactive-2)",
+		"text-(--interactive-foreground)",
 		"disabled:cursor-not-allowed",
-		"disabled:opacity-30"
-	],
-	variants: {
-		theme: {
-			primary: [
-				"[--base:var(--color-primary-800)]",
-				"[--interact:var(--color-primary-900)]",
-				"[--active:var(--color-primary-1000)]"
-			],
-			secondary: [
-				"[--base:var(--color-primary-1000)]",
-				"[--interact:var(--color-primary-1100)]",
-				"[--active:var(--color-primary-1200)]"
-			],
-			success: [
-				"[--base:var(--color-success)]",
-				"[--interact:var(--color-success-mid)]",
-				"[--active:var(--color-success-dark)]"
-			],
-			warning: [
-				"[--base:var(--color-warning)]",
-				"[--interact:var(--color-warning-mid)]",
-				"[--active:var(--color-warning-dark)]",
-				"[--text:var(--color-grey-800)]"
-			],
-			danger: [
-				"[--base:var(--color-danger)]",
-				"[--interact:var(--color-danger-mid)]",
-				"[--active:var(--color-danger-dark)]"
-			],
-			neutral: [
-				"[--base:white]",
-				"[--interact:rgba(255,255,255,0.9)]",
-				"[--active:rgba(255,255,255,0.75)]",
-				"[--text:var(--color-primary-800)]"
-			]
-		},
-		appearance: {
-			solid: [
-				"bg-(--base)",
-				"text-(--text,white)",
-				"disabled:opacity-30",
-				"disabled:cursor-not-allowed",
-				"not-disabled:hover:bg-(--interact)",
-				"not-disabled:hover:text-(--text,white)",
-				"not-disabled:focus:bg-(--interact)",
-				"not-disabled:focus:text-(--text,white)",
-				"not-disabled:active:bg-(--active)"
-			],
-			outline: [
-				"border",
-				"border-current",
-				"text-(--base)",
-				"disabled:opacity-30",
-				"disabled:cursor-not-allowed",
-				"not-disabled:hover:no-underline",
-				"not-disabled:hover:text-(--interact)",
-				"not-disabled:focus:no-underline",
-				"not-disabled:focus:text-(--interact)",
-				"not-disabled:active:text-(--active)"
-			]
-		},
-		size: {
-			sm: [
-				"text-sm",
-				"leading-[1.53]",
-				"h-8",
-				"px-4",
-				"gap-2",
-				"[&_svg]:size-4"
-			],
-			md: [
-				"text-md",
-				"leading-normal",
-				"h-10",
-				"px-8",
-				"gap-3",
-				"[&_svg]:size-5"
-			],
-			lg: [
-				"text-lg",
-				"leading-normal",
-				"h-12",
-				"px-8",
-				"gap-3",
-				"[&_svg]:size-[22px]"
-			],
-			xl: [
-				"text-lg",
-				"leading-normal",
-				"h-16",
-				"px-8",
-				"gap-3",
-				"[&_svg]:size-[22px]"
-			]
-		},
-		isLoading: { true: [
-			"cursor-not-allowed",
-			"opacity-60",
-			"pointer-events-none"
-		] },
-		fullWidth: {
-			true: ["w-full"],
-			false: ["w-max"]
-		}
-	},
-	defaultVariants: {
-		appearance: "solid",
-		size: "md",
-		theme: "primary"
-	}
-}, { enableResponsiveVariants: true });
-// @__PURE__ keeps this tree-shakable for consumers importing only
-var LoaderContentsWrapper = /* @__PURE__ */ styled("span", {
-	base: [
-		"items-center",
-		"flex",
-		"justify-center",
-		"invisible"
-	],
-	variants: { size: {
-		sm: ["gap-2"],
-		md: ["gap-3"],
-		lg: ["gap-3"],
-		xl: ["gap-3"]
-	} },
-	defaultVariants: { size: "md" }
-}, { enableResponsiveVariants: true });
-var WithLoader = ({ size, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Loader, { className: "absolute" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderContentsWrapper, {
-	size,
-	children
-})] });
-var Button = (({ ref, children, as, href, isLoading = false, onClick, disabled, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton, {
-	as: as || (href ? "a" : void 0),
-	...!disabled && !isLoading && {
-		href,
-		onClick
-	},
-	isLoading,
-	type: !href ? "button" : void 0,
-	disabled,
-	...rest,
-	...getExternalAnchorProps(href),
-	ref,
-	children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WithLoader, {
-		size: rest.size,
-		children
-	}) : children
-}));
-//#endregion
-//#region src/components/heading/Heading.tsx
-var Heading = styled("h2", {
-	base: ["m-0"],
-	variants: {
-		size: {
-			xs: [
-				"font-body",
-				"text-md",
-				"leading-normal",
-				"capsize-[0.3864]"
-			],
-			sm: [
-				"font-body",
-				"text-lg",
-				"leading-[1.14]",
-				"capsize-[0.2078]"
-			],
-			md: [
-				"font-display",
-				"text-xl",
-				"leading-[1.14]",
-				"tracking-[0.01em]",
-				"capsize-before-[0.2114]",
-				"capsize-after-[0.2634]"
-			],
-			lg: [
-				"font-display",
-				"text-2xl",
-				"leading-[1.08]",
-				"tracking-[0.01em]",
-				"capsize-before-[0.1405]",
-				"capsize-after-[0.2405]"
-			],
-			xl: [
-				"font-display",
-				"text-3xl",
-				"leading-[1.12]",
-				"capsize-before-[0.16]",
-				"capsize-after-[0.26]"
-			],
-			xxl: [
-				"font-display",
-				"text-4xl",
-				"leading-none",
-				"capsize-before-[0.1]",
-				"capsize-after-[0.2]"
-			]
-		},
-		noCapsize: { true: ["capsize-none"] },
-		weight: {
-			medium: ["font-medium"],
-			bold: ["font-bold"]
-		}
-	},
-	defaultVariants: {
-		size: "md",
-		weight: "bold"
-	}
-}, { enableResponsiveVariants: true });
-//#endregion
-//#region src/components/text/Text.tsx
-var Text = styled("p", {
-	base: ["m-0"],
-	variants: {
-		size: {
-			xs: [
-				"text-xs",
-				"leading-[1.6]",
-				"capsize-[0.4364]"
-			],
-			sm: [
-				"text-sm",
-				"leading-[1.53]",
-				"capsize-[0.4056]"
-			],
-			md: [
-				"text-md",
-				"leading-normal",
-				"capsize-[0.3864]"
-			],
-			lg: [
-				"text-lg",
-				"leading-[1.52]",
-				"capsize-[0.3983]"
-			],
-			xl: [
-				"text-xl",
-				"leading-[1.42]",
-				"capsize-[0.3506]"
-			],
-			"2xl": [
-				"text-2xl",
-				"leading-[1.40]",
-				"capsize-[0.3336]"
-			],
-			"3xl": [
-				"text-3xl",
-				"leading-[1.28]",
-				"capsize-[0.2709]"
-			],
-			"4xl": [
-				"text-4xl",
-				"leading-none",
-				"capsize-[0.1309]"
-			]
-		},
-		noCapsize: { true: ["capsize-none"] },
-		weight: {
-			normal: ["font-normal"],
-			bold: ["font-semibold"]
-		},
-		family: {
-			body: ["font-body"],
-			display: ["font-display"],
-			mono: ["font-mono"]
-		}
-	},
-	defaultVariants: {
-		size: "md",
-		family: "body"
-	}
-}, { enableResponsiveVariants: true });
-//#endregion
-//#region src/components/alert-dialog/AlertDialogContent.tsx
-var StyledAlertDialogOverlay = styled(_radix_ui_react_alert_dialog.Overlay, { base: [
-	"bg-alpha-600",
-	"top-0",
-	"right-0",
-	"bottom-0",
-	"left-0",
-	"fixed",
-	"z-1147483646",
-	"motion-safe:data-[state=open]:animate-fade-in",
-	"motion-safe:data-[state=closed]:animate-fade-out"
-] });
-var StyledAlertDialogContent = styled(_radix_ui_react_alert_dialog.Content, {
-	base: [
-		"transform-[translate(-50%,-50%)]",
-		"bg-white",
-		"rounded-md",
-		"shadow-xl",
-		"box-border",
-		"left-1/2",
-		"max-w-[90vw]",
-		"p-8",
-		"fixed",
-		"top-1/2",
-		"focus:outline-none",
-		"z-1147483646",
-		"motion-safe:data-[state=open]:animate-slide-in-center",
-		"motion-safe:data-[state=closed]:animate-slide-out-center"
-	],
-	variants: { size: {
-		sm: ["w-95"],
-		md: ["w-120"],
-		lg: ["w-150"]
-	} }
-});
-var AlertDialogContent = ({ size = "sm", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_alert_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAlertDialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAlertDialogContent, {
-	size,
-	...rest
-})] });
-//#endregion
-//#region src/components/alert-dialog/AlertDialog.tsx
-var AlertDialog = /* @__PURE__ */ Object.assign(_radix_ui_react_alert_dialog.Root, {
-	Description: _radix_ui_react_alert_dialog.Description,
-	Title: _radix_ui_react_alert_dialog.Title,
-	Action: _radix_ui_react_alert_dialog.Action,
-	Cancel: _radix_ui_react_alert_dialog.Cancel,
-	Content: AlertDialogContent,
-	Trigger: _radix_ui_react_alert_dialog.Trigger
-});
-AlertDialog.displayName = "AlertDialog";
-//#endregion
-//#region src/components/icon/Icon.tsx
-var StyledIcon$3 = styled("svg", {
-	base: [
-		"inline-block",
-		"fill-none",
-		"shrink-0",
-		"stroke-current",
-		"[stroke-linecap:round]",
-		"[stroke-linejoin:round]",
-		"align-middle"
-	],
-	variants: { size: {
-		sm: ["size-4", "stroke-[1.5]"],
-		md: ["size-6", "stroke-[1.75]"],
-		lg: ["size-8", "stroke-2"]
-	} }
-}, { enableResponsiveVariants: true });
-var Icon = ({ ref, is: SVG, size = "md", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon$3, {
-	size,
-	"aria-hidden": "true",
-	...rest,
-	as: SVG,
-	ref
-});
-//#endregion
-//#region src/components/alert-dialog/alert-context/AlertDialogIcon.tsx
-var StyledIcon$2 = styled(Icon, {
-	base: ["self-start"],
-	variants: { theme: {
-		info: ["text-info"],
-		warning: ["text-warning-mid"],
-		danger: ["rotate-180", "text-danger"],
-		success: ["text-success"]
-	} }
-});
-var iconMap = {
-	info: _atom_learning_icons.Info,
-	warning: _atom_learning_icons.Danger,
-	danger: _atom_learning_icons.Info,
-	success: _atom_learning_icons.OkCircle
-};
-var AlertDialogIcon = ({ theme }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon$2, {
-	theme,
-	is: iconMap[theme]
-});
-//#endregion
-//#region src/components/alert-dialog/alert-context/AlertDialog.tsx
-var Alert$1 = ({ title, size, theme, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialog, {
-	defaultOpen: true,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertDialog.Content, {
-		size,
-		onEscapeKeyDown: (e) => e.preventDefault(),
-		onCloseAutoFocus: onClose,
-		...rest,
-		className: "flex max-h-[90vh] flex-col gap-8",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [theme && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogIcon, { theme }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
-					as: AlertDialog.Title,
-					size: "sm",
-					className: "mr-4",
-					children: title
-				})]
-			}),
-			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
-				as: AlertDialog.Description,
-				className: "flex overflow-y-auto",
-				children: description
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-wrap justify-end gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialog.Cancel, {
-					asChild: true,
-					children: cancelElement || cancelActionText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-						size: "sm",
-						appearance: "outline",
-						onClick: () => onAction?.(false),
-						children: cancelActionText
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialog.Action, {
-					asChild: true,
-					children: confirmElement || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-						size: "sm",
-						onClick: () => onAction?.(true),
-						children: confirmActionText
-					})
-				})]
-			})
-		]
-	})
-});
-//#endregion
-//#region src/components/alert-dialog/alert-context/reducer.ts
-var initialState = [];
-var reducer = (state, action) => {
-	switch (action.type) {
-		case "ADD": return [...state, action.payload];
-		case "REMOVE": return state.filter(({ id }) => id !== action.payload);
-		default: return state;
-	}
-};
-//#endregion
-//#region src/components/alert-dialog/AlertDialog.context.tsx
-var AlertContext = react.createContext(void 0);
-var AlertProvider = ({ children }) => {
-	const [alerts, dispatch] = react.useReducer(reducer, initialState);
-	const isMountedRef = useIsMountedRef();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertContext, {
-		value: react.useMemo(() => ({ showAlert: (content) => dispatch({
-			payload: {
-				...content,
-				id: crypto.randomUUID()
-			},
-			type: "ADD"
-		}) }), []),
-		children: [Boolean(alerts.length) && /* @__PURE__ */ (0, react.createElement)(Alert$1, {
-			...alerts[0],
-			key: alerts[0].id,
-			onClose: () => {
-				if (isMountedRef.current) dispatch({
-					payload: alerts[0].id,
-					type: "REMOVE"
-				});
-			}
-		}), children]
-	});
-};
-var useAlert = () => {
-	const context = react.use(AlertContext);
-	if (context === void 0) throw new Error("useAlert must be used within a AlertProvider");
-	return context;
-};
-//#endregion
-//#region src/utilities/css-wrapper/CSSWrapper.tsx
-var CSSWrapper = ({ className, children }) => className ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className,
-	children
-}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
-CSSWrapper.displayName = "CSSWrapper";
-//#endregion
-//#region src/components/accordion/AccordionContent.tsx
-var StyledContent$4 = styled(_radix_ui_react_accordion.Content, { base: [
-	"border-none",
-	"w-full",
-	"bg-(--base-1)",
-	"overflow-hidden",
-	"data-[state=open]:rounded-b-sm",
-	"data-[state=open]:rounded-t-none",
-	"motion-safe:data-[state=open]:animate-accordion-open",
-	"motion-safe:data-[state=closed]:animate-accordion-close"
-] });
-var AccordionContent = ({ children, className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledContent$4, {
-	...rest,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CSSWrapper, {
-		className,
-		children
-	})
-});
-//#endregion
-//#region src/components/accordion/AccordionItem.tsx
-var AccordionItem = styled(_radix_ui_react_accordion.Item, { base: ["w-full", "not-last:mb-1"] }, { enablePolymorphism: false });
-//#endregion
-//#region src/experiments/color-scheme/ColorScheme.config.ts
-var generateColors = ({ prefix, colorName, color0 = "" }) => {
-	const colors = {};
-	let i = 1;
-	if (color0) {
-		colors[`--${prefix}-${i}`] = `var(--color-${color0})`;
-		i++;
-	}
-	let k = 1;
-	for (; i <= 11; i++) {
-		colors[`--${prefix}-${i}`] = `var(--color-${colorName}-${k * 100})`;
-		k++;
-	}
-	return colors;
-};
-var colorSchemes$4 = {};
-colorSchemes$4["interactive-loContrast"] = {
-	"--interactive-foreground": "var(--foreground)",
-	"--interactive-1": "var(--accent-1)",
-	"--interactive-2": "var(--accent-2)",
-	"--interactive-3": "var(--accent-3)"
-};
-colorSchemes$4["interactive-hiContrast"] = {
-	"--interactive-foreground": "var(--foreground-7-plus)",
-	"--interactive-1": "var(--accent-9)",
-	"--interactive-2": "var(--accent-10)",
-	"--interactive-3": "var(--accent-11)"
-};
-var colorNames = [
-	"primary",
-	"grey",
-	"blue",
-	"pink",
-	"purple",
-	"cyan",
-	"green",
-	"magenta",
-	"red",
-	"teal",
-	"orange",
-	"yellow",
-	"lime"
-];
-var createVariants = () => Object.fromEntries(colorNames.flatMap((c) => [[`${c}1`, {
-	colorName: c,
-	color0: "white"
-}], [`${c}2`, { colorName: c }]]));
-var bases = createVariants();
-var accents = bases;
-(() => {
-	Object.entries(bases).forEach(([name, config]) => {
-		const themeName = `base-${name}`;
-		colorSchemes$4[themeName] = {
-			"--foreground": "var(--color-grey-1000)",
-			"--foreground-7-plus": "var(--color-white)",
-			...generateColors({
-				prefix: "base",
-				colorName: config.colorName,
-				color0: config.color0
-			})
-		};
-	});
-	Object.entries(accents).forEach(([name, config]) => {
-		colorSchemes$4[`accent-${name}`] = generateColors({
-			prefix: "accent",
-			colorName: config.colorName,
-			color0: config.color0
-		});
-	});
-})();
-//#endregion
-//#region src/experiments/color-scheme/ColorScheme.tsx
-/**
-* @experimental Component has not been finalised. Further design input required. Use with caution.
-*/
-var ColorScheme = ({ ref, base = "", accent = "", interactive, asChild = false, ...rest }) => {
-	const Component = asChild ? _radix_ui_react_slot.Slot : "div";
-	const style = {
-		...interactive && colorSchemes$4[`interactive-${interactive}`],
-		...accent && colorSchemes$4[`accent-${accent}`],
-		...base && colorSchemes$4[`base-${base}`]
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
-		...rest,
-		ref,
-		style
-	});
-};
-//#endregion
-//#region src/components/accordion/AccordionTrigger.tsx
-var RotatingIcon = styled(Icon, { base: [
-	"transition-transform",
-	"duration-300",
-	"[[data-state=open]>&]:rotate-180",
-	"[[data-state=closed]>&]:rotate-0"
-] });
-var StyledTrigger$1 = styled(_radix_ui_react_accordion.Trigger, {
-	base: [
-		"border-none",
-		"py-3",
-		"px-4",
-		"w-full",
-		"flex",
-		"justify-between",
-		"items-center",
-		"cursor-pointer",
-		"bg-(--interactive-2)",
-		"text-(--interactive-foreground)",
-		"disabled:cursor-not-allowed",
-		"disabled:opacity-30",
-		"not-disabled:active:bg-(--interactive-3)",
-		"not-disabled:focus-visible:bg-(--interactive-3)",
-		"not-disabled:focus-visible:outline-none",
-		"not-disabled:focus-visible:relative",
-		"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
-		"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
-		"not-disabled:focus-visible:z-1",
-		"not-disabled:hover:bg-(--interactive-3)",
-		"data-[state=open]:rounded-b-none",
-		"data-[state=open]:rounded-t-sm",
-		"data-[state=closed]:rounded-sm"
+		"disabled:opacity-30",
+		"not-disabled:active:bg-(--interactive-3)",
+		"not-disabled:focus-visible:bg-(--interactive-3)",
+		"not-disabled:focus-visible:outline-none",
+		"not-disabled:focus-visible:relative",
+		"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
+		"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
+		"not-disabled:focus-visible:z-1",
+		"not-disabled:hover:bg-(--interactive-3)",
+		"data-[state=open]:rounded-b-none",
+		"data-[state=open]:rounded-t-sm",
+		"data-[state=closed]:rounded-sm"
 	],
 	variants: { arrowPosition: {
 		left: [
@@ -1000,142 +496,646 @@ var OptionalTooltipWrapper = ({ hasTooltip, label, tooltipSide, children }) => {
 	})] });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
 };
-OptionalTooltipWrapper.displayName = "OptionalTooltipWrapper";
+OptionalTooltipWrapper.displayName = "OptionalTooltipWrapper";
+//#endregion
+//#region src/utilities/uri/index.ts
+var isExternalUrl = (url) => !!url && /^https?:\/\//.test(url);
+var getExternalAnchorProps = (url) => isExternalUrl(url) ? {
+	target: "_blank",
+	rel: "noopener noreferrer"
+} : {};
+//#endregion
+//#region src/components/action-icon/ActionIcon.constants.ts
+var ActionIconSizeMap = {
+	xs: "sm",
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+};
+//#endregion
+//#region src/components/action-icon/ActionIcon.tsx
+var StyledButton$5 = styled("button", {
+	base: [
+		"items-center",
+		"appearance-none",
+		"bg-white",
+		"rounded-md",
+		"box-border",
+		"cursor-pointer",
+		"flex",
+		"shrink-0",
+		"justify-center",
+		"transition-all",
+		"duration-100",
+		"ease-out",
+		"disabled:cursor-not-allowed",
+		"disabled:opacity-30"
+	],
+	variants: {
+		theme: {
+			neutral: [
+				"[--solid-base:var(--color-white)]",
+				"[--solid-interact:var(--color-grey-100)]",
+				"[--solid-active:var(--color-grey-200)]",
+				"[--solid-text:var(--color-grey-1200)]",
+				"[--base:var(--color-grey-700)]",
+				"[--interact:var(--color-primary-900)]",
+				"[--active:var(--color-primary-1100)]"
+			],
+			primary: [
+				"[--base:var(--color-primary-800)]",
+				"[--interact:var(--color-primary-900)]",
+				"[--active:var(--color-primary-1000)]"
+			],
+			primaryDark: [
+				"[--base:var(--color-primary-1000)]",
+				"[--interact:var(--color-primary-1100)]",
+				"[--active:var(--color-primary-1200)]"
+			],
+			success: [
+				"[--base:var(--color-success)]",
+				"[--interact:var(--color-success-mid)]",
+				"[--active:var(--color-success-dark)]"
+			],
+			warning: [
+				"[--base:var(--color-warning)]",
+				"[--interact:var(--color-warning-mid)]",
+				"[--active:var(--color-warning-dark)]"
+			],
+			danger: [
+				"[--base:var(--color-danger)]",
+				"[--interact:var(--color-danger-mid)]",
+				"[--active:var(--color-danger-dark)]"
+			],
+			white: [
+				"[--base:var(--color-white)]",
+				"[--interact:var(--color-white)]",
+				"[--active:var(--color-white)]"
+			]
+		},
+		appearance: {
+			simple: [
+				"bg-transparent",
+				"text-(--base)",
+				"not-disabled:hover:text-(--interact)",
+				"not-disabled:focus:text-(--interact)",
+				"not-disabled:active:text-(--active)"
+			],
+			outline: [
+				"bg-[unset]",
+				"border",
+				"border-current",
+				"text-(--base)",
+				"not-disabled:hover:text-(--interact)",
+				"not-disabled:focus:text-(--interact)",
+				"not-disabled:active:text-(--active)"
+			],
+			solid: [
+				"bg-(--solid-base,var(--base))",
+				"text-(--solid-text,white)",
+				"not-disabled:hover:bg-(--solid-interact,var(--interact))",
+				"not-disabled:hover:text-(--solid-text,white)",
+				"not-disabled:focus:bg-(--solid-interact,var(--interact))",
+				"not-disabled:focus:text-(--solid-text,white)",
+				"not-disabled:active:bg-(--solid-active,var(--active))"
+			]
+		},
+		size: {
+			xs: ["size-6"],
+			sm: ["size-8"],
+			md: ["size-10"],
+			lg: ["size-12"]
+		},
+		isRounded: { true: ["rounded-full"] }
+	}
+}, { enableResponsiveVariants: true });
+var ActionIcon = ({ ref, children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, ...rest }) => {
+	const INVALID_CHILDREN_MESSAGE = `A single ${Icon.name} component is permitted as a child of ActionIcon`;
+	(0, invariant.default)(react.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionalTooltipWrapper, {
+		hasTooltip,
+		label,
+		tooltipSide,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton$5, {
+			...href ? {
+				as: "a",
+				href: disabled ? void 0 : href,
+				onClick: void 0,
+				"aria-disabled": !!disabled
+			} : { type: "button" },
+			...getExternalAnchorProps(href),
+			...rest,
+			"aria-label": label,
+			theme,
+			appearance,
+			size,
+			ref,
+			disabled,
+			children: react.Children.map(children, (child) => {
+				if (!react.isValidElement(child)) throw new Error(INVALID_CHILDREN_MESSAGE);
+				(0, invariant.default)(child.type === Icon, `Children of type ${child?.type} aren't permitted. Only an ${Icon.name} component is allowed in ActionIcon`);
+				return react.cloneElement(child, { size: ActionIconSizeMap[size] });
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/alert-dialog/AlertDialogContent.tsx
+var StyledAlertDialogOverlay = styled(_radix_ui_react_alert_dialog.Overlay, { base: [
+	"bg-alpha-600",
+	"top-0",
+	"right-0",
+	"bottom-0",
+	"left-0",
+	"fixed",
+	"z-1147483646",
+	"motion-safe:data-[state=open]:animate-fade-in",
+	"motion-safe:data-[state=closed]:animate-fade-out"
+] });
+var StyledAlertDialogContent = styled(_radix_ui_react_alert_dialog.Content, {
+	base: [
+		"transform-[translate(-50%,-50%)]",
+		"bg-white",
+		"rounded-md",
+		"shadow-xl",
+		"box-border",
+		"left-1/2",
+		"max-w-[90vw]",
+		"p-8",
+		"fixed",
+		"top-1/2",
+		"focus:outline-none",
+		"z-1147483646",
+		"motion-safe:data-[state=open]:animate-slide-in-center",
+		"motion-safe:data-[state=closed]:animate-slide-out-center"
+	],
+	variants: { size: {
+		sm: ["w-95"],
+		md: ["w-120"],
+		lg: ["w-150"]
+	} }
+});
+var AlertDialogContent = ({ size = "sm", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_alert_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAlertDialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAlertDialogContent, {
+	size,
+	...rest
+})] });
+//#endregion
+//#region src/components/alert-dialog/AlertDialog.tsx
+var AlertDialog = /* @__PURE__ */ Object.assign(_radix_ui_react_alert_dialog.Root, {
+	Description: _radix_ui_react_alert_dialog.Description,
+	Title: _radix_ui_react_alert_dialog.Title,
+	Action: _radix_ui_react_alert_dialog.Action,
+	Cancel: _radix_ui_react_alert_dialog.Cancel,
+	Content: AlertDialogContent,
+	Trigger: _radix_ui_react_alert_dialog.Trigger
+});
+AlertDialog.displayName = "AlertDialog";
+//#endregion
+//#region src/utilities/hooks/useIsMountedRef.ts
+var useIsMountedRef = () => {
+	const isMountedRef = (0, react.useRef)(void 0);
+	(0, react.useEffect)(() => {
+		isMountedRef.current = true;
+		return () => {
+			isMountedRef.current = false;
+		};
+	});
+	return isMountedRef;
+};
 //#endregion
-//#region src/components/action-icon/ActionIcon.constants.ts
-var ActionIconSizeMap = {
-	xs: "sm",
-	sm: "sm",
-	md: "md",
-	lg: "lg"
-};
+//#region src/components/loader/Loader.tsx
+var Dot$1 = styled("div", {
+	base: [
+		"animate-pulse",
+		"bg-current",
+		"rounded-full",
+		"animation-duration-900",
+		"nth-3:animation-delay-300",
+		"nth-4:animation-delay-600"
+	],
+	variants: { size: {
+		sm: ["size-1", "mx-0.5"],
+		md: ["size-1.5", "mx-0.5"],
+		lg: ["size-2", "mx-[3px]"]
+	} }
+});
+var Loader = ({ className, message = "Loading", size = "md", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: cn("flex", "justify-center", className),
+	role: "alert",
+	...rest,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: message
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot$1, { size }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot$1, { size }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot$1, { size })
+	]
+});
 //#endregion
-//#region src/components/action-icon/ActionIcon.tsx
-var StyledButton$5 = styled("button", {
+//#region src/components/button/Button.tsx
+var StyledButton = styled("button", {
 	base: [
 		"items-center",
-		"appearance-none",
-		"bg-white",
+		"bg-[unset]",
 		"rounded-md",
-		"box-border",
 		"cursor-pointer",
 		"flex",
-		"shrink-0",
+		"font-body",
+		"font-semibold",
 		"justify-center",
+		"no-underline",
 		"transition-all",
 		"duration-100",
 		"ease-out",
+		"whitespace-nowrap",
+		"w-max",
 		"disabled:cursor-not-allowed",
 		"disabled:opacity-30"
 	],
 	variants: {
-		theme: {
-			neutral: [
-				"[--solid-base:var(--color-white)]",
-				"[--solid-interact:var(--color-grey-100)]",
-				"[--solid-active:var(--color-grey-200)]",
-				"[--solid-text:var(--color-grey-1200)]",
-				"[--base:var(--color-grey-700)]",
-				"[--interact:var(--color-primary-900)]",
-				"[--active:var(--color-primary-1100)]"
-			],
-			primary: [
-				"[--base:var(--color-primary-800)]",
-				"[--interact:var(--color-primary-900)]",
-				"[--active:var(--color-primary-1000)]"
+		theme: {
+			primary: [
+				"[--base:var(--color-primary-800)]",
+				"[--interact:var(--color-primary-900)]",
+				"[--active:var(--color-primary-1000)]"
+			],
+			secondary: [
+				"[--base:var(--color-primary-1000)]",
+				"[--interact:var(--color-primary-1100)]",
+				"[--active:var(--color-primary-1200)]"
+			],
+			success: [
+				"[--base:var(--color-success)]",
+				"[--interact:var(--color-success-mid)]",
+				"[--active:var(--color-success-dark)]"
+			],
+			warning: [
+				"[--base:var(--color-warning)]",
+				"[--interact:var(--color-warning-mid)]",
+				"[--active:var(--color-warning-dark)]",
+				"[--text:var(--color-grey-800)]"
+			],
+			danger: [
+				"[--base:var(--color-danger)]",
+				"[--interact:var(--color-danger-mid)]",
+				"[--active:var(--color-danger-dark)]"
+			],
+			neutral: [
+				"[--base:white]",
+				"[--interact:rgba(255,255,255,0.9)]",
+				"[--active:rgba(255,255,255,0.75)]",
+				"[--text:var(--color-primary-800)]"
+			]
+		},
+		appearance: {
+			solid: [
+				"bg-(--base)",
+				"text-(--text,white)",
+				"disabled:opacity-30",
+				"disabled:cursor-not-allowed",
+				"not-disabled:hover:bg-(--interact)",
+				"not-disabled:hover:text-(--text,white)",
+				"not-disabled:focus:bg-(--interact)",
+				"not-disabled:focus:text-(--text,white)",
+				"not-disabled:active:bg-(--active)"
+			],
+			outline: [
+				"border",
+				"border-current",
+				"text-(--base)",
+				"disabled:opacity-30",
+				"disabled:cursor-not-allowed",
+				"not-disabled:hover:no-underline",
+				"not-disabled:hover:text-(--interact)",
+				"not-disabled:focus:no-underline",
+				"not-disabled:focus:text-(--interact)",
+				"not-disabled:active:text-(--active)"
+			]
+		},
+		size: {
+			sm: [
+				"text-sm",
+				"leading-[1.53]",
+				"h-8",
+				"px-4",
+				"gap-2",
+				"[&_svg]:size-4"
+			],
+			md: [
+				"text-md",
+				"leading-normal",
+				"h-10",
+				"px-8",
+				"gap-3",
+				"[&_svg]:size-5"
+			],
+			lg: [
+				"text-lg",
+				"leading-normal",
+				"h-12",
+				"px-8",
+				"gap-3",
+				"[&_svg]:size-[22px]"
+			],
+			xl: [
+				"text-lg",
+				"leading-normal",
+				"h-16",
+				"px-8",
+				"gap-3",
+				"[&_svg]:size-[22px]"
+			]
+		},
+		isLoading: { true: [
+			"cursor-not-allowed",
+			"opacity-60",
+			"pointer-events-none"
+		] },
+		fullWidth: {
+			true: ["w-full"],
+			false: ["w-max"]
+		}
+	},
+	defaultVariants: {
+		appearance: "solid",
+		size: "md",
+		theme: "primary"
+	}
+}, { enableResponsiveVariants: true });
+// @__PURE__ keeps this tree-shakable for consumers importing only
+var LoaderContentsWrapper = /* @__PURE__ */ styled("span", {
+	base: [
+		"items-center",
+		"flex",
+		"justify-center",
+		"invisible"
+	],
+	variants: { size: {
+		sm: ["gap-2"],
+		md: ["gap-3"],
+		lg: ["gap-3"],
+		xl: ["gap-3"]
+	} },
+	defaultVariants: { size: "md" }
+}, { enableResponsiveVariants: true });
+var WithLoader = ({ size, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Loader, { className: "absolute" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderContentsWrapper, {
+	size,
+	children
+})] });
+var Button = (({ ref, children, as, href, isLoading = false, onClick, disabled, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton, {
+	as: as || (href ? "a" : void 0),
+	...!disabled && !isLoading && {
+		href,
+		onClick
+	},
+	isLoading,
+	type: !href ? "button" : void 0,
+	disabled,
+	...rest,
+	...getExternalAnchorProps(href),
+	ref,
+	children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WithLoader, {
+		size: rest.size,
+		children
+	}) : children
+}));
+//#endregion
+//#region src/components/heading/Heading.tsx
+var Heading = styled("h2", {
+	base: ["m-0"],
+	variants: {
+		size: {
+			xs: [
+				"font-body",
+				"text-md",
+				"leading-normal",
+				"capsize-[0.3864]"
+			],
+			sm: [
+				"font-body",
+				"text-lg",
+				"leading-[1.14]",
+				"capsize-[0.2078]"
+			],
+			md: [
+				"font-display",
+				"text-xl",
+				"leading-[1.14]",
+				"tracking-[0.01em]",
+				"capsize-before-[0.2114]",
+				"capsize-after-[0.2634]"
+			],
+			lg: [
+				"font-display",
+				"text-2xl",
+				"leading-[1.08]",
+				"tracking-[0.01em]",
+				"capsize-before-[0.1405]",
+				"capsize-after-[0.2405]"
+			],
+			xl: [
+				"font-display",
+				"text-3xl",
+				"leading-[1.12]",
+				"capsize-before-[0.16]",
+				"capsize-after-[0.26]"
+			],
+			xxl: [
+				"font-display",
+				"text-4xl",
+				"leading-none",
+				"capsize-before-[0.1]",
+				"capsize-after-[0.2]"
+			]
+		},
+		noCapsize: { true: ["capsize-none"] },
+		weight: {
+			medium: ["font-medium"],
+			bold: ["font-bold"]
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		weight: "bold"
+	}
+}, { enableResponsiveVariants: true });
+//#endregion
+//#region src/components/text/Text.tsx
+var Text = styled("p", {
+	base: ["m-0"],
+	variants: {
+		size: {
+			xs: [
+				"text-xs",
+				"leading-[1.6]",
+				"capsize-[0.4364]"
 			],
-			primaryDark: [
-				"[--base:var(--color-primary-1000)]",
-				"[--interact:var(--color-primary-1100)]",
-				"[--active:var(--color-primary-1200)]"
+			sm: [
+				"text-sm",
+				"leading-[1.53]",
+				"capsize-[0.4056]"
 			],
-			success: [
-				"[--base:var(--color-success)]",
-				"[--interact:var(--color-success-mid)]",
-				"[--active:var(--color-success-dark)]"
+			md: [
+				"text-md",
+				"leading-normal",
+				"capsize-[0.3864]"
 			],
-			warning: [
-				"[--base:var(--color-warning)]",
-				"[--interact:var(--color-warning-mid)]",
-				"[--active:var(--color-warning-dark)]"
+			lg: [
+				"text-lg",
+				"leading-[1.52]",
+				"capsize-[0.3983]"
 			],
-			danger: [
-				"[--base:var(--color-danger)]",
-				"[--interact:var(--color-danger-mid)]",
-				"[--active:var(--color-danger-dark)]"
+			xl: [
+				"text-xl",
+				"leading-[1.42]",
+				"capsize-[0.3506]"
 			],
-			white: [
-				"[--base:var(--color-white)]",
-				"[--interact:var(--color-white)]",
-				"[--active:var(--color-white)]"
-			]
-		},
-		appearance: {
-			simple: [
-				"bg-transparent",
-				"text-(--base)",
-				"not-disabled:hover:text-(--interact)",
-				"not-disabled:focus:text-(--interact)",
-				"not-disabled:active:text-(--active)"
+			"2xl": [
+				"text-2xl",
+				"leading-[1.40]",
+				"capsize-[0.3336]"
 			],
-			outline: [
-				"bg-[unset]",
-				"border",
-				"border-current",
-				"text-(--base)",
-				"not-disabled:hover:text-(--interact)",
-				"not-disabled:focus:text-(--interact)",
-				"not-disabled:active:text-(--active)"
+			"3xl": [
+				"text-3xl",
+				"leading-[1.28]",
+				"capsize-[0.2709]"
 			],
-			solid: [
-				"bg-(--solid-base,var(--base))",
-				"text-(--solid-text,white)",
-				"not-disabled:hover:bg-(--solid-interact,var(--interact))",
-				"not-disabled:hover:text-(--solid-text,white)",
-				"not-disabled:focus:bg-(--solid-interact,var(--interact))",
-				"not-disabled:focus:text-(--solid-text,white)",
-				"not-disabled:active:bg-(--solid-active,var(--active))"
+			"4xl": [
+				"text-4xl",
+				"leading-none",
+				"capsize-[0.1309]"
 			]
 		},
-		size: {
-			xs: ["size-6"],
-			sm: ["size-8"],
-			md: ["size-10"],
-			lg: ["size-12"]
+		noCapsize: { true: ["capsize-none"] },
+		weight: {
+			normal: ["font-normal"],
+			bold: ["font-semibold"]
 		},
-		isRounded: { true: ["rounded-full"] }
+		family: {
+			body: ["font-body"],
+			display: ["font-display"],
+			mono: ["font-mono"]
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		family: "body"
 	}
 }, { enableResponsiveVariants: true });
-var ActionIcon = ({ ref, children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, ...rest }) => {
-	const INVALID_CHILDREN_MESSAGE = `A single ${Icon.name} component is permitted as a child of ActionIcon`;
-	(0, invariant.default)(react.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionalTooltipWrapper, {
-		hasTooltip,
-		label,
-		tooltipSide,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton$5, {
-			...href ? {
-				as: "a",
-				href: disabled ? void 0 : href,
-				onClick: void 0,
-				"aria-disabled": !!disabled
-			} : { type: "button" },
-			...getExternalAnchorProps(href),
-			...rest,
-			"aria-label": label,
-			theme,
-			appearance,
-			size,
-			ref,
-			disabled,
-			children: react.Children.map(children, (child) => {
-				if (!react.isValidElement(child)) throw new Error(INVALID_CHILDREN_MESSAGE);
-				(0, invariant.default)(child.type === Icon, `Children of type ${child?.type} aren't permitted. Only an ${Icon.name} component is allowed in ActionIcon`);
-				return react.cloneElement(child, { size: ActionIconSizeMap[size] });
+//#endregion
+//#region src/components/alert-dialog/alert-context/AlertDialogIcon.tsx
+var StyledIcon$2 = styled(Icon, {
+	base: ["self-start"],
+	variants: { theme: {
+		info: ["text-info"],
+		warning: ["text-warning-mid"],
+		danger: ["rotate-180", "text-danger"],
+		success: ["text-success"]
+	} }
+});
+var iconMap = {
+	info: _atom_learning_icons.Info,
+	warning: _atom_learning_icons.Danger,
+	danger: _atom_learning_icons.Info,
+	success: _atom_learning_icons.OkCircle
+};
+var AlertDialogIcon = ({ theme }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon$2, {
+	theme,
+	is: iconMap[theme]
+});
+//#endregion
+//#region src/components/alert-dialog/alert-context/AlertDialog.tsx
+var Alert$1 = ({ title, size, theme, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialog, {
+	defaultOpen: true,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertDialog.Content, {
+		size,
+		onEscapeKeyDown: (e) => e.preventDefault(),
+		onCloseAutoFocus: onClose,
+		...rest,
+		className: "flex max-h-[90vh] flex-col gap-8",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [theme && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogIcon, { theme }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+					as: AlertDialog.Title,
+					size: "sm",
+					className: "mr-4",
+					children: title
+				})]
+			}),
+			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
+				as: AlertDialog.Description,
+				className: "flex overflow-y-auto",
+				children: description
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap justify-end gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialog.Cancel, {
+					asChild: true,
+					children: cancelElement || cancelActionText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						size: "sm",
+						appearance: "outline",
+						onClick: () => onAction?.(false),
+						children: cancelActionText
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialog.Action, {
+					asChild: true,
+					children: confirmElement || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						size: "sm",
+						onClick: () => onAction?.(true),
+						children: confirmActionText
+					})
+				})]
 			})
-		})
+		]
+	})
+});
+//#endregion
+//#region src/components/alert-dialog/alert-context/reducer.ts
+var initialState = [];
+var reducer = (state, action) => {
+	switch (action.type) {
+		case "ADD": return [...state, action.payload];
+		case "REMOVE": return state.filter(({ id }) => id !== action.payload);
+		default: return state;
+	}
+};
+//#endregion
+//#region src/components/alert-dialog/AlertDialog.context.tsx
+var AlertContext = react.createContext(void 0);
+var AlertProvider = ({ children }) => {
+	const [alerts, dispatch] = react.useReducer(reducer, initialState);
+	const isMountedRef = useIsMountedRef();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertContext, {
+		value: react.useMemo(() => ({ showAlert: (content) => dispatch({
+			payload: {
+				...content,
+				id: crypto.randomUUID()
+			},
+			type: "ADD"
+		}) }), []),
+		children: [Boolean(alerts.length) && /* @__PURE__ */ (0, react.createElement)(Alert$1, {
+			...alerts[0],
+			key: alerts[0].id,
+			onClose: () => {
+				if (isMountedRef.current) dispatch({
+					payload: alerts[0].id,
+					type: "REMOVE"
+				});
+			}
+		}), children]
 	});
 };
+var useAlert = () => {
+	const context = react.use(AlertContext);
+	if (context === void 0) throw new Error("useAlert must be used within a AlertProvider");
+	return context;
+};
+//#endregion
+//#region src/components/alert-dialog/Alert.ts
+var Alert = { Provider: AlertProvider };
 //#endregion
 //#region src/components/avatar/Avatar.context.tsx
 var AvatarRootContext = react.createContext({
@@ -7108,9 +7108,9 @@ var generateNodeKey = (node, index) => {
 	return `${node.type}${index}`;
 };
 var MarkdownContent = ({ content, customComponents = {}, className }) => {
-	const AST = (0, mdast_util_from_markdown.default)(content, {
-		extensions: [(0, micromark_extension_directive.default)()],
-		mdastExtensions: [mdast_util_directive.default.fromMarkdown]
+	const AST = (0, mdast_util_from_markdown.fromMarkdown)(content, {
+		extensions: [(0, micromark_extension_directive.directive)()],
+		mdastExtensions: [(0, mdast_util_directive.directiveFromMarkdown)()]
 	});
 	const componentsMap = {
 		...defaultComponentsMap,
@@ -11082,9 +11082,6 @@ FileDrop.displayName = "FileDrop";
 //#region src/components/file-drop/useFileDrop.ts
 var useFileDrop = () => react.use(FileDropContext);
 //#endregion
-//#region src/components/index.ts
-var Alert = { Provider: AlertProvider };
-//#endregion
 exports.Accordion = Accordion;
 exports.ActionIcon = ActionIcon;
 exports.Alert = Alert;