@jordan-mace/chaser-design-system 1.2.7 → 1.2.9

package/dist/index.mjs

@@ -0,0 +1,4729 @@
+import { componentsLayer, resetLayer } from "./styles/layers.css.mjs";
+import { sprinkles } from "./styles/sprinkles.css.mjs";
+import { vars } from "./styles/theme.css.mjs";
+import "./styles/reset.css.mjs";
+import clsx from "clsx";
+import { keyframes, style, styleVariants } from "@vanilla-extract/css";
+import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+//#region src/styles/utils.ts
+const styleWithLayer = (rule) => style({ "@layer": { [componentsLayer]: rule } });
+
+//#endregion
+//#region src/components/Button/styles.css.ts
+const buttonVariants = styleVariants({
+	primary: {
+		backgroundColor: vars.colors.buttonBackgroundPrimary,
+		color: vars.colors.buttonTextPrimary,
+		":focus-visible": { backgroundColor: vars.colors.buttonBackgroundFocusedPrimary },
+		":hover": { backgroundColor: vars.colors.buttonBackgroundFocusedPrimary }
+	},
+	secondary: {
+		backgroundColor: vars.colors.buttonBackgroundSecondary,
+		color: vars.colors.buttonTextSecondary,
+		":focus-visible": { backgroundColor: vars.colors.buttonBackgroundFocusedSecondary },
+		":hover": { backgroundColor: vars.colors.buttonBackgroundFocusedSecondary }
+	}
+});
+const button = styleWithLayer({
+	padding: "1rem",
+	borderRadius: "1rem",
+	border: 0
+});
+
+//#endregion
+//#region src/components/Box/reset.css.ts
+const reset = style({ "@layer": { [resetLayer]: {
+	margin: 0,
+	padding: 0,
+	border: 0,
+	boxSizing: "border-box",
+	fontSize: "100%",
+	font: "inherit",
+	verticalAlign: "baseline"
+} } });
+
+//#endregion
+//#region src/components/Box/Box.tsx
+const Box = forwardRef((props, ref) => {
+	const { as: Component = "div", className, children, ...rest } = props;
+	const sprinkleProps = {};
+	const otherProps = { ref };
+	const sprinkleKeys = new Set([
+		"display",
+		"width",
+		"height",
+		"flexDirection",
+		"justifyContent",
+		"alignItems",
+		"paddingTop",
+		"paddingBottom",
+		"paddingLeft",
+		"paddingRight",
+		"marginLeft",
+		"marginRight",
+		"marginTop",
+		"marginBottom",
+		"borderLeft",
+		"borderRight",
+		"borderTop",
+		"borderBottom",
+		"borderRadius",
+		"gap",
+		"padding",
+		"border",
+		"paddingX",
+		"paddingY",
+		"marginX",
+		"marginY",
+		"placeItems",
+		"color",
+		"background"
+	]);
+	Object.entries(rest).forEach(([key, value]) => {
+		if (sprinkleKeys.has(key)) {
+			sprinkleProps[key] = value;
+		} else {
+			otherProps[key] = value;
+		}
+	});
+	return React.createElement(Component, {
+		className: clsx(reset, sprinkles(sprinkleProps), className),
+		...otherProps
+	}, children);
+});
+Box.displayName = "Box";
+
+//#endregion
+//#region src/components/Button/Button.tsx
+const Button = ({ label, ...props }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		borderRadius: "large",
+		width: props.fullWidth ? "100%" : undefined,
+		className: clsx(buttonVariants[props.variant], button, props.className),
+		...props
+	}, props.children || label);
+};
+
+//#endregion
+//#region src/components/List/styles.css.ts
+const list = style({
+	listStyle: "none",
+	padding: 0,
+	margin: 0
+});
+const listItem = style({
+	padding: "0.5rem 0",
+	borderBottom: `1px solid ${vars.colors.listBorder}`
+});
+
+//#endregion
+//#region src/components/List/List.tsx
+const List = ({ children, ...props }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "ul",
+		className: list,
+		...props
+	}, children);
+};
+
+//#endregion
+//#region src/components/List/ListItem.tsx
+const ListItem = ({ children, ...props }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "li",
+		className: listItem,
+		...props
+	}, children);
+};
+
+//#endregion
+//#region src/components/Input/styles.css.ts
+const inputStyle = styleWithLayer({
+	padding: "0.5rem 1rem",
+	borderRadius: "0.5rem"
+});
+const label$1 = styleWithLayer({ paddingRight: "0.5rem" });
+
+//#endregion
+//#region src/components/Text/styles.css.ts
+const text = style({
+	color: vars.colors.textPrimary,
+	fontFamily: vars.fontFamily.body,
+	lineHeight: "24px"
+});
+const heading = style({
+	color: vars.colors.textPrimary,
+	fontFamily: vars.fontFamily.heading,
+	lineHeight: "32px",
+	fontWeight: "700"
+});
+
+//#endregion
+//#region src/components/Input/Input.tsx
+const Input = (props) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: {
+			mobile: "column",
+			tablet: "row"
+		},
+		gap: "small"
+	}, props.label && /* @__PURE__ */ React.createElement(Box, {
+		as: "label",
+		className: clsx(text, label$1),
+		marginX: {
+			mobile: "auto",
+			tablet: "none"
+		},
+		marginY: {
+			mobile: "none",
+			tablet: "auto"
+		},
+		htmlFor: props.id
+	}, props.label), /* @__PURE__ */ React.createElement(Box, {
+		as: "input",
+		className: clsx(inputStyle, props.className),
+		width: props.fullWidth ? "100%" : undefined,
+		...props
+	}));
+};
+
+//#endregion
+//#region src/components/Form/styles.css.ts
+const formStyle = styleWithLayer({
+	display: "grid",
+	gridTemplateRows: "min-content 1fr min-content"
+});
+const formInputStyle = styleWithLayer({
+	display: "flex",
+	flexDirection: "row",
+	justifyContent: "space-between",
+	alignItems: "center"
+});
+
+//#endregion
+//#region src/components/Form/Form.tsx
+const Form = (props) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "form",
+		gap: "medium",
+		paddingX: "large",
+		className: clsx(formStyle, props.className),
+		...props
+	}, props.children);
+};
+
+//#endregion
+//#region src/components/Form/FormInput.tsx
+const FormInput = (props) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: Input,
+		padding: "small",
+		className: clsx(formInputStyle, props.className),
+		label: props.label,
+		...props
+	});
+};
+
+//#endregion
+//#region src/components/Navbar/styles.css.ts
+const navbarStyle = styleWithLayer({});
+const navbarItemStyle = styleWithLayer({});
+
+//#endregion
+//#region src/components/Navbar/Navbar.tsx
+const Navbar = (props) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "nav",
+		width: "100%",
+		display: "flex",
+		flexDirection: "row",
+		gap: "medium",
+		className: clsx(navbarStyle, props.className),
+		...props
+	});
+};
+
+//#endregion
+//#region src/components/Navbar/NavbarItem.tsx
+const NavbarItem = (props) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: clsx(navbarItemStyle, props.className),
+		...props
+	});
+};
+
+//#endregion
+//#region src/components/Card/styles.css.ts
+const cardVariants = styleVariants({
+	elevated: {
+		backgroundColor: vars.colors.backgroundDefault,
+		boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
+		border: "none"
+	},
+	outlined: {
+		backgroundColor: vars.colors.backgroundDefault,
+		border: `1px solid ${vars.colors.borderDefault}`,
+		boxShadow: "none"
+	},
+	filled: {
+		backgroundColor: vars.colors.backgroundMuted,
+		border: "none",
+		boxShadow: "none"
+	}
+});
+const card = styleWithLayer({
+	display: "block",
+	position: "relative",
+	transition: "all 0.2s ease-in-out"
+});
+
+//#endregion
+//#region src/components/Card/Card.tsx
+const Card = ({ variant = "elevated", padding = "medium", ...props }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		borderRadius: "large",
+		padding: padding !== "none" ? padding : undefined,
+		className: clsx(cardVariants[variant], card, props.className),
+		...props
+	}, props.children);
+};
+
+//#endregion
+//#region src/components/Alert/styles.css.ts
+const alertVariants = styleVariants({
+	success: {
+		backgroundColor: vars.colors.alertSuccessBackground,
+		borderLeftColor: vars.colors.alertSuccessBorder,
+		color: vars.colors.alertSuccessText
+	},
+	warning: {
+		backgroundColor: vars.colors.alertWarningBackground,
+		borderLeftColor: vars.colors.alertWarningBorder,
+		color: vars.colors.alertWarningText
+	},
+	error: {
+		backgroundColor: vars.colors.alertErrorBackground,
+		borderLeftColor: vars.colors.alertErrorBorder,
+		color: vars.colors.alertErrorText
+	},
+	info: {
+		backgroundColor: vars.colors.alertInfoBackground,
+		borderLeftColor: vars.colors.alertInfoBorder,
+		color: vars.colors.alertInfoText
+	}
+});
+const alert = styleWithLayer({
+	padding: "1rem",
+	borderLeft: "4px solid",
+	borderRadius: "0.5rem",
+	display: "flex",
+	alignItems: "flex-start",
+	gap: "0.5rem",
+	fontFamily: vars.fontFamily.body,
+	fontSize: "0.875rem",
+	lineHeight: "1.5"
+});
+const alertContent = styleWithLayer({ flex: 1 });
+const alertDismissButton = styleWithLayer({
+	background: "none",
+	border: "none",
+	padding: "0.25rem",
+	cursor: "pointer",
+	borderRadius: "0.25rem",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	opacity: .7,
+	transition: "opacity 0.2s ease-in-out",
+	":hover": { opacity: 1 }
+});
+
+//#endregion
+//#region src/components/Alert/Alert.tsx
+const Alert = ({ severity = "info", dismissible = false, onDismiss, children, ...props }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		role: "alert",
+		className: clsx(alert, alertVariants[severity], props.className),
+		...props
+	}, /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: alertContent
+	}, children), dismissible && onDismiss && /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		className: alertDismissButton,
+		onClick: onDismiss,
+		"aria-label": "Dismiss alert",
+		type: "button"
+	}, "×"));
+};
+
+//#endregion
+//#region src/components/Text/P.tsx
+const P = (props) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "p",
+		className: clsx(props.className, text)
+	}, props.children);
+};
+
+//#endregion
+//#region src/components/Text/Header.tsx
+const Header = ({ variant, children, className }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: variant,
+		className: clsx(className, text, heading)
+	}, children);
+};
+
+//#endregion
+//#region src/components/Modal/styles.css.ts
+const modalVariants = styleVariants({
+	small: { maxWidth: "400px" },
+	medium: { maxWidth: "600px" },
+	large: { maxWidth: "800px" },
+	full: { maxWidth: "95vw" }
+});
+const modal = styleWithLayer({
+	background: vars.colors.backgroundDefault,
+	borderRadius: "0.75rem",
+	boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+	border: "1px solid var(--modal-border, transparent)",
+	color: vars.colors.textPrimary,
+	fontFamily: vars.fontFamily.body,
+	maxWidth: "90vw",
+	maxHeight: "90vh",
+	flexDirection: "column",
+	overflow: "hidden",
+	selectors: {
+		"&:not([open])": { display: "none" },
+		"[open] &": { display: "flex" },
+		"&::backdrop": { backgroundColor: "rgba(0, 0, 0, 0.5)" }
+	}
+});
+const modalHeader = styleWithLayer({
+	padding: "1.25rem",
+	borderBottom: `1px solid ${vars.colors.borderMuted}`,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: "1rem"
+});
+const modalTitle = styleWithLayer({
+	fontFamily: vars.fontFamily.heading,
+	fontSize: "1.25rem",
+	fontWeight: "600",
+	color: vars.colors.textPrimary,
+	margin: 0
+});
+const modalCloseButton = styleWithLayer({
+	background: "none",
+	border: "none",
+	padding: "0.5rem",
+	cursor: "pointer",
+	borderRadius: "0.375rem",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	color: vars.colors.textSecondary,
+	fontSize: "1.5rem",
+	lineHeight: "1",
+	transition: "background-color 0.2s ease-in-out, color 0.2s ease-in-out",
+	selectors: {
+		"&:hover": {
+			backgroundColor: vars.colors.borderMuted,
+			color: vars.colors.textPrimary
+		},
+		"&:focus-visible": {
+			outline: "2px solid var(--modal-focus-ring, currentColor)",
+			outlineOffset: "2px"
+		}
+	}
+});
+const modalBody = styleWithLayer({
+	padding: "1.25rem",
+	overflowY: "auto",
+	flex: 1
+});
+const modalFooter = styleWithLayer({
+	padding: "1.25rem",
+	borderTop: `1px solid ${vars.colors.borderMuted}`,
+	display: "flex",
+	gap: "0.75rem",
+	justifyContent: "flex-end",
+	alignItems: "center"
+});
+
+//#endregion
+//#region src/components/Modal/Modal.tsx
+const Modal = ({ isOpen, onClose, title, size = "medium", children, footer, showCloseButton = true, ...props }) => {
+	const dialogRef = useRef(null);
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog) return;
+		if (isOpen) {
+			dialog.showModal();
+			dialog.classList.add("open");
+		} else {
+			dialog.close();
+			dialog.classList.remove("open");
+		}
+		const handleClose = () => {
+			onClose();
+		};
+		dialog.addEventListener("close", handleClose);
+		return () => {
+			dialog.removeEventListener("close", handleClose);
+		};
+	}, [isOpen, onClose]);
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "dialog",
+		ref: dialogRef,
+		className: clsx(modal, modalVariants[size]),
+		onClick: (e) => {
+			if (e.target === dialogRef.current) {
+				onClose();
+			}
+		},
+		...props
+	}, title && /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: modalHeader
+	}, /* @__PURE__ */ React.createElement(Box, {
+		as: "h2",
+		className: modalTitle
+	}, title), showCloseButton && /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		className: modalCloseButton,
+		onClick: onClose,
+		"aria-label": "Close modal",
+		type: "button"
+	}, "×")), /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: modalBody
+	}, children), footer && /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: modalFooter
+	}, footer));
+};
+
+//#endregion
+//#region src/components/Badge/styles.css.ts
+const badgeVariants = styleVariants({
+	default: {
+		backgroundColor: vars.colors.borderDefault,
+		color: vars.colors.textPrimary
+	},
+	success: {
+		backgroundColor: vars.colors.alertSuccessBackground,
+		color: vars.colors.alertSuccessText,
+		border: `1px solid ${vars.colors.alertSuccessBorder}`
+	},
+	warning: {
+		backgroundColor: vars.colors.alertWarningBackground,
+		color: vars.colors.alertWarningText,
+		border: `1px solid ${vars.colors.alertWarningBorder}`
+	},
+	error: {
+		backgroundColor: vars.colors.alertErrorBackground,
+		color: vars.colors.alertErrorText,
+		border: `1px solid ${vars.colors.alertErrorBorder}`
+	},
+	info: {
+		backgroundColor: vars.colors.alertInfoBackground,
+		color: vars.colors.alertInfoText,
+		border: `1px solid ${vars.colors.alertInfoBorder}`
+	}
+});
+const badgeSizes = styleVariants({
+	small: {
+		fontSize: "0.7rem",
+		padding: "0.125rem 0.375rem",
+		borderRadius: "0.25rem"
+	},
+	medium: {
+		fontSize: "0.75rem",
+		padding: "0.25rem 0.5rem",
+		borderRadius: "0.375rem"
+	},
+	large: {
+		fontSize: "0.875rem",
+		padding: "0.375rem 0.625rem",
+		borderRadius: "0.5rem"
+	}
+});
+const badge = styleWithLayer({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	fontWeight: "500",
+	whiteSpace: "nowrap",
+	fontFamily: vars.fontFamily.body,
+	transition: "background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out"
+});
+const badgeDot = styleWithLayer({
+	width: "0.5rem",
+	height: "0.5rem",
+	borderRadius: "50%",
+	display: "inline-block",
+	padding: 0,
+	minWidth: "auto"
+});
+const badgeDotSizes = styleVariants({
+	small: {
+		width: "0.375rem",
+		height: "0.375rem"
+	},
+	medium: {
+		width: "0.5rem",
+		height: "0.5rem"
+	},
+	large: {
+		width: "0.625rem",
+		height: "0.625rem"
+	}
+});
+
+//#endregion
+//#region src/components/Badge/Badge.tsx
+const Badge = ({ variant = "default", size = "medium", dot = false, children, ...props }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		className: clsx(badge, badgeVariants[variant], dot ? badgeDot : badgeSizes[size], dot && badgeDotSizes[size], props.className),
+		...props
+	}, dot ? null : children);
+};
+
+//#endregion
+//#region src/components/Divider/styles.css.ts
+const dividerOrientations = styleVariants({
+	horizontal: {
+		width: "100%",
+		height: "1px",
+		borderTop: `1px solid ${vars.colors.borderMuted}`
+	},
+	vertical: {
+		width: "1px",
+		height: "100%",
+		borderLeft: `1px solid ${vars.colors.borderMuted}`
+	}
+});
+const dividerSizes = styleVariants({
+	small: { margin: "0.5rem 0" },
+	medium: { margin: "1rem 0" },
+	large: { margin: "1.5rem 0" }
+});
+const divider = styleWithLayer({
+	border: "none",
+	flexShrink: 0
+});
+const dividerVerticalSizes = styleVariants({
+	small: { margin: "0 0.5rem" },
+	medium: { margin: "0 1rem" },
+	large: { margin: "0 1.5rem" }
+});
+
+//#endregion
+//#region src/components/Divider/Divider.tsx
+const Divider = ({ orientation = "horizontal", size = "medium", ...props }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "hr",
+		className: clsx(divider, dividerOrientations[orientation], orientation === "vertical" ? dividerVerticalSizes[size] : dividerSizes[size], props.className),
+		role: "separator",
+		"aria-orientation": orientation,
+		...props
+	});
+};
+
+//#endregion
+//#region src/components/Spinner/styles.css.ts
+const spin = keyframes({
+	"0%": { transform: "rotate(0deg)" },
+	"100%": { transform: "rotate(360deg)" }
+});
+const spinnerColors = styleVariants({
+	primary: {
+		borderColor: vars.colors.borderDefault,
+		borderTopColor: vars.colors.buttonBackgroundPrimary
+	},
+	secondary: {
+		borderColor: vars.colors.borderDefault,
+		borderTopColor: vars.colors.buttonBackgroundSecondary
+	},
+	success: {
+		borderColor: vars.colors.borderDefault,
+		borderTopColor: vars.colors.alertSuccessBorder
+	},
+	warning: {
+		borderColor: vars.colors.borderDefault,
+		borderTopColor: vars.colors.alertWarningBorder
+	},
+	error: {
+		borderColor: vars.colors.borderDefault,
+		borderTopColor: vars.colors.alertErrorBorder
+	},
+	info: {
+		borderColor: vars.colors.borderDefault,
+		borderTopColor: vars.colors.alertInfoBorder
+	}
+});
+const spinnerSizes = styleVariants({
+	small: {
+		width: "1rem",
+		height: "1rem",
+		borderWidth: "2px"
+	},
+	medium: {
+		width: "1.5rem",
+		height: "1.5rem",
+		borderWidth: "3px"
+	},
+	large: {
+		width: "2rem",
+		height: "2rem",
+		borderWidth: "4px"
+	}
+});
+const spinner = style({
+	borderRadius: "50%",
+	borderStyle: "solid",
+	animation: `${spin} 1s linear infinite`,
+	display: "inline-block"
+});
+
+//#endregion
+//#region src/components/Spinner/Spinner.tsx
+const Spinner = ({ color = "primary", size = "medium", role = "status", ...props }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: clsx(spinner, spinnerColors[color], spinnerSizes[size], props.className),
+		role,
+		"aria-label": "Loading",
+		...props
+	});
+};
+
+//#endregion
+//#region src/components/Tooltip/styles.css.ts
+const tooltipPositions = styleVariants({
+	top: {
+		bottom: "100%",
+		marginBottom: "0.25rem",
+		left: "50%",
+		transform: "translateX(-50%)"
+	},
+	bottom: {
+		top: "100%",
+		marginTop: "0.25rem",
+		left: "50%",
+		transform: "translateX(-50%)"
+	},
+	left: {
+		right: "100%",
+		marginRight: "0.25rem",
+		top: "50%",
+		transform: "translateY(-50%)"
+	},
+	right: {
+		left: "100%",
+		marginLeft: "0.25rem",
+		top: "50%",
+		transform: "translateY(-50%)"
+	}
+});
+const tooltipContainer = styleWithLayer({
+	position: "relative",
+	display: "inline-flex"
+});
+const tooltipContent = styleWithLayer({
+	position: "absolute",
+	backgroundColor: vars.colors.textPrimary,
+	color: vars.colors.backgroundDefault,
+	padding: "0.375rem 0.75rem",
+	borderRadius: "0.375rem",
+	fontSize: "0.75rem",
+	whiteSpace: "nowrap",
+	zIndex: 1001,
+	boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+	opacity: 0,
+	visibility: "hidden",
+	transition: "opacity 0.2s ease-in-out, visibility 0.2s ease-in-out",
+	pointerEvents: "none",
+	selectors: { "&[data-visible=\"true\"]": {
+		opacity: 1,
+		visibility: "visible"
+	} }
+});
+const tooltipArrow = styleWithLayer({
+	position: "absolute",
+	width: "0",
+	height: "0",
+	borderStyle: "solid",
+	borderWidth: "0.25rem",
+	borderColor: "transparent"
+});
+const tooltipArrowTop = styleWithLayer({
+	bottom: "-0.25rem",
+	left: "50%",
+	transform: "translateX(-50%)",
+	borderTopColor: vars.colors.textPrimary
+});
+const tooltipArrowBottom = styleWithLayer({
+	top: "-0.25rem",
+	left: "50%",
+	transform: "translateX(-50%)",
+	borderBottomColor: vars.colors.textPrimary
+});
+const tooltipArrowLeft = styleWithLayer({
+	right: "-0.25rem",
+	top: "50%",
+	transform: "translateY(-50%)",
+	borderLeftColor: vars.colors.textPrimary
+});
+const tooltipArrowRight = styleWithLayer({
+	left: "-0.25rem",
+	top: "50%",
+	transform: "translateY(-50%)",
+	borderRightColor: vars.colors.textPrimary
+});
+
+//#endregion
+//#region src/components/Tooltip/Tooltip.tsx
+const Tooltip = ({ content, position = "top", showArrow = true, children, ...props }) => {
+	const [isVisible, setIsVisible] = useState(false);
+	const arrowStyle = {
+		top: position === "bottom" ? tooltipArrowBottom : undefined,
+		bottom: position === "top" ? tooltipArrowTop : undefined,
+		left: position === "right" ? tooltipArrowLeft : undefined,
+		right: position === "left" ? tooltipArrowRight : undefined
+	};
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: clsx(tooltipContainer, props.className),
+		onMouseEnter: () => setIsVisible(true),
+		onMouseLeave: () => setIsVisible(false),
+		onFocus: () => setIsVisible(true),
+		onBlur: () => setIsVisible(false),
+		...props
+	}, children, /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: clsx(tooltipContent, tooltipPositions[position]),
+		"data-visible": isVisible,
+		role: "tooltip"
+	}, showArrow && /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		className: clsx(tooltipArrow, arrowStyle.top, arrowStyle.bottom, arrowStyle.left, arrowStyle.right)
+	}), content));
+};
+
+//#endregion
+//#region src/components/Toggle/styles.css.ts
+const toggleSizes = styleVariants({
+	small: {
+		width: "1.5rem",
+		height: "0.75rem"
+	},
+	medium: {
+		width: "2rem",
+		height: "1rem"
+	},
+	large: {
+		width: "2.5rem",
+		height: "1.25rem"
+	}
+});
+const toggleLabel = styleWithLayer({
+	display: "inline-flex",
+	alignItems: "center",
+	cursor: "pointer"
+});
+const toggle = styleWithLayer({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	selectors: { "&:has(input:disabled)": {
+		cursor: "not-allowed",
+		opacity: .5
+	} }
+});
+const toggleInput = styleWithLayer({
+	position: "absolute",
+	opacity: 0,
+	width: 0,
+	height: 0,
+	cursor: "pointer"
+});
+const toggleTrack = styleWithLayer({
+	borderRadius: "9999px",
+	transition: "background-color 0.2s ease-in-out",
+	backgroundColor: vars.colors.borderDefault,
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	cursor: "pointer",
+	selectors: { "&:hover": { backgroundColor: vars.colors.borderMuted } }
+});
+const toggleTrackChecked = styleWithLayer({
+	backgroundColor: vars.colors.buttonBackgroundPrimary,
+	selectors: { "&:hover": { backgroundColor: vars.colors.buttonBackgroundFocusedPrimary } }
+});
+const toggleTrackUnchecked = styleWithLayer({ backgroundColor: vars.colors.borderDefault });
+const toggleThumb = styleWithLayer({
+	borderRadius: "50%",
+	backgroundColor: vars.colors.backgroundDefault,
+	position: "absolute",
+	transition: "transform 0.2s ease-in-out, background-color 0.2s ease-in-out",
+	top: "50%",
+	left: "0",
+	transform: "translateY(-50%)"
+});
+const toggleThumbSizes = styleVariants({
+	small: {
+		width: "0.5rem",
+		height: "0.5rem"
+	},
+	medium: {
+		width: "0.75rem",
+		height: "0.75rem"
+	},
+	large: {
+		width: "1rem",
+		height: "1rem"
+	}
+});
+const toggleThumbChecked = styleWithLayer({
+	transform: "translateY(-50%) translateX(1.25rem)",
+	backgroundColor: vars.colors.backgroundDefault,
+	selectors: {
+		"[data-size=\"small\"] &": { transform: "translateY(-50%) translateX(1rem)" },
+		"[data-size=\"large\"] &": { transform: "translateY(-50%) translateX(1.5rem)" }
+	}
+});
+const toggleThumbUnchecked = styleWithLayer({
+	transform: "translateY(-50%) translateX(0)",
+	backgroundColor: vars.colors.backgroundDefault
+});
+const toggleFocusRing = styleWithLayer({
+	position: "absolute",
+	inset: "-0.25rem",
+	borderRadius: "0.5rem",
+	pointerEvents: "none",
+	opacity: 0,
+	transition: "opacity 0.2s ease-in-out",
+	boxShadow: `0 0 0 3px ${vars.colors.buttonBackgroundPrimary}`,
+	selectors: { "[data-focused=\"true\"] &": { opacity: 1 } }
+});
+
+//#endregion
+//#region src/components/Toggle/Toggle.tsx
+const Toggle = ({ checked = false, onChange, size = "medium", label, disabled = false, id, ...props }) => {
+	const [isFocused, setIsFocused] = useState(false);
+	const generatedId = useId();
+	const toggleId = id || `toggle-${generatedId}`;
+	const handleChange = (e) => {
+		if (!disabled && onChange) {
+			onChange(e.target.checked);
+		}
+	};
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: toggle
+	}, /* @__PURE__ */ React.createElement(Box, {
+		as: "label",
+		htmlFor: toggleId,
+		className: toggleLabel
+	}, /* @__PURE__ */ React.createElement(Box, {
+		as: "input",
+		type: "checkbox",
+		id: toggleId,
+		checked,
+		onChange: handleChange,
+		disabled,
+		className: toggleInput,
+		onFocus: () => setIsFocused(true),
+		onBlur: () => setIsFocused(false),
+		"aria-checked": checked,
+		role: "switch",
+		...props
+	}), /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		className: clsx(toggleTrack, toggleSizes[size], checked ? toggleTrackChecked : toggleTrackUnchecked),
+		"data-size": size
+	}, /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		className: clsx(toggleThumb, toggleThumbSizes[size], checked ? toggleThumbChecked : toggleThumbUnchecked)
+	})), /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		className: toggleFocusRing,
+		"data-focused": isFocused,
+		"aria-hidden": "true"
+	})), label && /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		marginLeft: "small"
+	}, label));
+};
+
+//#endregion
+//#region src/components/Checkbox/styles.css.ts
+const checkboxContainer = styleWithLayer({
+	display: "flex",
+	alignItems: "center",
+	gap: "8px",
+	cursor: "pointer",
+	userSelect: "none"
+});
+const checkboxInput = style({
+	width: "18px",
+	height: "18px",
+	border: `2px solid ${vars.colors.borderDefault}`,
+	borderRadius: "4px",
+	cursor: "pointer",
+	accentColor: vars.colors.buttonBackgroundPrimary,
+	":focus-visible": {
+		outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+		outlineOffset: "2px"
+	},
+	":disabled": {
+		cursor: "not-allowed",
+		opacity: .5
+	}
+});
+const checkboxLabel = styleWithLayer({
+	fontFamily: vars.fontFamily.body,
+	fontSize: "14px",
+	color: vars.colors.textPrimary
+});
+
+//#endregion
+//#region src/components/Checkbox/Checkbox.tsx
+const Checkbox = forwardRef(({ label, className, indeterminate, ...props }, ref) => {
+	const inputRef = useRef(null);
+	const combinedRef = (node) => {
+		if (typeof ref === "function") {
+			ref(node);
+		} else if (ref) {
+			ref.current = node;
+		}
+		inputRef.current = node;
+	};
+	useEffect(() => {
+		if (inputRef.current) {
+			inputRef.current.indeterminate = !!indeterminate;
+		}
+	}, [indeterminate]);
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "label",
+		className: clsx(checkboxContainer, className),
+		display: "flex",
+		alignItems: "center",
+		gap: "small",
+		cursor: "pointer",
+		style: { userSelect: "none" }
+	}, /* @__PURE__ */ React.createElement(Box, {
+		as: "input",
+		type: "checkbox",
+		ref: combinedRef,
+		className: checkboxInput,
+		style: {
+			width: "18px",
+			height: "18px"
+		},
+		...props
+	}), label && /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		className: checkboxLabel
+	}, label));
+});
+Checkbox.displayName = "Checkbox";
+
+//#endregion
+//#region src/components/Radio/styles.css.ts
+const radioContainer = styleWithLayer({
+	display: "flex",
+	alignItems: "center",
+	gap: "8px",
+	cursor: "pointer",
+	userSelect: "none"
+});
+const radioInput = style({
+	width: "18px",
+	height: "18px",
+	border: `2px solid ${vars.colors.borderDefault}`,
+	borderRadius: "50%",
+	cursor: "pointer",
+	accentColor: vars.colors.buttonBackgroundPrimary,
+	":focus-visible": {
+		outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+		outlineOffset: "2px"
+	},
+	":disabled": {
+		cursor: "not-allowed",
+		opacity: .5
+	}
+});
+const radioLabel = styleWithLayer({
+	fontFamily: vars.fontFamily.body,
+	fontSize: "14px",
+	color: vars.colors.textPrimary
+});
+const radioGroup = styleWithLayer({
+	display: "flex",
+	flexDirection: "column",
+	gap: "8px"
+});
+const radioGroupHorizontal = styleWithLayer({
+	display: "flex",
+	flexDirection: "row",
+	gap: "16px",
+	flexWrap: "wrap"
+});
+
+//#endregion
+//#region src/components/Radio/Radio.tsx
+const RadioContext = createContext({});
+const Radio = forwardRef(({ label, className, value, ...props }, ref) => {
+	const context = useContext(RadioContext);
+	const name = context.name || props.name;
+	const isChecked = context.value === value;
+	const handleChange = () => {
+		if (context.onChange) {
+			context.onChange(value);
+		}
+	};
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "label",
+		className: clsx(radioContainer, className),
+		display: "flex",
+		alignItems: "center",
+		gap: "small",
+		cursor: "pointer",
+		style: { userSelect: "none" }
+	}, /* @__PURE__ */ React.createElement(Box, {
+		as: "input",
+		type: "radio",
+		ref,
+		name,
+		value,
+		checked: isChecked,
+		onChange: handleChange,
+		className: radioInput,
+		...props
+	}), label && /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		className: radioLabel
+	}, label));
+});
+Radio.displayName = "Radio";
+const RadioGroup = ({ children, name, value, onChange, layout = "vertical", className }) => {
+	return /* @__PURE__ */ React.createElement(RadioContext.Provider, { value: {
+		name,
+		value,
+		onChange
+	} }, /* @__PURE__ */ React.createElement(Box, { className: clsx(layout === "horizontal" ? radioGroupHorizontal : radioGroup, className) }, children));
+};
+const RadioComponent = Object.assign(Radio, { Group: RadioGroup });
+
+//#endregion
+//#region src/components/Select/styles.css.ts
+const selectContainer = styleWithLayer({ width: "100%" });
+const select = styleVariants({
+	default: {
+		width: "100%",
+		padding: "0.75rem 1rem",
+		fontSize: "14px",
+		fontFamily: vars.fontFamily.body,
+		color: vars.colors.textPrimary,
+		backgroundColor: vars.colors.inputBackground,
+		border: `1px solid ${vars.colors.inputBorder}`,
+		borderRadius: "8px",
+		cursor: "pointer",
+		outline: "none",
+		appearance: "none",
+		backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23252525' d='M6 8L1 3h10z'/%3E%3C/svg%3E")`,
+		backgroundRepeat: "no-repeat",
+		backgroundPosition: "right 12px center",
+		transition: "border-color 0.2s ease",
+		"::placeholder": { color: vars.colors.inputPlaceholder },
+		":focus-visible": {
+			outline: `2px solid ${vars.colors.inputBorderFocused}`,
+			outlineOffset: "2px"
+		},
+		":hover:not(:disabled)": { borderColor: vars.colors.inputBorderFocused },
+		":disabled": {
+			cursor: "not-allowed",
+			opacity: .5,
+			backgroundColor: vars.colors.backgroundMuted
+		}
+	},
+	error: {
+		width: "100%",
+		padding: "0.75rem 1rem",
+		fontSize: "14px",
+		fontFamily: vars.fontFamily.body,
+		color: vars.colors.textPrimary,
+		backgroundColor: vars.colors.inputBackground,
+		border: `1px solid ${vars.colors.alertErrorBorder}`,
+		borderRadius: "8px",
+		cursor: "pointer",
+		outline: "none",
+		appearance: "none",
+		backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23252525' d='M6 8L1 3h10z'/%3E%3C/svg%3E")`,
+		backgroundRepeat: "no-repeat",
+		backgroundPosition: "right 12px center",
+		transition: "border-color 0.2s ease",
+		"::placeholder": { color: vars.colors.inputPlaceholder },
+		":focus-visible": {
+			outline: `2px solid ${vars.colors.alertErrorBorder}`,
+			outlineOffset: "2px"
+		},
+		":hover:not(:disabled)": { borderColor: vars.colors.alertErrorBorder },
+		":disabled": {
+			cursor: "not-allowed",
+			opacity: .5,
+			backgroundColor: vars.colors.backgroundMuted
+		}
+	}
+});
+const selectLabel = styleWithLayer({
+	display: "block",
+	fontSize: "14px",
+	fontWeight: "500",
+	color: vars.colors.textPrimary,
+	marginBottom: "8px"
+});
+const selectWrapper = styleWithLayer({ width: "100%" });
+
+//#endregion
+//#region src/components/Select/Select.tsx
+const Select = forwardRef(({ label, options, error = false, fullWidth = true, className, ...props }, ref) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: selectWrapper,
+		width: "100%"
+	}, label && /* @__PURE__ */ React.createElement(Box, {
+		as: "label",
+		className: selectLabel,
+		display: "block",
+		fontSize: "14px",
+		fontWeight: "500",
+		color: "c5-700",
+		marginBottom: "small"
+	}, label), /* @__PURE__ */ React.createElement(Box, {
+		as: "select",
+		ref,
+		className: clsx(select[error ? "error" : "default"], className),
+		width: fullWidth ? "100%" : undefined,
+		...props
+	}, options.map((option) => /* @__PURE__ */ React.createElement("option", {
+		key: option.value,
+		value: option.value,
+		disabled: option.disabled
+	}, option.label))));
+});
+Select.displayName = "Select";
+
+//#endregion
+//#region src/components/Tabs/styles.css.ts
+const tabsContainer = styleWithLayer({ width: "100%" });
+const tabsList = styleWithLayer({
+	display: "flex",
+	gap: "4px",
+	borderBottom: `2px solid ${vars.colors.borderDefault}`,
+	fontFamily: vars.fontFamily.body
+});
+const tabsListHorizontal = styleWithLayer({
+	flexDirection: "row",
+	overflowX: "auto"
+});
+const tabsListVertical = styleWithLayer({
+	flexDirection: "column",
+	borderBottom: "none",
+	borderRight: `2px solid ${vars.colors.borderDefault}`
+});
+const tabItem = styleVariants({
+	base: {
+		padding: "0.75rem 1.5rem",
+		fontSize: "14px",
+		fontWeight: "500",
+		color: vars.colors.textSecondary,
+		cursor: "pointer",
+		border: "none",
+		backgroundColor: "transparent",
+		whiteSpace: "nowrap",
+		transition: "all 0.2s ease",
+		":focus-visible": {
+			outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+			outlineOffset: "2px"
+		},
+		":hover:not(:disabled)": {
+			color: vars.colors.textPrimary,
+			backgroundColor: vars.colors.backgroundMuted
+		},
+		":disabled": {
+			cursor: "not-allowed",
+			opacity: .5
+		}
+	},
+	active: {
+		padding: "0.75rem 1.5rem",
+		fontSize: "14px",
+		fontWeight: "500",
+		color: vars.colors.buttonBackgroundPrimary,
+		cursor: "pointer",
+		border: "none",
+		backgroundColor: "transparent",
+		whiteSpace: "nowrap",
+		transition: "all 0.2s ease",
+		borderBottom: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+		marginBottom: "-2px",
+		":focus-visible": {
+			outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+			outlineOffset: "2px"
+		},
+		":hover:not(:disabled)": { backgroundColor: vars.colors.backgroundMuted },
+		":disabled": {
+			cursor: "not-allowed",
+			opacity: .5
+		}
+	},
+	verticalActive: {
+		padding: "0.75rem 1.5rem",
+		fontSize: "14px",
+		fontWeight: "500",
+		color: vars.colors.buttonBackgroundPrimary,
+		cursor: "pointer",
+		border: "none",
+		backgroundColor: "transparent",
+		whiteSpace: "nowrap",
+		transition: "all 0.2s ease",
+		borderRight: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+		marginRight: "-2px",
+		":focus-visible": {
+			outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+			outlineOffset: "2px"
+		},
+		":hover:not(:disabled)": { backgroundColor: vars.colors.backgroundMuted },
+		":disabled": {
+			cursor: "not-allowed",
+			opacity: .5
+		}
+	}
+});
+const tabContent = styleWithLayer({
+	padding: "1.5rem 0",
+	fontFamily: vars.fontFamily.body,
+	fontSize: "14px",
+	color: vars.colors.textPrimary
+});
+
+//#endregion
+//#region src/components/Tabs/Tabs.tsx
+const TabsContext = createContext({
+	activeTab: "",
+	setActiveTab: () => {}
+});
+const Tabs = ({ children, defaultValue = "", orientation = "horizontal", onChange, className, ...props }) => {
+	const [activeTab, setActiveTab] = useState(defaultValue);
+	const handleTabChange = (value) => {
+		setActiveTab(value);
+		if (onChange) {
+			onChange(value);
+		}
+	};
+	return /* @__PURE__ */ React.createElement(TabsContext.Provider, { value: {
+		activeTab,
+		setActiveTab: handleTabChange,
+		orientation
+	} }, /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(tabsContainer, className),
+		width: "100%",
+		...props
+	}, children));
+};
+const TabList = ({ children, className }) => {
+	const { orientation } = useContext(TabsContext);
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		role: "tablist",
+		className: clsx(tabsList, orientation === "vertical" ? tabsListVertical : tabsListHorizontal, className)
+	}, children);
+};
+const Tab = ({ value, children, disabled = false, className }) => {
+	const { activeTab, setActiveTab, orientation } = useContext(TabsContext);
+	const isActive = activeTab === value;
+	const handleClick = () => {
+		if (!disabled) {
+			setActiveTab(value);
+		}
+	};
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		role: "tab",
+		"aria-selected": isActive,
+		disabled,
+		onClick: handleClick,
+		className: clsx(tabItem[orientation === "vertical" ? isActive ? "verticalActive" : "base" : isActive ? "active" : "base"], className)
+	}, children);
+};
+const TabPanel = ({ value, children, className }) => {
+	const { activeTab } = useContext(TabsContext);
+	const isActive = activeTab === value;
+	if (!isActive) return null;
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		role: "tabpanel",
+		className: clsx(tabContent, className)
+	}, children);
+};
+const TabsComponent = Object.assign(Tabs, {
+	List: TabList,
+	Tab,
+	Panel: TabPanel
+});
+
+//#endregion
+//#region src/components/Avatar/styles.css.ts
+const avatar = styleVariants({
+	base: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		backgroundColor: vars.colors.backgroundMuted,
+		color: vars.colors.textPrimary,
+		fontFamily: vars.fontFamily.body,
+		fontWeight: "500",
+		overflow: "hidden",
+		userSelect: "none",
+		textDecoration: "none",
+		":focus-visible": {
+			outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+			outlineOffset: "2px"
+		}
+	},
+	small: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		backgroundColor: vars.colors.backgroundMuted,
+		color: vars.colors.textPrimary,
+		fontFamily: vars.fontFamily.body,
+		fontWeight: "500",
+		overflow: "hidden",
+		userSelect: "none",
+		textDecoration: "none",
+		width: "24px",
+		height: "24px",
+		fontSize: "12px",
+		borderRadius: "12px",
+		":focus-visible": {
+			outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+			outlineOffset: "2px"
+		}
+	},
+	medium: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		backgroundColor: vars.colors.backgroundMuted,
+		color: vars.colors.textPrimary,
+		fontFamily: vars.fontFamily.body,
+		fontWeight: "500",
+		overflow: "hidden",
+		userSelect: "none",
+		textDecoration: "none",
+		width: "32px",
+		height: "32px",
+		fontSize: "14px",
+		borderRadius: "16px",
+		":focus-visible": {
+			outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+			outlineOffset: "2px"
+		}
+	},
+	large: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		backgroundColor: vars.colors.backgroundMuted,
+		color: vars.colors.textPrimary,
+		fontFamily: vars.fontFamily.body,
+		fontWeight: "500",
+		overflow: "hidden",
+		userSelect: "none",
+		textDecoration: "none",
+		width: "40px",
+		height: "40px",
+		fontSize: "16px",
+		borderRadius: "20px",
+		":focus-visible": {
+			outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+			outlineOffset: "2px"
+		}
+	},
+	xlarge: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		backgroundColor: vars.colors.backgroundMuted,
+		color: vars.colors.textPrimary,
+		fontFamily: vars.fontFamily.body,
+		fontWeight: "500",
+		overflow: "hidden",
+		userSelect: "none",
+		textDecoration: "none",
+		width: "64px",
+		height: "64px",
+		fontSize: "24px",
+		borderRadius: "32px",
+		":focus-visible": {
+			outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+			outlineOffset: "2px"
+		}
+	}
+});
+const avatarImage = style({
+	width: "100%",
+	height: "100%",
+	objectFit: "cover"
+});
+const avatarWithImage = styleVariants({
+	small: {
+		width: "24px",
+		height: "24px",
+		borderRadius: "12px",
+		overflow: "hidden",
+		":focus-visible": {
+			outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+			outlineOffset: "2px"
+		}
+	},
+	medium: {
+		width: "32px",
+		height: "32px",
+		borderRadius: "16px",
+		overflow: "hidden",
+		":focus-visible": {
+			outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+			outlineOffset: "2px"
+		}
+	},
+	large: {
+		width: "40px",
+		height: "40px",
+		borderRadius: "20px",
+		overflow: "hidden",
+		":focus-visible": {
+			outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+			outlineOffset: "2px"
+		}
+	},
+	xlarge: {
+		width: "64px",
+		height: "64px",
+		borderRadius: "32px",
+		overflow: "hidden",
+		":focus-visible": {
+			outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+			outlineOffset: "2px"
+		}
+	}
+});
+const avatarWrapper = styleWithLayer({ display: "inline-flex" });
+
+//#endregion
+//#region src/components/Avatar/Avatar.tsx
+const Avatar = ({ alt, className, src, size = "medium", children, fallback }) => {
+	const sizeClass = avatar[size];
+	if (src) {
+		return /* @__PURE__ */ React.createElement(Box, {
+			className: clsx(avatarWrapper, className),
+			display: "inline"
+		}, /* @__PURE__ */ React.createElement(Box, {
+			as: "img",
+			src,
+			alt: alt || "Avatar",
+			className: clsx(avatarWithImage[size], avatarImage)
+		}));
+	}
+	const initials = children || fallback;
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(sizeClass, className),
+		role: "img",
+		"aria-label": alt
+	}, initials);
+};
+
+//#endregion
+//#region src/components/Tag/styles.css.ts
+const tag = styleVariants({
+	base: {
+		display: "inline-flex",
+		alignItems: "center",
+		padding: "4px 12px",
+		fontSize: "12px",
+		fontWeight: "500",
+		fontFamily: vars.fontFamily.body,
+		borderRadius: "16px",
+		transition: "all 0.2s ease"
+	},
+	default: {
+		display: "inline-flex",
+		alignItems: "center",
+		padding: "4px 12px",
+		fontSize: "12px",
+		fontWeight: "500",
+		fontFamily: vars.fontFamily.body,
+		color: vars.colors.textPrimary,
+		backgroundColor: vars.colors.backgroundMuted,
+		borderRadius: "16px",
+		transition: "all 0.2s ease"
+	},
+	primary: {
+		display: "inline-flex",
+		alignItems: "center",
+		padding: "4px 12px",
+		fontSize: "12px",
+		fontWeight: "500",
+		fontFamily: vars.fontFamily.body,
+		color: vars.colors.buttonTextPrimary,
+		backgroundColor: vars.colors.buttonBackgroundPrimary,
+		borderRadius: "16px",
+		transition: "all 0.2s ease"
+	},
+	success: {
+		display: "inline-flex",
+		alignItems: "center",
+		padding: "4px 12px",
+		fontSize: "12px",
+		fontWeight: "500",
+		fontFamily: vars.fontFamily.body,
+		color: vars.colors.alertSuccessText,
+		backgroundColor: vars.colors.alertSuccessBackground,
+		borderRadius: "16px",
+		transition: "all 0.2s ease"
+	},
+	warning: {
+		display: "inline-flex",
+		alignItems: "center",
+		padding: "4px 12px",
+		fontSize: "12px",
+		fontWeight: "500",
+		fontFamily: vars.fontFamily.body,
+		color: vars.colors.alertWarningText,
+		backgroundColor: vars.colors.alertWarningBackground,
+		borderRadius: "16px",
+		transition: "all 0.2s ease"
+	},
+	error: {
+		display: "inline-flex",
+		alignItems: "center",
+		padding: "4px 12px",
+		fontSize: "12px",
+		fontWeight: "500",
+		fontFamily: vars.fontFamily.body,
+		color: vars.colors.alertErrorText,
+		backgroundColor: vars.colors.alertErrorBackground,
+		borderRadius: "16px",
+		transition: "all 0.2s ease"
+	}
+});
+const removeButton = style({
+	cursor: "pointer",
+	marginLeft: "8px",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	color: vars.colors.textSecondary,
+	fontSize: "16px",
+	lineHeight: "1",
+	":hover": { color: vars.colors.textPrimary }
+});
+const tagGroup = styleWithLayer({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: "8px"
+});
+
+//#endregion
+//#region src/components/Tag/Tag.tsx
+const Tag = ({ children, variant = "default", onRemove, removable = false, className }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		className: clsx(tag[variant], className),
+		display: "inline",
+		alignItems: "center"
+	}, children, removable && /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		onClick: onRemove,
+		className: removeButton,
+		role: "button",
+		tabIndex: 0,
+		"aria-label": "Remove tag",
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				onRemove?.();
+			}
+		}
+	}, "×"));
+};
+const TagGroup = ({ children, className }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(tagGroup, className),
+		display: "flex",
+		gap: "small",
+		style: { flexWrap: "wrap" }
+	}, children);
+};
+const TagComponent = Object.assign(Tag, { Group: TagGroup });
+
+//#endregion
+//#region src/components/Breadcrumb/styles.css.ts
+const breadcrumb = styleWithLayer({
+	display: "flex",
+	alignItems: "center",
+	gap: "4px",
+	fontFamily: vars.fontFamily.body,
+	fontSize: "14px"
+});
+const breadcrumbList = style({
+	display: "flex",
+	alignItems: "center",
+	listStyle: "none",
+	margin: 0,
+	padding: 0,
+	gap: "4px"
+});
+const breadcrumbItem = style({
+	display: "flex",
+	alignItems: "center"
+});
+const breadcrumbLink = style({
+	display: "inline-flex",
+	alignItems: "center",
+	color: vars.colors.textSecondary,
+	textDecoration: "none",
+	fontSize: "14px",
+	":hover": {
+		color: vars.colors.buttonBackgroundPrimary,
+		textDecoration: "underline"
+	},
+	":focus-visible": {
+		outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+		outlineOffset: "2px",
+		borderRadius: "4px"
+	}
+});
+const breadcrumbSeparator = style({
+	color: vars.colors.textDisabled,
+	fontSize: "12px",
+	userSelect: "none"
+});
+const breadcrumbCurrent = style({
+	display: "inline-flex",
+	alignItems: "center",
+	color: vars.colors.textPrimary,
+	fontSize: "14px",
+	fontWeight: "500"
+});
+
+//#endregion
+//#region src/components/Breadcrumb/Breadcrumb.tsx
+const Breadcrumb = ({ items, className, separator = "/" }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "nav",
+		"aria-label": "Breadcrumb",
+		className: clsx(breadcrumb, className),
+		display: "flex",
+		alignItems: "center",
+		gap: "small",
+		fontSize: "14px"
+	}, /* @__PURE__ */ React.createElement(Box, {
+		as: "ol",
+		className: breadcrumbList,
+		display: "flex",
+		alignItems: "center",
+		style: { listStyle: "none" },
+		margin: "none",
+		padding: "none",
+		gap: "small"
+	}, items.map((item, index) => /* @__PURE__ */ React.createElement(Box, {
+		as: "li",
+		key: index,
+		className: breadcrumbItem,
+		display: "flex",
+		alignItems: "center"
+	}, item.href && !item.current ? /* @__PURE__ */ React.createElement(Box, {
+		as: "a",
+		href: item.href,
+		className: breadcrumbLink,
+		display: "inline",
+		alignItems: "center",
+		color: "c5-600",
+		fontSize: "14px",
+		textDecoration: "none"
+	}, item.label) : /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		className: breadcrumbCurrent,
+		display: "inline",
+		alignItems: "center",
+		color: "c5-700",
+		fontSize: "14px",
+		fontWeight: "500"
+	}, item.label), index < items.length - 1 && /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		className: breadcrumbSeparator,
+		color: "c5-500",
+		fontSize: "12px",
+		style: { userSelect: "none" }
+	}, separator)))));
+};
+
+//#endregion
+//#region src/components/Accordion/styles.css.ts
+const accordion = styleWithLayer({
+	width: "100%",
+	fontFamily: vars.fontFamily.body
+});
+const accordionItem = style({
+	width: "100%",
+	marginBottom: "4px",
+	border: `1px solid ${vars.colors.borderDefault}`,
+	borderRadius: "8px",
+	overflow: "hidden"
+});
+const accordionHeader = style({
+	width: "100%",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	padding: "12px 16px",
+	backgroundColor: vars.colors.backgroundMuted,
+	cursor: "pointer",
+	userSelect: "none",
+	fontSize: "14px",
+	fontWeight: "500",
+	color: vars.colors.textPrimary,
+	transition: "background-color 0.2s ease",
+	":hover": { backgroundColor: vars.colors.backgroundDefault },
+	":focus-visible": {
+		outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+		outlineOffset: "-2px"
+	}
+});
+const accordionContent = styleVariants({
+	collapsed: {
+		display: "none",
+		padding: "0 16px",
+		fontSize: "14px",
+		color: vars.colors.textPrimary,
+		backgroundColor: vars.colors.backgroundDefault
+	},
+	expanded: {
+		display: "block",
+		padding: "12px 16px",
+		fontSize: "14px",
+		color: vars.colors.textPrimary,
+		backgroundColor: vars.colors.backgroundDefault,
+		animation: "slideDown 0.2s ease"
+	}
+});
+const accordionIcon = style({
+	fontSize: "12px",
+	transition: "transform 0.2s ease",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+});
+const accordionIconExpanded = style({ transform: "rotate(180deg)" });
+const accordionGroup = styleWithLayer({ width: "100%" });
+
+//#endregion
+//#region src/components/Accordion/Accordion.tsx
+const AccordionContext = createContext({
+	allowMultiple: false,
+	expandedItems: new Set(),
+	toggleItem: () => {}
+});
+const Accordion = ({ children, allowMultiple = false, ...props }) => {
+	const [expandedItems, setExpandedItems] = useState(new Set());
+	const toggleItem = (value) => {
+		setExpandedItems((prev) => {
+			const newSet = new Set(prev);
+			if (newSet.has(value)) {
+				newSet.delete(value);
+			} else {
+				if (allowMultiple) {
+					newSet.add(value);
+				} else {
+					return new Set([value]);
+				}
+			}
+			return newSet;
+		});
+	};
+	return /* @__PURE__ */ React.createElement(AccordionContext.Provider, { value: {
+		allowMultiple,
+		expandedItems,
+		toggleItem
+	} }, /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(accordionGroup, props.className),
+		width: "100%",
+		...props
+	}, children));
+};
+const AccordionItem = ({ value, title, children, ...props }) => {
+	const { expandedItems, toggleItem } = useContext(AccordionContext);
+	const isExpanded = expandedItems.has(value);
+	const toggleExpanded = useCallback(() => {
+		toggleItem(value);
+	}, [value, toggleItem]);
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: clsx(accordionItem, props.className),
+		width: "100%",
+		marginBottom: "small",
+		border: "small",
+		borderRadius: "large",
+		overflow: "hidden",
+		...props
+	}, /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		onClick: toggleExpanded,
+		className: accordionHeader,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		padding: "small",
+		cursor: "pointer",
+		style: { userSelect: "none" },
+		fontSize: "14px",
+		fontWeight: "500",
+		color: "c5-700",
+		"aria-expanded": isExpanded,
+		"aria-controls": `accordion-content-${value}`
+	}, /* @__PURE__ */ React.createElement(Box, { as: "span" }, title), /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		className: clsx(accordionIcon, isExpanded && accordionIconExpanded),
+		fontSize: "12px",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		"aria-hidden": "true"
+	}, "▼")), /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		id: `accordion-content-${value}`,
+		className: clsx(accordionContent[isExpanded ? "expanded" : "collapsed"]),
+		padding: "small",
+		fontSize: "14px",
+		color: "c5-700",
+		role: "region"
+	}, children));
+};
+const AccordionComponent = Object.assign(Accordion, { Item: AccordionItem });
+
+//#endregion
+//#region src/components/Progress/styles.css.ts
+const progress = styleWithLayer({ width: "100%" });
+const progressBar = styleVariants({
+	default: {
+		width: "100%",
+		height: "8px",
+		backgroundColor: vars.colors.backgroundMuted,
+		borderRadius: "4px",
+		overflow: "hidden"
+	},
+	success: {
+		width: "100%",
+		height: "8px",
+		backgroundColor: vars.colors.alertSuccessBackground,
+		borderRadius: "4px",
+		overflow: "hidden"
+	},
+	warning: {
+		width: "100%",
+		height: "8px",
+		backgroundColor: vars.colors.alertWarningBackground,
+		borderRadius: "4px",
+		overflow: "hidden"
+	},
+	error: {
+		width: "100%",
+		height: "8px",
+		backgroundColor: vars.colors.alertErrorBackground,
+		borderRadius: "4px",
+		overflow: "hidden"
+	}
+});
+const progressFill = styleVariants({
+	default: {
+		height: "100%",
+		borderRadius: "4px",
+		transition: "width 0.3s ease",
+		backgroundColor: vars.colors.buttonBackgroundPrimary
+	},
+	success: {
+		height: "100%",
+		borderRadius: "4px",
+		transition: "width 0.3s ease",
+		backgroundColor: vars.colors.alertSuccessBorder
+	},
+	warning: {
+		height: "100%",
+		borderRadius: "4px",
+		transition: "width 0.3s ease",
+		backgroundColor: vars.colors.alertWarningBorder
+	},
+	error: {
+		height: "100%",
+		borderRadius: "4px",
+		transition: "width 0.3s ease",
+		backgroundColor: vars.colors.alertErrorBorder
+	}
+});
+const progressLabel = styleWithLayer({
+	display: "flex",
+	justifyContent: "space-between",
+	fontSize: "12px",
+	fontWeight: "500",
+	color: vars.colors.textSecondary,
+	marginBottom: "4px",
+	fontFamily: vars.fontFamily.body
+});
+
+//#endregion
+//#region src/components/Progress/Progress.tsx
+const Progress = ({ value, max = 100, label, showPercentage = false, variant = "default", className }) => {
+	const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(progress, className),
+		width: "100%"
+	}, (label || showPercentage) && /* @__PURE__ */ React.createElement(Box, {
+		className: progressLabel,
+		display: "flex",
+		justifyContent: "space-between",
+		fontSize: "12px",
+		fontWeight: "500",
+		color: "c5-600",
+		marginBottom: "small",
+		fontFamily: "body"
+	}, label && /* @__PURE__ */ React.createElement(Box, { as: "span" }, label), showPercentage && /* @__PURE__ */ React.createElement(Box, { as: "span" }, percentage, "%")), /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: progressBar[variant],
+		role: "progressbar",
+		"aria-valuenow": value,
+		"aria-valuemin": 0,
+		"aria-valuemax": max
+	}, /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: progressFill[variant],
+		style: { width: `${percentage}%` },
+		role: "presentation"
+	})));
+};
+
+//#endregion
+//#region src/components/Icon/styles.css.ts
+const icon = styleWithLayer({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	fontSize: "16px",
+	lineHeight: "1",
+	userSelect: "none"
+});
+
+//#endregion
+//#region src/components/Icon/Icon.tsx
+const IconComponent = ({ name, children, className, color }) => {
+	const iconMap = {
+		check: "✓",
+		error: "✗",
+		warning: "⚠",
+		info: "i",
+		success: "✓",
+		close: "×"
+	};
+	const displayContent = children || (name ? iconMap[name] : undefined);
+	if (!displayContent) {
+		return null;
+	}
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		className: clsx(icon, className),
+		style: { color },
+		"aria-hidden": "true"
+	}, displayContent);
+};
+IconComponent.displayName = "Icon";
+
+//#endregion
+//#region src/components/Toast/styles.css.ts
+const slideInRight = keyframes({
+	"0%": {
+		transform: "translateX(100%)",
+		opacity: "0"
+	},
+	"100%": {
+		transform: "translateX(0)",
+		opacity: "1"
+	}
+});
+const slideInLeft = keyframes({
+	"0%": {
+		transform: "translateX(-100%)",
+		opacity: "0"
+	},
+	"100%": {
+		transform: "translateX(0)",
+		opacity: "1"
+	}
+});
+const slideInTop = keyframes({
+	"0%": {
+		transform: "translateY(-100%)",
+		opacity: "0"
+	},
+	"100%": {
+		transform: "translateY(0)",
+		opacity: "1"
+	}
+});
+const slideOutRight = keyframes({
+	"0%": {
+		transform: "translateX(0)",
+		opacity: "1"
+	},
+	"100%": {
+		transform: "translateX(100%)",
+		opacity: "0"
+	}
+});
+const slideOutLeft = keyframes({
+	"0%": {
+		transform: "translateX(0)",
+		opacity: "1"
+	},
+	"100%": {
+		transform: "translateX(-100%)",
+		opacity: "0"
+	}
+});
+const slideInBottom = keyframes({
+	"0%": {
+		transform: "translateY(100%)",
+		opacity: "0"
+	},
+	"100%": {
+		transform: "translateY(0)",
+		opacity: "1"
+	}
+});
+const slideOutBottom = keyframes({
+	"0%": {
+		transform: "translateY(0)",
+		opacity: "1"
+	},
+	"100%": {
+		transform: "translateY(100%)",
+		opacity: "0"
+	}
+});
+const fadeIn$2 = keyframes({
+	"0%": { opacity: "0" },
+	"100%": { opacity: "1" }
+});
+const fadeOut = keyframes({
+	"0%": { opacity: "1" },
+	"100%": { opacity: "0" }
+});
+const fadeOutSuccess = keyframes({
+	"0%": { opacity: "1" },
+	"100%": { opacity: "0" }
+});
+const fadeOutError = keyframes({
+	"0%": { opacity: "1" },
+	"100%": { opacity: "0" }
+});
+const fadeOutWarning = keyframes({
+	"0%": { opacity: "1" },
+	"100%": { opacity: "0" }
+});
+const fadeOutInfo = keyframes({
+	"0%": { opacity: "1" },
+	"100%": { opacity: "0" }
+});
+const slideOut = keyframes({
+	"0%": {
+		transform: "translateX(0)",
+		opacity: "1"
+	},
+	"100%": {
+		transform: "translateX(100%)",
+		opacity: "0"
+	}
+});
+const toastContainer = style({
+	position: "fixed",
+	zIndex: "9999",
+	pointerEvents: "none"
+});
+const toastWrapper = styleVariants({
+	topLeft: {
+		position: "fixed",
+		top: "16px",
+		left: "16px",
+		zIndex: "9999"
+	},
+	topCenter: {
+		position: "fixed",
+		top: "16px",
+		left: "50%",
+		transform: "translateX(-50%)",
+		zIndex: "9999"
+	},
+	topRight: {
+		position: "fixed",
+		top: "16px",
+		right: "16px",
+		zIndex: "9999"
+	},
+	bottomLeft: {
+		position: "fixed",
+		bottom: "16px",
+		left: "16px",
+		zIndex: "9999"
+	},
+	bottomCenter: {
+		position: "fixed",
+		bottom: "16px",
+		left: "50%",
+		transform: "translateX(-50%)",
+		zIndex: "9999"
+	},
+	bottomRight: {
+		position: "fixed",
+		bottom: "16px",
+		right: "16px",
+		zIndex: "9999"
+	}
+});
+const toastItem = style({
+	width: "300px",
+	pointerEvents: "auto",
+	marginBottom: "8px"
+});
+const toastCloseButton = style({
+	background: "none",
+	border: "none",
+	cursor: "pointer",
+	padding: "0",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	color: vars.colors.textSecondary,
+	fontSize: "16px",
+	lineHeight: "1",
+	":hover": { color: vars.colors.textPrimary }
+});
+const toastProgressBarContainer = style({
+	position: "absolute",
+	left: 0,
+	right: 0,
+	bottom: 0,
+	height: "3px",
+	backgroundColor: "rgba(0, 0, 0, 0.1)",
+	borderRadius: "0 0 4px 4px",
+	overflow: "hidden"
+});
+const toastProgressBar = style({
+	height: "100%",
+	borderRadius: "0 0 4px 4px",
+	transition: "width 0.1s linear",
+	animation: `progressBar 0.3s ease ${fadeIn$2} forwards`
+});
+const toastContent = styleWithLayer({
+	flex: 1,
+	minWidth: 0
+});
+
+//#endregion
+//#region src/components/Toast/Toast.tsx
+const ToastContext = createContext({
+	addToast: () => "",
+	removeToast: () => {},
+	handleDismissAll: () => {},
+	handleResumeAll: () => {}
+});
+const getFadeOutForVariant = (variant) => {
+	const fadeOutMap = {
+		success: fadeOutSuccess,
+		error: fadeOutError,
+		warning: fadeOutWarning,
+		info: fadeOutInfo
+	};
+	return fadeOutMap[variant] || fadeOutInfo;
+};
+const positionToClassKey = {
+	"top-left": "topLeft",
+	"top-center": "topCenter",
+	"top-right": "topRight",
+	"bottom-left": "bottomLeft",
+	"bottom-center": "bottomCenter",
+	"bottom-right": "bottomRight"
+};
+const ToastProvider = ({ children, position = "top-right", maxVisible = 5, stacking = "stack" }) => {
+	const [toasts, setToasts] = useState([]);
+	const [pauseId, setPauseId] = useState(null);
+	const timeoutsRef = useRef(new Map());
+	const pauseTimeoutRef = useRef(null);
+	const toastsRef = useRef([]);
+	useEffect(() => {
+		toastsRef.current = toasts;
+	}, [toasts]);
+	const removeToastInternal = useCallback((id) => {
+		setToasts((prev) => {
+			const toast = prev.find((t) => t.id === id);
+			if (toast) {
+				toast.options.onClose?.();
+			}
+			return prev.filter((t) => t.id !== id);
+		});
+		const timeout = timeoutsRef.current.get(id);
+		if (timeout) {
+			clearTimeout(timeout);
+			timeoutsRef.current.delete(id);
+		}
+	}, []);
+	const addToast = useCallback((message, variant = "info", options = {}) => {
+		const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+		const duration = options.duration ?? 5e3;
+		const startTime = Date.now();
+		const newToast = {
+			id,
+			message,
+			variant,
+			options: {
+				...options,
+				duration,
+				position: options.position ?? position
+			},
+			startTime,
+			paused: false,
+			duration
+		};
+		setToasts((prev) => {
+			if (stacking === "replace") {
+				return [newToast];
+			}
+			const filtered = prev.filter((t) => {
+				const elapsed = Date.now() - t.startTime;
+				return elapsed < (t.options.duration ?? 5e3);
+			});
+			return [...filtered, newToast].slice(-maxVisible);
+		});
+		const timeoutId = setTimeout(() => {
+			removeToastInternal(id);
+		}, duration);
+		timeoutsRef.current.set(id, timeoutId);
+		return id;
+	}, [
+		maxVisible,
+		stacking,
+		position,
+		removeToastInternal
+	]);
+	const dismissInternal = useCallback((id) => {
+		const toast = toastsRef.current.find((t) => t.id === id);
+		if (!toast) return;
+		setToasts((prev) => prev.map((t) => {
+			if (t.id === id) {
+				return {
+					...t,
+					paused: true
+				};
+			}
+			return t;
+		}));
+		if (pauseTimeoutRef.current) {
+			clearTimeout(pauseTimeoutRef.current);
+		}
+		setPauseId(id);
+		pauseTimeoutRef.current = setTimeout(() => {
+			setPauseId(null);
+			removeToastInternal(id);
+		}, 500);
+		const timeout = timeoutsRef.current.get(id);
+		if (timeout) {
+			clearTimeout(timeout);
+			timeoutsRef.current.delete(id);
+		}
+	}, [removeToastInternal]);
+	const dismissAllInternal = useCallback(() => {
+		setPauseId("all");
+		toastsRef.current.forEach((toast) => {
+			const timeout = timeoutsRef.current.get(toast.id);
+			if (timeout) {
+				clearTimeout(timeout);
+				timeoutsRef.current.delete(toast.id);
+			}
+		});
+	}, []);
+	const resumeAllInternal = useCallback(() => {
+		setPauseId(null);
+		toastsRef.current.forEach((toast) => {
+			if (toast.paused && toast.duration > 500) {
+				const timeout = setTimeout(() => {
+					removeToastInternal(toast.id);
+				}, toast.duration - (Date.now() - toast.startTime));
+				timeoutsRef.current.set(toast.id, timeout);
+			}
+		});
+	}, [removeToastInternal]);
+	useEffect(() => {
+		return () => {
+			timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+			if (pauseTimeoutRef.current) {
+				clearTimeout(pauseTimeoutRef.current);
+			}
+		};
+	}, []);
+	const value = {
+		addToast,
+		removeToast: removeToastInternal,
+		handleDismissAll: dismissAllInternal,
+		handleResumeAll: resumeAllInternal
+	};
+	return /* @__PURE__ */ React.createElement(ToastContext.Provider, { value }, children, /* @__PURE__ */ React.createElement(ToastContainer, {
+		toasts,
+		position,
+		pauseId,
+		onDismiss: dismissInternal,
+		onDismissAll: dismissAllInternal,
+		onResumeAll: resumeAllInternal
+	}));
+};
+const ToastContainer = ({ toasts, position, pauseId, onDismiss, onDismissAll, onResumeAll }) => {
+	const [container, setContainer] = useState(null);
+	useEffect(() => {
+		const existingContainer = document.getElementById("toast-container");
+		if (existingContainer) {
+			setContainer(existingContainer);
+		} else {
+			const el = document.createElement("div");
+			el.id = "toast-container";
+			document.body.appendChild(el);
+			setContainer(el);
+		}
+	}, []);
+	if (!container) return null;
+	return createPortal(/* @__PURE__ */ React.createElement("div", {
+		className: clsx(toastContainer, toastWrapper[positionToClassKey[position]]),
+		onMouseEnter: onDismissAll,
+		onMouseLeave: onResumeAll
+	}, toasts.map((toast) => {
+		const elapsed = Date.now() - toast.startTime;
+		const progress = (toast.duration - elapsed) / toast.duration * 100;
+		const fadeOutAnimation = getFadeOutForVariant(toast.variant);
+		return /* @__PURE__ */ React.createElement("div", {
+			key: toast.id,
+			className: toastItem,
+			style: {
+				opacity: toast.paused || pauseId !== null ? .7 : 1,
+				animation: `${slideInRight} 0.2s ease, 0.2s ease ${fadeOutAnimation} forwards`
+			},
+			onMouseEnter: () => onDismiss(toast.id)
+		}, /* @__PURE__ */ React.createElement("div", { className: toastContent }, /* @__PURE__ */ React.createElement(IconComponent, { name: toast.variant === "success" ? "check" : toast.variant === "error" ? "error" : "info" }), /* @__PURE__ */ React.createElement("span", { style: { marginLeft: "8px" } }, toast.message), toast.options.closable !== false && /* @__PURE__ */ React.createElement("button", {
+			type: "button",
+			className: toastCloseButton,
+			onClick: () => onDismiss(toast.id),
+			"aria-label": "Close toast"
+		}, /* @__PURE__ */ React.createElement(IconComponent, { name: "close" })), toast.duration > 0 && /* @__PURE__ */ React.createElement("div", { className: toastProgressBarContainer }, /* @__PURE__ */ React.createElement("div", {
+			className: toastProgressBar,
+			style: { width: `${progress}%` }
+		}))));
+	})), container);
+};
+const useToast = () => {
+	const context = useContext(ToastContext);
+	return context;
+};
+const Toast = ({ message, variant = "info", options, className }) => {
+	return null;
+};
+Toast.displayName = "Toast";
+
+//#endregion
+//#region src/components/Table/styles.css.ts
+const table = styleWithLayer({
+	width: "100%",
+	borderCollapse: "collapse",
+	borderSpacing: 0,
+	fontFamily: vars.fontFamily.body
+});
+const thead = styleWithLayer({
+	backgroundColor: vars.colors.backgroundDefault,
+	borderBottom: `2px solid ${vars.colors.borderDefault}`
+});
+const tbody = styleWithLayer({ backgroundColor: "transparent" });
+const tfoot = styleWithLayer({
+	backgroundColor: vars.colors.backgroundMuted,
+	borderTop: `2px solid ${vars.colors.borderDefault}`,
+	fontWeight: "bold"
+});
+const tr = styleVariants({
+	default: {
+		borderBottom: `1px solid ${vars.colors.borderMuted}`,
+		":hover": { backgroundColor: vars.colors.backgroundMuted }
+	},
+	striped: { borderBottom: `1px solid ${vars.colors.borderMuted}` }
+});
+const th = styleWithLayer({
+	padding: "12px 16px",
+	textAlign: "left",
+	fontWeight: "600",
+	color: vars.colors.textPrimary,
+	whiteSpace: "nowrap"
+});
+const td = styleWithLayer({
+	padding: "12px 16px",
+	color: vars.colors.textPrimary,
+	borderBottom: `1px solid ${vars.colors.borderMuted}`
+});
+const tableContainer = styleWithLayer({
+	overflowX: "auto",
+	border: `1px solid ${vars.colors.borderDefault}`,
+	borderRadius: "8px"
+});
+
+//#endregion
+//#region src/components/Table/Table.tsx
+const TableContext = createContext({});
+const TableComponent = ({ children, striped = false, className, ...props }) => {
+	return /* @__PURE__ */ React.createElement(TableContext.Provider, { value: { striped } }, /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(tableContainer, className),
+		width: "100%"
+	}, /* @__PURE__ */ React.createElement(Box, {
+		as: "table",
+		className: clsx(table),
+		...props
+	}, children)));
+};
+const Thead = ({ children, className }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "thead",
+		className: clsx(thead, className)
+	}, children);
+};
+const Tbody = ({ children, className }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "tbody",
+		className: clsx(tbody, className)
+	}, children);
+};
+const Tfoot = ({ children, className }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "tfoot",
+		className: clsx(tfoot, className)
+	}, children);
+};
+const Tr = ({ children, className }) => {
+	const { striped } = useContext(TableContext);
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "tr",
+		className: clsx(tr[striped ? "striped" : "default"], className)
+	}, children);
+};
+const Th = ({ children, className }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "th",
+		className: clsx(th, className)
+	}, children);
+};
+const Td = ({ children, className, colSpan, rowSpan }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "td",
+		className: clsx(td, className),
+		colSpan,
+		rowSpan
+	}, children);
+};
+const Table = Object.assign(TableComponent, {
+	Thead,
+	Tbody,
+	Tfoot,
+	Tr,
+	Th,
+	Td
+});
+
+//#endregion
+//#region src/components/TextArea/styles.css.ts
+const textAreaStyle = styleWithLayer({
+	padding: "0.5rem 1rem",
+	borderRadius: "0.5rem",
+	minHeight: "100px",
+	resize: "vertical"
+});
+const label = styleWithLayer({ paddingRight: "0.5rem" });
+
+//#endregion
+//#region src/components/TextArea/TextArea.tsx
+const TextArea = (props) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: {
+			mobile: "column",
+			tablet: "row"
+		},
+		gap: "small"
+	}, props.label && /* @__PURE__ */ React.createElement(Box, {
+		as: "label",
+		className: clsx(text, label),
+		marginX: {
+			mobile: "auto",
+			tablet: "none"
+		},
+		marginY: {
+			mobile: "none",
+			tablet: "auto"
+		},
+		htmlFor: props.id
+	}, props.label), /* @__PURE__ */ React.createElement(Box, {
+		as: "textarea",
+		className: clsx(textAreaStyle, props.className),
+		width: props.fullWidth ? "100%" : undefined,
+		...props
+	}));
+};
+
+//#endregion
+//#region src/components/Pagination/styles.css.ts
+const paginationContainer = styleWithLayer({
+	display: "flex",
+	alignItems: "center",
+	gap: "0.5rem"
+});
+const pageButton = styleWithLayer({
+	padding: "0.5rem 0.75rem",
+	borderRadius: "0.5rem",
+	border: `1px solid ${vars.colors.borderDefault}`,
+	backgroundColor: "transparent",
+	cursor: "pointer",
+	minWidth: "2.5rem",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	":disabled": {
+		cursor: "not-allowed",
+		opacity: .5
+	}
+});
+const pageButtonVariants = styleVariants({
+	default: {
+		color: vars.colors.textPrimary,
+		":hover": { backgroundColor: vars.colors.buttonBackgroundSecondary }
+	},
+	active: {
+		backgroundColor: vars.colors.buttonBackgroundPrimary,
+		color: vars.colors.buttonTextPrimary,
+		borderColor: vars.colors.buttonBackgroundPrimary,
+		":hover": { backgroundColor: vars.colors.buttonBackgroundFocusedPrimary }
+	}
+});
+const ellipsis = styleWithLayer({
+	padding: "0.5rem",
+	color: vars.colors.textPrimary,
+	userSelect: "none"
+});
+
+//#endregion
+//#region src/components/Pagination/Pagination.tsx
+const Pagination = ({ currentPage, totalPages, onPageChange, siblingCount = 1, showFirstLast = true, showPrevNext = true, ...props }) => {
+	const generatePageNumbers = () => {
+		const pages = [];
+		const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+		const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+		const shouldShowLeftEllipsis = leftSiblingIndex > 2;
+		const shouldShowRightEllipsis = rightSiblingIndex < totalPages - 1;
+		if (totalPages <= 7) {
+			for (let i = 1; i <= totalPages; i++) {
+				pages.push(i);
+			}
+		} else {
+			pages.push(1);
+			if (shouldShowLeftEllipsis) {
+				pages.push("left-ellipsis");
+			} else if (currentPage > 3) {
+				for (let i = 2; i < leftSiblingIndex; i++) {
+					pages.push(i);
+				}
+			}
+			for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+				if (i !== 1 && i !== totalPages) {
+					pages.push(i);
+				}
+			}
+			if (shouldShowRightEllipsis) {
+				pages.push("right-ellipsis");
+			} else if (currentPage < totalPages - 2) {
+				for (let i = rightSiblingIndex + 1; i < totalPages; i++) {
+					pages.push(i);
+				}
+			}
+			pages.push(totalPages);
+		}
+		return pages;
+	};
+	const pages = generatePageNumbers();
+	const { className, ...restProps } = props;
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(paginationContainer, className),
+		...restProps
+	}, showFirstLast && /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		className: clsx(pageButton, pageButtonVariants.default),
+		onClick: () => onPageChange(1),
+		disabled: currentPage === 1
+	}, "<<"), showPrevNext && /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		className: clsx(pageButton, pageButtonVariants.default),
+		onClick: () => onPageChange(currentPage - 1),
+		disabled: currentPage === 1
+	}, "<"), pages.map((page, index) => typeof page === "number" ? /* @__PURE__ */ React.createElement(Box, {
+		key: `page-${page}`,
+		as: "button",
+		className: clsx(pageButton, page === currentPage ? pageButtonVariants.active : pageButtonVariants.default),
+		onClick: () => onPageChange(page)
+	}, page) : /* @__PURE__ */ React.createElement(Box, {
+		key: `${page}-${index}`,
+		className: ellipsis
+	}, "...")), showPrevNext && /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		className: clsx(pageButton, pageButtonVariants.default),
+		onClick: () => onPageChange(currentPage + 1),
+		disabled: currentPage === totalPages
+	}, ">"), showFirstLast && /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		className: clsx(pageButton, pageButtonVariants.default),
+		onClick: () => onPageChange(totalPages),
+		disabled: currentPage === totalPages
+	}, ">>"));
+};
+
+//#endregion
+//#region src/components/Skeleton/styles.css.ts
+const shimmer = keyframes({
+	"0%": { backgroundPosition: "-200% 0" },
+	"100%": { backgroundPosition: "200% 0" }
+});
+const pulse = keyframes({
+	"0%, 100%": { opacity: 1 },
+	"50%": { opacity: .5 }
+});
+const skeletonVariants = styleVariants({
+	text: { borderRadius: "0.25rem" },
+	circle: { borderRadius: "50%" },
+	rectangle: { borderRadius: "0.5rem" }
+});
+const skeletonSizes = styleVariants({
+	small: { height: "1rem" },
+	medium: { height: "1.5rem" },
+	large: { height: "2rem" }
+});
+const skeletonAnimation = styleVariants({
+	shimmer: {
+		background: `linear-gradient(
+      90deg,
+      ${vars.colors.borderMuted} 25%,
+      ${vars.colors.borderDefault} 50%,
+      ${vars.colors.borderMuted} 75%
+    )`,
+		backgroundSize: "200% 100%",
+		animation: `${shimmer} 1.5s ease-in-out infinite`
+	},
+	pulse: {
+		backgroundColor: vars.colors.borderMuted,
+		animation: `${pulse} 2s ease-in-out infinite`
+	},
+	none: { backgroundColor: vars.colors.borderMuted }
+});
+const skeleton = styleWithLayer({
+	width: "100%",
+	display: "inline-block"
+});
+
+//#endregion
+//#region src/components/Skeleton/Skeleton.tsx
+const Skeleton = ({ variant = "text", size = "medium", animation = "shimmer", width, height, count = 1, className, ...props }) => {
+	const style = {
+		width,
+		height
+	};
+	const skeletons = Array.from({ length: count }, (_, index) => /* @__PURE__ */ React.createElement(Box, {
+		key: index,
+		as: "span",
+		className: clsx(skeleton, skeletonVariants[variant], skeletonSizes[size], skeletonAnimation[animation], className),
+		style,
+		"aria-hidden": "true",
+		...props
+	}));
+	return /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: "column",
+		gap: "small"
+	}, skeletons);
+};
+
+//#endregion
+//#region src/components/Drawer/styles.css.ts
+const slideInFromLeft = keyframes({
+	from: { transform: "translateX(-100%)" },
+	to: { transform: "translateX(0)" }
+});
+const slideInFromRight = keyframes({
+	from: { transform: "translateX(100%)" },
+	to: { transform: "translateX(0)" }
+});
+const slideInFromTop = keyframes({
+	from: { transform: "translateY(-100%)" },
+	to: { transform: "translateY(0)" }
+});
+const slideInFromBottom = keyframes({
+	from: { transform: "translateY(100%)" },
+	to: { transform: "translateY(0)" }
+});
+const fadeIn$1 = keyframes({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+});
+const drawerPositionVariants = styleVariants({
+	left: {
+		top: 0,
+		left: 0,
+		bottom: 0,
+		width: "var(--drawer-width, 300px)",
+		maxWidth: "100vw",
+		animation: `${slideInFromLeft} 0.3s ease-out`
+	},
+	right: {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		width: "var(--drawer-width, 300px)",
+		maxWidth: "100vw",
+		animation: `${slideInFromRight} 0.3s ease-out`
+	},
+	top: {
+		top: 0,
+		left: 0,
+		right: 0,
+		height: "var(--drawer-height, 300px)",
+		maxHeight: "100vh",
+		animation: `${slideInFromTop} 0.3s ease-out`
+	},
+	bottom: {
+		bottom: 0,
+		left: 0,
+		right: 0,
+		height: "var(--drawer-height, 300px)",
+		maxHeight: "100vh",
+		animation: `${slideInFromBottom} 0.3s ease-out`
+	}
+});
+const drawerOverlay = styleWithLayer({
+	position: "fixed",
+	inset: 0,
+	backgroundColor: "rgba(0, 0, 0, 0.5)",
+	animation: `${fadeIn$1} 0.2s ease-out`,
+	zIndex: 40
+});
+const drawer = styleWithLayer({
+	position: "fixed",
+	background: vars.colors.backgroundDefault,
+	boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+	zIndex: 50,
+	display: "flex",
+	flexDirection: "column",
+	overflow: "hidden"
+});
+const drawerHeader = styleWithLayer({
+	padding: "1.25rem",
+	borderBottom: `1px solid ${vars.colors.borderMuted}`,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: "1rem"
+});
+const drawerTitle = styleWithLayer({
+	fontFamily: vars.fontFamily.heading,
+	fontSize: "1.25rem",
+	fontWeight: "600",
+	color: vars.colors.textPrimary,
+	margin: 0
+});
+const drawerCloseButton = styleWithLayer({
+	background: "none",
+	border: "none",
+	padding: "0.5rem",
+	cursor: "pointer",
+	borderRadius: "0.375rem",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	color: vars.colors.textSecondary,
+	fontSize: "1.5rem",
+	lineHeight: "1",
+	transition: "background-color 0.2s ease-in-out, color 0.2s ease-in-out",
+	selectors: {
+		"&:hover": {
+			backgroundColor: vars.colors.borderMuted,
+			color: vars.colors.textPrimary
+		},
+		"&:focus-visible": {
+			outline: "2px solid var(--drawer-focus-ring, currentColor)",
+			outlineOffset: "2px"
+		}
+	}
+});
+const drawerBody = styleWithLayer({
+	padding: "1.25rem",
+	overflowY: "auto",
+	flex: 1
+});
+const drawerFooter = styleWithLayer({
+	padding: "1.25rem",
+	borderTop: `1px solid ${vars.colors.borderMuted}`,
+	display: "flex",
+	gap: "0.75rem",
+	justifyContent: "flex-end",
+	alignItems: "center"
+});
+
+//#endregion
+//#region src/components/Drawer/Drawer.tsx
+const sizeMap$1 = {
+	left: {
+		small: "250px",
+		medium: "350px",
+		large: "450px",
+		full: "100vw"
+	},
+	right: {
+		small: "250px",
+		medium: "350px",
+		large: "450px",
+		full: "100vw"
+	},
+	top: {
+		small: "200px",
+		medium: "300px",
+		large: "400px",
+		full: "100vh"
+	},
+	bottom: {
+		small: "200px",
+		medium: "300px",
+		large: "400px",
+		full: "100vh"
+	}
+};
+const Drawer = ({ isOpen, onClose, title, position = "right", size = "medium", children, footer, showCloseButton = true, closeOnOverlayClick = true, className, ...props }) => {
+	useEffect(() => {
+		if (isOpen) {
+			document.body.style.overflow = "hidden";
+		} else {
+			document.body.style.overflow = "";
+		}
+		return () => {
+			document.body.style.overflow = "";
+		};
+	}, [isOpen]);
+	useEffect(() => {
+		const handleEscape = (e) => {
+			if (e.key === "Escape" && isOpen) {
+				onClose();
+			}
+		};
+		document.addEventListener("keydown", handleEscape);
+		return () => document.removeEventListener("keydown", handleEscape);
+	}, [isOpen, onClose]);
+	if (!isOpen) return null;
+	const dimensionStyle = {
+		["--drawer-width"]: ["left", "right"].includes(position) ? sizeMap$1[position][size] : undefined,
+		["--drawer-height"]: ["top", "bottom"].includes(position) ? sizeMap$1[position][size] : undefined
+	};
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, {
+		className: drawerOverlay,
+		onClick: closeOnOverlayClick ? onClose : undefined,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		role: "dialog",
+		"aria-modal": "true",
+		className: clsx(drawer, drawerPositionVariants[position], className),
+		style: dimensionStyle,
+		...props
+	}, title && /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: drawerHeader
+	}, /* @__PURE__ */ React.createElement(Box, {
+		as: "h2",
+		className: drawerTitle
+	}, title), showCloseButton && /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		className: drawerCloseButton,
+		onClick: onClose,
+		"aria-label": "Close drawer",
+		type: "button"
+	}, "×")), /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: drawerBody
+	}, children), footer && /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: drawerFooter
+	}, footer)));
+};
+
+//#endregion
+//#region src/components/DropdownMenu/styles.css.ts
+const dropdownMenuContainer = styleWithLayer({
+	position: "relative",
+	display: "inline-block"
+});
+const dropdownMenuTrigger = styleWithLayer({
+	cursor: "pointer",
+	userSelect: "none"
+});
+const dropdownMenuContent = styleWithLayer({
+	position: "absolute",
+	backgroundColor: vars.colors.backgroundDefault,
+	border: `1px solid ${vars.colors.borderDefault}`,
+	borderRadius: "0.5rem",
+	boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+	minWidth: "160px",
+	zIndex: 50,
+	overflow: "hidden",
+	marginTop: "0.25rem"
+});
+const dropdownMenuPositionVariants = styleVariants({
+	bottomLeft: {
+		top: "100%",
+		left: 0
+	},
+	bottomRight: {
+		top: "100%",
+		right: 0
+	},
+	topLeft: {
+		bottom: "100%",
+		left: 0,
+		marginTop: 0,
+		marginBottom: "0.25rem"
+	},
+	topRight: {
+		bottom: "100%",
+		right: 0,
+		marginTop: 0,
+		marginBottom: "0.25rem"
+	}
+});
+const dropdownMenuItem = styleWithLayer({
+	padding: "0.75rem 1rem",
+	cursor: "pointer",
+	display: "flex",
+	alignItems: "center",
+	gap: "0.5rem",
+	fontSize: "14px",
+	color: vars.colors.textPrimary,
+	transition: "background-color 0.15s ease",
+	":hover": { backgroundColor: vars.colors.backgroundMuted },
+	":focus-visible": {
+		outline: "none",
+		backgroundColor: vars.colors.backgroundMuted
+	}
+});
+const dropdownMenuItemVariants = styleVariants({
+	default: {},
+	destructive: {
+		color: vars.colors.alertErrorText,
+		":hover": { backgroundColor: vars.colors.alertErrorBackground }
+	},
+	disabled: {
+		opacity: .5,
+		cursor: "not-allowed",
+		":hover": { backgroundColor: "transparent" }
+	}
+});
+const dropdownMenuSeparator = styleWithLayer({
+	height: "1px",
+	backgroundColor: vars.colors.borderMuted,
+	margin: "0.5rem 0"
+});
+const dropdownMenuGroup = styleWithLayer({ padding: "0.5rem 0" });
+const dropdownMenuLabel = styleWithLayer({
+	padding: "0.5rem 1rem",
+	fontSize: "12px",
+	fontWeight: "600",
+	color: vars.colors.textSecondary,
+	textTransform: "uppercase",
+	letterSpacing: "0.05em"
+});
+
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenu.tsx
+const DropdownMenu = ({ trigger, items = [], groups = [], position = "bottomLeft", closeOnItemClick = true, className, ...props }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (containerRef.current && !containerRef.current.contains(event.target)) {
+				setIsOpen(false);
+			}
+		};
+		if (isOpen) {
+			document.addEventListener("mousedown", handleClickOutside);
+		}
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [isOpen]);
+	useEffect(() => {
+		const handleEscape = (e) => {
+			if (e.key === "Escape" && isOpen) {
+				setIsOpen(false);
+			}
+		};
+		document.addEventListener("keydown", handleEscape);
+		return () => document.removeEventListener("keydown", handleEscape);
+	}, [isOpen]);
+	const handleItemClick = (item) => {
+		if (item.disabled || item.variant === "disabled") return;
+		item.onClick?.();
+		if (closeOnItemClick) {
+			setIsOpen(false);
+		}
+	};
+	const renderItem = (item, index) => /* @__PURE__ */ React.createElement(Box, {
+		key: index,
+		as: "button",
+		className: clsx(dropdownMenuItem, dropdownMenuItemVariants[item.disabled || item.variant === "disabled" ? "disabled" : item.variant || "default"]),
+		onClick: () => handleItemClick(item),
+		disabled: item.disabled || item.variant === "disabled",
+		role: "menuitem",
+		type: "button"
+	}, item.icon && /* @__PURE__ */ React.createElement("span", null, item.icon), item.label);
+	const renderGroup = (group, index) => /* @__PURE__ */ React.createElement(Box, {
+		key: index,
+		className: dropdownMenuGroup,
+		role: "group"
+	}, group.label && /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: dropdownMenuLabel,
+		role: "presentation"
+	}, group.label), group.items.map((item, itemIndex) => renderItem(item, itemIndex)));
+	return /* @__PURE__ */ React.createElement(Box, {
+		ref: containerRef,
+		className: clsx(dropdownMenuContainer, className),
+		...props
+	}, /* @__PURE__ */ React.createElement(Box, {
+		className: dropdownMenuTrigger,
+		onClick: () => setIsOpen(!isOpen),
+		"aria-expanded": isOpen,
+		"aria-haspopup": "true"
+	}, trigger), isOpen && /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(dropdownMenuContent, dropdownMenuPositionVariants[position]),
+		role: "menu",
+		"aria-orientation": "vertical"
+	}, items.length > 0 && /* @__PURE__ */ React.createElement(Box, { className: dropdownMenuGroup }, items.map((item, index) => renderItem(item, index))), groups.map((group, index) => /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, index > 0 && /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: dropdownMenuSeparator,
+		role: "separator"
+	}), renderGroup(group, index)))));
+};
+
+//#endregion
+//#region src/components/Popover/styles.css.ts
+const fadeIn = keyframes({
+	from: {
+		opacity: 0,
+		transform: "scale(0.95)"
+	},
+	to: {
+		opacity: 1,
+		transform: "scale(1)"
+	}
+});
+const popoverContainer = styleWithLayer({
+	position: "relative",
+	display: "inline-block"
+});
+const popoverTrigger = styleWithLayer({ cursor: "pointer" });
+const popoverContent = styleWithLayer({
+	position: "absolute",
+	backgroundColor: vars.colors.backgroundDefault,
+	border: `1px solid ${vars.colors.borderDefault}`,
+	borderRadius: "0.75rem",
+	boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+	zIndex: 50,
+	padding: "1rem",
+	minWidth: "200px",
+	maxWidth: "400px",
+	animation: `${fadeIn} 0.15s ease-out`
+});
+const popoverPositionVariants = styleVariants({
+	top: {
+		bottom: "100%",
+		left: "50%",
+		transform: "translateX(-50%)",
+		marginBottom: "0.5rem"
+	},
+	bottom: {
+		top: "100%",
+		left: "50%",
+		transform: "translateX(-50%)",
+		marginTop: "0.5rem"
+	},
+	left: {
+		right: "100%",
+		top: "50%",
+		transform: "translateY(-50%)",
+		marginRight: "0.5rem"
+	},
+	right: {
+		left: "100%",
+		top: "50%",
+		transform: "translateY(-50%)",
+		marginLeft: "0.5rem"
+	},
+	topLeft: {
+		bottom: "100%",
+		right: 0,
+		marginBottom: "0.5rem"
+	},
+	topRight: {
+		bottom: "100%",
+		left: 0,
+		marginBottom: "0.5rem"
+	},
+	bottomLeft: {
+		top: "100%",
+		right: 0,
+		marginTop: "0.5rem"
+	},
+	bottomRight: {
+		top: "100%",
+		left: 0,
+		marginTop: "0.5rem"
+	}
+});
+const popoverArrow = styleWithLayer({
+	position: "absolute",
+	width: "8px",
+	height: "8px",
+	backgroundColor: vars.colors.backgroundDefault,
+	border: `1px solid ${vars.colors.borderDefault}`,
+	transform: "rotate(45deg)"
+});
+const popoverArrowPositionVariants = styleVariants({
+	top: {
+		bottom: "-5px",
+		left: "50%",
+		transform: "translateX(-50%) rotate(45deg)",
+		borderTop: "none",
+		borderLeft: "none"
+	},
+	bottom: {
+		top: "-5px",
+		left: "50%",
+		transform: "translateX(-50%) rotate(45deg)",
+		borderBottom: "none",
+		borderRight: "none"
+	},
+	left: {
+		right: "-5px",
+		top: "50%",
+		transform: "translateY(-50%) rotate(45deg)",
+		borderLeft: "none",
+		borderBottom: "none"
+	},
+	right: {
+		left: "-5px",
+		top: "50%",
+		transform: "translateY(-50%) rotate(45deg)",
+		borderRight: "none",
+		borderTop: "none"
+	},
+	topLeft: {
+		bottom: "-5px",
+		right: "1rem",
+		transform: "rotate(45deg)",
+		borderTop: "none",
+		borderLeft: "none"
+	},
+	topRight: {
+		bottom: "-5px",
+		left: "1rem",
+		transform: "rotate(45deg)",
+		borderTop: "none",
+		borderLeft: "none"
+	},
+	bottomLeft: {
+		top: "-5px",
+		right: "1rem",
+		transform: "rotate(45deg)",
+		borderBottom: "none",
+		borderRight: "none"
+	},
+	bottomRight: {
+		top: "-5px",
+		left: "1rem",
+		transform: "rotate(45deg)",
+		borderBottom: "none",
+		borderRight: "none"
+	}
+});
+const popoverHeader = styleWithLayer({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	marginBottom: "0.75rem",
+	paddingBottom: "0.75rem",
+	borderBottom: `1px solid ${vars.colors.borderMuted}`
+});
+const popoverTitle = styleWithLayer({
+	fontFamily: vars.fontFamily.heading,
+	fontSize: "1rem",
+	fontWeight: "600",
+	color: vars.colors.textPrimary,
+	margin: 0
+});
+const popoverCloseButton = styleWithLayer({
+	background: "none",
+	border: "none",
+	padding: "0.25rem",
+	cursor: "pointer",
+	borderRadius: "0.25rem",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	color: vars.colors.textSecondary,
+	fontSize: "1.25rem",
+	lineHeight: "1",
+	marginLeft: "0.5rem",
+	transition: "background-color 0.2s ease-in-out, color 0.2s ease-in-out",
+	":hover": {
+		backgroundColor: vars.colors.borderMuted,
+		color: vars.colors.textPrimary
+	}
+});
+const popoverBody = styleWithLayer({
+	fontSize: "14px",
+	color: vars.colors.textPrimary,
+	lineHeight: "1.5"
+});
+const popoverFooter = styleWithLayer({
+	display: "flex",
+	gap: "0.5rem",
+	justifyContent: "flex-end",
+	marginTop: "0.75rem",
+	paddingTop: "0.75rem",
+	borderTop: `1px solid ${vars.colors.borderMuted}`
+});
+
+//#endregion
+//#region src/components/Popover/Popover.tsx
+const Popover = ({ trigger, children, position = "bottom", title, footer, showArrow = true, triggerType = "click", closeOnClickOutside = true, closeOnEscape = true, defaultOpen = false, onOpenChange, className, ...props }) => {
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		onOpenChange?.(isOpen);
+	}, [isOpen, onOpenChange]);
+	useEffect(() => {
+		if (!closeOnClickOutside) return;
+		const handleClickOutside = (event) => {
+			if (containerRef.current && !containerRef.current.contains(event.target)) {
+				setIsOpen(false);
+			}
+		};
+		if (isOpen) {
+			document.addEventListener("mousedown", handleClickOutside);
+		}
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [isOpen, closeOnClickOutside]);
+	useEffect(() => {
+		if (!closeOnEscape) return;
+		const handleEscape = (e) => {
+			if (e.key === "Escape" && isOpen) {
+				setIsOpen(false);
+			}
+		};
+		document.addEventListener("keydown", handleEscape);
+		return () => document.removeEventListener("keydown", handleEscape);
+	}, [isOpen, closeOnEscape]);
+	const handleTriggerClick = () => {
+		if (triggerType === "click") {
+			setIsOpen(!isOpen);
+		}
+	};
+	const handleTriggerMouseEnter = () => {
+		if (triggerType === "hover") {
+			setIsOpen(true);
+		}
+	};
+	const handleTriggerMouseLeave = () => {
+		if (triggerType === "hover") {
+			setIsOpen(false);
+		}
+	};
+	return /* @__PURE__ */ React.createElement(Box, {
+		ref: containerRef,
+		className: clsx(popoverContainer, className),
+		onMouseEnter: handleTriggerMouseEnter,
+		onMouseLeave: handleTriggerMouseLeave,
+		...props
+	}, /* @__PURE__ */ React.createElement(Box, {
+		className: popoverTrigger,
+		onClick: handleTriggerClick,
+		"aria-expanded": isOpen
+	}, trigger), isOpen && /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(popoverContent, popoverPositionVariants[position]),
+		role: "dialog",
+		"aria-modal": "false"
+	}, showArrow && /* @__PURE__ */ React.createElement(Box, {
+		as: "span",
+		className: clsx(popoverArrow, popoverArrowPositionVariants[position])
+	}), (title || triggerType === "click") && /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: popoverHeader
+	}, title && /* @__PURE__ */ React.createElement(Box, {
+		as: "h3",
+		className: popoverTitle
+	}, title), triggerType === "click" && /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		className: popoverCloseButton,
+		onClick: () => setIsOpen(false),
+		"aria-label": "Close popover",
+		type: "button"
+	}, "×")), /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: popoverBody
+	}, children), footer && /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: popoverFooter
+	}, footer)));
+};
+
+//#endregion
+//#region src/components/Stepper/styles.css.ts
+const stepperContainer = styleWithLayer({
+	display: "flex",
+	alignItems: "flex-start",
+	width: "100%"
+});
+const stepperHorizontal = styleWithLayer({
+	flexDirection: "row",
+	justifyContent: "space-between"
+});
+const stepperVertical = styleWithLayer({
+	flexDirection: "column",
+	gap: "1rem"
+});
+const step = styleWithLayer({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	position: "relative",
+	flex: 1
+});
+const stepVertical = styleWithLayer({
+	flexDirection: "row",
+	alignItems: "flex-start",
+	gap: "1rem"
+});
+const stepIndicator = styleWithLayer({
+	width: "2.5rem",
+	height: "2.5rem",
+	borderRadius: "50%",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	fontWeight: "600",
+	fontSize: "14px",
+	transition: "all 0.3s ease",
+	zIndex: 1
+});
+const stepIndicatorVariants = styleVariants({
+	pending: {
+		backgroundColor: vars.colors.borderMuted,
+		color: vars.colors.textSecondary,
+		border: `2px solid ${vars.colors.borderMuted}`
+	},
+	current: {
+		backgroundColor: vars.colors.buttonBackgroundPrimary,
+		color: vars.colors.buttonTextPrimary,
+		border: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+		boxShadow: `0 0 0 4px ${vars.colors.alertInfoBackground}`
+	},
+	completed: {
+		backgroundColor: vars.colors.alertSuccessBorder,
+		color: vars.colors.buttonTextPrimary,
+		border: `2px solid ${vars.colors.alertSuccessBorder}`
+	}
+});
+const stepContent = styleWithLayer({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	marginTop: "0.5rem",
+	textAlign: "center"
+});
+const stepContentVertical = styleWithLayer({
+	alignItems: "flex-start",
+	marginTop: 0,
+	textAlign: "left"
+});
+const stepTitle = styleWithLayer({
+	fontFamily: vars.fontFamily.heading,
+	fontSize: "14px",
+	fontWeight: "600",
+	color: vars.colors.textPrimary,
+	margin: 0
+});
+const stepDescription = styleWithLayer({
+	fontSize: "12px",
+	color: vars.colors.textSecondary,
+	marginTop: "0.25rem",
+	maxWidth: "200px"
+});
+const stepConnector = styleWithLayer({
+	position: "absolute",
+	top: "1.25rem",
+	left: "calc(50% + 1.5rem)",
+	right: "calc(-50% + 1.5rem)",
+	height: "2px",
+	backgroundColor: vars.colors.borderMuted,
+	zIndex: 0
+});
+const stepConnectorCompleted = styleWithLayer({ backgroundColor: vars.colors.alertSuccessBorder });
+const stepConnectorVertical = styleWithLayer({
+	position: "absolute",
+	top: "2.5rem",
+	left: "1.25rem",
+	width: "2px",
+	height: "calc(100% + 1rem)",
+	backgroundColor: vars.colors.borderMuted,
+	zIndex: 0
+});
+
+//#endregion
+//#region src/components/Stepper/Stepper.tsx
+const Stepper = ({ steps, currentStep = 0, orientation = "horizontal", showConnectors = true, onStepClick, clickable = false, className, ...props }) => {
+	const getStepStatus = (index) => {
+		if (index < currentStep) return "completed";
+		if (index === currentStep) return "current";
+		return "pending";
+	};
+	const handleStepClick = (index) => {
+		if (clickable && onStepClick) {
+			onStepClick(index);
+		}
+	};
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(stepperContainer, orientation === "horizontal" ? stepperHorizontal : stepperVertical, className),
+		role: "list",
+		"aria-label": "Step progress",
+		...props
+	}, steps.map((stepItem, index) => {
+		const status = stepItem.status || getStepStatus(index);
+		const isLast = index === steps.length - 1;
+		const isCompleted = status === "completed";
+		return /* @__PURE__ */ React.createElement(Box, {
+			key: index,
+			className: clsx(step, orientation === "vertical" && stepVertical),
+			role: "listitem",
+			"aria-current": status === "current" ? "step" : undefined
+		}, showConnectors && !isLast && orientation === "horizontal" && /* @__PURE__ */ React.createElement(Box, {
+			className: clsx(stepConnector, isCompleted && stepConnectorCompleted),
+			"aria-hidden": "true"
+		}), showConnectors && !isLast && orientation === "vertical" && /* @__PURE__ */ React.createElement(Box, {
+			className: stepConnectorVertical,
+			style: { backgroundColor: isCompleted ? undefined : undefined },
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ React.createElement(Box, {
+			className: clsx(stepIndicator, stepIndicatorVariants[status]),
+			onClick: () => handleStepClick(index),
+			style: { cursor: clickable ? "pointer" : "default" },
+			"aria-label": `Step ${index + 1}: ${stepItem.title}`
+		}, status === "completed" ? "✓" : index + 1), /* @__PURE__ */ React.createElement(Box, { className: clsx(stepContent, orientation === "vertical" && stepContentVertical) }, /* @__PURE__ */ React.createElement(Box, {
+			as: "h4",
+			className: stepTitle
+		}, stepItem.title), stepItem.description && /* @__PURE__ */ React.createElement(Box, {
+			as: "p",
+			className: stepDescription
+		}, stepItem.description)));
+	}));
+};
+
+//#endregion
+//#region src/components/Combobox/styles.css.ts
+const comboboxContainer = styleWithLayer({
+	position: "relative",
+	width: "100%"
+});
+const comboboxInput = styleWithLayer({
+	width: "100%",
+	padding: "0.75rem 2.5rem 0.75rem 1rem",
+	fontSize: "14px",
+	fontFamily: vars.fontFamily.body,
+	color: vars.colors.textPrimary,
+	backgroundColor: vars.colors.inputBackground,
+	border: `1px solid ${vars.colors.inputBorder}`,
+	borderRadius: "8px",
+	outline: "none",
+	transition: "border-color 0.2s ease",
+	"::placeholder": { color: vars.colors.inputPlaceholder },
+	":focus-visible": {
+		outline: `2px solid ${vars.colors.inputBorderFocused}`,
+		outlineOffset: "2px"
+	},
+	":hover": { borderColor: vars.colors.inputBorderFocused },
+	selectors: {
+		"&:disabled": {
+			cursor: "not-allowed",
+			opacity: .5,
+			backgroundColor: vars.colors.backgroundMuted
+		},
+		"&:disabled:hover": { borderColor: vars.colors.inputBorder }
+	}
+});
+const comboboxInputVariants = styleVariants({
+	default: {},
+	error: {
+		border: `1px solid ${vars.colors.alertErrorBorder}`,
+		":focus-visible": { outline: `2px solid ${vars.colors.alertErrorBorder}` },
+		":hover": { borderColor: vars.colors.alertErrorBorder }
+	}
+});
+const comboboxLabel = styleWithLayer({
+	display: "block",
+	fontSize: "14px",
+	fontWeight: "500",
+	color: vars.colors.textPrimary,
+	marginBottom: "8px"
+});
+const comboboxDropdown = styleWithLayer({
+	position: "absolute",
+	top: "100%",
+	left: 0,
+	right: 0,
+	backgroundColor: vars.colors.backgroundDefault,
+	border: `1px solid ${vars.colors.borderDefault}`,
+	borderRadius: "8px",
+	boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+	maxHeight: "200px",
+	overflowY: "auto",
+	zIndex: 50,
+	marginTop: "4px"
+});
+const comboboxOption = styleWithLayer({
+	padding: "0.75rem 1rem",
+	cursor: "pointer",
+	fontSize: "14px",
+	color: vars.colors.textPrimary,
+	transition: "background-color 0.15s ease",
+	":hover": { backgroundColor: vars.colors.backgroundMuted },
+	":focus-visible": {
+		outline: "none",
+		backgroundColor: vars.colors.backgroundMuted
+	}
+});
+const comboboxOptionSelected = styleWithLayer({
+	backgroundColor: vars.colors.buttonBackgroundPrimary,
+	color: vars.colors.buttonTextPrimary,
+	":hover": { backgroundColor: vars.colors.buttonBackgroundFocusedPrimary }
+});
+const comboboxOptionDisabled = styleWithLayer({
+	opacity: .5,
+	cursor: "not-allowed",
+	":hover": { backgroundColor: "transparent" }
+});
+const comboboxClearButton = styleWithLayer({
+	position: "absolute",
+	right: "2.5rem",
+	top: "50%",
+	transform: "translateY(-50%)",
+	background: "none",
+	border: "none",
+	cursor: "pointer",
+	padding: "0.25rem",
+	color: vars.colors.textSecondary,
+	fontSize: "16px",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	":hover": { color: vars.colors.textPrimary }
+});
+const comboboxArrow = styleWithLayer({
+	position: "absolute",
+	right: "0.75rem",
+	top: "50%",
+	transform: "translateY(-50%)",
+	pointerEvents: "none",
+	color: vars.colors.textSecondary
+});
+const comboboxNoResults = styleWithLayer({
+	padding: "0.75rem 1rem",
+	fontSize: "14px",
+	color: vars.colors.textSecondary,
+	textAlign: "center"
+});
+const comboboxHint = styleWithLayer({
+	fontSize: "12px",
+	color: vars.colors.textSecondary,
+	marginTop: "4px"
+});
+const comboboxErrorMessage = styleWithLayer({
+	fontSize: "12px",
+	color: vars.colors.alertErrorText,
+	marginTop: "4px"
+});
+
+//#endregion
+//#region src/components/Combobox/Combobox.tsx
+const defaultFilterFn = (option, inputValue) => {
+	return option.label.toLowerCase().includes(inputValue.toLowerCase());
+};
+const Combobox = ({ label, options, value, onChange, onInputChange, placeholder = "Search...", hint, error = false, errorMessage, fullWidth = true, clearable = true, disabled = false, filterFn = defaultFilterFn, className, ...props }) => {
+	const [inputValue, setInputValue] = useState("");
+	const [isOpen, setIsOpen] = useState(false);
+	const [highlightedIndex, setHighlightedIndex] = useState(-1);
+	const containerRef = useRef(null);
+	const inputRef = useRef(null);
+	const selectedOption = options.find((opt) => opt.value === value);
+	useEffect(() => {
+		if (selectedOption) {
+			setInputValue(selectedOption.label);
+		} else if (!isOpen) {
+			setInputValue("");
+		}
+	}, [selectedOption, isOpen]);
+	const filteredOptions = options.filter((option) => filterFn(option, inputValue));
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (containerRef.current && !containerRef.current.contains(event.target)) {
+				setIsOpen(false);
+				if (selectedOption) {
+					setInputValue(selectedOption.label);
+				} else {
+					setInputValue("");
+				}
+			}
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [selectedOption]);
+	const handleInputChange = (e) => {
+		const newValue = e.target.value;
+		setInputValue(newValue);
+		setIsOpen(true);
+		setHighlightedIndex(-1);
+		onInputChange?.(newValue);
+		if (!newValue) {
+			onChange?.("", null);
+		}
+	};
+	const handleOptionClick = (option) => {
+		if (option.disabled) return;
+		setInputValue(option.label);
+		setIsOpen(false);
+		onChange?.(option.value, option);
+	};
+	const handleClear = (e) => {
+		e.stopPropagation();
+		setInputValue("");
+		setIsOpen(false);
+		onChange?.("", null);
+		inputRef.current?.focus();
+	};
+	const handleKeyDown = (e) => {
+		if (disabled) return;
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				if (!isOpen) {
+					setIsOpen(true);
+				}
+				setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				setHighlightedIndex((prev) => prev > 0 ? prev - 1 : prev);
+				break;
+			case "Enter":
+				e.preventDefault();
+				if (isOpen && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+					handleOptionClick(filteredOptions[highlightedIndex]);
+				} else {
+					setIsOpen(!isOpen);
+				}
+				break;
+			case "Escape":
+				setIsOpen(false);
+				if (selectedOption) {
+					setInputValue(selectedOption.label);
+				} else {
+					setInputValue("");
+				}
+				break;
+		}
+	};
+	const displayValue = selectedOption && !isOpen ? selectedOption.label : inputValue;
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: comboboxContainer,
+		ref: containerRef,
+		width: fullWidth ? "100%" : undefined
+	}, label && /* @__PURE__ */ React.createElement(Box, {
+		as: "label",
+		className: comboboxLabel
+	}, label), /* @__PURE__ */ React.createElement(Box, { position: "relative" }, /* @__PURE__ */ React.createElement(Box, {
+		as: "input",
+		ref: inputRef,
+		type: "text",
+		value: displayValue,
+		onChange: handleInputChange,
+		onKeyDown: handleKeyDown,
+		onFocus: () => setIsOpen(true),
+		placeholder,
+		disabled,
+		className: clsx(comboboxInput, comboboxInputVariants[error ? "error" : "default"], className),
+		role: "combobox",
+		"aria-expanded": isOpen,
+		"aria-autocomplete": "list",
+		"aria-controls": isOpen ? "combobox-listbox" : undefined,
+		"aria-activedescendant": highlightedIndex >= 0 ? `option-${filteredOptions[highlightedIndex]?.value}` : undefined,
+		...props
+	}), clearable && inputValue && !disabled && /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		className: comboboxClearButton,
+		onClick: handleClear,
+		type: "button",
+		"aria-label": "Clear selection"
+	}, "×"), /* @__PURE__ */ React.createElement(Box, {
+		className: comboboxArrow,
+		"aria-hidden": "true"
+	}, /* @__PURE__ */ React.createElement("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 12 12",
+		fill: "currentColor"
+	}, /* @__PURE__ */ React.createElement("path", { d: "M6 8L1 3h10z" })))), isOpen && /* @__PURE__ */ React.createElement(Box, {
+		as: "ul",
+		id: "combobox-listbox",
+		className: comboboxDropdown,
+		role: "listbox"
+	}, filteredOptions.length === 0 ? /* @__PURE__ */ React.createElement(Box, {
+		as: "li",
+		className: comboboxNoResults
+	}, "No results found") : filteredOptions.map((option, index) => /* @__PURE__ */ React.createElement(Box, {
+		key: option.value,
+		as: "li",
+		id: `option-${option.value}`,
+		className: clsx(comboboxOption, option.value === value && comboboxOptionSelected, option.disabled && comboboxOptionDisabled),
+		onClick: () => handleOptionClick(option),
+		role: "option",
+		"aria-selected": option.value === value,
+		"aria-disabled": option.disabled,
+		style: { backgroundColor: index === highlightedIndex ? "var(--highlight-color, #f3f4f6)" : undefined }
+	}, option.label))), error && errorMessage && /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: comboboxErrorMessage,
+		role: "alert"
+	}, errorMessage), hint && !error && /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: comboboxHint
+	}, hint));
+};
+
+//#endregion
+//#region src/components/NumberInput/styles.css.ts
+const numberInputContainer = styleWithLayer({
+	position: "relative",
+	display: "flex",
+	alignItems: "center",
+	width: "100%"
+});
+const numberInput = styleWithLayer({
+	width: "100%",
+	padding: "0.75rem 2.5rem",
+	fontSize: "14px",
+	fontFamily: vars.fontFamily.body,
+	color: vars.colors.textPrimary,
+	backgroundColor: vars.colors.inputBackground,
+	border: `1px solid ${vars.colors.inputBorder}`,
+	borderRadius: "8px",
+	outline: "none",
+	textAlign: "center",
+	transition: "border-color 0.2s ease",
+	"::placeholder": { color: vars.colors.inputPlaceholder },
+	":focus-visible": {
+		outline: `2px solid ${vars.colors.inputBorderFocused}`,
+		outlineOffset: "2px"
+	},
+	":hover": { borderColor: vars.colors.inputBorderFocused },
+	selectors: {
+		"&:disabled": {
+			cursor: "not-allowed",
+			opacity: .5,
+			backgroundColor: vars.colors.backgroundMuted
+		},
+		"&:disabled:hover": { borderColor: vars.colors.inputBorder }
+	}
+});
+const numberInputVariants = styleVariants({
+	default: {},
+	error: {
+		border: `1px solid ${vars.colors.alertErrorBorder}`,
+		":focus-visible": { outline: `2px solid ${vars.colors.alertErrorBorder}` },
+		":hover": { borderColor: vars.colors.alertErrorBorder }
+	}
+});
+const numberInputLabel = styleWithLayer({
+	display: "block",
+	fontSize: "14px",
+	fontWeight: "500",
+	color: vars.colors.textPrimary,
+	marginBottom: "8px"
+});
+const numberInputStepper = styleWithLayer({
+	position: "absolute",
+	display: "flex",
+	flexDirection: "column",
+	right: "0.5rem",
+	top: "50%",
+	transform: "translateY(-50%)",
+	gap: "2px"
+});
+const numberInputStepperLeft = styleWithLayer({
+	left: "0.5rem",
+	right: "auto"
+});
+const numberInputButton = styleWithLayer({
+	width: "1.5rem",
+	height: "1.25rem",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	backgroundColor: vars.colors.buttonBackgroundSecondary,
+	border: `1px solid ${vars.colors.borderDefault}`,
+	borderRadius: "4px",
+	cursor: "pointer",
+	fontSize: "12px",
+	color: vars.colors.buttonTextSecondary,
+	transition: "all 0.15s ease",
+	padding: 0,
+	":hover": { backgroundColor: vars.colors.buttonBackgroundFocusedSecondary },
+	":active": { transform: "scale(0.95)" },
+	selectors: {
+		"&:disabled": {
+			cursor: "not-allowed",
+			opacity: .5
+		},
+		"&:disabled:hover": { backgroundColor: vars.colors.buttonBackgroundSecondary }
+	}
+});
+const numberInputWrapper = styleWithLayer({ width: "100%" });
+const numberInputHint = styleWithLayer({
+	fontSize: "12px",
+	color: vars.colors.textSecondary,
+	marginTop: "4px"
+});
+const numberInputErrorMessage = styleWithLayer({
+	fontSize: "12px",
+	color: vars.colors.alertErrorText,
+	marginTop: "4px"
+});
+
+//#endregion
+//#region src/components/NumberInput/NumberInput.tsx
+const NumberInput = ({ label, value, onChange, min = -Infinity, max = Infinity, step = 1, stepperPosition = "right", placeholder = "0", hint, error = false, errorMessage, fullWidth = true, disabled = false, allowEmpty = true, className, ...props }) => {
+	const handleChange = (e) => {
+		const inputValue = e.target.value;
+		if (inputValue === "") {
+			if (allowEmpty) {
+				onChange?.("");
+			} else {
+				onChange?.(0);
+			}
+			return;
+		}
+		const numValue = parseFloat(inputValue);
+		if (!isNaN(numValue)) {
+			const clampedValue = Math.min(Math.max(numValue, min), max);
+			onChange?.(clampedValue);
+		}
+	};
+	const increment = useCallback(() => {
+		const currentValue = typeof value === "number" ? value : 0;
+		const newValue = Math.min(currentValue + step, max);
+		onChange?.(newValue);
+	}, [
+		value,
+		step,
+		max,
+		onChange
+	]);
+	const decrement = useCallback(() => {
+		const currentValue = typeof value === "number" ? value : 0;
+		const newValue = Math.max(currentValue - step, min);
+		onChange?.(newValue);
+	}, [
+		value,
+		step,
+		min,
+		onChange
+	]);
+	const isIncrementDisabled = disabled || typeof value === "number" && value >= max;
+	const isDecrementDisabled = disabled || typeof value === "number" && value <= min;
+	const displayValue = value === "" ? "" : value;
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: numberInputWrapper,
+		width: fullWidth ? "100%" : undefined
+	}, label && /* @__PURE__ */ React.createElement(Box, {
+		as: "label",
+		className: numberInputLabel
+	}, label), /* @__PURE__ */ React.createElement(Box, { className: numberInputContainer }, /* @__PURE__ */ React.createElement(Box, {
+		as: "input",
+		type: "number",
+		value: displayValue,
+		onChange: handleChange,
+		min,
+		max,
+		step,
+		placeholder,
+		disabled,
+		className: clsx(numberInput, numberInputVariants[error ? "error" : "default"], className),
+		...props
+	}), /* @__PURE__ */ React.createElement(Box, { className: clsx(numberInputStepper, stepperPosition === "left" && numberInputStepperLeft) }, /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		className: numberInputButton,
+		onClick: increment,
+		disabled: isIncrementDisabled,
+		type: "button",
+		"aria-label": "Increase value"
+	}, "+"), /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		className: numberInputButton,
+		onClick: decrement,
+		disabled: isDecrementDisabled,
+		type: "button",
+		"aria-label": "Decrease value"
+	}, "−"))), error && errorMessage && /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: numberInputErrorMessage,
+		role: "alert"
+	}, errorMessage), hint && !error && /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: numberInputHint
+	}, hint));
+};
+
+//#endregion
+//#region src/components/FileUpload/styles.css.ts
+const fileUploadContainer = styleWithLayer({ width: "100%" });
+const fileUploadDropzone = styleWithLayer({
+	border: `2px dashed ${vars.colors.borderDefault}`,
+	borderRadius: "12px",
+	padding: "2rem",
+	textAlign: "center",
+	cursor: "pointer",
+	transition: "all 0.2s ease",
+	backgroundColor: vars.colors.backgroundMuted,
+	":hover": {
+		borderColor: vars.colors.inputBorderFocused,
+		backgroundColor: vars.colors.alertInfoBackground
+	}
+});
+const fileUploadDropzoneVariants = styleVariants({
+	default: {},
+	dragOver: {
+		borderColor: vars.colors.buttonBackgroundPrimary,
+		backgroundColor: vars.colors.alertInfoBackground,
+		borderStyle: "solid"
+	},
+	error: {
+		borderColor: vars.colors.alertErrorBorder,
+		backgroundColor: vars.colors.alertErrorBackground
+	},
+	disabled: {
+		cursor: "not-allowed",
+		opacity: .6,
+		":hover": {
+			borderColor: vars.colors.borderDefault,
+			backgroundColor: vars.colors.backgroundMuted
+		}
+	}
+});
+const fileUploadLabel = styleWithLayer({
+	display: "block",
+	fontSize: "14px",
+	fontWeight: "500",
+	color: vars.colors.textPrimary,
+	marginBottom: "8px"
+});
+const fileUploadText = styleWithLayer({
+	fontSize: "14px",
+	color: vars.colors.textSecondary,
+	marginTop: "0.5rem"
+});
+const fileUploadHint = styleWithLayer({
+	fontSize: "12px",
+	color: vars.colors.textSecondary,
+	marginTop: "0.5rem"
+});
+const fileUploadInput = styleWithLayer({ display: "none" });
+const fileUploadList = styleWithLayer({
+	marginTop: "1rem",
+	display: "flex",
+	flexDirection: "column",
+	gap: "0.75rem"
+});
+const fileUploadItem = styleWithLayer({
+	display: "flex",
+	alignItems: "center",
+	gap: "0.75rem",
+	padding: "0.75rem",
+	backgroundColor: vars.colors.backgroundDefault,
+	border: `1px solid ${vars.colors.borderMuted}`,
+	borderRadius: "8px"
+});
+const fileUploadItemInfo = styleWithLayer({
+	flex: 1,
+	minWidth: 0
+});
+const fileUploadItemName = styleWithLayer({
+	fontSize: "14px",
+	fontWeight: "500",
+	color: vars.colors.textPrimary,
+	whiteSpace: "nowrap",
+	overflow: "hidden",
+	textOverflow: "ellipsis"
+});
+const fileUploadItemSize = styleWithLayer({
+	fontSize: "12px",
+	color: vars.colors.textSecondary,
+	marginTop: "2px"
+});
+const fileUploadItemProgress = styleWithLayer({
+	flex: 1,
+	maxWidth: "200px"
+});
+const fileUploadRemoveButton = styleWithLayer({
+	background: "none",
+	border: "none",
+	cursor: "pointer",
+	padding: "0.25rem",
+	color: vars.colors.textSecondary,
+	fontSize: "18px",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	borderRadius: "4px",
+	transition: "all 0.15s ease",
+	":hover": {
+		color: vars.colors.alertErrorText,
+		backgroundColor: vars.colors.alertErrorBackground
+	}
+});
+const fileUploadError = styleWithLayer({
+	fontSize: "12px",
+	color: vars.colors.alertErrorText,
+	marginTop: "0.5rem"
+});
+const fileUploadIcon = styleWithLayer({
+	fontSize: "24px",
+	color: vars.colors.textSecondary
+});
+const fileUploadProgressBar = styleWithLayer({
+	width: "100%",
+	height: "4px",
+	backgroundColor: vars.colors.borderMuted,
+	borderRadius: "2px",
+	overflow: "hidden",
+	marginTop: "0.5rem"
+});
+const fileUploadProgressFill = styleWithLayer({
+	height: "100%",
+	backgroundColor: vars.colors.buttonBackgroundPrimary,
+	transition: "width 0.3s ease"
+});
+const fileUploadProgressFillVariants = styleVariants({
+	uploading: { backgroundColor: vars.colors.buttonBackgroundPrimary },
+	success: { backgroundColor: vars.colors.alertSuccessBorder },
+	error: { backgroundColor: vars.colors.alertErrorBorder }
+});
+
+//#endregion
+//#region src/components/FileUpload/FileUpload.tsx
+const formatFileSize = (bytes) => {
+	if (bytes === 0) return "0 Bytes";
+	const k = 1024;
+	const sizes = [
+		"Bytes",
+		"KB",
+		"MB",
+		"GB"
+	];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+};
+const FileUpload = ({ label, files = [], onFilesChange, onFileAdd, onFileRemove, accept, multiple = false, maxFileSize, maxFiles, disabled = false, dropzoneText = "Drag and drop files here, or click to browse", hint, showProgress = true, className, ...props }) => {
+	const [isDragOver, setIsDragOver] = useState(false);
+	const [error, setError] = useState(null);
+	const inputRef = useRef(null);
+	const validateFile = (file) => {
+		if (maxFileSize && file.size > maxFileSize) {
+			return `File size exceeds ${formatFileSize(maxFileSize)}`;
+		}
+		if (accept) {
+			const acceptedTypes = accept.split(",").map((type) => type.trim());
+			const isAccepted = acceptedTypes.some((type) => {
+				if (type.includes("*")) {
+					return file.type.startsWith(type.replace("/*", ""));
+				}
+				return file.type === type || file.name.endsWith(type);
+			});
+			if (!isAccepted) {
+				return `File type not accepted. Allowed: ${accept}`;
+			}
+		}
+		return null;
+	};
+	const handleFiles = useCallback((fileList) => {
+		if (!fileList || disabled) return;
+		const newFiles = [];
+		const errors = [];
+		Array.from(fileList).forEach((file) => {
+			const validationError = validateFile(file);
+			if (validationError) {
+				errors.push(`${file.name}: ${validationError}`);
+			} else {
+				newFiles.push(file);
+			}
+		});
+		if (maxFiles && files.length + newFiles.length > maxFiles) {
+			errors.push(`Maximum ${maxFiles} files allowed`);
+			newFiles.splice(maxFiles - files.length);
+		}
+		if (errors.length > 0) {
+			setError(errors.join(", "));
+		} else {
+			setError(null);
+		}
+		if (newFiles.length > 0) {
+			onFileAdd?.(newFiles);
+		}
+	}, [
+		disabled,
+		files.length,
+		maxFileSize,
+		maxFiles,
+		accept,
+		onFileAdd
+	]);
+	const handleDragOver = (e) => {
+		e.preventDefault();
+		if (!disabled) {
+			setIsDragOver(true);
+		}
+	};
+	const handleDragLeave = (e) => {
+		e.preventDefault();
+		setIsDragOver(false);
+	};
+	const handleDrop = (e) => {
+		e.preventDefault();
+		setIsDragOver(false);
+		handleFiles(e.dataTransfer.files);
+	};
+	const handleClick = () => {
+		if (!disabled) {
+			inputRef.current?.click();
+		}
+	};
+	const handleInputChange = (e) => {
+		handleFiles(e.target.files);
+		e.target.value = "";
+	};
+	const handleRemove = (fileId) => {
+		onFileRemove?.(fileId);
+	};
+	const getVariant = () => {
+		if (disabled) return "disabled";
+		if (error) return "error";
+		if (isDragOver) return "dragOver";
+		return "default";
+	};
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(fileUploadContainer, className),
+		...props
+	}, label && /* @__PURE__ */ React.createElement(Box, {
+		as: "label",
+		className: fileUploadLabel
+	}, label), /* @__PURE__ */ React.createElement(Box, {
+		as: "div",
+		className: clsx(fileUploadDropzone, fileUploadDropzoneVariants[getVariant()]),
+		onDragOver: handleDragOver,
+		onDragLeave: handleDragLeave,
+		onDrop: handleDrop,
+		onClick: handleClick,
+		role: "button",
+		tabIndex: disabled ? -1 : 0,
+		"aria-disabled": disabled
+	}, /* @__PURE__ */ React.createElement(Box, {
+		className: fileUploadIcon,
+		"aria-hidden": "true"
+	}, /* @__PURE__ */ React.createElement("svg", {
+		width: "48",
+		height: "48",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2"
+	}, /* @__PURE__ */ React.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), /* @__PURE__ */ React.createElement("polyline", { points: "17,8 12,3 7,8" }), /* @__PURE__ */ React.createElement("line", {
+		x1: "12",
+		y1: "3",
+		x2: "12",
+		y2: "15"
+	}))), /* @__PURE__ */ React.createElement(Box, {
+		as: "p",
+		className: fileUploadText
+	}, dropzoneText), hint && /* @__PURE__ */ React.createElement(Box, {
+		as: "p",
+		className: fileUploadHint
+	}, hint), /* @__PURE__ */ React.createElement(Box, {
+		as: "input",
+		ref: inputRef,
+		type: "file",
+		className: fileUploadInput,
+		onChange: handleInputChange,
+		accept,
+		multiple,
+		disabled,
+		"aria-label": "File upload input"
+	})), error && /* @__PURE__ */ React.createElement(Box, {
+		as: "p",
+		className: fileUploadError,
+		role: "alert"
+	}, error), files.length > 0 && /* @__PURE__ */ React.createElement(Box, {
+		as: "ul",
+		className: fileUploadList,
+		"aria-label": "Uploaded files"
+	}, files.map((file) => /* @__PURE__ */ React.createElement(Box, {
+		key: file.id,
+		as: "li",
+		className: fileUploadItem
+	}, /* @__PURE__ */ React.createElement(Box, { className: fileUploadItemInfo }, /* @__PURE__ */ React.createElement(Box, {
+		as: "p",
+		className: fileUploadItemName,
+		title: file.name
+	}, file.name), /* @__PURE__ */ React.createElement(Box, {
+		as: "p",
+		className: fileUploadItemSize
+	}, formatFileSize(file.size), file.status === "uploading" && showProgress && " • Uploading...", file.status === "success" && " • Complete", file.status === "error" && file.errorMessage && ` • ${file.errorMessage}`), showProgress && file.status === "uploading" && /* @__PURE__ */ React.createElement(Box, { className: fileUploadProgressBar }, /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(fileUploadProgressFill, fileUploadProgressFillVariants[file.status]),
+		style: { width: `${file.progress}%` }
+	}))), /* @__PURE__ */ React.createElement(Box, {
+		as: "button",
+		className: fileUploadRemoveButton,
+		onClick: () => handleRemove(file.id),
+		type: "button",
+		"aria-label": `Remove ${file.name}`
+	}, "×")))));
+};
+
+//#endregion
+//#region src/components/Stack/Stack.tsx
+const alignMap = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	stretch: "stretch"
+};
+const justifyMap = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	between: "space-between",
+	around: "space-around",
+	evenly: "space-evenly"
+};
+const Stack = forwardRef(({ direction = "column", align, justify, gap, wrap, children, className, style, ...rest }, ref) => {
+	const alignItems = align ? alignMap[align] : undefined;
+	const justifyContent = justify ? justifyMap[justify] : undefined;
+	return /* @__PURE__ */ React.createElement(Box, {
+		ref,
+		display: "flex",
+		flexDirection: direction,
+		alignItems,
+		justifyContent,
+		gap,
+		className,
+		style: {
+			flexWrap: wrap ? "wrap" : undefined,
+			...style
+		},
+		...rest
+	}, children);
+});
+Stack.displayName = "Stack";
+
+//#endregion
+//#region src/components/Grid/Grid.tsx
+const gapMap = {
+	none: "0",
+	small: "0.5rem",
+	medium: "1rem",
+	large: "2rem"
+};
+const Grid = forwardRef(({ columns, gap = "medium", minChildWidth, children, ...props }, ref) => {
+	const gapValue = gap;
+	const gridStyle = {
+		display: "grid",
+		gap: gapMap[gapValue]
+	};
+	if (minChildWidth) {
+		gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${minChildWidth},1fr))`;
+	} else if (columns) {
+		gridStyle.gridTemplateColumns = `repeat(${columns},1fr)`;
+	}
+	return /* @__PURE__ */ React.createElement(Box, {
+		ref,
+		className: props.className,
+		style: {
+			...gridStyle,
+			...props.style
+		},
+		...props
+	}, children);
+});
+Grid.displayName = "Grid";
+
+//#endregion
+//#region src/components/Container/Container.tsx
+const sizeMap = {
+	sm: "640px",
+	md: "768px",
+	lg: "1024px",
+	xl: "1280px",
+	full: "100%"
+};
+const Container = forwardRef(({ size = "lg", centerContent = true, children, className, style }, ref) => {
+	const sizeValue = size;
+	const containerStyle = {
+		maxWidth: sizeMap[sizeValue],
+		marginLeft: centerContent ? "auto" : undefined,
+		marginRight: centerContent ? "auto" : undefined
+	};
+	return /* @__PURE__ */ React.createElement(Box, {
+		ref,
+		width: "100%",
+		className,
+		style: {
+			...containerStyle,
+			...style
+		}
+	}, children);
+});
+Container.displayName = "Container";
+
+//#endregion
+//#region src/components/AspectRatio/AspectRatio.tsx
+const AspectRatio = forwardRef(({ ratio = "1/1", children, ...props }, ref) => {
+	const aspectRatio = typeof ratio === "number" ? ratio : ratio;
+	return /* @__PURE__ */ React.createElement(Box, {
+		ref,
+		position: "relative",
+		style: {
+			aspectRatio,
+			overflow: "hidden"
+		},
+		...props
+	}, /* @__PURE__ */ React.createElement(Box, {
+		position: "absolute",
+		width: "100%",
+		height: "100%",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	}, children));
+});
+AspectRatio.displayName = "AspectRatio";
+
+//#endregion
+//#region src/components/Collapse/styles.css.ts
+const collapseIn = keyframes({
+	from: {
+		height: 0,
+		opacity: 0
+	},
+	to: {
+		height: "auto",
+		opacity: 1
+	}
+});
+const collapseOut = keyframes({
+	from: {
+		height: "auto",
+		opacity: 1
+	},
+	to: {
+		height: 0,
+		opacity: 0
+	}
+});
+const collapseContainer = styleWithLayer({ overflow: "hidden" });
+const collapseContent = styleWithLayer({ width: "100%" });
+const collapseAnimation = styleVariants({
+	in: { animation: `${collapseIn} 0.3s ease-out forwards` },
+	out: { animation: `${collapseOut} 0.3s ease-out forwards` }
+});
+
+//#endregion
+//#region src/components/Collapse/Collapse.tsx
+const Collapse = ({ isOpen, children, animation = "both", duration = 300, className, onAnimationEnd }) => {
+	const [height, setHeight] = useState(isOpen ? undefined : 0);
+	const [isAnimating, setIsAnimating] = useState(false);
+	const contentRef = useRef(null);
+	useEffect(() => {
+		if (isOpen) {
+			setIsAnimating(true);
+			if (contentRef.current) {
+				setHeight(contentRef.current.scrollHeight);
+			}
+		} else {
+			setIsAnimating(true);
+			setHeight(0);
+		}
+	}, [isOpen]);
+	const handleTransitionEnd = () => {
+		setIsAnimating(false);
+		if (isOpen) {
+			setHeight(undefined);
+		}
+		onAnimationEnd?.();
+	};
+	const getAnimationStyles = () => {
+		const baseStyles = {
+			transition: `height ${duration}ms ease-out, opacity ${duration}ms ease-out`,
+			height: height !== undefined ? `${height}px` : undefined,
+			opacity: isOpen || isAnimating ? 1 : 0
+		};
+		if (animation === "height") {
+			return {
+				...baseStyles,
+				transition: `height ${duration}ms ease-out`,
+				opacity: 1
+			};
+		}
+		if (animation === "opacity") {
+			return {
+				...baseStyles,
+				transition: `opacity ${duration}ms ease-out`,
+				height: undefined
+			};
+		}
+		return baseStyles;
+	};
+	if (!isOpen && !isAnimating && animation !== "opacity") {
+		return null;
+	}
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(collapseContainer, className),
+		style: getAnimationStyles(),
+		onTransitionEnd: handleTransitionEnd,
+		"aria-hidden": !isOpen
+	}, /* @__PURE__ */ React.createElement(Box, {
+		ref: contentRef,
+		className: collapseContent
+	}, children));
+};
+
+//#endregion
+//#region src/components/VisuallyHidden/styles.css.ts
+const visuallyHidden = styleWithLayer({
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	padding: 0,
+	margin: "-1px",
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	whiteSpace: "nowrap",
+	border: 0
+});
+
+//#endregion
+//#region src/components/VisuallyHidden/VisuallyHidden.tsx
+const VisuallyHidden = ({ children, as: Component = "span", ...props }) => {
+	return React.createElement(Component, {
+		className: visuallyHidden,
+		...props
+	}, children);
+};
+
+//#endregion
+//#region src/components/EmptyState/styles.css.ts
+const emptyState = styleWithLayer({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	justifyContent: "center",
+	padding: "2rem",
+	textAlign: "center"
+});
+const emptyStateIcon = styleWithLayer({
+	fontSize: "48px",
+	marginBottom: "1rem",
+	color: vars.colors.textSecondary
+});
+const emptyStateTitle = styleWithLayer({
+	fontSize: "18px",
+	fontWeight: "600",
+	color: vars.colors.textPrimary,
+	margin: "0 0 0.5rem 0"
+});
+const emptyStateDescription = styleWithLayer({
+	fontSize: "14px",
+	color: vars.colors.textSecondary,
+	margin: "0 0 1rem 0",
+	maxWidth: "400px"
+});
+const emptyStateAction = styleWithLayer({ marginTop: "0.5rem" });
+
+//#endregion
+//#region src/components/EmptyState/EmptyState.tsx
+const EmptyState = ({ icon, title, description, action, className }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(emptyState, className),
+		role: "status"
+	}, icon && /* @__PURE__ */ React.createElement(Box, {
+		className: emptyStateIcon,
+		"aria-hidden": "true"
+	}, icon), title && /* @__PURE__ */ React.createElement(Box, {
+		as: "h3",
+		className: emptyStateTitle
+	}, title), description && /* @__PURE__ */ React.createElement(Box, {
+		as: "p",
+		className: emptyStateDescription
+	}, description), action && /* @__PURE__ */ React.createElement(Box, { className: emptyStateAction }, action));
+};
+
+//#endregion
+//#region src/components/Separator/styles.css.ts
+const separator = styleWithLayer({
+	border: "none",
+	margin: 0,
+	flexShrink: 0
+});
+const separatorOrientation = styleVariants({
+	horizontal: {
+		width: "100%",
+		height: "1px",
+		backgroundColor: vars.colors.borderDefault
+	},
+	vertical: {
+		width: "1px",
+		height: "100%",
+		backgroundColor: vars.colors.borderDefault
+	}
+});
+const separatorSize = styleVariants({
+	small: {},
+	medium: {},
+	large: {}
+});
+const separatorDecorative = styleWithLayer({ backgroundColor: vars.colors.borderMuted });
+
+//#endregion
+//#region src/components/Separator/Separator.tsx
+const Separator = ({ orientation = "horizontal", decorative = false, className, ...props }) => {
+	return /* @__PURE__ */ React.createElement(Box, {
+		as: "hr",
+		className: clsx(separator, separatorOrientation[orientation], className),
+		"aria-hidden": decorative,
+		...props
+	});
+};
+
+//#endregion
+//#region src/components/ScrollArea/styles.css.ts
+const scrollArea = styleWithLayer({
+	overflow: "auto",
+	scrollbarWidth: "thin",
+	scrollbarColor: `${vars.colors.borderDefault} ${vars.colors.backgroundMuted}`
+});
+const scrollAreaOrientation = styleVariants({
+	vertical: {
+		overflowX: "hidden",
+		overflowY: "auto"
+	},
+	horizontal: {
+		overflowX: "auto",
+		overflowY: "hidden"
+	},
+	both: { overflow: "auto" }
+});
+const scrollAreaViewport = styleWithLayer({
+	width: "100%",
+	height: "100%"
+});
+
+//#endregion
+//#region src/components/ScrollArea/ScrollArea.tsx
+const ScrollArea = ({ children, orientation = "vertical", maxHeight, maxWidth, className, ...props }) => {
+	const style = {
+		maxHeight,
+		maxWidth
+	};
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: clsx(scrollArea, scrollAreaOrientation[orientation], className),
+		style,
+		...props
+	}, /* @__PURE__ */ React.createElement(Box, { className: scrollAreaViewport }, children));
+};
+
+//#endregion
+//#region src/components/Kbd/styles.css.ts
+const kbd = styleWithLayer({
+	display: "inline-block",
+	padding: "0.125rem 0.375rem",
+	fontFamily: "monospace",
+	fontSize: "0.85em",
+	fontWeight: "600",
+	lineHeight: "1.5",
+	color: vars.colors.textPrimary,
+	backgroundColor: vars.colors.backgroundMuted,
+	border: `1px solid ${vars.colors.borderDefault}`,
+	borderRadius: "4px",
+	boxShadow: "0 2px 0 rgba(0, 0, 0, 0.1)",
+	whiteSpace: "nowrap"
+});
+
+//#endregion
+//#region src/components/Kbd/Kbd.tsx
+const Kbd = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ React.createElement("kbd", {
+		className: `${kbd} ${className || ""}`,
+		...props
+	}, children);
+};
+
+//#endregion
+export { AccordionComponent as Accordion, Alert, AspectRatio, Avatar, Badge, Box, Breadcrumb, Button, Card, Checkbox, Collapse, Combobox, Container, Divider, Drawer, DropdownMenu, EmptyState, FileUpload, Form, FormInput, Grid, Header, IconComponent as Icon, Input, Kbd, List, ListItem, Modal, Navbar, NavbarItem, NumberInput, P, Pagination, Popover, Progress, RadioComponent as Radio, ScrollArea, Select, Separator, Skeleton, Spinner, Stack, Stepper, Table, TabsComponent as Tabs, TagComponent as Tag, TextArea, Toast, ToastProvider, Toggle, Tooltip, VisuallyHidden, useToast };