@rebasepro/ui 0.19.1 → 0.19.2-canary.g09316f6

package/dist/index.es.js

@@ -60,7 +60,7 @@ var controlPaddingMixin = {
 	"2xl": "px-10"
 };
 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-white/[0.07] focus:bg-surface-accent-100/70";
+var focusedInvisibleMixin = "focus:bg-surface-field-hover";
 /**
 * The focus ring — the single most-seen interaction state in the product, and
 * until now the least tended.
@@ -82,35 +82,57 @@ var focusedClasses = "z-30 outline-none ring-2 ring-primary/60 ring-offset-0 rin
 /**
 * Field surfaces.
 *
-* The inset top hairline is the whole difference between a field that reads as
-* a filled rectangle and one that reads as recessed into the surface. It is a
-* 1px inset highlight, not a gradient — the same device `.frame` already uses
-* on the marketing site, and the flat-surface rule stands.
+* A field is the one surface that goes the other way: it is INSET into
+* whatever holds it, so `surface-field` is an alpha fill rather than a solid,
+* and it composes over a card, the sheet or a dialog alike. It also carries
+* the hairline: a field is an object (DESIGN.md rule 2), and without the line
+* a 4% fill on a card reads as a soft slab rather than a control — measured on
+* the product form, eight of them in a row looked like a wall. The reference
+* draws every input with its 1px edge, on both themes.
 *
-* Light mode gets none: on a white page the highlight has nothing to catch.
+* The 1px inset top highlight that used to sit here was the recessed-edge
+* device from before the field had a border; with a real hairline above it
+* the two stacked into a doubled top edge. The border does its work now.
+*
+* Exactly one element carries this mixin per field — the box, never the
+* input inside it — so the alpha fill and its hover composite once.
 */
-var fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-white/[0.055] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.045)]";
-var fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-white/0";
-var fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-white/[0.03]";
+var fieldBackgroundMixin = "bg-surface-field border border-hairline";
+var fieldBackgroundInvisibleMixin = "bg-transparent";
+var fieldBackgroundDisabledMixin = "bg-surface-field/60";
 /**
 * `transition-colors` here, because every other interactive surface in the kit
 * has it and fields did not — `cardClickableMixin` eases, a TextField snapped.
 * On a form of eight fields that difference is the whole feel of the screen.
 */
-var fieldBackgroundHoverMixin = "transition-colors duration-150 hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
-var defaultBorderMixin = "border-surface-200 dark:border-surface-700/60";
-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-xl border border-surface-200 dark:border-surface-700/60";
+var fieldBackgroundHoverMixin = "transition-colors duration-150 hover:bg-surface-field-hover";
+/**
+* The hairline. One value per theme (`--hairline` in theme.css), and where it
+* goes matters more than what it is: a line marks an OBJECT — a card on the
+* sheet, a field, a floating surface. It does not mark a region: a tile inside
+* a card, a row, a segmented track, a button, a chip are fills, and the
+* lightness step between them is the whole separation. One exception, and it
+* is the sheet's own edge against the frame: that step is about 3 L* on both
+* themes and did not read on a real screen, so the Scaffold draws this line
+* there. Measured before this existed, the panel drew the same line on every
+* card and every tile as well, and with only two surface values available the
+* line was doing the work a step should have done.
+*/
+var defaultBorderMixin = "border-hairline";
+var paperMixin = "bg-surface-card rounded-lg border border-hairline-strong";
+var cardMixin = "bg-surface-card rounded-xl border border-hairline";
 /**
 * An inset well: code, a query, a log tail, a connection string.
 *
 * It must read as *recessed into* the surface holding it, which means darker
-* than that surface in dark mode — `surface-950` under a `surface-900` card.
-* The obvious-looking `surface-800` is a trap: `#111111` is LIGHTER than the
-* `#0a0a0a` card around it, so the well appears to float above the thing it is
-* set into. Pair with `font-mono`; this mixin carries the surface only.
+* than that surface in dark mode. Cards now sit at `surface-card` (#181818),
+* so #0a0a0a is already fourteen units below and reads as a well; #000 was
+* tuned for the old #0a card and is now harsher than it needs to be. That value
+* is the `surface-well` role (theme.css), the one surface that goes DOWN the
+* ladder on purpose. Pair with `font-mono`; this mixin carries the surface
+* only.
 */
-var codeSurfaceMixin = "bg-surface-100 dark:bg-surface-950 rounded-md";
+var codeSurfaceMixin = "bg-surface-well rounded-md";
 /**
 * The accent, used as TEXT.
 *
@@ -129,8 +151,23 @@ var codeSurfaceMixin = "bg-surface-100 dark:bg-surface-950 rounded-md";
 * the other way and #0070F4 is already correct.
 */
 var accentTextMixin = "text-primary dark:text-primary-light";
-var cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";
+/**
+* Hover on a SOLID surface goes one step lighter, and it stays neutral. The
+* previous `hover:bg-primary/5` tinted every clickable card blue, which spent
+* the brand colour on a state that carries no meaning; on the dark ladder it
+* also read as a hue shift rather than a lift.
+*/
+var cardClickableMixin = "hover:bg-surface-card-hover cursor-pointer transition-colors duration-150";
 var cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";
