@rebasepro/ui 0.6.0 → 0.6.1

package/dist/index.css

@@ -65,51 +65,51 @@
 }
 
 .typography-h1 {
-    @apply text-6xl font-headers font-light tracking-tight;
+    @apply text-4xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h2 {
-    @apply text-5xl font-headers font-light tracking-tight;
+    @apply text-3xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h3 {
-    @apply text-4xl font-headers font-normal tracking-tight;
+    @apply text-2xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h4 {
-    @apply text-3xl font-headers font-normal tracking-tight;
+    @apply text-xl font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h5 {
-    @apply text-2xl font-headers font-normal;
+    @apply text-lg font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h6 {
-    @apply text-xl font-headers font-normal;
+    @apply text-base font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle1 {
-    @apply text-lg font-headers font-medium;
+    @apply text-sm font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle2 {
-    @apply text-base font-headers font-medium;
+    @apply text-sm font-headers font-medium;
 }
 
 .typography-body1 {
-    @apply text-base;
+    @apply text-sm;
 }
 
 .typography-body2 {
-    @apply text-sm;
+    @apply text-xs;
 }
 
 .typography-caption {
-    @apply text-xs;
+    @apply text-[11px] leading-[1.4];
 }
 
 .typography-label {
-    @apply text-sm font-medium;
+    @apply text-xs font-medium tracking-wide;
 }
 
 .typography-inherit {
@@ -117,7 +117,7 @@
 }
 
 .typography-button {
-    @apply text-sm font-semibold;
+    @apply text-sm font-semibold tracking-wide;
 }
 
 :focus-visible {

package/dist/index.es.js

@@ -187,15 +187,15 @@ function SelectInputLabel({ children, error }) {
 //#region src/styles.ts
 var focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 var focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-900 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-900/60";
-var focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-0 ring-offset-transparent ";
-var fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-100 dark:bg-surface-900/100";
-var fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-900 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-900/0";
-var fieldBackgroundDisabledMixin = "dark:bg-surface-900 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-900/90";
-var fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";
-var defaultBorderMixin = "border-surface-200/60 dark:border-surface-700/60 ";
-var paperMixin = "bg-white rounded-md dark:bg-surface-800 border border-surface-200/60 dark:border-surface-700/60";
-var cardMixin = "bg-white dark:bg-surface-900 rounded-md border border-surface-200/60 dark:border-surface-700/60 m-1 -p-1";
-var cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-800 hover:ring-1 hover:ring-primary/50 hover:shadow-sm cursor-pointer hover:bg-primary/10 dark:hover:bg-primary/10 transition-all duration-150";
+var focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";
+var fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-black/30";
+var fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-black/0";
+var fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-black/20";
+var fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-black/50";
+var defaultBorderMixin = "border-surface-200 dark:border-surface-700 ";
+var paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
+var cardMixin = "bg-white dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700";
+var cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";
 var cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";
 //#endregion
 //#region src/hooks/PortalContainerContext.tsx
@@ -452,7 +452,7 @@ var Alert = ({ children, onDismiss, color = "info", size = "medium", action, out
 	const classes = getColorClasses(color);
 	return /* @__PURE__ */ jsxs("div", {
 		style,
-		className: cls(getSizeClasses(size), "w-full", "font-medium", "rounded-md flex items-center gap-2", classes, outerClassName),
+		className: cls(getSizeClasses(size), "w-full", "font-medium", "rounded-lg flex items-center gap-2", classes, outerClassName),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: cls("grow", className),
@@ -553,7 +553,7 @@ var BooleanSwitchWithLabel = function BooleanSwitchWithLabel({ value, position =
 		"aria-disabled": disabled || void 0,
 		"aria-labelledby": label ? switchLabelId : void 0,
 		tabIndex: -1,
-		className: cls(!invisible && "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-100 dark:bg-surface-900/100", !invisible && (disabled ? "dark:bg-surface-900 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-900/90" : "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40"), disabled ? "cursor-default" : "cursor-pointer", "rounded-md max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", {
+		className: cls(!invisible && "bg-surface-accent-200/50 dark:bg-black/30", !invisible && (disabled ? "bg-surface-accent-200/50 dark:bg-black/20" : "hover:bg-surface-accent-200/70 hover:dark:bg-black/50"), disabled ? "cursor-default" : "cursor-pointer", "rounded-lg max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", {
 			"min-h-[28px]": size === "smallest",
 			"min-h-[32px]": size === "small",
 			"min-h-[44px]": size === "medium",
@@ -584,14 +584,14 @@ var BooleanSwitchWithLabel = function BooleanSwitchWithLabel({ value, position =
 //#endregion
 //#region src/components/Button.tsx
 var ButtonInner = React.memo(React.forwardRef(({ children, className, variant = "filled", disabled = false, size = "medium", startIcon = null, fullWidth = false, component: Component, color = "neutral", ...props }, ref) => {
-	const baseClasses = "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-all ease-in-out duration-150 gap-2 active:scale-[0.98]";
+	const baseClasses = "typography-button h-fit rounded-lg whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-colors ease-in-out duration-150 gap-2";
 	const buttonClasses = cls({
 		"w-full": fullWidth,
 		"w-fit": !fullWidth,
-		"border border-primary bg-primary focus:ring-primary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
-		"border border-secondary bg-secondary focus:ring-secondary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
-		"border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 shadow-sm hover:shadow-md text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
-		"border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow-sm hover:shadow-md text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+		"border border-primary bg-primary focus:ring-primary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "primary" && !disabled,
+		"border border-secondary bg-secondary focus:ring-secondary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "secondary" && !disabled,
+		"border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
+		"border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
 		"border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-700 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "neutral" && !disabled,
 		"border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "primary" && !disabled,
 		"border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "secondary" && !disabled,
@@ -648,7 +648,7 @@ var Card = React.forwardRef(({ children, className, onClick, style, ...props },
 		role: onClick ? "button" : void 0,
 		tabIndex: onClick ? 0 : void 0,
 		onClick,
-		className: cls(cardMixin, onClick && "hover:bg-surface-accent-100 dark:hover:bg-surface-800 hover:ring-1 hover:ring-primary/50 hover:shadow-sm cursor-pointer hover:bg-primary/10 dark:hover:bg-primary/10 transition-all duration-150", className),
+		className: cls(cardMixin, onClick && "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150", className),
 		style,
 		...props,
 		children
@@ -1007,10 +1007,10 @@ Checkbox.displayName = "Checkbox";
 //#endregion
 //#region src/components/Chip.tsx
 var sizeClassNames = {
-	smallest: "px-1.5 text-xs",
-	small: "px-2 py-0.5 text-sm",
-	medium: "px-3 py-1 text-sm",
-	large: "px-4 py-1.5 text-sm"
+	smallest: "px-1.5 py-px text-[10px]",
+	small: "px-2 py-0.5 text-xs",
+	medium: "px-2.5 py-0.5 text-xs",
+	large: "px-3 py-1 text-xs"
 };
 /**
 * Detect if the app is currently in dark mode by checking the
@@ -1020,45 +1020,48 @@ function isDarkMode() {
 	return typeof document !== "undefined" && document.documentElement.classList.contains("dark");
 }
 /**
+* Helper to generate rgba from hex or standard colors.
+*/
+function getRgba(hex, alpha) {
+	if (!hex || !hex.startsWith("#")) return hex;
+	let color = hex.slice(1);
+	if (color.length === 3) color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
+	return `rgba(${parseInt(color.slice(0, 2), 16)}, ${parseInt(color.slice(2, 4), 16)}, ${parseInt(color.slice(4, 6), 16)}, ${alpha})`;
+}
+/**
 * @group Preview components
 */
-function Chip({ children, colorScheme, error, outlined, onClick, icon, size = "large", className, style }) {
+function Chip({ children, colorScheme, error, outlined, onClick, icon, size = "medium", className, style }) {
 	const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
 	const dark = isDarkMode();
-	const getRgba = (hex, alpha) => {
-		if (!hex || !hex.startsWith("#")) return hex;
-		let color = hex.slice(1);
-		if (color.length === 3) color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
-		return `rgba(${parseInt(color.slice(0, 2), 16)}, ${parseInt(color.slice(2, 4), 16)}, ${parseInt(color.slice(4, 6), 16)}, ${alpha})`;
-	};
+	const hasScheme = error || usedColorScheme;
 	let textColor = "";
 	let bgColor = "";
 	let border = "";
 	if (error) textColor = dark ? "#f87171" : "#dc2626";
 	else if (usedColorScheme) textColor = dark && usedColorScheme.darkText ? usedColorScheme.darkText : usedColorScheme.text;
-	else textColor = dark ? "#d4d4d4" : "#404040";
-	if (outlined) {
-		bgColor = getRgba(textColor, dark ? .12 : .06);
-		border = `1px solid ${getRgba(textColor, dark ? .25 : .18)}`;
-	} else if (error) {
-		bgColor = dark ? "rgba(220, 38, 38, 0.2)" : "rgba(239, 68, 68, 0.15)";
-		border = `1px solid ${dark ? "rgba(220, 38, 38, 0.4)" : "rgba(239, 68, 68, 0.3)"}`;
-	} else if (usedColorScheme) bgColor = dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color;
-	else {
-		bgColor = dark ? "#1f1f1f" : "#f4f4f5";
-		border = `1px solid ${dark ? "#2e2e30" : "#e4e4e7"}`;
+	if (hasScheme) {
+		if (outlined) {
+			bgColor = getRgba(textColor, dark ? .1 : .06);
+			border = `1px solid ${getRgba(textColor, dark ? .2 : .14)}`;
+		} else if (error) {
+			bgColor = dark ? "rgba(220, 38, 38, 0.15)" : "rgba(239, 68, 68, 0.1)";
+			border = `1px solid ${dark ? "rgba(220, 38, 38, 0.3)" : "rgba(239, 68, 68, 0.2)"}`;
+		} else if (usedColorScheme) bgColor = dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color;
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1", "text-ellipsis", "items-center", onClick ? "cursor-pointer hover:bg-surface-accent-300 dark:hover:bg-surface-accent-700" : "", sizeClassNames[size], className),
+		className: cls("rounded-lg max-w-full w-max h-fit font-medium inline-flex gap-1", "text-ellipsis", "items-center", "transition-colors duration-150", !hasScheme && "bg-surface-100 dark:bg-surface-800 text-text-secondary dark:text-text-secondary-dark border border-surface-200 dark:border-surface-700", !hasScheme && outlined && "bg-transparent dark:bg-transparent", onClick ? "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5" : "", sizeClassNames[size], className),
 		onClick,
 		style: {
-			backgroundColor: bgColor,
-			color: textColor,
-			border: border || void 0,
+			...hasScheme ? {
+				backgroundColor: bgColor,
+				color: textColor,
+				border: border || void 0
+			} : {},
 			overflow: "hidden",
 			...style
 		},
-		children: [children, icon]
+		children: [icon, children]
 	});
 }
 //#endregion
@@ -1247,7 +1250,7 @@ var colorClasses$1 = "text-surface-accent-500 visited:text-surface-accent-500 da
 var sizeClasses$1 = {
 	medium: "w-10 !h-10 min-w-10 min-h-10",
 	small: "w-8 !h-8 min-w-8 min-h-8",
-	smallest: "w-6 !h-6 min-w-6 min-h-6",
+	smallest: "w-7 !h-7 min-w-7 min-h-7",
 	large: "w-12 !h-12 min-w-12 min-h-12"
 };
 var shapeClasses = {
@@ -1389,7 +1392,7 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("style", { children: inputStyles }),
 		/* @__PURE__ */ jsxs("div", {
-			className: cls("rounded-md relative max-w-full", !invisible && "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-100 dark:bg-surface-900/100", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+			className: cls("rounded-lg relative max-w-full", !invisible && "bg-surface-accent-200/50 dark:bg-black/30", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
 				"min-h-[28px]": size === "smallest",
 				"min-h-[32px]": size === "small",
 				"min-h-[44px]": size === "medium",
@@ -1413,7 +1416,7 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 					onFocus: handleFocus,
 					onBlur: handleBlur,
 					disabled,
-					className: cls("w-full outline-hidden bg-transparent leading-normal text-base px-3", clearable ? "pr-14" : "pr-12", "rounded-md", {
+					className: cls("w-full outline-hidden bg-transparent leading-normal text-base px-3", clearable ? "pr-14" : "pr-12", "rounded-lg", {
 						"min-h-[28px]": size === "smallest",
 						"min-h-[32px]": size === "small",
 						"min-h-[44px]": size === "medium",
@@ -1519,7 +1522,7 @@ var Dialog = ({ open, onOpenChange, children, className, containerClassName, ful
 					"aria-describedby": ariaDescribedby,
 					className: cls("relative h-full outline-none flex justify-center items-center z-60 opacity-100 transition-all duration-200 ease-in-out"),
 					children: /* @__PURE__ */ jsx("div", {
-						className: cls(paperMixin, "rounded-2xl", "z-60", "relative", "overflow-hidden", "outline-none focus:outline-none", fullWidth && !fullScreen ? "w-11/12" : void 0, fullHeight && !fullScreen ? "h-full" : void 0, "text-surface-accent-900 dark:text-white", "justify-center items-center", fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl", "ease-in-out duration-200", scrollable && "overflow-y-auto", displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]", maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0, className),
+						className: cls(paperMixin, "rounded-2xl", "z-60", "relative", "overflow-hidden", "outline-none focus:outline-none", fullWidth && !fullScreen ? "w-11/12" : void 0, fullHeight && !fullScreen ? "h-full" : void 0, "text-surface-accent-900 dark:text-white", "justify-center items-center", fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-lg", "ease-in-out duration-200", scrollable && "overflow-y-auto", displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]", maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0, className),
 						children
 					})
 				})]
@@ -1606,7 +1609,7 @@ function ExpandablePanel({ title, children, invisible = false, expanded, onExpan
 		if (expanded !== void 0) setOpen(expanded);
 	}, [expanded]);
 	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Collapsible.Root, {
-		className: cls(!invisible && "border-surface-200/60 dark:border-surface-700/60  border", "rounded-md", "w-full", className),
+		className: cls(!invisible && "border-surface-200 dark:border-surface-700  border", "rounded-lg", "w-full", className),
 		open,
 		onOpenChange: (updatedOpen) => {
 			onExpandedChange?.(updatedOpen);
@@ -1615,7 +1618,7 @@ function ExpandablePanel({ title, children, invisible = false, expanded, onExpan
 		children: [/* @__PURE__ */ jsx(Collapsible.Trigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cls("rounded-t flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40 active:bg-surface-accent-300/50 dark:active:bg-surface-700/50", invisible ? "border-b px-2" : "p-4", open ? "py-6" : "py-4", "transition-all duration-200", invisible && "border-surface-200/60 dark:border-surface-700/60 ", asField && "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-100 dark:bg-surface-900/100", titleClassName, "cursor-pointer"),
+				className: cls("rounded-t flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40 active:bg-surface-accent-300/50 dark:active:bg-surface-700/50", invisible ? "border-b px-2" : "p-4", open ? "py-6" : "py-4", "transition-all duration-200", invisible && "border-surface-200 dark:border-surface-700 ", asField && "bg-surface-accent-200/50 dark:bg-black/30", titleClassName, "cursor-pointer"),
 				role: "button",
 				tabIndex: 0,
 				"aria-expanded": open,
@@ -1649,7 +1652,7 @@ function FileUpload({ accept, onFilesAdded, onFilesRejected, maxSize, disabled,
 		role: "button",
 		"aria-label": typeof title === "string" ? title : typeof uploadDescription === "string" ? uploadDescription : "Upload file",
 		"aria-disabled": disabled || void 0,
-		className: cls(fieldBackgroundMixin, "flex gap-2", "p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid", {
+		className: cls(fieldBackgroundMixin, "flex gap-2", "p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-lg duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid", {
 			"h-44": size === "large",
 			"h-28": size === "medium",
 			"h-16": size === "small",
@@ -1700,7 +1703,7 @@ var FilterChip = React.forwardRef(function FilterChip({ children, active = false
 		type: "button",
 		onClick,
 		disabled,
-		className: cls("inline-flex items-center gap-1 rounded-full", "font-medium whitespace-nowrap select-none shrink-0", "transition-all duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", sizeClasses[size], active ? "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]" : cls("bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark", !disabled && "cursor-pointer hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700"), disabled && "opacity-50 cursor-not-allowed", className),
+		className: cls("inline-flex items-center gap-1 rounded-full", "font-medium whitespace-nowrap select-none shrink-0", "transition-colors duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", sizeClasses[size], active ? "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]" : cls("bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark", !disabled && "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5"), disabled && "opacity-50 cursor-not-allowed", className),
 		...rest,
 		children: [icon, children]
 	});
@@ -2053,7 +2056,7 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 					}, {
 						"px-2": size === "small" || size === "smallest",
 						"px-4": size === "medium" || size === "large"
-					}, "select-none rounded-md text-sm", "focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, inputClassName),
+					}, "select-none rounded-lg text-sm", "focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, inputClassName),
 					children: selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", {
 						className: "flex justify-between items-center w-full",
 						children: [/* @__PURE__ */ jsxs("div", {
@@ -2289,7 +2292,7 @@ function ResizablePanels({ firstPanel, secondPanel, showFirstPanel = true, showS
 				children: firstPanel
 			}),
 			!stacked && showFirstPanel && showSecondPanel && /* @__PURE__ */ jsx("div", {
-				className: cls("relative z-10 flex flex-shrink-0 items-center justify-center", "border-surface-200/60 dark:border-surface-700/60 ", isHorizontal ? "border-l w-px h-full cursor-col-resize" : "border-t h-px w-full cursor-row-resize"),
+				className: cls("relative z-10 flex flex-shrink-0 items-center justify-center", "border-surface-200 dark:border-surface-700 ", isHorizontal ? "border-l w-px h-full cursor-col-resize" : "border-t h-px w-full cursor-row-resize"),
 				onMouseDown: handleResizeStart,
 				children: /* @__PURE__ */ jsx("div", {
 					className: cls("absolute flex items-center justify-center group", isHorizontal ? "w-4 h-full cursor-col-resize top-0" : "h-4 w-full cursor-row-resize left-0"),
@@ -2423,7 +2426,7 @@ var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenCh
 				children: label
 			}) : label,
 			/* @__PURE__ */ jsxs("div", {
-				className: cls("select-none rounded-md text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, {
+				className: cls("select-none rounded-lg text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, {
 					"min-h-[28px]": size === "smallest",
 					"min-h-[32px]": size === "small",
 					"min-h-[44px]": size === "medium",
@@ -2442,7 +2445,7 @@ var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenCh
 						"px-4": size === "large",
 						"px-3": size === "medium",
 						"px-2": size === "small" || size === "smallest"
-					} : "", "outline-hidden focus:outline-hidden", "outline-none focus:outline-none", "select-none rounded-md text-sm", error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark", error ? "border border-red-500 dark:border-red-600" : "", disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white", "relative flex flex-row items-center", {
+					} : "", "outline-hidden focus:outline-hidden", "outline-none focus:outline-none", "select-none rounded-lg text-sm", error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark", error ? "border border-red-500 dark:border-red-600" : "", disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white", "relative flex flex-row items-center", {
 						"min-h-[28px]": size === "smallest",
 						"min-h-[32px]": size === "small",
 						"min-h-[44px]": size === "medium",
@@ -2825,7 +2828,7 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 		onFocus: () => setFocused(true),
 		onBlur: () => setFocused(false),
 		style: inputStyle,
-		className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3", label ? "pt-8 pb-2" : "py-2", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName)
+		className: cls(invisible ? focusedInvisibleMixin : "", "rounded-lg resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3", label ? "pt-8 pb-2" : "py-2", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName)
 	}) : /* @__PURE__ */ jsx("input", {
 		...inputProps,
 		ref: inputRef,
@@ -2835,7 +2838,7 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 		"aria-disabled": disabled || void 0,
 		disabled,
 		style: inputStyle,
-		className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+		className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-lg", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
 			"min-h-[28px]": size === "smallest",
 			"min-h-[32px]": size === "small",
 			"min-h-[44px]": size === "medium",
@@ -2851,7 +2854,7 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cls("rounded-md relative max-w-full", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, error ? "border border-red-500 dark:border-red-600" : "", {
+		className: cls("rounded-lg relative max-w-full", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, error ? "border border-red-500 dark:border-red-600" : "", {
 			"min-h-[28px]": size === "smallest",
 			"min-h-[32px]": size === "small",
 			"min-h-[44px]": size === "medium",
@@ -2933,7 +2936,7 @@ function Tabs({ value, onValueChange, className, innerClassName, variant = "stan
 					disabled: !showLeftScroll,
 					"aria-label": "Scroll tabs left",
 					onClick: () => scroll("left"),
-					className: cls("absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showLeftScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200/60 dark:border-surface-700/60 "),
+					className: cls("absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showLeftScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 dark:border-surface-700 "),
 					children: /* @__PURE__ */ jsx(ChevronLeftIcon$1, { size: iconSize.smallest })
 				}),
 				/* @__PURE__ */ jsx("div", {
@@ -2945,7 +2948,7 @@ function Tabs({ value, onValueChange, className, innerClassName, variant = "stan
 						msOverflowStyle: "none"
 					},
 					children: /* @__PURE__ */ jsx(TabsPrimitive.List, {
-						className: cls(variant === "standard" && "inline-flex h-9 items-center justify-start rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400 gap-2 border", variant === "standard" && "border-surface-200/60 dark:border-surface-700/60 ", variant === "boxy" && "flex items-center h-full", variant === "pill" && "flex items-center gap-0.5", innerClassName),
+						className: cls(variant === "standard" && "inline-flex h-9 items-center justify-start rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400 gap-2 border", variant === "standard" && "border-surface-200 dark:border-surface-700 ", variant === "boxy" && "flex items-center h-full", variant === "pill" && "flex items-center gap-0.5", innerClassName),
 						children
 					})
 				}),
@@ -2954,7 +2957,7 @@ function Tabs({ value, onValueChange, className, innerClassName, variant = "stan
 					disabled: !showRightScroll,
 					"aria-label": "Scroll tabs right",
 					onClick: () => scroll("right"),
-					className: cls("absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showRightScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200/60 dark:border-surface-700/60 "),
+					className: cls("absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showRightScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 dark:border-surface-700 "),
 					children: /* @__PURE__ */ jsx(ChevronRightIcon$1, { size: iconSize.smallest })
 				})
 			]
@@ -2973,7 +2976,7 @@ function Tab({ value, className, innerClassName, children, disabled }) {
 //#endregion
 //#region src/components/Table.tsx
 var Table = React.memo(({ children, className, style, ...rest }) => /* @__PURE__ */ jsx("table", {
-	className: cls("text-left text-surface-900 dark:text-white rounded-md overflow-x-auto", className),
+	className: cls("text-left text-surface-900 dark:text-white rounded-lg overflow-x-auto", className),
 	style,
 	...rest,
 	children
@@ -2993,7 +2996,7 @@ var TableHeader = React.memo(({ children, className, ...rest }) => /* @__PURE__
 var TableRow = React.memo(({ children, className, onClick, style, ...rest }) => /* @__PURE__ */ jsx("tr", {
 	onClick,
 	style,
-	className: cls("bg-white dark:bg-surface-900", onClick ? "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 cursor-pointer" : "", className),
+	className: cls("bg-white dark:bg-surface-900", onClick ? "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer" : "", className),
 	...rest,
 	children
 }));
@@ -3620,7 +3623,7 @@ var VirtualTableRow = React.memo(function VirtualTableRow({ rowData, rowIndex, c
 	]);
 	return /* @__PURE__ */ jsx("div", {
 		className: cls("flex min-w-full text-sm border-b border-surface-200/60 dark:border-surface-700/60 dark:bg-surface-800", rowClassName ? rowClassName(rowData) : "", {
-			"hover:!bg-surface-50/75 dark:hover:!bg-surface-800/75": hoverRow,
+			"hover:!bg-primary/[0.03] dark:hover:!bg-primary/5": hoverRow,
 			"cursor-pointer ": onRowClick
 		}),
 		onClick,