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

package/dist/index.mjs

@@ -1,4729 +1,2 @@
-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 };
+import './index.css';
+export * from './index.core.mjs';