+/**
+* Hover on a TRANSPARENT ground — a nav item, a menu item, a list row, a tree
+* row. `surface-hover` is an alpha fill, so it lifts whatever it lands on by
+* the same amount, and `surface-active` is the same idea one step further for
+* the selected row when no hue is wanted. Do not use these on a solid card:
+* an alpha fill REPLACES a solid background rather than tinting it.
+*/
+var surfaceHoverMixin = "hover:bg-surface-hover transition-colors duration-150";
+var surfaceActiveMixin = "bg-surface-active";
 //#endregion
 //#region src/util/cls.ts
 function cls(...classes) {
@@ -174,7 +211,7 @@ function hashString(str) {
 var CONTRAST_TARGET = 4.6;
 /** Page backgrounds the outlined variant sits on: `bg-white` and `surface-950`. */
 var PAGE_LIGHT = "#ffffff";
-var PAGE_DARK = "#0a0a0a";
+var PAGE_DARK = "#181818";
 function toRgb(hex) {
 	let h = hex.replace("#", "");
 	if (h.length === 3) h = h.split("").map((c) => c + c).join("");
@@ -187,6 +224,34 @@ function toRgb(hex) {
 function toHex(rgb) {
 	return "#" + rgb.map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")).join("");
 }
+function toRgba(hex, alpha) {
+	const [r, g, b] = toRgb(hex);
+	return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+/**
+* What a translucent colour reads as over an opaque one: a per-channel sRGB
+* mix, which is how the browser composites it. The tint ink is pushed against
+* this, never against the page alone — a 16% wash of the hue moves the
+* background a long way toward the ink, and an ink that only cleared AA on
+* the bare page lands near 3.5:1 on its own tint.
+*/
+function compositeOver(fgHex, alpha, bgHex) {
+	const fg = toRgb(fgHex);
+	const bg = toRgb(bgHex);
+	return toHex(fg.map((c, i) => alpha * c + (1 - alpha) * bg[i]));
+}
+/**
+* Tint alpha by tone, light then dark. The tones keep meaning something in the
+* tinted variant — a `Darker` chip is a heavier wash, not a different hue —
+* and dark mode runs four points higher because the same alpha of a bright
+* hue reads fainter over near-black than over white.
+*/
+var TINT_ALPHA = {
+	Lighter: [.1, .14],
+	Light: [.14, .18],
+	Dark: [.18, .22],
+	Darker: [.22, .26]
+};
 function relativeLuminance(hex) {
 	const [r, g, b] = toRgb(hex).map((v) => {
 		const c = v / 255;
@@ -365,12 +430,20 @@ function tone(stops, chipTone) {
 		outlineText: push(stops.text, "#000000", PAGE_LIGHT),
 		darkOutlineText: push(stops.onDeep ?? stops.pale, "#ffffff", PAGE_DARK)
 	};
+	const [alphaLight, alphaDark] = TINT_ALPHA[chipTone];
+	const tint = {
+		tintColor: toRgba(stops.solid, alphaLight),
+		tintText: push(stops.deep, "#000000", compositeOver(stops.solid, alphaLight, PAGE_LIGHT)),
+		darkTintColor: toRgba(stops.solid, alphaDark),
+		darkTintText: push(stops.mid, "#ffffff", compositeOver(stops.solid, alphaDark, PAGE_DARK))
+	};
 	const filled = (light, dark) => ({
 		color: light,
 		text: inkOn(stops, light),
 		darkColor: dark,
 		darkText: inkOn(stops, dark),
-		...outline
+		...outline,
+		...tint
 	});
 	switch (chipTone) {
 		case "Light": return filled(stops.mid, stops.solid);
@@ -567,6 +640,40 @@ function useDebounceValue(value, delay = 300) {
 	return debouncedValue;
 }
 //#endregion
+//#region src/hooks/useIsDarkMode.ts
+/**
+* Whether the document is in dark mode right now, and re-rendered when that
+* changes.
+*
+* The theme is a class on `<html>` (`dark`, set by the panel's mode
+* controller) or a `data-theme` attribute (the marketing site). Components
+* that pick colours in JS rather than through CSS variables — `Chip` derives
+* its ink per theme — used to read the class once at render and never again,
+* so a theme switch left every chip on screen wearing the other theme's ink
+* until something else happened to re-render it. Subscribing through a
+* `MutationObserver` on the root's attributes makes the read live.
+*/
+function useIsDarkMode() {
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+function getSnapshot() {
+	if (typeof document === "undefined") return false;
+	const root = document.documentElement;
+	return root.classList.contains("dark") || root.getAttribute("data-theme") === "dark";
+}
+function getServerSnapshot() {
+	return false;
+}
+function subscribe(onChange) {
+	if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => void 0;
+	const observer = new MutationObserver(onChange);
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["class", "data-theme"]
+	});
+	return () => observer.disconnect();
+}
+//#endregion
 //#region src/components/Collapse.tsx
 var Collapse = React.memo(({ children, className, in: isOpen = false, duration = 220 }) => {
 	useInjectStyles(`Collapse-${duration}`, `
@@ -639,14 +746,14 @@ function Autocomplete({ children, open, setOpen, className }) {
 		className: cls("absolute top-full left-0 right-0 overflow-visible", open ? "shadow-2xs" : "", "my-2", "z-20", "w-full"),
 		children: /* @__PURE__ */ jsx("div", {
 			ref: autocompleteRef,
-			className: cls(open ? paperMixin : "", "bg-surface-50 dark:bg-surface-800", className),
+			className: cls(open ? paperMixin : "", "bg-surface-card", className),
 			children
 		})
 	});
 }
 var AutocompleteItem = React.memo(function AutocompleteItem({ children, onClick, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cls("flex w-full items-center h-[48px] cursor-pointer transition-colors duration-150 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", className),
+		className: cls("flex w-full items-center h-[48px] cursor-pointer transition-colors duration-150 hover:bg-surface-hover", className),
 		onClick,
 		children
 	});
@@ -2822,7 +2929,7 @@ var getColorClasses = (severity) => {
 		case "warning": return "bg-amber-500/8 dark:bg-amber-500/12 text-amber-800 dark:text-amber-200 border border-amber-500/20 dark:border-amber-500/25";
 		case "info": return "bg-blue-500/8 dark:bg-blue-500/12 text-blue-800 dark:text-blue-200 border border-blue-500/20 dark:border-blue-500/25";
 		case "success": return "bg-emerald-500/8 dark:bg-emerald-500/12 text-emerald-800 dark:text-emerald-200 border border-emerald-500/20 dark:border-emerald-500/25";
-		default: return "bg-surface-accent-500/8 dark:bg-surface-accent-400/10 text-surface-accent-800 dark:text-surface-accent-100 border border-surface-accent-500/15 dark:border-surface-accent-400/20";
+		default: return "bg-surface-field text-text-primary dark:text-text-primary-dark border border-hairline";
 	}
 };
 var getIconColor = (severity) => {
@@ -2891,14 +2998,14 @@ var AvatarInner = ({ src, alt, children, className, style, outerClassName, hover
 		ref,
 		style,
 		...props,
-		className: cls("rounded-full flex items-center justify-center overflow-hidden", "p-1 w-12 h-12 min-w-12 min-h-12", hover && "transition-colors duration-150 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", outerClassName),
+		className: cls("rounded-full flex items-center justify-center overflow-hidden", "p-1 w-12 h-12 min-w-12 min-h-12", hover && "transition-colors duration-150 hover:bg-surface-raised-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", outerClassName),
 		children: src && !isImageError ? /* @__PURE__ */ jsx("img", {
-			className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "w-full h-full object-cover rounded-full", className),
+			className: cls("bg-surface-raised", "w-full h-full object-cover rounded-full", className),
 			src,
 			alt,
 			onError: handleImageError
 		}) : /* @__PURE__ */ jsx("span", {
-			className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "flex items-center justify-center", "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-text-primary-dark rounded-full", className),
+			className: cls("bg-surface-raised", "flex items-center justify-center", "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-text-primary-dark rounded-full", className),
 			children
 		})
 	});
@@ -2967,9 +3074,9 @@ var BooleanSwitch = React.forwardRef(function BooleanSwitch({ value, allowIndete
 			else onValueChange?.(null);
 			else onValueChange?.(!value);
 		},
-		className: cls(SWITCH_GEOMETRY[size].track, "outline-none outline-hidden rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 bg-white/54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 bg-white/54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700", className),
+		className: cls(SWITCH_GEOMETRY[size].track, "outline-none outline-hidden rounded-full relative shadow-sm", disabled ? value ? "bg-primary/40 ring-1 ring-transparent" : "bg-surface-field ring-1 ring-hairline" : value ? "bg-primary ring-1 ring-primary" : "bg-surface-active ring-1 ring-hairline-strong", className),
 		...props,
-		children: [allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600", SWITCH_GEOMETRY[size].bar, SWITCH_GEOMETRY[size].barX) }, "knob"), !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : value ? "bg-white shadow" : "bg-surface-accent-600 dark:bg-surface-accent-400", SWITCH_GEOMETRY[size].knob, value ? SWITCH_GEOMETRY[size].on : SWITCH_GEOMETRY[size].off) }, "knob")]
+		children: [allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", "bg-surface-400", SWITCH_GEOMETRY[size].bar, SWITCH_GEOMETRY[size].barX) }, "knob"), !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", disabled ? "bg-surface-300 dark:bg-surface-600" : value ? "bg-white shadow" : "bg-surface-500 dark:bg-surface-400", SWITCH_GEOMETRY[size].knob, value ? SWITCH_GEOMETRY[size].on : SWITCH_GEOMETRY[size].off) }, "knob")]
 	});
 });
 //#endregion
@@ -2998,7 +3105,7 @@ var BooleanSwitchWithLabel = function BooleanSwitchWithLabel({ value, position =
 		"aria-disabled": disabled || void 0,
 		"aria-labelledby": label ? switchLabelId : void 0,
 		tabIndex: -1,
-		className: cls(!invisible && "bg-surface-accent-200/50 dark:bg-white/[0.055] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.045)]", !invisible && (disabled ? "bg-surface-accent-200/50 dark:bg-white/[0.03]" : "transition-colors duration-150 hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]"), 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", controlHeightMixin[size], size === "small" || size === "smallest" ? "pl-2" : "pl-4", size === "small" || size === "smallest" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className),
+		className: cls(!invisible && "bg-surface-field border border-hairline", !invisible && (disabled ? "bg-surface-field/60" : "transition-colors duration-150 hover:bg-surface-field-hover"), 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", controlHeightMixin[size], size === "small" || size === "smallest" ? "pl-2" : "pl-4", size === "small" || size === "smallest" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className),
 		onClick: disabled ? void 0 : (e) => {
 			if (props.allowIndeterminate) {
 				const onChange = onValueChange;
@@ -3031,22 +3138,22 @@ var ButtonInner = React.memo(React.forwardRef(({ children, className, variant =
 		"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-600 bg-red-600 hover:bg-red-700 focus:ring-red-600 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,
+		"border border-hairline-strong bg-surface-raised hover:bg-surface-raised-hover text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+		"border border-transparent bg-surface-raised hover:bg-surface-raised-hover text-text-primary 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-hover": variant === "text" && color === "primary" && !disabled,
+		"border border-transparent text-secondary hover:text-secondary hover:bg-surface-hover": variant === "text" && color === "secondary" && !disabled,
 		"border border-transparent text-red-600 hover:text-red-600 hover:bg-red-600 hover:bg-opacity-10 hover:bg-red-600/10": variant === "text" && color === "error" && !disabled,
-		"border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "text" && !disabled,
-		"border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-800": variant === "text" && color === "neutral" && !disabled,
+		"border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-hover": variant === "text" && color === "text" && !disabled,
+		"border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark dark:hover:text-text-primary-dark hover:bg-surface-hover": variant === "text" && color === "neutral" && !disabled,
 		"border border-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10": variant === "outlined" && color === "primary" && !disabled,
 		"border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
 		"border border-red-500 text-red-600 hover:text-white hover:bg-red-600": variant === "outlined" && color === "error" && !disabled,
-		"border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark dark:border-surface-accent-600 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "outlined" && color === "text" && !disabled,
-		"border border-surface-300 text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-800": variant === "outlined" && color === "neutral" && !disabled,
+		"border border-hairline-strong text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-hover": variant === "outlined" && color === "text" && !disabled,
+		"border border-hairline-strong text-text-primary dark:text-text-primary-dark hover:bg-surface-hover": variant === "outlined" && color === "neutral" && !disabled,
 		"text-text-disabled dark:text-text-disabled-dark": disabled,
 		"border border-transparent opacity-50": variant === "text" && disabled,
-		"border border-surface-500 opacity-50": variant === "outlined" && disabled,
-		"border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40 bg-surface-300/40 dark:bg-surface-500/40": variant === "filled" && disabled
+		"border border-hairline-strong opacity-50": variant === "outlined" && disabled,
+		"border border-transparent bg-surface-raised": variant === "filled" && disabled
 	});
 	const sizeClasses = cls("py-0", controlHeightMixin[size], controlPaddingMixin[size]);
 	const iconColorClass = (color === "neutral" || color === "text") && !disabled ? "[&>svg]:text-surface-accent-500 dark:[&>svg]:text-surface-accent-300" : "";
@@ -3082,7 +3189,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-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150", className),
+		className: cls(cardMixin, onClick && "hover:bg-surface-card-hover cursor-pointer transition-colors duration-150", className),
 		style,
 		...props,
 		children
@@ -3142,7 +3249,7 @@ function CircularProgress({ size = "medium", className }) {
 	else if (size === "medium") borderClasses = "border-[3px]";
 	else borderClasses = "border-4";
 	return /* @__PURE__ */ jsx("div", {
-		className: cls(sizeClasses, borderClasses, "inline-block shrink-0 rounded-full border-solid align-[-0.125em]", "animate-[spin_0.7s_linear_infinite] motion-reduce:animate-[spin_1.5s_linear_infinite]", "border-surface-200 dark:border-surface-700 border-t-primary dark:border-t-primary", className),
+		className: cls(sizeClasses, borderClasses, "inline-block shrink-0 rounded-full border-solid align-[-0.125em]", "animate-[spin_0.7s_linear_infinite] motion-reduce:animate-[spin_1.5s_linear_infinite]", "border-hairline-strong border-t-primary dark:border-t-primary", className),
 		role: "status",
 		children: /* @__PURE__ */ jsx("span", {
 			className: "absolute! -m-px! h-px! w-px! overflow-hidden! whitespace-nowrap! border-0! p-0! [clip:rect(0,0,0,0)]!",
@@ -3438,12 +3545,12 @@ var ErrorBoundary = class extends React.Component {
 		const title = isPermission ? "Access denied" : isStaleChunk ? "New version available" : "Something went wrong";
 		const description = isPermission ? "You don't have permission to access this resource. Please check your account permissions or contact your administrator." : isStaleChunk ? CHUNK_ERROR_DESCRIPTION : "An unexpected error occurred. You can try reloading the page or going back.";
 		return /* @__PURE__ */ jsx("div", {
-			className: cls("flex items-center justify-center min-h-[400px] h-full w-full", "bg-surface-50 dark:bg-surface-950"),
+			className: cls("flex items-center justify-center min-h-[400px] h-full w-full", "bg-surface-sheet"),
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col items-center max-w-md px-6 py-10 text-center",
 				children: [
 					/* @__PURE__ */ jsx("div", {
-						className: cls("flex items-center justify-center w-14 h-14 rounded-xl mb-6", isPermission ? "bg-amber-100 dark:bg-amber-900/30" : isStaleChunk ? "bg-surface-100 dark:bg-surface-800" : "bg-red-100 dark:bg-red-900/30"),
+						className: cls("flex items-center justify-center w-14 h-14 rounded-xl mb-6", isPermission ? "bg-amber-100 dark:bg-amber-900/30" : isStaleChunk ? "bg-surface-raised" : "bg-red-100 dark:bg-red-900/30"),
 						children: /* @__PURE__ */ jsx(Icon, {
 							size: 28,
 							className: isPermission ? "text-amber-600 dark:text-amber-400" : isStaleChunk ? "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-400"
@@ -3482,7 +3589,7 @@ var ErrorBoundary = class extends React.Component {
 							className: cls("flex items-center gap-1 mx-auto text-xs", "text-text-disabled dark:text-text-disabled-dark", "hover:text-text-secondary dark:hover:text-text-secondary-dark", "transition-colors cursor-pointer bg-transparent border-none p-0"),
 							children: ["Technical details", showDetails ? /* @__PURE__ */ jsx(ChevronUpIcon$1, { size: 14 }) : /* @__PURE__ */ jsx(ChevronDownIcon$1, { size: 14 })]
 						}), showDetails && /* @__PURE__ */ jsx("div", {
-							className: cls("mt-3 p-3 rounded-lg text-left text-xs", "bg-surface-100 dark:bg-surface-800/50", "text-text-secondary dark:text-text-secondary-dark", "font-mono break-all"),
+							className: cls("mt-3 p-3 rounded-lg text-left text-xs", "bg-surface-field", "text-text-secondary dark:text-text-secondary-dark", "font-mono break-all"),
 							children: error.message
 						})]
 					})
@@ -3527,9 +3634,9 @@ var Checkbox = React.memo(({ id, checked, indeterminate = false, padding = true,
 		className: "rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
 		onCheckedChange: disabled ? void 0 : onCheckedChange,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cls(padding ? paddingClasses[size] : "", padding || onCheckedChange ? outerSizeClasses[size] : "", "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150", onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-700/75" : "", onCheckedChange ? "cursor-pointer" : "cursor-default"),
+			className: cls(padding ? paddingClasses[size] : "", padding || onCheckedChange ? outerSizeClasses[size] : "", "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150", onCheckedChange ? "rounded-full hover:bg-surface-hover" : "", onCheckedChange ? "cursor-pointer" : "cursor-default"),
 			children: /* @__PURE__ */ jsx("div", {
-				className: cls("border-2 shrink-0 relative transition-colors ease-in-out duration-150", sizeClasses$2[size], disabled ? indeterminate || isChecked ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600" : indeterminate || isChecked ? colorClasses$2[color] : "bg-white dark:bg-surface-900", indeterminate || isChecked ? "text-surface-accent-100 dark:text-surface-accent-900" : "", disabled ? "border-transparent" : indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-500"),
+				className: cls("border-2 shrink-0 relative transition-colors ease-in-out duration-150", sizeClasses$2[size], disabled ? "bg-surface-300 dark:bg-surface-600" : indeterminate || isChecked ? colorClasses$2[color] : "bg-surface-card", indeterminate || isChecked ? "text-surface-accent-100 dark:text-surface-accent-900" : "", disabled ? "border-transparent" : indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-500"),
 				children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
 					asChild: true,
 					children: indeterminate ? /* @__PURE__ */ jsx(MinusIcon$1, {
@@ -3554,13 +3661,6 @@ var sizeClassNames = {
 	large: "px-3 py-1.5 text-sm"
 };
 /**
-* Detect if the app is currently in dark mode by checking the
-* Tailwind `dark` class on the document root.
-*/
-function isDarkMode() {
-	return typeof document !== "undefined" && document.documentElement.classList.contains("dark");
-}
-/**
 * Helper to generate rgba from hex or standard colors.
 */
 function getRgba(hex, alpha) {
@@ -3572,9 +3672,9 @@ function getRgba(hex, alpha) {
 /**
 * @group Preview components
 */
-function Chip({ children, colorScheme, error, outlined, onClick, icon, size = "medium", className, style }) {
+function Chip({ children, colorScheme, error, outlined, variant = "tinted", onClick, icon, size = "medium", className, style }) {
 	const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
-	const dark = isDarkMode();
+	const dark = useIsDarkMode();
 	const hasScheme = error || usedColorScheme;
 	let textColor = "";
 	let bgColor = "";
@@ -3592,10 +3692,17 @@ function Chip({ children, colorScheme, error, outlined, onClick, icon, size = "m
 		} 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;
+		} else if (usedColorScheme) {
+			const tintColor = dark ? usedColorScheme.darkTintColor : usedColorScheme.tintColor;
+			const tintText = dark ? usedColorScheme.darkTintText : usedColorScheme.tintText;
+			if (variant === "tinted" && tintColor && tintText) {
+				bgColor = tintColor;
+				textColor = tintText;
+			} else bgColor = dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color;
+		}
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		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),
+		className: cls("rounded-md max-w-full w-max h-fit font-medium inline-flex gap-1", "text-ellipsis", "items-center", "transition-colors duration-150", !hasScheme && "bg-surface-raised text-text-secondary dark:text-text-secondary-dark", !hasScheme && outlined && "bg-transparent border border-hairline-strong", onClick ? "cursor-pointer hover:bg-surface-raised-hover" : "", sizeClassNames[size], className),
 		onClick,
 		style: {
 			...hasScheme ? {
@@ -3638,7 +3745,7 @@ var Tooltip = ({ open, defaultOpen, side = "bottom", delayDuration = 200, sideOf
 			children: [trigger, /* @__PURE__ */ jsx(TooltipPrimitive.Portal, {
 				container: finalContainer,
 				children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
-					className: cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded-md px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName),
+					className: cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded-md px-3 py-2 text-xs leading-none bg-surface-800/95 dark:bg-surface-raised-hover font-medium text-white shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName),
 					style: tooltipStyle,
 					sideOffset: sideOffset === void 0 ? 4 : sideOffset,
 					align,
@@ -3758,7 +3865,7 @@ function ColorPicker({ value, onChange, size = "medium", allowClear = true, disa
 			type: "button",
 			disabled,
 			onClick: () => onChange(void 0),
-			className: cls("flex items-center gap-2 px-2 py-1 rounded-lg text-sm transition-colors duration-150", "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", disabled && "opacity-50 cursor-not-allowed", !value && "bg-surface-accent-100 dark:bg-surface-accent-800 font-medium"),
+			className: cls("flex items-center gap-2 px-2 py-1 rounded-lg text-sm transition-colors duration-150", "hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", disabled && "opacity-50 cursor-not-allowed", !value && "bg-surface-raised font-medium"),
 			children: [/* @__PURE__ */ jsx("div", {
 				className: cls(swatchSize, "rounded-full border-2 border-dashed border-surface-accent-400 dark:border-surface-accent-600", "flex items-center justify-center"),
 				children: !value && /* @__PURE__ */ jsx(CheckIcon$1, { size: checkSize })
@@ -3796,7 +3903,7 @@ function ColorPicker({ value, onChange, size = "medium", allowClear = true, disa
 }
 //#endregion
 //#region src/components/IconButton.tsx
-var buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-[1.04] active:scale-95 transition-transform";
+var buttonClasses = "hover:scale-[1.04] active:scale-95 transition-transform";
 var baseClasses = "inline-flex items-center justify-center text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors ease-in-out duration-150 [&>svg]:shrink-0";
 var colorClasses$1 = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-accent-300";
 var sizeClasses$1 = {
@@ -3817,7 +3924,7 @@ var defaultIconSize = {
 	large: 24
 };
 var IconButtonInner = ({ children, className, size = "medium", variant = "ghost", shape = "circular", disabled, toggled, component, ...props }, ref) => {
-	const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-50 dark:bg-surface-900/50";
+	const bgClasses = variant === "ghost" ? "bg-transparent hover:bg-surface-hover" : "bg-surface-raised hover:bg-surface-raised-hover";
 	const Component = component || "button";
 	const isNativeButton = Component === "button";
 	const sizedChildren = React.Children.map(children, (child) => {
@@ -3960,7 +4067,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-lg relative max-w-full", !invisible && "bg-surface-accent-200/50 dark:bg-white/[0.055] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.045)]", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+			className: cls("rounded-lg relative max-w-full", !invisible && "bg-surface-field border border-hairline", disabled ? fieldBackgroundDisabledMixin : invisible ? "" : fieldBackgroundHoverMixin, {
 				"min-h-[28px]": size === "smallest",
 				"min-h-[32px]": size === "small",
 				"min-h-[40px]": size === "medium",
@@ -3989,7 +4096,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-lg", {
+					className: cls("w-full outline-hidden bg-transparent leading-normal text-sm px-3", clearable ? "pr-14" : "pr-12", "rounded-lg", {
 						"min-h-[28px]": size === "smallest",
 						"min-h-[32px]": size === "small",
 						"min-h-[40px]": size === "medium",
@@ -4121,7 +4228,7 @@ var Dialog = ({ open, onOpenChange, children, className, containerClassName, ful
 //#region src/components/DialogActions.tsx
 function DialogActions({ children, position = "sticky", translucent = true, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cls(defaultBorderMixin, "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end shrink-0 bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-white bg-opacity-60 bg-white/60 dark:bg-surface-800 dark:bg-opacity-60 dark:bg-surface-800/60", translucent ? "backdrop-blur-sm" : "", className),
+		className: cls(defaultBorderMixin, "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end shrink-0 bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-surface-card/60", translucent ? "backdrop-blur-sm" : "", className),
 		children
 	});
 }
@@ -4196,7 +4303,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 dark:border-surface-700/60 border", "rounded-lg", "w-full", className),
+		className: cls(!invisible && "border-hairline border", "rounded-lg", "w-full", className),
 		open,
 		onOpenChange: (updatedOpen) => {
 			onExpandedChange?.(updatedOpen);
@@ -4205,7 +4312,7 @@ function ExpandablePanel({ title, children, invisible = false, expanded, onExpan
 		children: [/* @__PURE__ */ jsx(Collapsible.Trigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cls("rounded-t-lg 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/60", asField && "bg-surface-accent-200/50 dark:bg-white/[0.055] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.045)]", titleClassName, "cursor-pointer"),
+				className: cls("rounded-t-lg flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-hover active:bg-surface-active", invisible ? "border-b px-2" : "p-4", open ? "py-6" : "py-4", "transition-all duration-200", invisible && "border-hairline", asField && "bg-surface-field border border-hairline", titleClassName, "cursor-pointer"),
 				role: "button",
 				tabIndex: 0,
 				"aria-expanded": open,
@@ -4278,9 +4385,8 @@ var sizeClasses = {
 /**
 * A toggle chip used for filter presets and similar multi-select controls.
 *
-* Uses an inset box-shadow for the active ring instead of `border` so the
-* chip size stays stable across states and the ring cannot be clipped by
-* parent `overflow-hidden` containers.
+* Reads as a text tab: no fill at rest, the alpha highlight when active. It
+* shares no grammar with the tinted enum {@link Chip}, which carries a hue.
 *
 * @group Interactive components
 */
@@ -4290,7 +4396,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-colors duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", sizeClasses[size], !disabled && "cursor-pointer", active ? cls("bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]", !disabled && "hover:bg-primary/20 dark:hover:bg-primary/30") : cls("bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark", !disabled && "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-md", "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], !disabled && "cursor-pointer", active ? "bg-surface-active text-text-primary dark:text-text-primary-dark" : cls("bg-transparent text-text-secondary dark:text-text-secondary-dark", !disabled && "hover:bg-surface-hover"), disabled && "opacity-50 cursor-not-allowed", className),
 		...rest,
 		children: [icon, children]
 	});
@@ -4312,7 +4418,7 @@ function InfoLabel({ children, mode = "info" }) {
 var Label = React$1.forwardRef(({ className, border, onClick, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, {
 	ref,
 	onClick,
-	className: cls("text-sm font-medium peer-disabled:cursor-not-allowed", border && "border border-surface-300 dark:border-surface-700 rounded-md px-3 py-1.5", onClick && "hover:cursor-pointer hover:bg-surface-200 dark:hover:bg-surface-800", defaultBorderMixin, className),
+	className: cls("text-sm font-medium peer-disabled:cursor-not-allowed", border && "border border-hairline-strong rounded-md px-3 py-1.5", onClick && "hover:cursor-pointer hover:bg-surface-hover", defaultBorderMixin, className),
 	...props
 }));
 Label.displayName = LabelPrimitive.Root.displayName;
@@ -4394,7 +4500,7 @@ var Menu = React.forwardRef(({ children, trigger, open, defaultOpen, side, align
 });
 Menu.displayName = "Menu";
 var MenuItem = React.memo(({ children, dense = false, disabled = false, onClick, className }) => {
-	const classNames = cls(onClick && !disabled && "cursor-pointer", disabled && "opacity-50 cursor-not-allowed", "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 flex items-center gap-4 transition-colors duration-150", !disabled && "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900", dense ? "px-4 py-1.5" : "px-4 py-2", className);
+	const classNames = cls(onClick && !disabled && "cursor-pointer", disabled && "opacity-50 cursor-not-allowed", "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 flex items-center gap-4 transition-colors duration-150", !disabled && "hover:bg-surface-hover", dense ? "px-4 py-1.5" : "px-4 py-2", className);
 	return /* @__PURE__ */ jsx(DropdownMenu.Item, {
 		className: classNames,
 		disabled,
@@ -4411,7 +4517,7 @@ function Menubar({ children, onSelect, value, defaultValue, onValueChange, class
 		value,
 		defaultValue,
 		onValueChange,
-		className: cls("z-10 flex bg-white dark:bg-surface-900 p-[3px] rounded-lg shadow-sm", className),
+		className: cls("z-10 flex bg-surface-card p-[3px] rounded-lg shadow-sm", className),
 		children
 	});
 }
@@ -4424,7 +4530,7 @@ function MenubarMenu({ children, value }) {
 function MenubarTrigger({ children, onSelect, className }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.Trigger, {
 		onSelect,
-		className: cls("py-2 px-3 outline-none select-none font-medium leading-none rounded-md text-text-primary dark:text-text-primary-dark text-sm transition-colors duration-150 flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800", className),
+		className: cls("py-2 px-3 outline-none select-none font-medium leading-none rounded-md text-text-primary dark:text-text-primary-dark text-sm transition-colors duration-150 flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-hover data-[state=open]:bg-surface-active hover:bg-surface-hover", className),
 		children
 	});
 }
@@ -4439,7 +4545,7 @@ function MenubarPortal({ children, portalContainer }) {
 function MenubarContent({ children, className, align, sideOffset, alignOffset, onSelect, ...rest }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.Content, {
 		onSelect,
-		className: cls("z-50 min-w-[220px] bg-white dark:bg-surface-900 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className),
+		className: cls("z-50 min-w-[220px] bg-surface-card rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className),
 		align: align ?? "start",
 		sideOffset: sideOffset ?? 5,
 		alignOffset: alignOffset ?? -3,
@@ -4450,7 +4556,7 @@ function MenubarContent({ children, className, align, sideOffset, alignOffset, o
 function MenubarItem({ children, leftPadding, className, disabled, onSelect, ...rest }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.Item, {
 		onSelect,
-		className: cls("group text-sm leading-none rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 outline-none data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", leftPadding ? "pl-5" : "", disabled ? "pointer-events-none text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark", className),
+		className: cls("group text-sm leading-none rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 outline-none data-[state=open]:bg-surface-active data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-hover  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", leftPadding ? "pl-5" : "", disabled ? "pointer-events-none text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark", className),
 		disabled,
 		...rest,
 		children
@@ -4458,7 +4564,7 @@ function MenubarItem({ children, leftPadding, className, disabled, onSelect, ...
 }
 function MenubarSeparator({ children, className, ...rest }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.Separator, {
-		className: cls("h-[1px] bg-surface-accent-100 dark:bg-surface-900 m-[5px]", className),
+		className: cls("h-[1px] bg-hairline m-[5px]", className),
 		...rest,
 		children
 	});
@@ -4472,7 +4578,7 @@ function MenubarSub({ children, ...rest }) {
 function MenubarSubTrigger({ children, className, onSelect, ...rest }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.SubTrigger, {
 		onSelect,
-		className: cls("group text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 outline-none data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
+		className: cls("group text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 outline-none data-[state=open]:bg-surface-active data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-hover  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
 		...rest,
 		children
 	});
@@ -4481,7 +4587,7 @@ function MenubarSubContent({ children, alignOffset, className, onSelect, ...rest
 	return /* @__PURE__ */ jsx(MenubarPrimitive.SubContent, {
 		onSelect,
 		alignOffset: alignOffset ?? -5,
-		className: cls("min-w-[220px] bg-white dark:bg-surface-900 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className),
+		className: cls("min-w-[220px] bg-surface-card rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className),
 		...rest,
 		children
 	});
@@ -4489,7 +4595,7 @@ function MenubarSubContent({ children, alignOffset, className, onSelect, ...rest
 function MenubarCheckboxItem({ children, checked, onCheckedChange, className, onSelect, ...rest }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.CheckboxItem, {
 		onSelect,
-		className: cls("text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 pl-5 outline-none data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
+		className: cls("text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 pl-5 outline-none data-[highlighted]:bg-surface-hover data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
 		checked,
 		onCheckedChange,
 		...rest,
@@ -4516,7 +4622,7 @@ function MenubarRadioGroup({ children, className, value, onValueChange, onSelect
 function MenubarRadioItem({ children, className, value, onSelect, ...rest }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.RadioItem, {
 		onSelect,
-		className: cls("text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 pl-5 outline-none data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
+		className: cls("text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 pl-5 outline-none data-[highlighted]:bg-surface-hover data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
 		value,
 		...rest,
 		children: children ?? /* @__PURE__ */ jsx(CheckIcon$1, { size: iconSize.small })
@@ -4541,10 +4647,10 @@ function Separator({ orientation, decorative, className }) {
 	if (orientation === "horizontal") return /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
 		decorative,
 		orientation: "horizontal",
-		className: cls("dark:bg-surface-700 bg-surface-200 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)
+		className: cls("bg-hairline data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)
 	});
 	else return /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
-		className: cls("dark:bg-surface-700 bg-surface-200 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className),
+		className: cls("bg-hairline data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className),
 		decorative,
 		orientation: "vertical"
 	});
@@ -4673,7 +4779,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-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),
+					}, "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 : invisible ? "" : 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", {
@@ -4728,7 +4834,7 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 				container: finalContainer,
 				children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
 					"data-multi-select-content": true,
-					className: cls("z-50 overflow-hidden border bg-white dark:bg-surface-800 rounded-lg w-[400px]", defaultBorderMixin),
+					className: cls("z-50 overflow-hidden border bg-surface-card rounded-lg w-[400px]", defaultBorderMixin),
 					align: "start",
 					sideOffset: 8,
 					onEscapeKeyDown: () => onPopoverOpenChange(false),
@@ -4754,7 +4860,7 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 							children: "No results found."
 						}), /* @__PURE__ */ jsxs(Command.Group, { children: [includeSelectAll && /* @__PURE__ */ jsxs(Command.Item, {
 							onSelect: toggleAll,
-							className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded-md aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded-md aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"),
+							className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded-md aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-active", "cursor-pointer p-2 rounded-md aria-[selected=true]:bg-surface-active"),
 							children: [/* @__PURE__ */ jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }), /* @__PURE__ */ jsx("span", {
 								className: "text-sm text-text-secondary dark:text-text-secondary-dark",
 								children: "(Select All)"
@@ -4780,7 +4886,7 @@ var MultiSelectItem = React$1.memo(function MultiSelectItem({ children, value, c
 		onSelect: (_) => {
 			onItemClick(value);
 		},
-		className: cls("flex flex-row items-center gap-1.5", isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded-md aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded-md aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "text-surface-accent-700 dark:text-surface-accent-300", className),
+		className: cls("flex flex-row items-center gap-1.5", isSelected ? "bg-surface-active" : "", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded-md aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-active", "cursor-pointer p-2 rounded-md aria-[selected=true]:bg-surface-active", "text-surface-accent-700 dark:text-surface-accent-300", className),
 		children: [/* @__PURE__ */ jsx(InnerCheckBox, { checked: isSelected }), children]
 	});
 });
@@ -4788,7 +4894,7 @@ var InnerCheckBox = React$1.memo(function InnerCheckBox({ checked }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cls("p-2", "w-8 h-8", "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150"),
 		children: /* @__PURE__ */ jsx("div", {
-			className: cls("border-2 relative transition-colors ease-in-out duration-150", "w-4 h-4 rounded-sm flex items-center justify-center", checked ? "bg-primary" : "bg-white dark:bg-surface-accent-900", checked ? "text-surface-accent-100 dark:text-surface-accent-900" : "", checked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200"),
+			className: cls("border-2 relative transition-colors ease-in-out duration-150", "w-4 h-4 rounded-sm flex items-center justify-center", checked ? "bg-primary" : "bg-surface-card", checked ? "text-surface-accent-100 dark:text-surface-accent-900" : "", checked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200"),
 			children: checked && /* @__PURE__ */ jsx(CheckIcon$1, {
 				size: iconSize.smallest,
 				className: "absolute"
@@ -4910,7 +5016,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 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-transparent", 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"),
@@ -4955,7 +5061,7 @@ function SearchBar({ onClick, onTextSearch, placeholder = "Search", expandable =
 		role: "search",
 		"aria-label": "Search",
 		onClick,
-		className: cls("relative transition-all", heightClass, "bg-surface-accent-50 dark:bg-surface-900 border", defaultBorderMixin, "focus-within:ring-1 focus-within:ring-primary/60 focus-within:border-primary focus-within:shadow-[0_0_0_3px_rgba(0,112,244,0.1)]", "rounded-lg overflow-hidden", className),
+		className: cls("relative transition-all", heightClass, "bg-surface-field border", defaultBorderMixin, "focus-within:ring-1 focus-within:ring-primary/60 focus-within:border-primary focus-within:shadow-[0_0_0_3px_rgba(0,112,244,0.1)]", "rounded-full overflow-hidden", className),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: cls("absolute p-0 h-full pointer-events-none flex items-center justify-center top-0", iconPaddingClass),
@@ -5049,7 +5155,7 @@ var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenCh
 				children: label
 			}) : label,
 			/* @__PURE__ */ jsxs("div", {
-				className: cls("select-none rounded-lg 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 : invisible ? "" : fieldBackgroundHoverMixin, "relative flex items-center", className, {
 					"min-h-[28px]": size === "smallest",
 					"min-h-[32px]": size === "small",
 					"min-h-[40px]": size === "medium",
@@ -5116,7 +5222,7 @@ var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenCh
 				container: finalContainer,
 				children: /* @__PURE__ */ jsx(SelectPrimitive.Content, {
 					position,
-					className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-800 p-2 rounded-lg shadow-lg animate-in fade-in-0 zoom-in-95 duration-150", defaultBorderMixin),
+					className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-surface-card p-2 rounded-lg shadow-lg animate-in fade-in-0 zoom-in-95 duration-150", defaultBorderMixin),
 					children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
 						className: cls("p-1", viewportClassName),
 						style: { maxHeight: "var(--radix-select-content-available-height)" },
@@ -5133,7 +5239,7 @@ var SelectItem = React.memo(function SelectItem({ value, children, disabled, cla
 	return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
 		value: stringValue,
 		disabled,
-		className: cls("w-full", "relative flex items-center p-2 rounded-md text-sm text-surface-accent-700 dark:text-surface-accent-300", "focus:z-10", "data-[state=checked]:bg-surface-accent-100 data-[state=checked]:dark:bg-surface-accent-800 focus:bg-surface-accent-100 dark:focus:bg-surface-900", "data-[state=checked]:focus:bg-surface-accent-200 data-[state=checked]:dark:focus:bg-surface-900", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", "[&>*]:w-full", "overflow-visible", className),
+		className: cls("w-full", "relative flex items-center p-2 rounded-md text-sm text-surface-accent-700 dark:text-surface-accent-300", "focus:z-10", "data-[state=checked]:bg-surface-active focus:bg-surface-hover", "data-[state=checked]:focus:bg-surface-active", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", "[&>*]:w-full", "overflow-visible", className),
 		children: [/* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }), /* @__PURE__ */ jsx("div", {
 			className: "absolute left-1 data-[state=checked]:block hidden",
 			children: /* @__PURE__ */ jsx(CheckIcon$1, { size: iconSize.smallest })
@@ -5155,12 +5261,12 @@ function SliderThumb(props) {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: cls({
 				"border-primary bg-primary outline-none": !props.props.disabled,
-				"border-surface-accent-300 bg-surface-accent-300 dark:border-surface-700 dark:bg-surface-700": props.props.disabled
+				"border-surface-raised-hover bg-surface-raised-hover": props.props.disabled
 			}, props.classes, "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-opacity-50 focus-visible:ring-primary/50", "hover:ring-4 hover:ring-primary hover:ring-opacity-25 hover:ring-primary/25", "block rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50") })
 		}), /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
 			side: "top",
 			sideOffset: 5,
-			className: cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded-md px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100"),
+			className: cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded-md px-3 py-2 text-xs leading-none bg-surface-800/95 dark:bg-surface-raised-hover font-medium text-white shadow-2xl select-none duration-400 ease-in transform opacity-100"),
 			children: props.props.value?.[props.index]
 		})]
 	});
@@ -5178,10 +5284,10 @@ var Slider = React$1.forwardRef(({ className, size = "regular", ...props }, ref)
 			...props,
 			children: [/* @__PURE__ */ jsx(SliderPrimitive.Track, {
 				style: { height: size === "small" ? 4 : 8 },
-				className: "relative w-full grow overflow-hidden rounded-full bg-surface-accent-300 bg-opacity-40 bg-surface-accent-300/40 dark:bg-surface-700 dark:bg-opacity-40 dark:bg-surface-700/40",
+				className: "relative w-full grow overflow-hidden rounded-full bg-surface-active",
 				children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: cls("absolute h-full", {
 					"bg-primary": !props.disabled,
-					"bg-surface-accent-300 dark:bg-surface-700": props.disabled
+					"bg-surface-raised-hover": props.disabled
 				}) })
 			}), (props.value ?? [0]).map((_, index) => /* @__PURE__ */ jsx(SliderThumb, {
 				index,
@@ -5225,7 +5331,7 @@ var Sheet = ({ children, side = "right", title, modal = true, includeBackgroundO
 		children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, {
 			container: finalContainer,
 			children: [includeBackgroundOverlay && /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
-				className: cls("outline-none", "fixed inset-0 bg-white/80 dark:bg-surface-900/80", "backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in", overlayZIndex, overlayClassName),
+				className: cls("outline-none", "fixed inset-0 bg-surface-scrim", "backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in", overlayZIndex, overlayClassName),
 				style: overlayStyle
 			}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
 				...props,
@@ -5233,7 +5339,7 @@ var Sheet = ({ children, side = "right", title, modal = true, includeBackgroundO
 				onOpenAutoFocus: (event) => event.preventDefault(),
 				onPointerDownOutside,
 				onInteractOutside,
-				className: cls("outline-none", borderClass[side], defaultBorderMixin, "text-surface-accent-900 dark:text-white", "fixed transform z-50 transition-[transform,opacity] ease-in-out", !displayed ? "duration-150" : "duration-100", "outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0", transparent ? "" : "shadow-md bg-white dark:bg-surface-900", side === "top" || side === "bottom" ? "w-full" : "h-full", side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0", displayed && open ? "opacity-100" : "opacity-50", !displayed || !open ? transformValue[side] : "", className),
+				className: cls("outline-none", borderClass[side], defaultBorderMixin, "text-surface-accent-900 dark:text-white", "fixed transform z-50 transition-[transform,opacity] ease-in-out", !displayed ? "duration-150" : "duration-100", "outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0", transparent ? "" : "shadow-md bg-surface-card", side === "top" || side === "bottom" ? "w-full" : "h-full", side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0", displayed && open ? "opacity-100" : "opacity-50", !displayed || !open ? transformValue[side] : "", className),
 				style,
 				children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
 					className: "sr-only outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0",
@@ -5454,7 +5560,7 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 		onFocus: () => setFocused(true),
 		onBlur: () => setFocused(false),
 		style: inputStyle,
-		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)
+		className: cls(invisible ? focusedInvisibleMixin : "", "rounded-lg resize-none w-full outline-none text-sm 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,
@@ -5464,7 +5570,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-lg", "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 text-sm", "rounded-lg", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", {
 			"min-h-[28px]": size === "smallest",
 			"min-h-[32px]": size === "small",
 			"min-h-[40px]": size === "medium",
@@ -5485,7 +5591,7 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cls("rounded-lg 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 : invisible ? "" : fieldBackgroundHoverMixin, error ? "border border-red-500 dark:border-red-600" : "", {
 			"min-h-[28px]": size === "smallest",
 			"min-h-[32px]": size === "small",
 			"min-h-[40px]": size === "medium",
@@ -5567,7 +5673,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-accent-200 dark:hover:bg-surface-accent-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 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-hover", "bg-surface-card border shadow-sm", "border-hairline"),
 					children: /* @__PURE__ */ jsx(ChevronLeftIcon$1, { size: iconSize.smallest })
 				}),
 				/* @__PURE__ */ jsx("div", {
@@ -5579,7 +5685,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 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-field p-1 text-surface-600 dark:text-surface-400 gap-2", variant === "boxy" && "flex items-end h-full", variant === "pill" && "flex items-center gap-0.5", innerClassName),
 						children
 					})
 				}),
@@ -5588,7 +5694,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-accent-200 dark:hover:bg-surface-accent-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 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-hover", "bg-surface-card border shadow-sm", "border-hairline"),
 					children: /* @__PURE__ */ jsx(ChevronRightIcon$1, { size: iconSize.smallest })
 				})
 			]
@@ -5600,7 +5706,7 @@ function Tab({ value, className, innerClassName, children, disabled }) {
 	return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
 		value,
 		disabled,
-		className: cls("inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-white transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", variant === "standard" && "rounded-md px-3 py-1 data-[state=active]:bg-white data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50", variant === "boxy" && cls("flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 border-r border-surface-200 dark:border-surface-800 cursor-pointer text-xs font-medium transition-colors group relative box-border overflow-hidden", "border-b-2 border-b-transparent", "data-[state=active]:bg-surface-50 dark:data-[state=active]:bg-surface-900", "data-[state=active]:text-text-primary dark:data-[state=active]:text-text-primary-dark", "data-[state=active]:border-b-primary", "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-100 dark:hover:bg-surface-800"), variant === "pill" && cls("px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors", "data-[state=active]:bg-primary/10 data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 dark:data-[state=active]:text-primary", "text-text-disabled dark:text-text-disabled-dark hover:text-text-secondary dark:hover:text-text-secondary-dark"), className, variant === "standard" && innerClassName),
+		className: cls("inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-white transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", variant === "standard" && "rounded-md px-3 py-1 data-[state=active]:bg-surface-lifted data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:text-surface-50", variant === "boxy" && cls("flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 cursor-pointer text-xs font-medium transition-colors group relative box-border", "rounded-t-lg -mb-px border border-transparent border-b-0", "data-[state=active]:bg-surface-card data-[state=active]:border-hairline", "data-[state=active]:text-text-primary dark:data-[state=active]:text-text-primary-dark", "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-hover"), variant === "pill" && cls("px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors", "data-[state=active]:bg-primary/10 data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 dark:data-[state=active]:text-primary", "text-text-disabled dark:text-text-disabled-dark hover:text-text-secondary dark:hover:text-text-secondary-dark"), className, variant === "standard" && innerClassName),
 		children
 	});
 }
@@ -5613,21 +5719,21 @@ var Table = React.memo(({ children, className, style, ...rest }) => /* @__PURE__
 	children
 }));
 var TableBody = React.memo(({ children, className, ...rest }) => /* @__PURE__ */ jsx("tbody", {
-	className: cls("bg-white dark:bg-surface-900 text-sm divide-y divide-surface-100 dark:divide-surface-700 dark:divide-opacity-70 dark:divide-surface-700/70", className),
+	className: cls("bg-surface-card text-sm divide-y divide-hairline", className),
 	...rest,
 	children
 }));
 var TableHeader = React.memo(({ children, className, ...rest }) => /* @__PURE__ */ jsx("thead", {
 	...rest,
 	children: /* @__PURE__ */ jsx("tr", {
-		className: cls(defaultBorderMixin, "text-sm font-medium text-surface-700 dark:text-surface-accent-300", "bg-surface-accent-50 border-b dark:bg-surface-800", className),
+		className: cls(defaultBorderMixin, "text-sm font-medium text-surface-700 dark:text-surface-accent-300", "bg-surface-sheet border-b", className),
 		children
 	})
 }));
 var TableRow = React.memo(({ children, className, onClick, style, ...rest }) => /* @__PURE__ */ jsx("tr", {
 	onClick,
 	style,
-	className: cls("bg-white dark:bg-surface-900", onClick ? "transition-colors duration-150 hover:bg-primary/5 cursor-pointer" : "", className),
+	className: cls("bg-surface-card", onClick ? "transition-colors duration-150 hover:bg-surface-card-hover cursor-pointer" : "", className),
 	...rest,
 	children
 }));
@@ -5771,7 +5877,7 @@ var getColor = (color) => {
 		case "secondary": return "bg-secondary";
 		case "warning": return "bg-orange-500";
 		case "error": return "bg-red-500";
-		default: return "bg-surface-accent-300 dark:bg-surface-accent-700";
+		default: return "bg-surface-raised-hover";
 	}
 };
 var Badge = React.forwardRef(({ color = "primary", invisible = false, children }, ref) => {
@@ -5874,7 +5980,7 @@ function Skeleton({ width, height, className }) {
 			width: width === void 0 ? void 0 : `${width}px`,
 			height: height === void 0 ? void 0 : `${height}px`
 		},
-		className: cls("block relative overflow-hidden", "bg-surface-accent-50 dark:bg-surface-accent-800 rounded-md", "max-w-full max-h-full", width === void 0 ? "w-full" : void 0, height === void 0 ? "h-3" : void 0, className),
+		className: cls("block relative overflow-hidden", "bg-surface-raised rounded-md", "max-w-full max-h-full", width === void 0 ? "w-full" : void 0, height === void 0 ? "h-3" : void 0, className),
 		children: /* @__PURE__ */ jsx("span", {
 			className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/50 dark:via-white/8 to-transparent",
 			style: { animation: "shimmer 1.8s ease-in-out infinite" }
@@ -5891,7 +5997,7 @@ function ToggleButtonGroup({ value, onValueChange, options, className }) {
 	return /* @__PURE__ */ jsx("div", {
 		role: "group",
 		"aria-label": "Toggle options",
-		className: cls("inline-flex flex-row bg-surface-100 dark:bg-surface-900 rounded-lg p-1 gap-1", className),
+		className: cls("inline-flex flex-row bg-surface-field rounded-lg p-1 gap-1", className),
 		children: options.map((option) => /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: (e) => {
@@ -5901,9 +6007,9 @@ function ToggleButtonGroup({ value, onValueChange, options, className }) {
 			disabled: option.disabled,
 			"aria-pressed": value === option.value,
 			"aria-disabled": option.disabled || void 0,
-			className: cls("flex flex-row items-center justify-center gap-2 py-3 px-4 rounded-md transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", value === option.value ? "bg-white dark:bg-surface-700 text-primary dark:text-primary-300 shadow-sm" : "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-200 dark:hover:bg-surface-800", option.disabled && "opacity-50 cursor-not-allowed"),
+			className: cls("flex flex-row items-center justify-center gap-2 h-6 px-3.5 rounded-md transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", value === option.value ? "bg-surface-lifted text-text-primary dark:text-text-primary-dark shadow-sm" : "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-hover", option.disabled && "opacity-50 cursor-not-allowed"),
 			children: [option.icon, /* @__PURE__ */ jsx("span", {
-				className: "text-sm font-medium",
+				className: "text-xs font-medium",
 				children: option.label
 			})]
 		}, option.value))
@@ -5937,7 +6043,7 @@ var VirtualTableHeader = React.memo(function VirtualTableHeader({ resizeHandleRe
 	}, [column, onFilterUpdate]);
 	const hovered = !(isResizingIndex !== columnIndex && isResizingIndex > 0) && (onHover || isResizingIndex === columnIndex);
 	return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs("div", {
-		className: cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center", isDragging ? "bg-primary-bg dark:bg-primary-bg-dark" : "bg-surface-50 dark:bg-surface-900", "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark", !isDragging && "hover:bg-surface-100 dark:hover:bg-surface-900 hover:bg-opacity-50 hover:bg-surface-100/50 dark:hover:bg-opacity-50 dark:hover:bg-surface-900/50", column.frozen ? "sticky left-0 z-10" : "relative z-0", isDraggable && "cursor-grab"),
+		className: cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center", isDragging ? "bg-primary-bg dark:bg-primary-bg-dark" : "bg-surface-sheet", "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark", !isDragging && "hover:bg-surface-hover", column.frozen ? "sticky left-0 z-10" : "relative z-0", isDraggable && "cursor-grab"),
 		style: {
 			left: column.frozen ? 0 : void 0,
 			minWidth: column.width,
@@ -5975,7 +6081,7 @@ var VirtualTableHeader = React.memo(function VirtualTableHeader({ resizeHandleRe
 					invisible: !sort,
 					children: /* @__PURE__ */ jsxs(IconButton, {
 						size: "small",
-						className: onHover || openFilter ? "bg-white dark:bg-surface-900" : void 0,
+						className: onHover || openFilter ? "bg-surface-card" : void 0,
 						title: sortActionTitle(sort, sortPosition),
 						"aria-label": sortActionTitle(sort, sortPosition),
 						onClick: (event) => {
@@ -6013,7 +6119,7 @@ var VirtualTableHeader = React.memo(function VirtualTableHeader({ resizeHandleRe
 						className: hidden ? "hidden" : void 0,
 						modal: true,
 						trigger: /* @__PURE__ */ jsx(IconButton, {
-							className: onHover || openFilter ? "bg-white dark:bg-surface-900" : void 0,
+							className: onHover || openFilter ? "bg-surface-card" : void 0,
 							size: "small",
 							onClick: handleSettingsClick,
 							children: /* @__PURE__ */ jsx(FilterIcon$1, {
@@ -6036,7 +6142,7 @@ var VirtualTableHeader = React.memo(function VirtualTableHeader({ resizeHandleRe
 			column.resizable && /* @__PURE__ */ jsx("div", {
 				ref: resizeHandleRef,
 				"data-no-dnd": "true",
-				className: cls("absolute h-full w-[6px] top-0 right-0 cursor-col-resize", hovered && "bg-surface-300 dark:bg-surface-700"),
+				className: cls("absolute h-full w-[6px] top-0 right-0 cursor-col-resize", hovered && "bg-hairline-strong"),
 				onPointerDown: (e) => {
 					e.stopPropagation();
 					if (onClickResizeColumn) onClickResizeColumn(columnIndex, column);
@@ -6154,7 +6260,7 @@ var SortableColumnHeader = ({ column, columnIndex, columnRefs, isResizing, onFil
 		})
 	});
 };
-var VirtualTableHeaderRow = ({ columns, sortIndex, onColumnSort, onFilterUpdate, filter, onColumnResize, onColumnResizeEnd, createFilterField, AddColumnComponent, onColumnsOrderChange, data, cellRenderer: CellRenderer, rowHeight = 54, draggingColumnId, headerHeight = 48 }) => {
+var VirtualTableHeaderRow = ({ columns, sortIndex, onColumnSort, onFilterUpdate, filter, onColumnResize, onColumnResizeEnd, createFilterField, AddColumnComponent, onColumnsOrderChange, data, cellRenderer: CellRenderer, rowHeight = 54, draggingColumnId, headerHeight = 40 }) => {
 	const columnRefs = useMemo(() => columns.map(() => createRef()), [columns.length]);
 	const [isResizing, setIsResizing] = useState(-1);
 	const adjustWidthColumn = useCallback((index, width, end) => {
@@ -6234,7 +6340,7 @@ var VirtualTableHeaderRow = ({ columns, sortIndex, onColumnSort, onFilterUpdate,
 		setCursorDocument(true);
 	}, [setCursorDocument]);
 	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
-		className: cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 border-b bg-surface-50 dark:bg-surface-900"),
+		className: cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 border-b bg-surface-sheet"),
 		style: { height: headerHeight },
 		children: [columns.map((column, columnIndex) => {
 			const columnFilter = column && filter && filter[column.key] ? filter[column.key] : void 0;
@@ -6274,8 +6380,8 @@ var VirtualTableRow = React.memo(function VirtualTableRow({ rowData, rowIndex, c
 		rowIndex
 	]);
 	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-primary/[0.03] dark:hover:!bg-primary/5": hoverRow,
+		className: cls("group flex min-w-full text-sm border-b border-hairline bg-surface-card", rowClassName ? rowClassName(rowData) : "", {
+			"hover:!bg-surface-card-hover": hoverRow,
 			"cursor-pointer ": onRowClick
 		}),
 		onClick,
@@ -6370,7 +6476,7 @@ var innerElementType = forwardRef(({ children, ...rest }, ref) => {
 * implementation always had. Runtime behaviour is unchanged — this is the same
 * memoized component under a type that describes it.
 */
-var VirtualTable = React.memo(function VirtualTable({ data, onResetPagination, onEndReached, endOffset = 600, rowHeight = 54, headerHeight = 48, columns: columnsProp, onRowClick, onColumnResize, onColumnResizeEnd, filter: filterInput, checkFilterCombination, onFilterUpdate, sortBy, error, emptyComponent, onSortByUpdate, onScroll: onScrollProp, loading, cellRenderer, hoverRow, createFilterField, rowClassName, style, className, endAdornment, AddColumnComponent, initialScroll = 0, onColumnsOrderChange, extraData }) {
+var VirtualTable = React.memo(function VirtualTable({ data, onResetPagination, onEndReached, endOffset = 600, rowHeight = 54, headerHeight = 40, columns: columnsProp, onRowClick, onColumnResize, onColumnResizeEnd, filter: filterInput, checkFilterCombination, onFilterUpdate, sortBy, error, emptyComponent, onSortByUpdate, onScroll: onScrollProp, loading, cellRenderer, hoverRow, createFilterField, rowClassName, style, className, endAdornment, AddColumnComponent, initialScroll = 0, onColumnsOrderChange, extraData }) {
 	const sortIndex = useMemo(() => {
 		const index = /* @__PURE__ */ new Map();
 		(sortBy ?? []).forEach(([key, direction], position) => {
@@ -6615,7 +6721,7 @@ var SortableCellWrapper = ({ columnKey, width, isDragging, isDraggable, frozen,
 			maxWidth: width,
 			width
 		},
-		className: cls("flex-shrink-0", frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900"),
+		className: cls("flex-shrink-0", frozen && "sticky left-0 z-10 bg-surface-card"),
 		...attrsWithoutTabIndex,
 		children
 	});
@@ -6631,7 +6737,7 @@ function MemoizedList({ outerRef, width, height, itemCount, onScroll, itemSize,
 		onScroll,
 		itemSize,
 		children: useCallback(({ index, style }) => {
-			return /* @__PURE__ */ jsx(VirtualListContext.Consumer, { children: ({ onRowClick, data, columns, rowHeight = 54, headerHeight = 48, cellRenderer, hoverRow, rowClassName, endAdornment, draggingColumnId, onColumnsOrderChange, extraData }) => {
+			return /* @__PURE__ */ jsx(VirtualListContext.Consumer, { children: ({ onRowClick, data, columns, rowHeight = 54, headerHeight = 40, cellRenderer, hoverRow, rowClassName, endAdornment, draggingColumnId, onColumnsOrderChange, extraData }) => {
 				if (endAdornment && index === (data ?? []).length) return /* @__PURE__ */ jsx("div", {
 					style: {
 						...style,
@@ -6677,7 +6783,7 @@ function MemoizedList({ outerRef, width, height, itemCount, onScroll, itemSize,
 								extraData
 							})
 						}, `cell_wrapper_${column.key}`) : /* @__PURE__ */ jsx("div", {
-							className: cls("flex-shrink-0 relative", column.frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900"),
+							className: cls("flex-shrink-0 relative", column.frozen && "sticky left-0 z-10 bg-surface-card"),
 							style: {
 								minWidth: column.width,
 								maxWidth: column.width,
@@ -6896,12 +7002,13 @@ function VirtualTableSwitch(props) {
 //#endregion
 //#region src/components/VirtualTable/fields/VirtualTableDateField.tsx
 function VirtualTableDateField(props) {
-	const { disabled, error, mode, timezone, internalValue, updateValue, small = false, locale } = props;
+	const { name, disabled, error, mode, timezone, internalValue, updateValue, small = false, locale } = props;
 	return /* @__PURE__ */ jsx(DateTimeField, {
 		value: internalValue ?? void 0,
 		onChange: (dateValue) => updateValue(dateValue ?? null),
 		disabled,
 		error: Boolean(error),
+		"aria-label": name,
 		invisible: true,
 		size: small ? "small" : "medium",
 		inputClassName: cls("w-full h-full", focusedDisabled),
@@ -7085,10 +7192,9 @@ function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoading
 		}
 		return String(item);
 	}, []);
-	const borderMixinClass = "border-surface-200 dark:border-surface-800";
 	return /* @__PURE__ */ jsx("div", {
 		ref: containerRef,
-		className: cls("w-full", selectedEntityId === void 0 && `rounded-lg overflow-hidden border ${borderMixinClass}`),
+		className: cls("w-full", selectedEntityId === void 0 && `rounded-lg overflow-hidden border border-hairline`),
 		children: dataLoadingError && data.length === 0 ? /* @__PURE__ */ jsx("div", {
 			className: "flex items-center justify-center p-8",
 			children: /* @__PURE__ */ jsxs(Typography, {
@@ -7107,6 +7213,7 @@ function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoading
 			})
 		}) : /* @__PURE__ */ jsxs(Fragment, { children: [header, /* @__PURE__ */ jsxs("div", {
 			ref: rowsRef,
+			className: "my-1.5",
 			style: {
 				height: totalHeight + footerHeight,
 				position: "relative"
@@ -7143,7 +7250,7 @@ function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoading
 								height: estimatedRowHeight,
 								overflow: "hidden"
 							},
-							className: cls(!isLast && "border-b", !isLast && borderMixinClass),
+							className: "py-0.5",
 							selected,
 							highlighted,
 							isLast,
@@ -7163,7 +7270,7 @@ function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoading
 					children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" })
 				}),
 				!dataLoading && noMoreToLoad && data.length > 0 && /* @__PURE__ */ jsx("div", {
-					className: "flex items-center justify-center py-2 dark:bg-surface-900",
+					className: "flex items-center justify-center py-2",
 					style: {
 						position: "absolute",
 						top: totalHeight,
@@ -7400,7 +7507,7 @@ function BoardSortableList({ columnId, items, ItemComponent, isDragging, isDragO
 	}, [hasMore, onLoadMore]);
 	return /* @__PURE__ */ jsx("div", {
 		ref: setNodeRef,
-		className: useMemo(() => cls("flex flex-col p-2 transition-opacity duration-100 transition-bg ease-linear w-full overflow-y-auto flex-1 min-h-0 rounded-md", isDragging && isDragOverColumn ? "bg-surface-accent-200 dark:bg-surface-900" : isDragging ? "bg-surface-50 dark:bg-surface-900 hover:bg-surface-accent-100 dark:hover:bg-surface-800" : "bg-surface-50 dark:bg-surface-900"), [isDragging, isDragOverColumn]),
+		className: useMemo(() => cls("flex flex-col p-2 transition-opacity duration-100 transition-bg ease-linear w-full overflow-y-auto flex-1 min-h-0 rounded-md", isDragging && isDragOverColumn ? "bg-surface-active" : isDragging ? "bg-surface-field hover:bg-surface-hover" : "bg-surface-field"), [isDragging, isDragOverColumn]),
 		style: { minHeight: 80 },
 		children: /* @__PURE__ */ jsx(SortableContext, {
 			items: items.map((i) => i.id),
@@ -7492,8 +7599,8 @@ var BoardColumn = memo(function BoardColumn({ id, title, items, ItemComponent, i
 		isColumnBeingDragged
 	]);
 	const dragListeners = allowReorder ? listeners : {};
-	const columnClassName = useMemo(() => cls("border h-full w-80 min-w-80 mx-2 flex flex-col rounded-md border-surface-200 dark:border-surface-800", isColumnBeingDragged ? "ring-2 ring-primary" : ""), [isColumnBeingDragged]);
-	const headerClassName = useMemo(() => cls("flex items-center justify-between px-2 rounded-t-md transition-colors duration-200 ease-in-out", isColumnBeingDragged ? "bg-surface-100 dark:bg-surface-700" : "bg-surface-50 hover:bg-surface-100 dark:bg-surface-800 dark:hover:bg-surface-700", allowReorder ? "cursor-grab" : ""), [isColumnBeingDragged, allowReorder]);
+	const columnClassName = useMemo(() => cls("border h-full w-80 min-w-80 mx-2 flex flex-col rounded-md border-hairline", isColumnBeingDragged ? "ring-2 ring-primary" : ""), [isColumnBeingDragged]);
+	const headerClassName = useMemo(() => cls("flex items-center justify-between px-2 rounded-t-md transition-colors duration-200 ease-in-out", isColumnBeingDragged ? "bg-surface-active" : "bg-surface-field hover:bg-surface-field-hover", allowReorder ? "cursor-grab" : ""), [isColumnBeingDragged, allowReorder]);
 	const itemIds = useMemo(() => items.map((i) => i.id), [items]);
 	return /* @__PURE__ */ jsxs("div", {
 		ref: setNodeRef,
@@ -7851,7 +7958,7 @@ function CollectionViewToolbar({ viewMode, onViewModeChange, enabledViews = [
 	const showKanbanSelector = kanbanPropertyOptions && kanbanPropertyOptions.length > 0 && viewMode === "kanban" && onKanbanPropertyChange;
 	const showPopover = showViewToggle || showSizeSelector || showKanbanSelector;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cls("flex items-center gap-2 px-2 flex-shrink-0", "border-b border-surface-200 dark:border-surface-800", compact ? "py-0.5 gap-1" : "py-1"),
+		className: cls("flex items-center gap-2 px-2 flex-shrink-0", "border-b border-hairline", compact ? "py-0.5 gap-1" : "py-1"),
 		children: [
 			actionsStart,
 			onSearchChange && /* @__PURE__ */ jsx(SearchBar, {
@@ -8081,7 +8188,7 @@ function renderString(property, value) {
 				if (fallback instanceof HTMLElement) fallback.style.display = "flex";
 			}
 		}) : null, /* @__PURE__ */ jsx("div", {
-			className: cls("w-full h-full items-center justify-center rounded", "bg-surface-100 dark:bg-surface-800 text-text-secondary dark:text-text-secondary-dark", strValue ? "hidden" : "flex"),
+			className: cls("w-full h-full items-center justify-center rounded", "bg-surface-raised text-text-secondary dark:text-text-secondary-dark", strValue ? "hidden" : "flex"),
 			children: /* @__PURE__ */ jsx(ImageIcon$1, { size: iconSize.small })
 		})]
 	});
@@ -8512,7 +8619,7 @@ function CollectionCardView({ dataController, properties, propertiesOrder, idPro
 					src: imageValue,
 					alt: "",
 					className: "w-full h-32 object-cover rounded-t-lg"
-				}) : /* @__PURE__ */ jsx("div", { className: cls("h-24 rounded-t-lg", "bg-surface-accent-200/50 dark:bg-white/[0.055] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.045)]") })),
+				}) : /* @__PURE__ */ jsx("div", { className: cls("h-24 rounded-t-lg", "bg-surface-field border border-hairline") })),
 				selectionEnabled && /* @__PURE__ */ jsx("div", {
 					className: "absolute top-2 right-2",
 					onClick: (e) => e.stopPropagation(),
@@ -8656,7 +8763,7 @@ function CollectionListView({ dataController, properties, propertiesOrder, idPro
 		const titleValue = getValueInPath(item, titlePropertyKey);
 		return /* @__PURE__ */ jsxs("div", {
 			style,
-			className: cls("flex items-center gap-3 px-4 cursor-pointer", "hover:bg-surface-50 dark:hover:bg-surface-700", "transition-colors duration-100", selected && "bg-primary-50 dark:bg-primary-900/20", highlighted && "bg-surface-100 dark:bg-surface-800", rowClassName),
+			className: cls("flex items-center gap-3 px-4 cursor-pointer", "hover:bg-surface-hover", "transition-colors duration-100", selected && "bg-primary-50 dark:bg-primary-900/20", highlighted && "bg-surface-raised", rowClassName),
 			onClick,
 			children: [selectionEnabled && /* @__PURE__ */ jsx("div", {
 				className: "flex-shrink-0",
@@ -9031,7 +9138,7 @@ function CollectionView({ dataController, properties, propertiesOrder, displayed
 		}
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: cls("overflow-hidden h-full w-full rounded-md flex flex-col", "dark:bg-surface-800", className),
+		className: cls("overflow-hidden h-full w-full rounded-md flex flex-col", "bg-surface-sheet", className),
 		children: [
 			dataController.error && dataController.data.length > 0 && /* @__PURE__ */ jsx("div", {
 				className: "flex items-center gap-4 px-4 py-2 bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 flex-shrink-0",
@@ -9069,6 +9176,6 @@ function CollectionView({ dataController, properties, propertiesOrder, displayed
 	});
 }
 //#endregion
-export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, CONTROL_HEIGHT, CalendarIcon, Card, CardView, CenteredView, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionView, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GitHubIcon, GlobeIcon, HandleIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, ImageOffIcon, InfoIcon, InfoLabel, InputLabel, ItalicIcon, KanbanIcon, KanbanView, KeyIcon, KeyRoundIcon, Label, LanguagesIcon, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, ListView, LoaderIcon, LoadingButton, LockIcon, LogOutIcon, LucideIconByName, MailIcon, Markdown, Maximize2Icon, Menu, MenuIcon, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftCloseIcon, PanelLeftIcon, PanelLeftOpenIcon, Paper, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VirtualTable, VirtualTableDateField, VirtualTableInput, VirtualTableNumberInput, VirtualTableSelect, VirtualTableSelectionProvider, VirtualTableSwitch, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, accentTextMixin, cardClickableMixin, cardMixin, cardSelectedMixin, cls, codeSurfaceMixin, colorClassesMapping, controlHeightMixin, controlPaddingMixin, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, getLoadedLucideIcons, iconKeys, iconSize, isChunkLoadError, lazyChunk, loadChunk, loadLucideIcons, lucideIcons, paperMixin, resolveLucideIcon, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useLucideIcons, useOutsideAlerter, usePortalContainer, useVirtualTableCellSelected, useVirtualTableSelection };
+export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, CONTROL_HEIGHT, CalendarIcon, Card, CardView, CenteredView, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionView, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GitHubIcon, GlobeIcon, HandleIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, ImageOffIcon, InfoIcon, InfoLabel, InputLabel, ItalicIcon, KanbanIcon, KanbanView, KeyIcon, KeyRoundIcon, Label, LanguagesIcon, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, ListView, LoaderIcon, LoadingButton, LockIcon, LogOutIcon, LucideIconByName, MailIcon, Markdown, Maximize2Icon, Menu, MenuIcon, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftCloseIcon, PanelLeftIcon, PanelLeftOpenIcon, Paper, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VirtualTable, VirtualTableDateField, VirtualTableInput, VirtualTableNumberInput, VirtualTableSelect, VirtualTableSelectionProvider, VirtualTableSwitch, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, accentTextMixin, cardClickableMixin, cardMixin, cardSelectedMixin, cls, codeSurfaceMixin, colorClassesMapping, controlHeightMixin, controlPaddingMixin, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, getLoadedLucideIcons, iconKeys, iconSize, isChunkLoadError, lazyChunk, loadChunk, loadLucideIcons, lucideIcons, paperMixin, resolveLucideIcon, surfaceActiveMixin, surfaceHoverMixin, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useIsDarkMode, useLucideIcons, useOutsideAlerter, usePortalContainer, useVirtualTableCellSelected, useVirtualTableSelection };
 
 //# sourceMappingURL=index.es.js.map