@plastic-js/tsumiki 0.1.31 → 0.1.34

package/dist/components/Accordion.js

@@ -20,7 +20,7 @@ var triggerClass = css({
 	background: "none",
 	color: "var(--tsu-fg)",
 	fontSize: "var(--tsu-comp-font-size-md)",
-	fontWeight: 500,
+	fontWeight: "var(--tsu-font-weight-medium)",
 	fontFamily: "inherit",
 	cursor: "pointer",
 	touchAction: "manipulation",

package/dist/components/Avatar.js

@@ -47,7 +47,7 @@ var AvatarFallback = (props = {}) => {
 					justifyContent: "center",
 					width: "100%",
 					height: "100%",
-					fontWeight: 600,
+					fontWeight: "var(--tsu-font-weight-semibold)",
 					...local.style
 				};
 			},

package/dist/components/BottomNavigation.js

@@ -1,6 +1,6 @@
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
-import { Dynamic, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+import { Dynamic, createComputed, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
 //#region src/components/BottomNavigation.jsx
 var _tmpl = template("<span></span>");
 var read = (v) => typeof v === "function" ? v() : v;
@@ -42,24 +42,28 @@ var iconClass = css({
 	height: "24px",
 	"& svg": {
 		width: "100%",
-		height: "100%"
+		height: "100%",
+		strokeWidth: "var(--tsu-nav-icon-stroke-width, 2)"
 	}
 });
 var labelClass = css({
 	fontSize: "11px",
 	lineHeight: "14px",
-	fontWeight: 500
+	fontWeight: "var(--tsu-font-weight-medium)"
 });
 var BottomNavigationItem = (props = {}) => {
 	const [local, rest] = splitProps(props, [
 		"icon",
+		"activeIcon",
 		"label",
 		"active",
 		"href",
 		"onClick",
 		"className"
 	]);
-	return jsx(Dynamic, mergeProps({ component: local.href ? "a" : "button" }, () => local.href ? { href: local.href } : { type: "button" }, {
+	const tag = local.href ? "a" : "button";
+	const shown = createComputed(() => read(local.active) && local.activeIcon != null ? read(local.activeIcon) : read(local.icon));
+	return jsx(Dynamic, mergeProps({ component: tag }, () => local.href ? { href: local.href } : { type: "button" }, {
 		get className() {
 			return [itemClass, local.className].filter(Boolean).join(" ");
 		},
@@ -69,7 +73,7 @@ var BottomNavigationItem = (props = {}) => {
 		},
 		children: [() => {
 			const _el0 = _tmpl.cloneNode(true);
-			insert(_el0, () => local.icon);
+			insert(_el0, () => shown());
 			setProp(_el0, "className", () => iconClass);
 			return _el0;
 		}, () => {

package/dist/components/BottomSheet.js

@@ -1,11 +1,15 @@
 import Portal_default from "./Portal.js";
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
-import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+import { createSignal, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
 //#region src/components/BottomSheet.jsx
-var _tmpl3 = template("<div><h2></h2></div>");
-var _tmpl2 = template("<div role=\"dialog\" aria-modal=\"true\"><!><div></div><!></div>");
+var _tmpl4 = template("<div><h2></h2></div>");
+var _tmpl3 = template("<div><div></div></div>");
+var _tmpl2 = template("<div role=\"dialog\" aria-modal=\"true\"><!><!><div></div><!></div>");
 var _tmpl = template("<div></div>");
+var CLOSE_DISTANCE_RATIO = .3;
+var CLOSE_VELOCITY = .5;
+var RUBBER_BAND_FACTOR = 3;
 var backdropClass = css({
 	position: "fixed",
 	inset: 0,
@@ -13,10 +17,11 @@ var backdropClass = css({
 	background: "rgba(0, 0, 0, 0.35)",
 	opacity: 0,
 	pointerEvents: "none",
-	transition: "opacity 200ms ease",
+	transition: "opacity var(--tsu-transition-overlay-exit)",
 	"&[data-open]": {
 		opacity: 1,
-		pointerEvents: "auto"
+		pointerEvents: "auto",
+		transition: "opacity var(--tsu-transition-overlay-enter)"
 	}
 });
 var backdropBlurClass = css({
@@ -30,17 +35,45 @@ var sheetClass = css({
 	zIndex: 1400,
 	background: "var(--tsu-bg)",
 	borderRadius: "var(--tsu-radius-l3-md) var(--tsu-radius-l3-md) 0 0",
+	boxShadow: "var(--tsu-shadow-lg)",
 	maxHeight: "70vh",
 	display: "flex",
 	flexDirection: "column",
 	transform: "translateY(100%)",
 	pointerEvents: "none",
-	transition: "transform 250ms ease",
+	transition: "transform var(--tsu-transition-overlay-exit)",
 	"&[data-open]": {
 		transform: "translateY(0)",
-		pointerEvents: "auto"
+		pointerEvents: "auto",
+		transition: "transform var(--tsu-transition-overlay-enter)"
+	},
+	"&::after": {
+		content: "\"\"",
+		position: "absolute",
+		top: "calc(100% - 1px)",
+		left: 0,
+		right: 0,
+		height: "30vh",
+		background: "var(--tsu-bg)"
 	}
 });
+var draggingClass = css({ transition: "none" });
+var grabberAreaClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	padding: "6px 0",
+	flexShrink: 0,
+	cursor: "grab",
+	touchAction: "none",
+	"&:active": { cursor: "grabbing" }
+});
+var grabberClass = css({
+	width: "36px",
+	height: "5px",
+	borderRadius: "2.5px",
+	background: "var(--tsu-neutral-alpha-6)"
+});
 var headerClass = css({
 	display: "flex",
 	alignItems: "center",
@@ -51,8 +84,9 @@ var headerClass = css({
 });
 var titleClass = css({
 	margin: 0,
-	fontSize: "var(--tsu-comp-font-size-lg)",
-	fontWeight: 600,
+	fontSize: "var(--tsu-text-title-size)",
+	fontWeight: "var(--tsu-text-title-weight)",
+	lineHeight: "var(--tsu-text-title-line-height)",
 	color: "var(--tsu-fg)",
 	textAlign: "center"
 });
@@ -74,7 +108,8 @@ var read = (v) => typeof v === "function" ? v() : v;
 var BottomSheet = (props) => {
 	const [local] = splitProps(mergeProps$1({
 		dismissible: true,
-		backdropBlur: true
+		backdropBlur: true,
+		draggable: true
 	}, props), [
 		"open",
 		"onOpen",
@@ -82,21 +117,72 @@ var BottomSheet = (props) => {
 		"onOpenChange",
 		"title",
 		"dismissible",
+		"draggable",
 		"backdropBlur",
+		"backdropClassName",
+		"backdropStyle",
+		"bodyClassName",
 		"footer",
 		"footerClass",
 		"class",
 		"children"
 	]);
+	const dragging = createSignal(false);
+	let sheetEl = null;
+	let startY = 0;
+	let currentDy = 0;
+	let lastY = 0;
+	let lastT = 0;
+	let velocity = 0;
+	const handleOpenChange = (detail) => {
+		if (!detail.open) local.onClose?.();
+		local.onOpenChange?.(detail);
+	};
 	const handleBackdropClick = () => {
-		if (local.dismissible) {
-			local.onClose?.();
-			local.onOpenChange?.({ open: false });
-		}
+		if (read(local.dismissible)) handleOpenChange({ open: false });
+	};
+	const onGrabberPointerDown = (e) => {
+		e.currentTarget.setPointerCapture?.(e.pointerId);
+		startY = lastY = e.clientY;
+		lastT = e.timeStamp;
+		velocity = 0;
+		currentDy = 0;
+		dragging(true);
 	};
+	const onGrabberPointerMove = (e) => {
+		if (!dragging()) return;
+		const dy = e.clientY - startY;
+		const dt = e.timeStamp - lastT;
+		if (dt > 0) velocity = (e.clientY - lastY) / dt;
+		lastY = e.clientY;
+		lastT = e.timeStamp;
+		currentDy = dy;
+		const translate = dy >= 0 ? dy : dy / RUBBER_BAND_FACTOR;
+		if (sheetEl) sheetEl.style.transform = `translateY(${translate}px)`;
+	};
+	const settle = (shouldClose) => {
+		dragging(false);
+		if (sheetEl) sheetEl.style.transform = "";
+		if (shouldClose && read(local.dismissible)) handleOpenChange({ open: false });
+	};
+	const onGrabberPointerUp = () => {
+		if (!dragging()) return;
+		const sheetHeight = sheetEl?.offsetHeight || 1;
+		settle(currentDy > sheetHeight * CLOSE_DISTANCE_RATIO || currentDy > 0 && velocity > CLOSE_VELOCITY);
+	};
+	const onGrabberPointerCancel = () => {
+		if (!dragging()) return;
+		settle(false);
+	};
+	const showGrabber = read(local.draggable);
 	return jsx(Portal_default, mergeProps({ children: [(() => {
 		const _el0 = _tmpl.cloneNode(true);
-		setProp(_el0, "className", () => local.backdropBlur ? `${backdropClass} ${backdropBlurClass}` : backdropClass);
+		setProp(_el0, "className", () => [
+			backdropClass,
+			local.backdropBlur && backdropBlurClass,
+			local.backdropClassName
+		].filter(Boolean).join(" "));
+		setProp(_el0, "style", () => local.backdropStyle);
 		setProp(_el0, "data-open", () => read(local.open) ? "" : void 0);
 		setProp(_el0, "onClick", () => handleBackdropClick);
 		return _el0;
@@ -105,23 +191,42 @@ var BottomSheet = (props) => {
 		const _el1 = _el0.firstChild;
 		const _el2 = _el0.firstChild.nextSibling;
 		const _el3 = _el0.firstChild.nextSibling.nextSibling;
-		insert(_el0, () => local.title && (() => {
+		const _el4 = _el0.firstChild.nextSibling.nextSibling.nextSibling;
+		insert(_el0, () => showGrabber && (() => {
 			const _el0 = _tmpl3.cloneNode(true);
 			const _el1 = _el0.firstChild;
+			setProp(_el1, "className", () => grabberClass);
+			setProp(_el0, "className", () => grabberAreaClass);
+			setProp(_el0, "onPointerDown", () => onGrabberPointerDown);
+			setProp(_el0, "onPointerMove", () => onGrabberPointerMove);
+			setProp(_el0, "onPointerUp", () => onGrabberPointerUp);
+			setProp(_el0, "onPointerCancel", () => onGrabberPointerCancel);
+			return _el0;
+		})(), _el1);
+		insert(_el0, () => local.title && (() => {
+			const _el0 = _tmpl4.cloneNode(true);
+			const _el1 = _el0.firstChild;
 			insert(_el1, () => local.title);
 			setProp(_el1, "className", () => titleClass);
 			setProp(_el0, "className", () => headerClass);
 			return _el0;
-		}), _el1);
-		insert(_el2, () => local.children);
-		setProp(_el2, "className", () => local.title ? bodyClass : `${bodyClass} ${bodyNoHeaderClass}`);
+		}), _el2);
+		insert(_el3, () => local.children);
+		setProp(_el3, "className", () => [!local.title && !showGrabber ? `${bodyClass} ${bodyNoHeaderClass}` : bodyClass, local.bodyClassName].filter(Boolean).join(" "));
 		insert(_el0, () => local.footer && (() => {
 			const _el0 = _tmpl.cloneNode(true);
 			insert(_el0, () => local.footer);
 			setProp(_el0, "className", () => local.footerClass ? `${footerClass} ${local.footerClass}` : footerClass);
 			return _el0;
-		}), _el3);
-		setProp(_el0, "className", () => local.class ? `${sheetClass} ${local.class}` : sheetClass);
+		}), _el4);
+		setProp(_el0, "ref", (el) => {
+			sheetEl = el;
+		});
+		setProp(_el0, "className", () => [
+			sheetClass,
+			dragging() && draggingClass,
+			local.class
+		].filter(Boolean).join(" "));
 		setProp(_el0, "data-open", () => read(local.open) ? "" : void 0);
 		setProp(_el0, "aria-label", () => local.title || "BottomSheet");
 		return _el0;

package/dist/components/Clipboard.js

@@ -99,20 +99,32 @@ var Clipboard = (props = {}) => {
 	const copied = createSignal(false);
 	const handleCopy = async () => {
 		try {
-			await navigator.clipboard.writeText(local.value);
+			if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(local.value);
+			else fallbackCopy();
 		} catch {
-			const ta = document.createElement("textarea");
-			ta.value = local.value;
-			ta.style.cssText = "position:fixed;opacity:0";
-			document.body.appendChild(ta);
-			ta.select();
-			document.execCommand("copy");
-			document.body.removeChild(ta);
+			fallbackCopy();
 		}
 		copied(true);
 		clearTimeout(timer);
 		timer = setTimeout(() => copied(false), local.copiedDuration);
 	};
+	const fallbackCopy = () => {
+		const ta = document.createElement("textarea");
+		ta.value = local.value;
+		ta.setAttribute("readonly", "");
+		ta.style.cssText = "position:fixed;top:0;left:0;width:2px;height:2px;padding:0;border:none;outline:none;box-shadow:none;background:transparent;opacity:0;pointer-events:none";
+		document.body.appendChild(ta);
+		const selection = document.getSelection();
+		const prevRange = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+		ta.select();
+		ta.setSelectionRange(0, local.value.length);
+		document.execCommand("copy");
+		document.body.removeChild(ta);
+		if (prevRange && selection) {
+			selection.removeAllRanges();
+			selection.addRange(prevRange);
+		}
+	};
 	onCleanup(() => clearTimeout(timer));
 	return jsx("button", mergeProps(rest, {
 		type: "button",

package/dist/components/Collapsible.js

@@ -20,7 +20,7 @@ var triggerClass = css({
 	borderRadius: "var(--tsu-radius-l1-md)",
 	color: "var(--tsu-fg)",
 	fontSize: "var(--tsu-comp-font-size-sm)",
-	fontWeight: 500,
+	fontWeight: "var(--tsu-font-weight-medium)",
 	fontFamily: "inherit",
 	cursor: "pointer",
 	textAlign: "left",

package/dist/components/ColorPicker.js

@@ -35,7 +35,7 @@ var sizeClasses = {
 };
 var labelClass = css({
 	fontSize: "13px",
-	fontWeight: 600,
+	fontWeight: "var(--tsu-font-weight-semibold)",
 	color: "var(--tsu-fg)"
 });
 var controlClass = css({
@@ -60,7 +60,7 @@ var valueSwatchClass = css({
 });
 var valueTextClass = css({
 	fontSize: "var(--_cp-font-size, var(--tsu-comp-font-size-md))",
-	fontWeight: 500,
+	fontWeight: "var(--tsu-font-weight-medium)",
 	color: "var(--tsu-fg)",
 	fontVariantNumeric: "tabular-nums"
 });

package/dist/components/ConfirmDialog.js

@@ -72,8 +72,6 @@ function ConfirmDialog(props) {
 		}
 	}));
 }
-var container = document.createElement("div");
-document.body.appendChild(container);
 var _resolve = null;
 var _reject = null;
 var _setState = null;
@@ -81,6 +79,8 @@ var _initialized = false;
 function ensureInit() {
 	if (_initialized) return;
 	_initialized = true;
+	const container = document.createElement("div");
+	document.body.appendChild(container);
 	const state = createSignal(null);
 	_setState = state;
 	const handleConfirm = () => {

package/dist/components/DateInput.js

@@ -151,7 +151,7 @@ var toolbarBtnClass = css({
 });
 var toolbarTitleClass = css({
 	fontSize: "15px",
-	fontWeight: 600,
+	fontWeight: "var(--tsu-font-weight-semibold)",
 	color: "var(--tsu-fg)"
 });
 var wheelAreaClass = css({
@@ -174,7 +174,7 @@ var columnLabelClass = css({
 	textTransform: "uppercase",
 	letterSpacing: "0.5px",
 	marginBottom: "6px",
-	fontWeight: 500
+	fontWeight: "var(--tsu-font-weight-medium)"
 });
 var columnViewportClass = css({
 	width: "100%",
@@ -228,7 +228,7 @@ var itemBaseClass = css({
 });
 var selectedItemClass = css({
 	color: "var(--tsu-fg)",
-	fontWeight: 600,
+	fontWeight: "var(--tsu-font-weight-semibold)",
 	fontSize: "22px"
 });
 var mountWheel = (el, wheel) => {

package/dist/components/Dialog.js

@@ -144,7 +144,7 @@ var btnClass = css({
 	background: "transparent",
 	color: "var(--tsu-fg)",
 	fontSize: "var(--tsu-comp-font-size-lg)",
-	fontWeight: 600,
+	fontWeight: "var(--tsu-font-weight-semibold)",
 	fontFamily: "inherit",
 	cursor: "pointer"
 });

package/dist/components/Field.js

@@ -18,7 +18,7 @@ var compactRootClass = css({
 });
 var labelClass = css({
 	fontSize: "var(--tsu-font-size-sm)",
-	fontWeight: 500,
+	fontWeight: "var(--tsu-font-weight-medium)",
 	color: "var(--tsu-fg)"
 });
 var compactLabelClass = css({

package/dist/components/Fieldset.js

@@ -13,7 +13,7 @@ var rootClass = css({
 });
 var legendClass = css({
 	fontSize: "var(--tsu-font-size-md)",
-	fontWeight: 600,
+	fontWeight: "var(--tsu-font-weight-semibold)",
 	color: "var(--tsu-fg)",
 	padding: 0,
 	margin: 0

package/dist/components/FilterGroup.js

@@ -64,7 +64,7 @@ var allClass = css({
 	background: "transparent",
 	color: "var(--tsu-neutral-11)",
 	fontSize: "var(--_tg-font-size, var(--tsu-comp-font-size-md))",
-	fontWeight: 500,
+	fontWeight: "var(--tsu-font-weight-medium)",
 	fontFamily: "inherit",
 	cursor: "pointer",
 	touchAction: "manipulation",
@@ -84,7 +84,9 @@ var groupClass = css({
 	overflowY: "hidden",
 	flex: "1 1 auto",
 	minWidth: 0,
-	gap: "var(--_fg-gap, var(--tsu-spacing-sm))"
+	gap: "var(--_fg-gap, var(--tsu-spacing-sm))",
+	scrollbarWidth: "none",
+	"::-webkit-scrollbar": { display: "none" }
 });
 var itemClass = css({
 	border: "1px solid var(--_tg-border)",

package/dist/components/Input.js

@@ -21,37 +21,42 @@ var sizeClasses = {
 	xs: css({
 		height: "var(--tsu-comp-height-xs)",
 		padding: "var(--tsu-comp-padding-y-xs) var(--tsu-comp-padding-x-xs)",
+		"--_pad-x": "var(--tsu-comp-padding-x-xs)",
 		fontSize: "var(--tsu-comp-font-size-xs)",
 		borderRadius: "var(--tsu-radius-l1-xs)"
 	}),
 	sm: css({
 		height: "var(--tsu-comp-height-sm)",
 		padding: "var(--tsu-comp-padding-y-sm) var(--tsu-comp-padding-x-sm)",
+		"--_pad-x": "var(--tsu-comp-padding-x-sm)",
 		fontSize: "var(--tsu-comp-font-size-sm)",
 		borderRadius: "var(--tsu-radius-l1-sm)"
 	}),
 	md: css({
 		height: "var(--tsu-comp-height-md)",
 		padding: "var(--tsu-comp-padding-y-md) var(--tsu-comp-padding-x-md)",
+		"--_pad-x": "var(--tsu-comp-padding-x-md)",
 		fontSize: "var(--tsu-comp-font-size-md)",
 		borderRadius: "var(--tsu-radius-l1-md)"
 	}),
 	lg: css({
 		height: "var(--tsu-comp-height-lg)",
 		padding: "var(--tsu-comp-padding-y-lg) var(--tsu-comp-padding-x-lg)",
+		"--_pad-x": "var(--tsu-comp-padding-x-lg)",
 		fontSize: "var(--tsu-comp-font-size-lg)",
 		borderRadius: "var(--tsu-radius-l1-lg)"
 	}),
 	xl: css({
 		height: "var(--tsu-comp-height-xl)",
 		padding: "var(--tsu-comp-padding-y-xl) var(--tsu-comp-padding-x-xl)",
+		"--_pad-x": "var(--tsu-comp-padding-x-xl)",
 		fontSize: "var(--tsu-comp-font-size-xl)",
 		borderRadius: "var(--tsu-radius-l1-xl)"
 	})
 };
 var variantClasses = {
 	solid: css({
-		backgroundColor: "var(--tsu-neutral-3)",
+		backgroundColor: "var(--tsu-surface)",
 		border: "1px solid transparent",
 		color: "var(--tsu-fg)",
 		"&:focus-within": {
@@ -103,6 +108,8 @@ var affixClass = css({
 		display: "block"
 	}
 });
+var hasPrefixClass = css({ paddingLeft: "calc(var(--_pad-x) / 2)" });
+var hasSuffixClass = css({ paddingRight: "calc(var(--_pad-x) / 2)" });
 var eyeButtonClass = css({
 	flexShrink: 0,
 	display: "inline-flex",
@@ -148,6 +155,8 @@ var Input = (props = {}) => {
 	]);
 	const showPassword = createSignal(false);
 	const isPassword = read(local.type) === "password";
+	const hasPrefix = () => read(local.prefix) != null;
+	const hasSuffix = () => read(local.suffix) != null || isPassword;
 	const field = useFieldContext();
 	const fieldInvalid = () => field?.invalid?.() ?? false;
 	const fieldDisabled = () => field?.disabled?.() ?? false;
@@ -159,6 +168,8 @@ var Input = (props = {}) => {
 		read(local.solid) ? variantClasses.solid : variantClasses.outline,
 		effectiveInvalid() && errorClass,
 		effectiveDisabled() && disabledClass,
+		hasPrefix() && hasPrefixClass,
+		hasSuffix() && hasSuffixClass,
 		read(local.className)
 	].filter(Boolean).join(" ");
 	const inputType = () => {

package/dist/components/Link.js

@@ -6,7 +6,7 @@ var baseClass = css({
 	color: "var(--tsu-accent-11)",
 	textDecoration: "none",
 	cursor: "pointer",
-	fontWeight: 500,
+	fontWeight: "var(--tsu-font-weight-medium)",
 	transition: "color var(--tsu-transition-fast), text-decoration-color var(--tsu-transition-fast)",
 	"&:hover": {
 		textDecoration: "underline",

package/dist/components/MoneyInput.js

@@ -6,7 +6,7 @@ import { splitProps } from "@plastic-js/plastic";
 var _tmpl = template("<span></span>");
 var affixSuffixClass = css({
 	color: "var(--tsu-fg)",
-	fontWeight: 600,
+	fontWeight: "var(--tsu-font-weight-semibold)",
 	paddingLeft: "10px",
 	marginLeft: "4px",
 	borderLeft: "1px solid var(--tsu-neutral-7)"

package/dist/components/Pagination.js

@@ -21,7 +21,7 @@ var itemClass = css({
 	backgroundColor: "var(--tsu-bg)",
 	color: "var(--tsu-neutral-11)",
 	fontSize: "var(--tsu-font-size-sm)",
-	fontWeight: 500,
+	fontWeight: "var(--tsu-font-weight-medium)",
 	cursor: "pointer",
 	fontFamily: "inherit",
 	touchAction: "manipulation",

package/dist/components/Popover.js

@@ -53,7 +53,7 @@ var titleClass = css({
 	margin: 0,
 	paddingRight: "24px",
 	fontSize: "var(--tsu-comp-font-size-md)",
-	fontWeight: 600,
+	fontWeight: "var(--tsu-font-weight-semibold)",
 	color: "var(--tsu-fg)"
 });
 var descriptionClass = css({

package/dist/components/Progress.js

@@ -42,7 +42,7 @@ var stripedClass = css({
 var labelClass = css({
 	fontSize: "var(--tsu-font-size-sm)",
 	color: "var(--tsu-neutral-11)",
-	fontWeight: 500
+	fontWeight: "var(--tsu-font-weight-medium)"
 });
 var sizeHeights = {
 	xs: "4px",

package/dist/components/RadioGroup.js

@@ -14,7 +14,7 @@ var rootClass = css({
 });
 var labelClass = css({
 	fontSize: "var(--tsu-comp-font-size-sm)",
-	fontWeight: 600,
+	fontWeight: "var(--tsu-font-weight-semibold)",
 	color: "var(--tsu-fg)",
 	marginBottom: "var(--tsu-spacing-sm)"
 });

package/dist/components/RatingGroup.js

@@ -11,7 +11,7 @@ var rootClass = css({
 });
 var labelClass = css({
 	fontSize: "var(--tsu-comp-font-size-sm)",
-	fontWeight: 500,
+	fontWeight: "var(--tsu-font-weight-medium)",
 	color: "var(--tsu-neutral-11)"
 });
 var controlClass = css({

package/dist/components/Select.js

@@ -1,12 +1,12 @@
+import BottomSheet from "./BottomSheet.js";
 import Icon from "./Icon.js";
 import { Fragment, insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
 import { Loop, createContext, createEffect, createSignal, splitProps, useContext } from "@plastic-js/plastic";
 //#region src/components/Select.jsx
-var _tmpl4 = template("<div>No results</div>");
-var _tmpl3 = template("<button type=\"button\" aria-label=\"Clear search\"></button>");
-var _tmpl2 = template("<div><span aria-hidden=\"true\"></span><input type=\"text\" placeholder=\"Search…\"><!></div>");
-var _tmpl = template("<span></span>");
+var _tmpl3 = template("<div>No results</div>");
+var _tmpl2 = template("<button type=\"button\" aria-label=\"Clear search\"></button>");
+var _tmpl = template("<div><span aria-hidden=\"true\"></span><input type=\"text\" placeholder=\"Search…\"><!></div>");
 var SCOPE = "select";
 var part = (name) => ({
 	"data-scope": SCOPE,
@@ -58,58 +58,8 @@ var triggerIndicatorClass = css({
 		height: "16px"
 	}
 });
-var overlayClass = css({
-	position: "fixed",
-	inset: 0,
-	zIndex: 1e3,
-	display: "flex",
-	flexDirection: "column",
-	justifyContent: "flex-end",
-	pointerEvents: "none"
-});
-var backdropClass = css({
-	position: "absolute",
-	inset: 0,
-	background: "rgba(0,0,0,0.5)",
-	opacity: 0,
-	transition: "opacity 240ms ease"
-});
-var sheetClass = css({
-	position: "relative",
-	width: "100%",
-	maxHeight: "70vh",
-	display: "flex",
-	flexDirection: "column",
-	background: "var(--tsu-bg)",
-	borderTop: "1px solid var(--tsu-neutral-7)",
-	borderRadius: "18px 18px 0 0",
-	boxShadow: "0 -8px 32px rgba(0,0,0,0.4)",
-	paddingBottom: "env(safe-area-inset-bottom, 0px)",
-	transform: "translateY(100%)",
-	transition: "transform 280ms cubic-bezier(0.32, 0.72, 0, 1)"
-});
-var openClass = css({
-	pointerEvents: "auto",
-	[`& .${backdropClass}`]: { opacity: 1 },
-	[`& .${sheetClass}`]: { transform: "translateY(0)" }
-});
-var grabberClass = css({
-	flexShrink: 0,
-	display: "flex",
-	justifyContent: "center",
-	padding: "10px 0 4px"
-});
-var grabberBarClass = css({
-	width: "36px",
-	height: "4px",
-	borderRadius: "999px",
-	background: "var(--tsu-neutral-7)"
-});
-var listClass = css({
-	overflowY: "auto",
-	WebkitOverflowScrolling: "touch",
-	padding: "0 8px 8px"
-});
+var listBodyClass = css({ padding: 0 });
+var listClass = css({ padding: "0 8px calc(8px + env(safe-area-inset-bottom, 0px))" });
 var itemClass = css({
 	width: "100%",
 	display: "flex",
@@ -350,78 +300,68 @@ var Content = () => {
 		ctx.query("");
 		filterInputEl?.focus();
 	};
-	return jsx("div", mergeProps(() => part("positioner"), {
-		"aria-hidden": () => !ctx.open(),
-		className: () => `${overlayClass} ${ctx.open() ? openClass : ""}`,
-		children: [jsx("div", mergeProps(() => part("backdrop"), {
-			get className() {
-				return `${backdropClass} ${ctx.backdropClassName ?? ""}`;
-			},
-			get style() {
-				return ctx.backdropStyle;
-			},
-			onClick: () => ctx.open(false)
-		})), jsx("div", mergeProps(() => part("content"), {
-			className: sheetClass,
-			role: "dialog",
-			children: [jsx("div", mergeProps(() => part("grabber"), {
-				className: grabberClass,
-				onClick: () => ctx.open(false),
-				children: (() => {
-					const _el0 = _tmpl.cloneNode(true);
-					setProp(_el0, "className", () => grabberBarClass);
-					return _el0;
-				})()
-			})), jsx("div", mergeProps(() => part("list"), {
-				className: listClass,
-				children: [() => ctx.filter && (() => {
+	return jsx(BottomSheet, mergeProps({
+		get open() {
+			return ctx.open;
+		},
+		onOpenChange: ({ open }) => ctx.open(open),
+		backdropBlur: false,
+		get backdropClassName() {
+			return ctx.backdropClassName;
+		},
+		get backdropStyle() {
+			return ctx.backdropStyle ?? { background: "rgba(0,0,0,0.5)" };
+		},
+		bodyClassName: listBodyClass,
+		children: jsx("div", mergeProps(() => part("list"), {
+			className: listClass,
+			children: [() => ctx.filter && (() => {
+				const _el0 = _tmpl.cloneNode(true);
+				const _el1 = _el0.firstChild;
+				const _el2 = _el0.firstChild.nextSibling;
+				const _el3 = _el0.firstChild.nextSibling.nextSibling;
+				insert(_el1, () => jsx(Icon, mergeProps({ svg: searchSvg })));
+				setProp(_el1, "className", () => filterIconClass);
+				setProp(_el2, "ref", (el) => {
+					filterInputEl = el;
+				});
+				setProp(_el2, "className", () => filterInputClass);
+				setProp(_el2, "value", () => ctx.query);
+				setProp(_el2, "onInput", (e) => ctx.query(e.target.value));
+				setProp(_el2, "onClick", (e) => e.stopPropagation());
+				insert(_el0, () => ctx.query() && (() => {
 					const _el0 = _tmpl2.cloneNode(true);
-					const _el1 = _el0.firstChild;
-					const _el2 = _el0.firstChild.nextSibling;
-					const _el3 = _el0.firstChild.nextSibling.nextSibling;
-					insert(_el1, () => jsx(Icon, mergeProps({ svg: searchSvg })));
-					setProp(_el1, "className", () => filterIconClass);
-					setProp(_el2, "ref", (el) => {
-						filterInputEl = el;
+					insert(_el0, () => jsx(Icon, mergeProps({ svg: xSvg })));
+					setProp(_el0, "className", () => filterClearClass);
+					setProp(_el0, "onClick", (e) => {
+						e.stopPropagation();
+						handleFilterClear();
 					});
-					setProp(_el2, "className", () => filterInputClass);
-					setProp(_el2, "value", () => ctx.query);
-					setProp(_el2, "onInput", (e) => ctx.query(e.target.value));
-					setProp(_el2, "onClick", (e) => e.stopPropagation());
-					insert(_el0, () => ctx.query() && (() => {
-						const _el0 = _tmpl3.cloneNode(true);
-						insert(_el0, () => jsx(Icon, mergeProps({ svg: xSvg })));
-						setProp(_el0, "className", () => filterClearClass);
-						setProp(_el0, "onClick", (e) => {
-							e.stopPropagation();
-							handleFilterClear();
-						});
-						return _el0;
-					}), _el3);
-					setProp(_el0, "className", () => filterWrapperClass);
 					return _el0;
-				}), () => {
-					const list = ctx.filter ? ctx.filteredItems() : ctx.items();
-					if (list.length === 0 && ctx.filter && ctx.open()) return (() => {
-						const _el0 = _tmpl4.cloneNode(true);
-						setProp(_el0, "className", () => noResultsClass);
-						return _el0;
-					})();
-					return jsx(Fragment, { children: [() => ctx.clearable && jsx(Item, mergeProps({
-						value: "",
-						children: () => ctx.clearLabel ?? "None"
-					})), jsx(Loop, mergeProps({
-						each: () => list,
-						children: (item) => jsx(Item, mergeProps({
-							item,
-							get key() {
-								return ctx.itemToValue(item);
-							}
-						}))
-					}))] });
-				}]
-			}))]
-		}))]
+				}), _el3);
+				setProp(_el0, "className", () => filterWrapperClass);
+				return _el0;
+			}), () => {
+				const list = ctx.filter ? ctx.filteredItems() : ctx.items();
+				if (list.length === 0 && ctx.filter && ctx.open()) return (() => {
+					const _el0 = _tmpl3.cloneNode(true);
+					setProp(_el0, "className", () => noResultsClass);
+					return _el0;
+				})();
+				return jsx(Fragment, { children: [() => ctx.clearable && jsx(Item, mergeProps({
+					value: "",
+					children: () => ctx.clearLabel ?? "None"
+				})), jsx(Loop, mergeProps({
+					each: () => list,
+					children: (item) => jsx(Item, mergeProps({
+						item,
+						get key() {
+							return ctx.itemToValue(item);
+						}
+					}))
+				}))] });
+			}]
+		}))
 	}));
 };
 //#endregion

package/dist/components/SignaturePad.js

@@ -11,7 +11,7 @@ var rootClass = css({
 var labelClass = css({
 	fontSize: "var(--tsu-comp-font-size-sm)",
 	color: "var(--tsu-fg)",
-	fontWeight: 500
+	fontWeight: "var(--tsu-font-weight-medium)"
 });
 var canvasClass = css({
 	border: "1px solid var(--tsu-neutral-7)",

package/dist/components/Slider.js

@@ -12,7 +12,7 @@ var rootClass = css({
 });
 var labelClass = css({
 	fontSize: "var(--tsu-comp-font-size-md)",
-	fontWeight: 500,
+	fontWeight: "var(--tsu-font-weight-medium)",
 	color: "var(--tsu-fg)"
 });
 var controlClass = css({

package/dist/components/Steps.js

@@ -61,7 +61,7 @@ var triggerClass = css({
 	touchAction: "manipulation",
 	"&[data-complete] .steps-title, &[data-current] .steps-title": {
 		color: "var(--tsu-accent-9)",
-		fontWeight: 600
+		fontWeight: "var(--tsu-font-weight-semibold)"
 	}
 });
 var titleClass = css({
@@ -79,7 +79,7 @@ var indicatorClass = css({
 	border: "2px solid var(--tsu-neutral-5)",
 	backgroundColor: "var(--tsu-bg)",
 	fontSize: "var(--tsu-font-size-sm)",
-	fontWeight: 600,
+	fontWeight: "var(--tsu-font-weight-semibold)",
 	color: "var(--tsu-neutral-9)",
 	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast), color var(--tsu-transition-fast)",
 	".steps-trigger[data-current] &": {
@@ -120,7 +120,7 @@ var completedContentClass = css({
 	padding: "var(--tsu-spacing-md)",
 	textAlign: "center",
 	fontSize: "var(--tsu-font-size-md)",
-	fontWeight: 600,
+	fontWeight: "var(--tsu-font-weight-semibold)",
 	color: "var(--tsu-success-9)"
 });
 var navClass = css({
@@ -135,7 +135,7 @@ var navBtnClass = css({
 	backgroundColor: "var(--tsu-bg)",
 	color: "var(--tsu-neutral-11)",
 	fontSize: "var(--tsu-font-size-sm)",
-	fontWeight: 500,
+	fontWeight: "var(--tsu-font-weight-medium)",
 	cursor: "pointer",
 	fontFamily: "inherit",
 	touchAction: "manipulation",

package/dist/components/SwipeReveal.js

@@ -33,7 +33,7 @@ var actionBtnClass = css`
 	border: none;
 	color: #fff;
 	font-size: var(--tsu-comp-font-size-md);
-	font-weight: 600;
+	font-weight: var(--tsu-font-weight-semibold);
 	cursor: pointer;
 	font-family: inherit;
 `;

package/dist/components/TagsInput.js

@@ -25,7 +25,7 @@ var tagClass = css({
 	backgroundColor: "var(--tsu-accent-3)",
 	color: "var(--tsu-accent-9)",
 	fontSize: "var(--tsu-font-size-sm)",
-	fontWeight: 500
+	fontWeight: "var(--tsu-font-weight-medium)"
 });
 var tagDeleteClass = css({
 	display: "flex",
@@ -67,7 +67,7 @@ var inputClass = css({
 });
 var labelClass = css({
 	fontSize: "var(--tsu-comp-font-size-md)",
-	fontWeight: 500,
+	fontWeight: "var(--tsu-font-weight-medium)",
 	color: "var(--tsu-fg)",
 	marginBottom: "var(--tsu-spacing-xs)"
 });

package/dist/components/Toggle.js

@@ -13,7 +13,7 @@ var rootClass = css({
 	backgroundColor: "var(--tsu-bg)",
 	color: "var(--tsu-neutral-11)",
 	fontSize: "var(--tsu-font-size-sm)",
-	fontWeight: 500,
+	fontWeight: "var(--tsu-font-weight-medium)",
 	cursor: "pointer",
 	fontFamily: "inherit",
 	touchAction: "manipulation",

package/dist/components/ToggleGroup.js

@@ -20,7 +20,7 @@ var itemClass = css({
 	background: "transparent",
 	color: "var(--tsu-neutral-11)",
 	fontSize: "var(--_tg-font-size, var(--tsu-comp-font-size-md))",
-	fontWeight: 500,
+	fontWeight: "var(--tsu-font-weight-medium)",
 	fontFamily: "inherit",
 	cursor: "pointer",
 	touchAction: "manipulation",

package/dist/tsumiki.css

@@ -1 +1 @@
-:root,.light,.light-theme{--indigo-1:#fdfdfe;--indigo-2:#f7f9ff;--indigo-3:#edf2fe;--indigo-4:#e1e9ff;--indigo-5:#d2deff;--indigo-6:#c1d0ff;--indigo-7:#abbdf9;--indigo-8:#8da4ef;--indigo-9:#3e63dd;--indigo-10:#3358d4;--indigo-11:#3a5bc7;--indigo-12:#1f2d5c}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--indigo-1:color(display-p3 .992 .992 .996);--indigo-2:color(display-p3 .971 .977 .998);--indigo-3:color(display-p3 .933 .948 .992);--indigo-4:color(display-p3 .885 .914 1);--indigo-5:color(display-p3 .831 .87 1);--indigo-6:color(display-p3 .767 .814 .995);--indigo-7:color(display-p3 .685 .74 .957);--indigo-8:color(display-p3 .569 .639 .916);--indigo-9:color(display-p3 .276 .384 .837);--indigo-10:color(display-p3 .234 .343 .801);--indigo-11:color(display-p3 .256 .354 .755);--indigo-12:color(display-p3 .133 .175 .348)}}}:root,.light,.light-theme{--indigo-a1:#00008002;--indigo-a2:#0040ff08;--indigo-a3:#0047f112;--indigo-a4:#0044ff1e;--indigo-a5:#0044ff2d;--indigo-a6:#003eff3e;--indigo-a7:#0037ed54;--indigo-a8:#0034dc72;--indigo-a9:#0031d2c1;--indigo-a10:#002ec9cc;--indigo-a11:#002bb7c5;--indigo-a12:#001046e0}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--indigo-a1:color(display-p3 .02 .02 .51/.008);--indigo-a2:color(display-p3 .024 .161 .863/.028);--indigo-a3:color(display-p3 .008 .239 .886/.067);--indigo-a4:color(display-p3 .004 .247 1/.114);--indigo-a5:color(display-p3 .004 .235 1/.169);--indigo-a6:color(display-p3 .004 .208 .984/.232);--indigo-a7:color(display-p3 .004 .176 .863/.314);--indigo-a8:color(display-p3 .004 .165 .812/.432);--indigo-a9:color(display-p3 0 .153 .773/.726);--indigo-a10:color(display-p3 0 .137 .737/.765);--indigo-a11:color(display-p3 .256 .354 .755);--indigo-a12:color(display-p3 .133 .175 .348)}}}:root,.light,.light-theme{--olive-1:#fcfdfc;--olive-2:#f8faf8;--olive-3:#eff1ef;--olive-4:#e7e9e7;--olive-5:#dfe2df;--olive-6:#d7dad7;--olive-7:#cccfcc;--olive-8:#b9bcb8;--olive-9:#898e87;--olive-10:#7f847d;--olive-11:#60655f;--olive-12:#1d211c}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--olive-1:color(display-p3 .989 .992 .989);--olive-2:color(display-p3 .974 .98 .973);--olive-3:color(display-p3 .939 .945 .937);--olive-4:color(display-p3 .907 .914 .905);--olive-5:color(display-p3 .878 .885 .875);--olive-6:color(display-p3 .846 .855 .843);--olive-7:color(display-p3 .803 .812 .8);--olive-8:color(display-p3 .727 .738 .723);--olive-9:color(display-p3 .541 .556 .532);--olive-10:color(display-p3 .5 .515 .491);--olive-11:color(display-p3 .38 .395 .374);--olive-12:color(display-p3 .117 .129 .111)}}}:root,.light,.light-theme{--olive-a1:#00550003;--olive-a2:#00490007;--olive-a3:#00200010;--olive-a4:#00160018;--olive-a5:#00180020;--olive-a6:#00140028;--olive-a7:#000f0033;--olive-a8:#040f0047;--olive-a9:#050f0078;--olive-a10:#040e0082;--olive-a11:#020a00a0;--olive-a12:#010600e3}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--olive-a1:color(display-p3 .024 .349 .024/.012);--olive-a2:color(display-p3 .024 .302 .024/.028);--olive-a3:color(display-p3 .008 .129 .008/.063);--olive-a4:color(display-p3 .012 .094 .012/.095);--olive-a5:color(display-p3 .035 .098 .008/.126);--olive-a6:color(display-p3 .027 .078 .004/.157);--olive-a7:color(display-p3 .02 .059 0/.2);--olive-a8:color(display-p3 .02 .059 .004/.279);--olive-a9:color(display-p3 .02 .051 .004/.467);--olive-a10:color(display-p3 .024 .047 0/.51);--olive-a11:color(display-p3 .012 .039 0/.628);--olive-a12:color(display-p3 .008 .024 0/.891)}}}.dark,.dark-theme{--indigo-1:#11131f;--indigo-2:#141726;--indigo-3:#182449;--indigo-4:#1d2e62;--indigo-5:#253974;--indigo-6:#304384;--indigo-7:#3a4f97;--indigo-8:#435db1;--indigo-9:#3e63dd;--indigo-10:#5472e4;--indigo-11:#9eb1ff;--indigo-12:#d6e1ff}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--indigo-1:color(display-p3 .068 .074 .118);--indigo-2:color(display-p3 .081 .089 .144);--indigo-3:color(display-p3 .105 .141 .275);--indigo-4:color(display-p3 .129 .18 .369);--indigo-5:color(display-p3 .163 .22 .439);--indigo-6:color(display-p3 .203 .262 .5);--indigo-7:color(display-p3 .245 .309 .575);--indigo-8:color(display-p3 .285 .362 .674);--indigo-9:color(display-p3 .276 .384 .837);--indigo-10:color(display-p3 .354 .445 .866);--indigo-11:color(display-p3 .63 .69 1);--indigo-12:color(display-p3 .848 .881 .99)}}}.dark,.dark-theme{--indigo-a1:#1133ff0f;--indigo-a2:#3354fa17;--indigo-a3:#2f62ff3c;--indigo-a4:#3566ff57;--indigo-a5:#4171fd6b;--indigo-a6:#5178fd7c;--indigo-a7:#5a7fff90;--indigo-a8:#5b81feac;--indigo-a9:#4671ffdb;--indigo-a10:#5c7efee3;--indigo-a11:#9eb1ff;--indigo-a12:#d6e1ff}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--indigo-a1:color(display-p3 .071 .212 .996/.055);--indigo-a2:color(display-p3 .251 .345 .988/.085);--indigo-a3:color(display-p3 .243 .404 1/.223);--indigo-a4:color(display-p3 .263 .42 1/.324);--indigo-a5:color(display-p3 .314 .451 1/.4);--indigo-a6:color(display-p3 .361 .49 1/.467);--indigo-a7:color(display-p3 .388 .51 1/.547);--indigo-a8:color(display-p3 .404 .518 1/.652);--indigo-a9:color(display-p3 .318 .451 1/.824);--indigo-a10:color(display-p3 .404 .506 1/.858);--indigo-a11:color(display-p3 .63 .69 1);--indigo-a12:color(display-p3 .848 .881 .99)}}}.dark,.dark-theme{--olive-1:#111210;--olive-2:#181917;--olive-3:#212220;--olive-4:#282a27;--olive-5:#2f312e;--olive-6:#383a36;--olive-7:#454843;--olive-8:#5c625b;--olive-9:#687066;--olive-10:#767d74;--olive-11:#afb5ad;--olive-12:#eceeec}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--olive-1:color(display-p3 .067 .07 .063);--olive-2:color(display-p3 .095 .098 .091);--olive-3:color(display-p3 .131 .135 .126);--olive-4:color(display-p3 .158 .163 .153);--olive-5:color(display-p3 .186 .192 .18);--olive-6:color(display-p3 .221 .229 .215);--olive-7:color(display-p3 .273 .284 .266);--olive-8:color(display-p3 .365 .382 .359);--olive-9:color(display-p3 .414 .438 .404);--olive-10:color(display-p3 .467 .49 .458);--olive-11:color(display-p3 .69 .709 .682);--olive-12:color(display-p3 .927 .933 .926)}}}.dark,.dark-theme{--olive-a1:#0000;--olive-a2:#f1f2f008;--olive-a3:#f4f5f312;--olive-a4:#f3fef21a;--olive-a5:#f2fbf122;--olive-a6:#f4faed2c;--olive-a7:#f2fced3b;--olive-a8:#edfdeb57;--olive-a9:#ebfde766;--olive-a10:#f0fdec74;--olive-a11:#f6fef4b0;--olive-a12:#fdfffded}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--olive-a1:color(display-p3 0 0 0/0);--olive-a2:color(display-p3 .984 .988 .976/.03);--olive-a3:color(display-p3 .992 .996 .988/.068);--olive-a4:color(display-p3 .953 .996 .949/.102);--olive-a5:color(display-p3 .969 1 .965/.131);--olive-a6:color(display-p3 .973 1 .969/.169);--olive-a7:color(display-p3 .98 1 .961/.228);--olive-a8:color(display-p3 .961 1 .957/.334);--olive-a9:color(display-p3 .949 1 .922/.397);--olive-a10:color(display-p3 .953 1 .941/.452);--olive-a11:color(display-p3 .976 1 .965/.688);--olive-a12:color(display-p3 .992 1 .992/.929)}}}:root{--tsu-accent-1:var(--indigo-1);--tsu-accent-2:var(--indigo-2);--tsu-accent-3:var(--indigo-3);--tsu-accent-4:var(--indigo-4);--tsu-accent-5:var(--indigo-5);--tsu-accent-6:var(--indigo-6);--tsu-accent-7:var(--indigo-7);--tsu-accent-8:var(--indigo-8);--tsu-accent-9:var(--indigo-9);--tsu-accent-10:var(--indigo-10);--tsu-accent-11:var(--indigo-11);--tsu-accent-12:var(--indigo-12);--tsu-neutral-1:var(--olive-1);--tsu-neutral-2:var(--olive-2);--tsu-neutral-3:var(--olive-3);--tsu-neutral-4:var(--olive-4);--tsu-neutral-5:var(--olive-5);--tsu-neutral-6:var(--olive-6);--tsu-neutral-7:var(--olive-7);--tsu-neutral-8:var(--olive-8);--tsu-neutral-9:var(--olive-9);--tsu-neutral-10:var(--olive-10);--tsu-neutral-11:var(--olive-11);--tsu-neutral-12:var(--olive-12)}:root,.light,.light-theme{--red-1:#fffcfc;--red-2:#fff7f7;--red-3:#feebec;--red-4:#ffdbdc;--red-5:#ffcdce;--red-6:#fdbdbe;--red-7:#f4a9aa;--red-8:#eb8e90;--red-9:#e5484d;--red-10:#dc3e42;--red-11:#ce2c31;--red-12:#641723}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--red-1:color(display-p3 .998 .989 .988);--red-2:color(display-p3 .995 .971 .971);--red-3:color(display-p3 .985 .925 .925);--red-4:color(display-p3 .999 .866 .866);--red-5:color(display-p3 .984 .812 .811);--red-6:color(display-p3 .955 .751 .749);--red-7:color(display-p3 .915 .675 .672);--red-8:color(display-p3 .872 .575 .572);--red-9:color(display-p3 .83 .329 .324);--red-10:color(display-p3 .798 .294 .285);--red-11:color(display-p3 .744 .234 .222);--red-12:color(display-p3 .36 .115 .143)}}}:root,.light,.light-theme{--red-a1:#ff000003;--red-a2:#ff000008;--red-a3:#f3000d14;--red-a4:#ff000824;--red-a5:#ff000632;--red-a6:#f8000442;--red-a7:#df000356;--red-a8:#d2000571;--red-a9:#db0007b7;--red-a10:#d10005c1;--red-a11:#c40006d3;--red-a12:#55000de8}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--red-a1:color(display-p3 .675 .024 .024/.012);--red-a2:color(display-p3 .863 .024 .024/.028);--red-a3:color(display-p3 .792 .008 .008/.075);--red-a4:color(display-p3 1 .008 .008/.134);--red-a5:color(display-p3 .918 .008 .008/.189);--red-a6:color(display-p3 .831 .02 .004/.251);--red-a7:color(display-p3 .741 .016 .004/.33);--red-a8:color(display-p3 .698 .012 .004/.428);--red-a9:color(display-p3 .749 .008 0/.675);--red-a10:color(display-p3 .714 .012 0/.714);--red-a11:color(display-p3 .744 .234 .222);--red-a12:color(display-p3 .36 .115 .143)}}}.dark,.dark-theme{--red-1:#191111;--red-2:#201314;--red-3:#3b1219;--red-4:#500f1c;--red-5:#611623;--red-6:#72232d;--red-7:#8c333a;--red-8:#b54548;--red-9:#e5484d;--red-10:#ec5d5e;--red-11:#ff9592;--red-12:#ffd1d9}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--red-1:color(display-p3 .093 .068 .067);--red-2:color(display-p3 .118 .077 .079);--red-3:color(display-p3 .211 .081 .099);--red-4:color(display-p3 .287 .079 .113);--red-5:color(display-p3 .348 .11 .142);--red-6:color(display-p3 .414 .16 .183);--red-7:color(display-p3 .508 .224 .236);--red-8:color(display-p3 .659 .298 .297);--red-9:color(display-p3 .83 .329 .324);--red-10:color(display-p3 .861 .403 .387);--red-11:color(display-p3 1 .57 .55);--red-12:color(display-p3 .971 .826 .852)}}}.dark,.dark-theme{--red-a1:#f4121209;--red-a2:#f22f3e11;--red-a3:#ff173f2d;--red-a4:#fe0a3b44;--red-a5:#ff204756;--red-a6:#ff3e5668;--red-a7:#ff536184;--red-a8:#ff5d61b0;--red-a9:#fe4e54e4;--red-a10:#ff6465eb;--red-a11:#ff9592;--red-a12:#ffd1d9}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--red-a1:color(display-p3 .984 .071 .071/.03);--red-a2:color(display-p3 .996 .282 .282/.055);--red-a3:color(display-p3 1 .169 .271/.156);--red-a4:color(display-p3 1 .118 .267/.236);--red-a5:color(display-p3 1 .212 .314/.303);--red-a6:color(display-p3 1 .318 .38/.374);--red-a7:color(display-p3 1 .4 .424/.475);--red-a8:color(display-p3 1 .431 .431/.635);--red-a9:color(display-p3 1 .388 .384/.82);--red-a10:color(display-p3 1 .463 .447/.853);--red-a11:color(display-p3 1 .57 .55);--red-a12:color(display-p3 .971 .826 .852)}}}:root,.light,.light-theme{--green-1:#fbfefc;--green-2:#f4fbf6;--green-3:#e6f6eb;--green-4:#d6f1df;--green-5:#c4e8d1;--green-6:#adddc0;--green-7:#8eceaa;--green-8:#5bb98b;--green-9:#30a46c;--green-10:#2b9a66;--green-11:#218358;--green-12:#193b2d}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--green-1:color(display-p3 .986 .996 .989);--green-2:color(display-p3 .963 .983 .967);--green-3:color(display-p3 .913 .964 .925);--green-4:color(display-p3 .859 .94 .879);--green-5:color(display-p3 .796 .907 .826);--green-6:color(display-p3 .718 .863 .761);--green-7:color(display-p3 .61 .801 .675);--green-8:color(display-p3 .451 .715 .559);--green-9:color(display-p3 .332 .634 .442);--green-10:color(display-p3 .308 .595 .417);--green-11:color(display-p3 .19 .5 .32);--green-12:color(display-p3 .132 .228 .18)}}}:root,.light,.light-theme{--green-a1:#00c04004;--green-a2:#00a32f0b;--green-a3:#00a43319;--green-a4:#00a83829;--green-a5:#019c393b;--green-a6:#00963c52;--green-a7:#00914071;--green-a8:#00924ba4;--green-a9:#008f4acf;--green-a10:#008647d4;--green-a11:#00713fde;--green-a12:#002616e6}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--green-a1:color(display-p3 .024 .757 .267/.016);--green-a2:color(display-p3 .024 .565 .129/.036);--green-a3:color(display-p3 .012 .596 .145/.087);--green-a4:color(display-p3 .008 .588 .145/.142);--green-a5:color(display-p3 .004 .541 .157/.204);--green-a6:color(display-p3 .004 .518 .157/.283);--green-a7:color(display-p3 .004 .486 .165/.389);--green-a8:color(display-p3 0 .478 .2/.55);--green-a9:color(display-p3 0 .455 .165/.667);--green-a10:color(display-p3 0 .416 .153/.691);--green-a11:color(display-p3 .19 .5 .32);--green-a12:color(display-p3 .132 .228 .18)}}}.dark,.dark-theme{--green-1:#0e1512;--green-2:#121b17;--green-3:#132d21;--green-4:#113b29;--green-5:#174933;--green-6:#20573e;--green-7:#28684a;--green-8:#2f7c57;--green-9:#30a46c;--green-10:#33b074;--green-11:#3dd68c;--green-12:#b1f1cb}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--green-1:color(display-p3 .062 .083 .071);--green-2:color(display-p3 .079 .106 .09);--green-3:color(display-p3 .1 .173 .133);--green-4:color(display-p3 .115 .229 .166);--green-5:color(display-p3 .147 .282 .206);--green-6:color(display-p3 .185 .338 .25);--green-7:color(display-p3 .227 .403 .298);--green-8:color(display-p3 .27 .479 .351);--green-9:color(display-p3 .332 .634 .442);--green-10:color(display-p3 .357 .682 .474);--green-11:color(display-p3 .434 .828 .573);--green-12:color(display-p3 .747 .938 .807)}}}.dark,.dark-theme{--green-a1:#00de4505;--green-a2:#29f99d0b;--green-a3:#22ff991e;--green-a4:#11ff992d;--green-a5:#2bffa23c;--green-a6:#44ffaa4b;--green-a7:#50fdac5e;--green-a8:#54ffad73;--green-a9:#44ffa49e;--green-a10:#43fea4ab;--green-a11:#46fea5d4;--green-a12:#bbffd7f0}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--green-a1:color(display-p3 0 .992 .298/.017);--green-a2:color(display-p3 .341 .98 .616/.043);--green-a3:color(display-p3 .376 .996 .655/.114);--green-a4:color(display-p3 .341 .996 .635/.173);--green-a5:color(display-p3 .408 1 .678/.232);--green-a6:color(display-p3 .475 1 .706/.29);--green-a7:color(display-p3 .514 1 .706/.362);--green-a8:color(display-p3 .529 1 .718/.442);--green-a9:color(display-p3 .502 .996 .682/.61);--green-a10:color(display-p3 .506 1 .682/.66);--green-a11:color(display-p3 .434 .828 .573);--green-a12:color(display-p3 .747 .938 .807)}}}:root,.light,.light-theme{--amber-1:#fefdfb;--amber-2:#fefbe9;--amber-3:#fff7c2;--amber-4:#ffee9c;--amber-5:#fbe577;--amber-6:#f3d673;--amber-7:#e9c162;--amber-8:#e2a336;--amber-9:#ffc53d;--amber-10:#ffba18;--amber-11:#ab6400;--amber-12:#4f3422}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--amber-1:color(display-p3 .995 .992 .985);--amber-2:color(display-p3 .994 .986 .921);--amber-3:color(display-p3 .994 .969 .782);--amber-4:color(display-p3 .989 .937 .65);--amber-5:color(display-p3 .97 .902 .527);--amber-6:color(display-p3 .936 .844 .506);--amber-7:color(display-p3 .89 .762 .443);--amber-8:color(display-p3 .85 .65 .3);--amber-9:color(display-p3 1 .77 .26);--amber-10:color(display-p3 .959 .741 .274);--amber-11:color(display-p3 .64 .4 0);--amber-12:color(display-p3 .294 .208 .145)}}}:root,.light,.light-theme{--amber-a1:#c0800004;--amber-a2:#f4d10016;--amber-a3:#ffde003d;--amber-a4:#ffd40063;--amber-a5:#f8cf0088;--amber-a6:#eab5008c;--amber-a7:#dc9b009d;--amber-a8:#da8a00c9;--amber-a9:#ffb300c2;--amber-a10:#ffb300e7;--amber-a11:#ab6400;--amber-a12:#341500dd}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--amber-a1:color(display-p3 .757 .514 .024/.016);--amber-a2:color(display-p3 .902 .804 .008/.079);--amber-a3:color(display-p3 .965 .859 .004/.22);--amber-a4:color(display-p3 .969 .82 .004/.35);--amber-a5:color(display-p3 .933 .796 .004/.475);--amber-a6:color(display-p3 .875 .682 .004/.495);--amber-a7:color(display-p3 .804 .573 0/.557);--amber-a8:color(display-p3 .788 .502 0/.699);--amber-a9:color(display-p3 1 .686 0/.742);--amber-a10:color(display-p3 .945 .643 0/.726);--amber-a11:color(display-p3 .64 .4 0);--amber-a12:color(display-p3 .294 .208 .145)}}}.dark,.dark-theme{--amber-1:#16120c;--amber-2:#1d180f;--amber-3:#302008;--amber-4:#3f2700;--amber-5:#4d3000;--amber-6:#5c3d05;--amber-7:#714f19;--amber-8:#8f6424;--amber-9:#ffc53d;--amber-10:#ffd60a;--amber-11:#ffca16;--amber-12:#ffe7b3}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--amber-1:color(display-p3 .082 .07 .05);--amber-2:color(display-p3 .111 .094 .064);--amber-3:color(display-p3 .178 .128 .049);--amber-4:color(display-p3 .239 .156 0);--amber-5:color(display-p3 .29 .193 0);--amber-6:color(display-p3 .344 .245 .076);--amber-7:color(display-p3 .422 .314 .141);--amber-8:color(display-p3 .535 .399 .189);--amber-9:color(display-p3 1 .77 .26);--amber-10:color(display-p3 1 .87 .15);--amber-11:color(display-p3 1 .8 .29);--amber-12:color(display-p3 .984 .909 .726)}}}.dark,.dark-theme{--amber-a1:#e63c0006;--amber-a2:#fd9b000d;--amber-a3:#fa820022;--amber-a4:#fc820032;--amber-a5:#fd8b0041;--amber-a6:#fd9b0051;--amber-a7:#ffab2567;--amber-a8:#ffae3587;--amber-a9:#ffc53d;--amber-a10:#ffd60a;--amber-a11:#ffca16;--amber-a12:#ffe7b3}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--amber-a1:color(display-p3 .992 .298 0/.017);--amber-a2:color(display-p3 .988 .651 0/.047);--amber-a3:color(display-p3 1 .6 0/.118);--amber-a4:color(display-p3 1 .557 0/.185);--amber-a5:color(display-p3 1 .592 0/.24);--amber-a6:color(display-p3 1 .659 .094/.299);--amber-a7:color(display-p3 1 .714 .263/.383);--amber-a8:color(display-p3 .996 .729 .306/.5);--amber-a9:color(display-p3 1 .769 .259);--amber-a10:color(display-p3 1 .871 .149);--amber-a11:color(display-p3 1 .8 .29);--amber-a12:color(display-p3 .984 .909 .726)}}}:root{--tsu-bg:var(--tsu-neutral-1);--tsu-fg:var(--tsu-neutral-12);--tsu-info-1:var(--tsu-accent-1);--tsu-info-2:var(--tsu-accent-2);--tsu-info-3:var(--tsu-accent-3);--tsu-info-4:var(--tsu-accent-4);--tsu-info-5:var(--tsu-accent-5);--tsu-info-6:var(--tsu-accent-6);--tsu-info-7:var(--tsu-accent-7);--tsu-info-8:var(--tsu-accent-8);--tsu-info-9:var(--tsu-accent-9);--tsu-info-10:var(--tsu-accent-10);--tsu-info-11:var(--tsu-accent-11);--tsu-info-12:var(--tsu-accent-12);--tsu-danger-1:var(--red-1);--tsu-danger-2:var(--red-2);--tsu-danger-3:var(--red-3);--tsu-danger-4:var(--red-4);--tsu-danger-5:var(--red-5);--tsu-danger-6:var(--red-6);--tsu-danger-7:var(--red-7);--tsu-danger-8:var(--red-8);--tsu-danger-9:var(--red-9);--tsu-danger-10:var(--red-10);--tsu-danger-11:var(--red-11);--tsu-danger-12:var(--red-12);--tsu-success-1:var(--green-1);--tsu-success-2:var(--green-2);--tsu-success-3:var(--green-3);--tsu-success-4:var(--green-4);--tsu-success-5:var(--green-5);--tsu-success-6:var(--green-6);--tsu-success-7:var(--green-7);--tsu-success-8:var(--green-8);--tsu-success-9:var(--green-9);--tsu-success-10:var(--green-10);--tsu-success-11:var(--green-11);--tsu-success-12:var(--green-12);--tsu-warning-1:var(--amber-1);--tsu-warning-2:var(--amber-2);--tsu-warning-3:var(--amber-3);--tsu-warning-4:var(--amber-4);--tsu-warning-5:var(--amber-5);--tsu-warning-6:var(--amber-6);--tsu-warning-7:var(--amber-7);--tsu-warning-8:var(--amber-8);--tsu-warning-9:var(--amber-9);--tsu-warning-10:var(--amber-10);--tsu-warning-11:var(--amber-11);--tsu-warning-12:var(--amber-12);--tsu-neutral-alpha-1:var(--olive-a1);--tsu-neutral-alpha-2:var(--olive-a2);--tsu-neutral-alpha-3:var(--olive-a3);--tsu-neutral-alpha-4:var(--olive-a4);--tsu-neutral-alpha-5:var(--olive-a5);--tsu-neutral-alpha-6:var(--olive-a6);--tsu-neutral-alpha-7:var(--olive-a7);--tsu-neutral-alpha-8:var(--olive-a8);--tsu-neutral-alpha-9:var(--olive-a9);--tsu-neutral-alpha-10:var(--olive-a10);--tsu-neutral-alpha-11:var(--olive-a11);--tsu-neutral-alpha-12:var(--olive-a12);--tsu-disabled-bg:var(--tsu-neutral-3);--tsu-disabled-fg:var(--tsu-neutral-9);--tsu-disabled-border:var(--tsu-neutral-7);--tsu-focus-bg:var(--tsu-neutral-2);--tsu-focus-border:var(--tsu-accent-8);--ink:var(--tsu-fg);--muted:var(--tsu-neutral-11);--accent:var(--tsu-accent-9);--surface:var(--tsu-bg);--bg:var(--tsu-neutral-2);--border:var(--tsu-neutral-7);--danger:var(--tsu-danger-9)}:root.dark{--tsu-bg:var(--tsu-neutral-3);--tsu-fg:#fff}:root{--tsu-radius-round:9999px;--tsu-radius-l3-xs:16px;--tsu-radius-l2-xs:8px;--tsu-radius-l1-xs:2px;--tsu-radius-l3-sm:16px;--tsu-radius-l2-sm:8px;--tsu-radius-l1-sm:2px;--tsu-radius-l3-md:16px;--tsu-radius-l2-md:8px;--tsu-radius-l1-md:4px;--tsu-radius-l3-lg:16px;--tsu-radius-l2-lg:8px;--tsu-radius-l1-lg:6px;--tsu-radius-l3-xl:16px;--tsu-radius-l2-xl:8px;--tsu-radius-l1-xl:8px;--tsu-radius-l3-xxl:16px;--tsu-radius-l2-xxl:8px;--tsu-radius-l1-xxl:16px;--tsu-level-primary-xs:32px;--tsu-level-primary-sm:36px;--tsu-level-primary-md:40px;--tsu-level-primary-lg:44px;--tsu-level-primary-xl:48px;--tsu-level-primary-xxl:64px;--tsu-level-secondary-xs:16px;--tsu-level-secondary-sm:18px;--tsu-level-secondary-md:20px;--tsu-level-secondary-lg:22px;--tsu-level-secondary-xl:24px;--tsu-level-secondary-xxl:32px;--tsu-comp-height-xs:var(--tsu-level-primary-xs);--tsu-comp-height-sm:var(--tsu-level-primary-sm);--tsu-comp-height-md:var(--tsu-level-primary-md);--tsu-comp-height-lg:var(--tsu-level-primary-lg);--tsu-comp-height-xl:var(--tsu-level-primary-xl);--tsu-comp-height-xxl:var(--tsu-level-primary-xxl);--tsu-comp-font-size-xs:12px;--tsu-comp-font-size-sm:14px;--tsu-comp-font-size-md:14px;--tsu-comp-font-size-lg:16px;--tsu-comp-font-size-xl:18px;--tsu-comp-font-size-xxl:20px;--tsu-comp-line-height-xs:16px;--tsu-comp-line-height-sm:20px;--tsu-comp-line-height-md:20px;--tsu-comp-line-height-lg:24px;--tsu-comp-line-height-xl:28px;--tsu-comp-line-height-xxl:30px;--tsu-comp-padding-y-xs:7px;--tsu-comp-padding-y-sm:7px;--tsu-comp-padding-y-md:9px;--tsu-comp-padding-y-lg:9px;--tsu-comp-padding-y-xl:9px;--tsu-comp-padding-y-xxl:16px;--tsu-comp-padding-x-xs:8px;--tsu-comp-padding-x-sm:12px;--tsu-comp-padding-x-md:16px;--tsu-comp-padding-x-lg:20px;--tsu-comp-padding-x-xl:24px;--tsu-comp-padding-x-xxl:32px;--tsu-comp-secondary-height-xs:var(--tsu-level-secondary-xs);--tsu-comp-secondary-height-sm:var(--tsu-level-secondary-sm);--tsu-comp-secondary-height-md:var(--tsu-level-secondary-md);--tsu-comp-secondary-height-lg:var(--tsu-level-secondary-lg);--tsu-comp-secondary-height-xl:var(--tsu-level-secondary-xl);--tsu-comp-secondary-height-xxl:var(--tsu-level-secondary-xxl);--tsu-font-size-xs:10px;--tsu-font-size-sm:12px;--tsu-font-size-md:14px;--tsu-font-size-lg:16px;--tsu-font-size-xl:20px;--tsu-font-size-xxl:24px;--tsu-spacing-xxs:2px;--tsu-spacing-xs:4px;--tsu-spacing-sm:8px;--tsu-spacing-md:12px;--tsu-spacing-lg:16px;--tsu-spacing-xl:24px;--tsu-spacing-xxl:32px;--tsu-transition-fast:.15s ease;--tsu-transition-normal:.3s ease;--tsu-transition-overlay:.3s ease;--tsu-shadow-sm:0 1px 2px var(--tsu-neutral-alpha-6);--tsu-shadow-md:0 4px 12px var(--tsu-neutral-alpha-8);--tsu-shadow-lg:0 8px 24px var(--tsu-neutral-alpha-10);--tsu-font-family:system-ui, -apple-system, sans-serif;--tsu-line-height:1.5;--tsu-container-padding-sm:12px;--tsu-container-padding-md:16px;--tsu-container-padding-lg:24px;--tsu-container-padding-xl:32px;--tsu-z-base:0;--tsu-z-dropdown:100;--tsu-z-modal:200;--tsu-z-toast:300}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}*{-webkit-tap-highlight-color:#0000;margin:0;padding:0}body{min-height:100vh;font-family:var(--tsu-font-family);font-size:var(--tsu-font-size-md);line-height:var(--tsu-line-height);color:var(--tsu-fg);background-color:var(--tsu-bg);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance;font-weight:600}a{color:inherit;text-decoration:none}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}:where(ul,ol){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(button){appearance:none;cursor:pointer;background:0 0;border:none}:where([hidden]){display:none}input[type=search]::-webkit-search-cancel-button{display:none}input[type=search]::-ms-clear{display:none}
+:root,.light,.light-theme{--indigo-1:#fdfdfe;--indigo-2:#f7f9ff;--indigo-3:#edf2fe;--indigo-4:#e1e9ff;--indigo-5:#d2deff;--indigo-6:#c1d0ff;--indigo-7:#abbdf9;--indigo-8:#8da4ef;--indigo-9:#3e63dd;--indigo-10:#3358d4;--indigo-11:#3a5bc7;--indigo-12:#1f2d5c}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--indigo-1:color(display-p3 .992 .992 .996);--indigo-2:color(display-p3 .971 .977 .998);--indigo-3:color(display-p3 .933 .948 .992);--indigo-4:color(display-p3 .885 .914 1);--indigo-5:color(display-p3 .831 .87 1);--indigo-6:color(display-p3 .767 .814 .995);--indigo-7:color(display-p3 .685 .74 .957);--indigo-8:color(display-p3 .569 .639 .916);--indigo-9:color(display-p3 .276 .384 .837);--indigo-10:color(display-p3 .234 .343 .801);--indigo-11:color(display-p3 .256 .354 .755);--indigo-12:color(display-p3 .133 .175 .348)}}}:root,.light,.light-theme{--indigo-a1:#00008002;--indigo-a2:#0040ff08;--indigo-a3:#0047f112;--indigo-a4:#0044ff1e;--indigo-a5:#0044ff2d;--indigo-a6:#003eff3e;--indigo-a7:#0037ed54;--indigo-a8:#0034dc72;--indigo-a9:#0031d2c1;--indigo-a10:#002ec9cc;--indigo-a11:#002bb7c5;--indigo-a12:#001046e0}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--indigo-a1:color(display-p3 .02 .02 .51/.008);--indigo-a2:color(display-p3 .024 .161 .863/.028);--indigo-a3:color(display-p3 .008 .239 .886/.067);--indigo-a4:color(display-p3 .004 .247 1/.114);--indigo-a5:color(display-p3 .004 .235 1/.169);--indigo-a6:color(display-p3 .004 .208 .984/.232);--indigo-a7:color(display-p3 .004 .176 .863/.314);--indigo-a8:color(display-p3 .004 .165 .812/.432);--indigo-a9:color(display-p3 0 .153 .773/.726);--indigo-a10:color(display-p3 0 .137 .737/.765);--indigo-a11:color(display-p3 .256 .354 .755);--indigo-a12:color(display-p3 .133 .175 .348)}}}:root,.light,.light-theme{--olive-1:#fcfdfc;--olive-2:#f8faf8;--olive-3:#eff1ef;--olive-4:#e7e9e7;--olive-5:#dfe2df;--olive-6:#d7dad7;--olive-7:#cccfcc;--olive-8:#b9bcb8;--olive-9:#898e87;--olive-10:#7f847d;--olive-11:#60655f;--olive-12:#1d211c}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--olive-1:color(display-p3 .989 .992 .989);--olive-2:color(display-p3 .974 .98 .973);--olive-3:color(display-p3 .939 .945 .937);--olive-4:color(display-p3 .907 .914 .905);--olive-5:color(display-p3 .878 .885 .875);--olive-6:color(display-p3 .846 .855 .843);--olive-7:color(display-p3 .803 .812 .8);--olive-8:color(display-p3 .727 .738 .723);--olive-9:color(display-p3 .541 .556 .532);--olive-10:color(display-p3 .5 .515 .491);--olive-11:color(display-p3 .38 .395 .374);--olive-12:color(display-p3 .117 .129 .111)}}}:root,.light,.light-theme{--olive-a1:#00550003;--olive-a2:#00490007;--olive-a3:#00200010;--olive-a4:#00160018;--olive-a5:#00180020;--olive-a6:#00140028;--olive-a7:#000f0033;--olive-a8:#040f0047;--olive-a9:#050f0078;--olive-a10:#040e0082;--olive-a11:#020a00a0;--olive-a12:#010600e3}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--olive-a1:color(display-p3 .024 .349 .024/.012);--olive-a2:color(display-p3 .024 .302 .024/.028);--olive-a3:color(display-p3 .008 .129 .008/.063);--olive-a4:color(display-p3 .012 .094 .012/.095);--olive-a5:color(display-p3 .035 .098 .008/.126);--olive-a6:color(display-p3 .027 .078 .004/.157);--olive-a7:color(display-p3 .02 .059 0/.2);--olive-a8:color(display-p3 .02 .059 .004/.279);--olive-a9:color(display-p3 .02 .051 .004/.467);--olive-a10:color(display-p3 .024 .047 0/.51);--olive-a11:color(display-p3 .012 .039 0/.628);--olive-a12:color(display-p3 .008 .024 0/.891)}}}.dark,.dark-theme{--indigo-1:#11131f;--indigo-2:#141726;--indigo-3:#182449;--indigo-4:#1d2e62;--indigo-5:#253974;--indigo-6:#304384;--indigo-7:#3a4f97;--indigo-8:#435db1;--indigo-9:#3e63dd;--indigo-10:#5472e4;--indigo-11:#9eb1ff;--indigo-12:#d6e1ff}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--indigo-1:color(display-p3 .068 .074 .118);--indigo-2:color(display-p3 .081 .089 .144);--indigo-3:color(display-p3 .105 .141 .275);--indigo-4:color(display-p3 .129 .18 .369);--indigo-5:color(display-p3 .163 .22 .439);--indigo-6:color(display-p3 .203 .262 .5);--indigo-7:color(display-p3 .245 .309 .575);--indigo-8:color(display-p3 .285 .362 .674);--indigo-9:color(display-p3 .276 .384 .837);--indigo-10:color(display-p3 .354 .445 .866);--indigo-11:color(display-p3 .63 .69 1);--indigo-12:color(display-p3 .848 .881 .99)}}}.dark,.dark-theme{--indigo-a1:#1133ff0f;--indigo-a2:#3354fa17;--indigo-a3:#2f62ff3c;--indigo-a4:#3566ff57;--indigo-a5:#4171fd6b;--indigo-a6:#5178fd7c;--indigo-a7:#5a7fff90;--indigo-a8:#5b81feac;--indigo-a9:#4671ffdb;--indigo-a10:#5c7efee3;--indigo-a11:#9eb1ff;--indigo-a12:#d6e1ff}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--indigo-a1:color(display-p3 .071 .212 .996/.055);--indigo-a2:color(display-p3 .251 .345 .988/.085);--indigo-a3:color(display-p3 .243 .404 1/.223);--indigo-a4:color(display-p3 .263 .42 1/.324);--indigo-a5:color(display-p3 .314 .451 1/.4);--indigo-a6:color(display-p3 .361 .49 1/.467);--indigo-a7:color(display-p3 .388 .51 1/.547);--indigo-a8:color(display-p3 .404 .518 1/.652);--indigo-a9:color(display-p3 .318 .451 1/.824);--indigo-a10:color(display-p3 .404 .506 1/.858);--indigo-a11:color(display-p3 .63 .69 1);--indigo-a12:color(display-p3 .848 .881 .99)}}}.dark,.dark-theme{--olive-1:#111210;--olive-2:#181917;--olive-3:#212220;--olive-4:#282a27;--olive-5:#2f312e;--olive-6:#383a36;--olive-7:#454843;--olive-8:#5c625b;--olive-9:#687066;--olive-10:#767d74;--olive-11:#afb5ad;--olive-12:#eceeec}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--olive-1:color(display-p3 .067 .07 .063);--olive-2:color(display-p3 .095 .098 .091);--olive-3:color(display-p3 .131 .135 .126);--olive-4:color(display-p3 .158 .163 .153);--olive-5:color(display-p3 .186 .192 .18);--olive-6:color(display-p3 .221 .229 .215);--olive-7:color(display-p3 .273 .284 .266);--olive-8:color(display-p3 .365 .382 .359);--olive-9:color(display-p3 .414 .438 .404);--olive-10:color(display-p3 .467 .49 .458);--olive-11:color(display-p3 .69 .709 .682);--olive-12:color(display-p3 .927 .933 .926)}}}.dark,.dark-theme{--olive-a1:#0000;--olive-a2:#f1f2f008;--olive-a3:#f4f5f312;--olive-a4:#f3fef21a;--olive-a5:#f2fbf122;--olive-a6:#f4faed2c;--olive-a7:#f2fced3b;--olive-a8:#edfdeb57;--olive-a9:#ebfde766;--olive-a10:#f0fdec74;--olive-a11:#f6fef4b0;--olive-a12:#fdfffded}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--olive-a1:color(display-p3 0 0 0/0);--olive-a2:color(display-p3 .984 .988 .976/.03);--olive-a3:color(display-p3 .992 .996 .988/.068);--olive-a4:color(display-p3 .953 .996 .949/.102);--olive-a5:color(display-p3 .969 1 .965/.131);--olive-a6:color(display-p3 .973 1 .969/.169);--olive-a7:color(display-p3 .98 1 .961/.228);--olive-a8:color(display-p3 .961 1 .957/.334);--olive-a9:color(display-p3 .949 1 .922/.397);--olive-a10:color(display-p3 .953 1 .941/.452);--olive-a11:color(display-p3 .976 1 .965/.688);--olive-a12:color(display-p3 .992 1 .992/.929)}}}:root{--tsu-accent-1:var(--indigo-1);--tsu-accent-2:var(--indigo-2);--tsu-accent-3:var(--indigo-3);--tsu-accent-4:var(--indigo-4);--tsu-accent-5:var(--indigo-5);--tsu-accent-6:var(--indigo-6);--tsu-accent-7:var(--indigo-7);--tsu-accent-8:var(--indigo-8);--tsu-accent-9:var(--indigo-9);--tsu-accent-10:var(--indigo-10);--tsu-accent-11:var(--indigo-11);--tsu-accent-12:var(--indigo-12);--tsu-neutral-1:var(--olive-1);--tsu-neutral-2:var(--olive-2);--tsu-neutral-3:var(--olive-3);--tsu-neutral-4:var(--olive-4);--tsu-neutral-5:var(--olive-5);--tsu-neutral-6:var(--olive-6);--tsu-neutral-7:var(--olive-7);--tsu-neutral-8:var(--olive-8);--tsu-neutral-9:var(--olive-9);--tsu-neutral-10:var(--olive-10);--tsu-neutral-11:var(--olive-11);--tsu-neutral-12:var(--olive-12)}:root,.light,.light-theme{--red-1:#fffcfc;--red-2:#fff7f7;--red-3:#feebec;--red-4:#ffdbdc;--red-5:#ffcdce;--red-6:#fdbdbe;--red-7:#f4a9aa;--red-8:#eb8e90;--red-9:#e5484d;--red-10:#dc3e42;--red-11:#ce2c31;--red-12:#641723}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--red-1:color(display-p3 .998 .989 .988);--red-2:color(display-p3 .995 .971 .971);--red-3:color(display-p3 .985 .925 .925);--red-4:color(display-p3 .999 .866 .866);--red-5:color(display-p3 .984 .812 .811);--red-6:color(display-p3 .955 .751 .749);--red-7:color(display-p3 .915 .675 .672);--red-8:color(display-p3 .872 .575 .572);--red-9:color(display-p3 .83 .329 .324);--red-10:color(display-p3 .798 .294 .285);--red-11:color(display-p3 .744 .234 .222);--red-12:color(display-p3 .36 .115 .143)}}}:root,.light,.light-theme{--red-a1:#ff000003;--red-a2:#ff000008;--red-a3:#f3000d14;--red-a4:#ff000824;--red-a5:#ff000632;--red-a6:#f8000442;--red-a7:#df000356;--red-a8:#d2000571;--red-a9:#db0007b7;--red-a10:#d10005c1;--red-a11:#c40006d3;--red-a12:#55000de8}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--red-a1:color(display-p3 .675 .024 .024/.012);--red-a2:color(display-p3 .863 .024 .024/.028);--red-a3:color(display-p3 .792 .008 .008/.075);--red-a4:color(display-p3 1 .008 .008/.134);--red-a5:color(display-p3 .918 .008 .008/.189);--red-a6:color(display-p3 .831 .02 .004/.251);--red-a7:color(display-p3 .741 .016 .004/.33);--red-a8:color(display-p3 .698 .012 .004/.428);--red-a9:color(display-p3 .749 .008 0/.675);--red-a10:color(display-p3 .714 .012 0/.714);--red-a11:color(display-p3 .744 .234 .222);--red-a12:color(display-p3 .36 .115 .143)}}}.dark,.dark-theme{--red-1:#191111;--red-2:#201314;--red-3:#3b1219;--red-4:#500f1c;--red-5:#611623;--red-6:#72232d;--red-7:#8c333a;--red-8:#b54548;--red-9:#e5484d;--red-10:#ec5d5e;--red-11:#ff9592;--red-12:#ffd1d9}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--red-1:color(display-p3 .093 .068 .067);--red-2:color(display-p3 .118 .077 .079);--red-3:color(display-p3 .211 .081 .099);--red-4:color(display-p3 .287 .079 .113);--red-5:color(display-p3 .348 .11 .142);--red-6:color(display-p3 .414 .16 .183);--red-7:color(display-p3 .508 .224 .236);--red-8:color(display-p3 .659 .298 .297);--red-9:color(display-p3 .83 .329 .324);--red-10:color(display-p3 .861 .403 .387);--red-11:color(display-p3 1 .57 .55);--red-12:color(display-p3 .971 .826 .852)}}}.dark,.dark-theme{--red-a1:#f4121209;--red-a2:#f22f3e11;--red-a3:#ff173f2d;--red-a4:#fe0a3b44;--red-a5:#ff204756;--red-a6:#ff3e5668;--red-a7:#ff536184;--red-a8:#ff5d61b0;--red-a9:#fe4e54e4;--red-a10:#ff6465eb;--red-a11:#ff9592;--red-a12:#ffd1d9}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--red-a1:color(display-p3 .984 .071 .071/.03);--red-a2:color(display-p3 .996 .282 .282/.055);--red-a3:color(display-p3 1 .169 .271/.156);--red-a4:color(display-p3 1 .118 .267/.236);--red-a5:color(display-p3 1 .212 .314/.303);--red-a6:color(display-p3 1 .318 .38/.374);--red-a7:color(display-p3 1 .4 .424/.475);--red-a8:color(display-p3 1 .431 .431/.635);--red-a9:color(display-p3 1 .388 .384/.82);--red-a10:color(display-p3 1 .463 .447/.853);--red-a11:color(display-p3 1 .57 .55);--red-a12:color(display-p3 .971 .826 .852)}}}:root,.light,.light-theme{--green-1:#fbfefc;--green-2:#f4fbf6;--green-3:#e6f6eb;--green-4:#d6f1df;--green-5:#c4e8d1;--green-6:#adddc0;--green-7:#8eceaa;--green-8:#5bb98b;--green-9:#30a46c;--green-10:#2b9a66;--green-11:#218358;--green-12:#193b2d}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--green-1:color(display-p3 .986 .996 .989);--green-2:color(display-p3 .963 .983 .967);--green-3:color(display-p3 .913 .964 .925);--green-4:color(display-p3 .859 .94 .879);--green-5:color(display-p3 .796 .907 .826);--green-6:color(display-p3 .718 .863 .761);--green-7:color(display-p3 .61 .801 .675);--green-8:color(display-p3 .451 .715 .559);--green-9:color(display-p3 .332 .634 .442);--green-10:color(display-p3 .308 .595 .417);--green-11:color(display-p3 .19 .5 .32);--green-12:color(display-p3 .132 .228 .18)}}}:root,.light,.light-theme{--green-a1:#00c04004;--green-a2:#00a32f0b;--green-a3:#00a43319;--green-a4:#00a83829;--green-a5:#019c393b;--green-a6:#00963c52;--green-a7:#00914071;--green-a8:#00924ba4;--green-a9:#008f4acf;--green-a10:#008647d4;--green-a11:#00713fde;--green-a12:#002616e6}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--green-a1:color(display-p3 .024 .757 .267/.016);--green-a2:color(display-p3 .024 .565 .129/.036);--green-a3:color(display-p3 .012 .596 .145/.087);--green-a4:color(display-p3 .008 .588 .145/.142);--green-a5:color(display-p3 .004 .541 .157/.204);--green-a6:color(display-p3 .004 .518 .157/.283);--green-a7:color(display-p3 .004 .486 .165/.389);--green-a8:color(display-p3 0 .478 .2/.55);--green-a9:color(display-p3 0 .455 .165/.667);--green-a10:color(display-p3 0 .416 .153/.691);--green-a11:color(display-p3 .19 .5 .32);--green-a12:color(display-p3 .132 .228 .18)}}}.dark,.dark-theme{--green-1:#0e1512;--green-2:#121b17;--green-3:#132d21;--green-4:#113b29;--green-5:#174933;--green-6:#20573e;--green-7:#28684a;--green-8:#2f7c57;--green-9:#30a46c;--green-10:#33b074;--green-11:#3dd68c;--green-12:#b1f1cb}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--green-1:color(display-p3 .062 .083 .071);--green-2:color(display-p3 .079 .106 .09);--green-3:color(display-p3 .1 .173 .133);--green-4:color(display-p3 .115 .229 .166);--green-5:color(display-p3 .147 .282 .206);--green-6:color(display-p3 .185 .338 .25);--green-7:color(display-p3 .227 .403 .298);--green-8:color(display-p3 .27 .479 .351);--green-9:color(display-p3 .332 .634 .442);--green-10:color(display-p3 .357 .682 .474);--green-11:color(display-p3 .434 .828 .573);--green-12:color(display-p3 .747 .938 .807)}}}.dark,.dark-theme{--green-a1:#00de4505;--green-a2:#29f99d0b;--green-a3:#22ff991e;--green-a4:#11ff992d;--green-a5:#2bffa23c;--green-a6:#44ffaa4b;--green-a7:#50fdac5e;--green-a8:#54ffad73;--green-a9:#44ffa49e;--green-a10:#43fea4ab;--green-a11:#46fea5d4;--green-a12:#bbffd7f0}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--green-a1:color(display-p3 0 .992 .298/.017);--green-a2:color(display-p3 .341 .98 .616/.043);--green-a3:color(display-p3 .376 .996 .655/.114);--green-a4:color(display-p3 .341 .996 .635/.173);--green-a5:color(display-p3 .408 1 .678/.232);--green-a6:color(display-p3 .475 1 .706/.29);--green-a7:color(display-p3 .514 1 .706/.362);--green-a8:color(display-p3 .529 1 .718/.442);--green-a9:color(display-p3 .502 .996 .682/.61);--green-a10:color(display-p3 .506 1 .682/.66);--green-a11:color(display-p3 .434 .828 .573);--green-a12:color(display-p3 .747 .938 .807)}}}:root,.light,.light-theme{--amber-1:#fefdfb;--amber-2:#fefbe9;--amber-3:#fff7c2;--amber-4:#ffee9c;--amber-5:#fbe577;--amber-6:#f3d673;--amber-7:#e9c162;--amber-8:#e2a336;--amber-9:#ffc53d;--amber-10:#ffba18;--amber-11:#ab6400;--amber-12:#4f3422}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--amber-1:color(display-p3 .995 .992 .985);--amber-2:color(display-p3 .994 .986 .921);--amber-3:color(display-p3 .994 .969 .782);--amber-4:color(display-p3 .989 .937 .65);--amber-5:color(display-p3 .97 .902 .527);--amber-6:color(display-p3 .936 .844 .506);--amber-7:color(display-p3 .89 .762 .443);--amber-8:color(display-p3 .85 .65 .3);--amber-9:color(display-p3 1 .77 .26);--amber-10:color(display-p3 .959 .741 .274);--amber-11:color(display-p3 .64 .4 0);--amber-12:color(display-p3 .294 .208 .145)}}}:root,.light,.light-theme{--amber-a1:#c0800004;--amber-a2:#f4d10016;--amber-a3:#ffde003d;--amber-a4:#ffd40063;--amber-a5:#f8cf0088;--amber-a6:#eab5008c;--amber-a7:#dc9b009d;--amber-a8:#da8a00c9;--amber-a9:#ffb300c2;--amber-a10:#ffb300e7;--amber-a11:#ab6400;--amber-a12:#341500dd}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--amber-a1:color(display-p3 .757 .514 .024/.016);--amber-a2:color(display-p3 .902 .804 .008/.079);--amber-a3:color(display-p3 .965 .859 .004/.22);--amber-a4:color(display-p3 .969 .82 .004/.35);--amber-a5:color(display-p3 .933 .796 .004/.475);--amber-a6:color(display-p3 .875 .682 .004/.495);--amber-a7:color(display-p3 .804 .573 0/.557);--amber-a8:color(display-p3 .788 .502 0/.699);--amber-a9:color(display-p3 1 .686 0/.742);--amber-a10:color(display-p3 .945 .643 0/.726);--amber-a11:color(display-p3 .64 .4 0);--amber-a12:color(display-p3 .294 .208 .145)}}}.dark,.dark-theme{--amber-1:#16120c;--amber-2:#1d180f;--amber-3:#302008;--amber-4:#3f2700;--amber-5:#4d3000;--amber-6:#5c3d05;--amber-7:#714f19;--amber-8:#8f6424;--amber-9:#ffc53d;--amber-10:#ffd60a;--amber-11:#ffca16;--amber-12:#ffe7b3}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--amber-1:color(display-p3 .082 .07 .05);--amber-2:color(display-p3 .111 .094 .064);--amber-3:color(display-p3 .178 .128 .049);--amber-4:color(display-p3 .239 .156 0);--amber-5:color(display-p3 .29 .193 0);--amber-6:color(display-p3 .344 .245 .076);--amber-7:color(display-p3 .422 .314 .141);--amber-8:color(display-p3 .535 .399 .189);--amber-9:color(display-p3 1 .77 .26);--amber-10:color(display-p3 1 .87 .15);--amber-11:color(display-p3 1 .8 .29);--amber-12:color(display-p3 .984 .909 .726)}}}.dark,.dark-theme{--amber-a1:#e63c0006;--amber-a2:#fd9b000d;--amber-a3:#fa820022;--amber-a4:#fc820032;--amber-a5:#fd8b0041;--amber-a6:#fd9b0051;--amber-a7:#ffab2567;--amber-a8:#ffae3587;--amber-a9:#ffc53d;--amber-a10:#ffd60a;--amber-a11:#ffca16;--amber-a12:#ffe7b3}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--amber-a1:color(display-p3 .992 .298 0/.017);--amber-a2:color(display-p3 .988 .651 0/.047);--amber-a3:color(display-p3 1 .6 0/.118);--amber-a4:color(display-p3 1 .557 0/.185);--amber-a5:color(display-p3 1 .592 0/.24);--amber-a6:color(display-p3 1 .659 .094/.299);--amber-a7:color(display-p3 1 .714 .263/.383);--amber-a8:color(display-p3 .996 .729 .306/.5);--amber-a9:color(display-p3 1 .769 .259);--amber-a10:color(display-p3 1 .871 .149);--amber-a11:color(display-p3 1 .8 .29);--amber-a12:color(display-p3 .984 .909 .726)}}}:root{--tsu-bg:var(--tsu-neutral-1);--tsu-fg:var(--tsu-neutral-12);--tsu-surface:var(--tsu-neutral-3);--tsu-surface-hover:var(--tsu-neutral-2);--tsu-color-pressed:var(--tsu-neutral-3);--tsu-color-pressed-accent:var(--tsu-accent-3);--tsu-color-muted:var(--tsu-neutral-alpha-7);--tsu-color-muted-subtle:var(--tsu-neutral-alpha-5);--tsu-info-1:var(--tsu-accent-1);--tsu-info-2:var(--tsu-accent-2);--tsu-info-3:var(--tsu-accent-3);--tsu-info-4:var(--tsu-accent-4);--tsu-info-5:var(--tsu-accent-5);--tsu-info-6:var(--tsu-accent-6);--tsu-info-7:var(--tsu-accent-7);--tsu-info-8:var(--tsu-accent-8);--tsu-info-9:var(--tsu-accent-9);--tsu-info-10:var(--tsu-accent-10);--tsu-info-11:var(--tsu-accent-11);--tsu-info-12:var(--tsu-accent-12);--tsu-danger-1:var(--red-1);--tsu-danger-2:var(--red-2);--tsu-danger-3:var(--red-3);--tsu-danger-4:var(--red-4);--tsu-danger-5:var(--red-5);--tsu-danger-6:var(--red-6);--tsu-danger-7:var(--red-7);--tsu-danger-8:var(--red-8);--tsu-danger-9:var(--red-9);--tsu-danger-10:var(--red-10);--tsu-danger-11:var(--red-11);--tsu-danger-12:var(--red-12);--tsu-success-1:var(--green-1);--tsu-success-2:var(--green-2);--tsu-success-3:var(--green-3);--tsu-success-4:var(--green-4);--tsu-success-5:var(--green-5);--tsu-success-6:var(--green-6);--tsu-success-7:var(--green-7);--tsu-success-8:var(--green-8);--tsu-success-9:var(--green-9);--tsu-success-10:var(--green-10);--tsu-success-11:var(--green-11);--tsu-success-12:var(--green-12);--tsu-warning-1:var(--amber-1);--tsu-warning-2:var(--amber-2);--tsu-warning-3:var(--amber-3);--tsu-warning-4:var(--amber-4);--tsu-warning-5:var(--amber-5);--tsu-warning-6:var(--amber-6);--tsu-warning-7:var(--amber-7);--tsu-warning-8:var(--amber-8);--tsu-warning-9:var(--amber-9);--tsu-warning-10:var(--amber-10);--tsu-warning-11:var(--amber-11);--tsu-warning-12:var(--amber-12);--tsu-neutral-alpha-1:var(--olive-a1);--tsu-neutral-alpha-2:var(--olive-a2);--tsu-neutral-alpha-3:var(--olive-a3);--tsu-neutral-alpha-4:var(--olive-a4);--tsu-neutral-alpha-5:var(--olive-a5);--tsu-neutral-alpha-6:var(--olive-a6);--tsu-neutral-alpha-7:var(--olive-a7);--tsu-neutral-alpha-8:var(--olive-a8);--tsu-neutral-alpha-9:var(--olive-a9);--tsu-neutral-alpha-10:var(--olive-a10);--tsu-neutral-alpha-11:var(--olive-a11);--tsu-neutral-alpha-12:var(--olive-a12);--tsu-disabled-bg:var(--tsu-neutral-3);--tsu-disabled-fg:var(--tsu-neutral-9);--tsu-disabled-border:var(--tsu-neutral-7);--tsu-focus-bg:var(--tsu-surface-hover);--tsu-focus-border:var(--tsu-accent-8);--ink:var(--tsu-fg);--muted:var(--tsu-neutral-11);--accent:var(--tsu-accent-9);--surface:var(--tsu-bg);--bg:var(--tsu-neutral-2);--border:var(--tsu-neutral-7);--danger:var(--tsu-danger-9)}:root.dark{--tsu-bg:var(--tsu-neutral-3);--tsu-fg:#fff;--tsu-surface:var(--tsu-neutral-4);--tsu-surface-hover:var(--tsu-neutral-5)}:root{--tsu-radius-round:9999px;--tsu-radius-l3-xs:14px;--tsu-radius-l2-xs:6px;--tsu-radius-l1-xs:2px;--tsu-radius-l3-sm:14px;--tsu-radius-l2-sm:6px;--tsu-radius-l1-sm:2px;--tsu-radius-l3-md:16px;--tsu-radius-l2-md:8px;--tsu-radius-l1-md:4px;--tsu-radius-l3-lg:18px;--tsu-radius-l2-lg:10px;--tsu-radius-l1-lg:6px;--tsu-radius-l3-xl:20px;--tsu-radius-l2-xl:12px;--tsu-radius-l1-xl:8px;--tsu-radius-l3-xxl:28px;--tsu-radius-l2-xxl:20px;--tsu-radius-l1-xxl:16px;--tsu-level-primary-xs:32px;--tsu-level-primary-sm:36px;--tsu-level-primary-md:40px;--tsu-level-primary-lg:44px;--tsu-level-primary-xl:48px;--tsu-level-primary-xxl:64px;--tsu-level-secondary-xs:16px;--tsu-level-secondary-sm:18px;--tsu-level-secondary-md:20px;--tsu-level-secondary-lg:22px;--tsu-level-secondary-xl:24px;--tsu-level-secondary-xxl:32px;--tsu-comp-height-xs:var(--tsu-level-primary-xs);--tsu-comp-height-sm:var(--tsu-level-primary-sm);--tsu-comp-height-md:var(--tsu-level-primary-md);--tsu-comp-height-lg:var(--tsu-level-primary-lg);--tsu-comp-height-xl:var(--tsu-level-primary-xl);--tsu-comp-height-xxl:var(--tsu-level-primary-xxl);--tsu-comp-font-size-xs:12px;--tsu-comp-font-size-sm:14px;--tsu-comp-font-size-md:14px;--tsu-comp-font-size-lg:16px;--tsu-comp-font-size-xl:18px;--tsu-comp-font-size-xxl:20px;--tsu-comp-line-height-xs:16px;--tsu-comp-line-height-sm:20px;--tsu-comp-line-height-md:20px;--tsu-comp-line-height-lg:24px;--tsu-comp-line-height-xl:28px;--tsu-comp-line-height-xxl:30px;--tsu-comp-padding-y-xs:7px;--tsu-comp-padding-y-sm:7px;--tsu-comp-padding-y-md:9px;--tsu-comp-padding-y-lg:9px;--tsu-comp-padding-y-xl:9px;--tsu-comp-padding-y-xxl:16px;--tsu-comp-padding-x-xs:8px;--tsu-comp-padding-x-sm:12px;--tsu-comp-padding-x-md:16px;--tsu-comp-padding-x-lg:20px;--tsu-comp-padding-x-xl:24px;--tsu-comp-padding-x-xxl:32px;--tsu-comp-secondary-height-xs:var(--tsu-level-secondary-xs);--tsu-comp-secondary-height-sm:var(--tsu-level-secondary-sm);--tsu-comp-secondary-height-md:var(--tsu-level-secondary-md);--tsu-comp-secondary-height-lg:var(--tsu-level-secondary-lg);--tsu-comp-secondary-height-xl:var(--tsu-level-secondary-xl);--tsu-comp-secondary-height-xxl:var(--tsu-level-secondary-xxl);--tsu-font-size-xs:10px;--tsu-font-size-sm:12px;--tsu-font-size-md:14px;--tsu-font-size-lg:16px;--tsu-font-size-xl:20px;--tsu-font-size-xxl:24px;--tsu-font-weight-regular:400;--tsu-font-weight-medium:500;--tsu-font-weight-semibold:600;--tsu-text-title-size:var(--tsu-font-size-lg);--tsu-text-title-weight:var(--tsu-font-weight-semibold);--tsu-text-title-line-height:24px;--tsu-text-body-size:var(--tsu-font-size-md);--tsu-text-body-weight:var(--tsu-font-weight-regular);--tsu-text-body-line-height:20px;--tsu-text-label-size:var(--tsu-font-size-md);--tsu-text-label-weight:var(--tsu-font-weight-medium);--tsu-text-label-line-height:20px;--tsu-text-caption-size:var(--tsu-font-size-sm);--tsu-text-caption-weight:var(--tsu-font-weight-regular);--tsu-text-caption-line-height:16px;--tsu-spacing-xxs:2px;--tsu-spacing-xs:4px;--tsu-spacing-sm:8px;--tsu-spacing-md:12px;--tsu-spacing-lg:16px;--tsu-spacing-xl:24px;--tsu-spacing-xxl:32px;--tsu-duration-fast:.15s;--tsu-duration-normal:.25s;--tsu-duration-overlay-enter:.35s;--tsu-duration-overlay-exit:.2s;--tsu-ease-standard:cubic-bezier(.2, 0, 0, 1);--tsu-ease-out:cubic-bezier(.32, .72, 0, 1);--tsu-ease-in:cubic-bezier(.4, 0, 1, 1);--tsu-transition-fast:var(--tsu-duration-fast) var(--tsu-ease-standard);--tsu-transition-normal:var(--tsu-duration-normal) var(--tsu-ease-standard);--tsu-transition-overlay-enter:var(--tsu-duration-overlay-enter) var(--tsu-ease-out);--tsu-transition-overlay-exit:var(--tsu-duration-overlay-exit) var(--tsu-ease-in);--tsu-transition-overlay:var(--tsu-transition-overlay-enter);--tsu-shadow-sm:0 1px 2px var(--tsu-neutral-alpha-6), 0 2px 4px var(--tsu-neutral-alpha-7);--tsu-shadow-md:0 1px 3px var(--tsu-neutral-alpha-6), 0 4px 16px var(--tsu-neutral-alpha-8);--tsu-shadow-lg:0 2px 6px var(--tsu-neutral-alpha-6), 0 12px 32px var(--tsu-neutral-alpha-10);--tsu-font-family:system-ui, -apple-system, sans-serif;--tsu-line-height:1.5;--tsu-container-padding-sm:12px;--tsu-container-padding-md:16px;--tsu-container-padding-lg:24px;--tsu-container-padding-xl:32px;--tsu-z-base:0;--tsu-z-dropdown:100;--tsu-z-modal:200;--tsu-z-toast:300}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}*{-webkit-tap-highlight-color:#0000;margin:0;padding:0}body{min-height:100vh;font-family:var(--tsu-font-family);font-size:var(--tsu-font-size-md);line-height:var(--tsu-line-height);color:var(--tsu-fg);background-color:var(--tsu-bg);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance;font-weight:var(--tsu-font-weight-semibold)}a{color:inherit;text-decoration:none}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}:where(ul,ol){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(button){appearance:none;cursor:pointer;background:0 0;border:none}:where([hidden]){display:none}input[type=search]::-webkit-search-cancel-button{display:none}input[type=search]::-ms-clear{display:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plastic-js/tsumiki",
-  "version": "0.1.31",
+  "version": "0.1.34",
   "description": "A UI component library for Plastic JS.",
   "license": "MIT",
   "author": "tigre",

package/src/styles/color.css

@@ -16,6 +16,18 @@
   --tsu-bg: var(--tsu-neutral-1);
   --tsu-fg: var(--tsu-neutral-12);
 
+  /* Elevated surfaces (solid inputs, cards): one step off the page background */
+  --tsu-surface: var(--tsu-neutral-3);
+  --tsu-surface-hover: var(--tsu-neutral-2);
+
+  /* Pressed-state feedback (touch): rows/items vs. controls */
+  --tsu-color-pressed: var(--tsu-neutral-3);
+  --tsu-color-pressed-accent: var(--tsu-accent-3);
+
+  /* Muted / quiet gray — loading, empty, and secondary surfaces */
+  --tsu-color-muted: var(--tsu-neutral-alpha-7);
+  --tsu-color-muted-subtle: var(--tsu-neutral-alpha-5);
+
   /* Info (accent) — full 12-step palette */
   --tsu-info-1: var(--tsu-accent-1);
   --tsu-info-2: var(--tsu-accent-2);
@@ -92,7 +104,7 @@
   --tsu-disabled-border: var(--tsu-neutral-7);
 
   /* Focus State */
-  --tsu-focus-bg: var(--tsu-neutral-2);
+  --tsu-focus-bg: var(--tsu-surface-hover);
   --tsu-focus-border: var(--tsu-accent-8);
 
   /* Legacy Aliases — map old variable names to new token system */
@@ -109,4 +121,6 @@
 :root.dark {
   --tsu-bg: var(--tsu-neutral-3);
   --tsu-fg: #ffffff;
+  --tsu-surface: var(--tsu-neutral-4);
+  --tsu-surface-hover: var(--tsu-neutral-5);
 }

package/src/styles/radius.css

@@ -1,27 +1,27 @@
 :root {
   --tsu-radius-round: 9999px;
 
-  --tsu-radius-l3-xs: 16px;
-  --tsu-radius-l2-xs: 8px;
+  --tsu-radius-l3-xs: 14px;
+  --tsu-radius-l2-xs: 6px;
   --tsu-radius-l1-xs: 2px;
 
-  --tsu-radius-l3-sm: 16px;
-  --tsu-radius-l2-sm: 8px;
+  --tsu-radius-l3-sm: 14px;
+  --tsu-radius-l2-sm: 6px;
   --tsu-radius-l1-sm: 2px;
 
   --tsu-radius-l3-md: 16px;
   --tsu-radius-l2-md: 8px;
   --tsu-radius-l1-md: 4px;
 
-  --tsu-radius-l3-lg: 16px;
-  --tsu-radius-l2-lg: 8px;
+  --tsu-radius-l3-lg: 18px;
+  --tsu-radius-l2-lg: 10px;
   --tsu-radius-l1-lg: 6px;
 
-  --tsu-radius-l3-xl: 16px;
-  --tsu-radius-l2-xl: 8px;
+  --tsu-radius-l3-xl: 20px;
+  --tsu-radius-l2-xl: 12px;
   --tsu-radius-l1-xl: 8px;
 
-  --tsu-radius-l3-xxl: 16px;
-  --tsu-radius-l2-xxl: 8px;
+  --tsu-radius-l3-xxl: 28px;
+  --tsu-radius-l2-xxl: 20px;
   --tsu-radius-l1-xxl: 16px;
 }

package/src/styles/reset.css

@@ -69,7 +69,7 @@ h4,
 h5,
 h6 {
   text-wrap: balance;
-  font-weight: 600;
+  font-weight: var(--tsu-font-weight-semibold);
 }
 
 a {

package/src/styles/shadow.css

@@ -1,5 +1,8 @@
 :root {
-  --tsu-shadow-sm: 0 1px 2px var(--tsu-neutral-alpha-6);
-  --tsu-shadow-md: 0 4px 12px var(--tsu-neutral-alpha-8);
-  --tsu-shadow-lg: 0 8px 24px var(--tsu-neutral-alpha-10);
+  --tsu-shadow-sm: 0 1px 2px var(--tsu-neutral-alpha-6),
+    0 2px 4px var(--tsu-neutral-alpha-7);
+  --tsu-shadow-md: 0 1px 3px var(--tsu-neutral-alpha-6),
+    0 4px 16px var(--tsu-neutral-alpha-8);
+  --tsu-shadow-lg: 0 2px 6px var(--tsu-neutral-alpha-6),
+    0 12px 32px var(--tsu-neutral-alpha-10);
 }

package/src/styles/transition.css

@@ -1,5 +1,17 @@
 :root {
-  --tsu-transition-fast: 0.15s ease;
-  --tsu-transition-normal: 0.3s ease;
-  --tsu-transition-overlay: 0.3s ease;
+  --tsu-duration-fast: 150ms;
+  --tsu-duration-normal: 250ms;
+  --tsu-duration-overlay-enter: 350ms;
+  --tsu-duration-overlay-exit: 200ms;
+
+  --tsu-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --tsu-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
+  --tsu-ease-in: cubic-bezier(0.4, 0, 1, 1);
+
+  --tsu-transition-fast: var(--tsu-duration-fast) var(--tsu-ease-standard);
+  --tsu-transition-normal: var(--tsu-duration-normal) var(--tsu-ease-standard);
+  --tsu-transition-overlay-enter: var(--tsu-duration-overlay-enter) var(--tsu-ease-out);
+  --tsu-transition-overlay-exit: var(--tsu-duration-overlay-exit) var(--tsu-ease-in);
+
+  --tsu-transition-overlay: var(--tsu-transition-overlay-enter);
 }

package/src/styles/typography.css

@@ -5,4 +5,24 @@
   --tsu-font-size-lg: 16px;
   --tsu-font-size-xl: 20px;
   --tsu-font-size-xxl: 24px;
+
+  --tsu-font-weight-regular: 400;
+  --tsu-font-weight-medium: 500;
+  --tsu-font-weight-semibold: 600;
+
+  --tsu-text-title-size: var(--tsu-font-size-lg);
+  --tsu-text-title-weight: var(--tsu-font-weight-semibold);
+  --tsu-text-title-line-height: 24px;
+
+  --tsu-text-body-size: var(--tsu-font-size-md);
+  --tsu-text-body-weight: var(--tsu-font-weight-regular);
+  --tsu-text-body-line-height: 20px;
+
+  --tsu-text-label-size: var(--tsu-font-size-md);
+  --tsu-text-label-weight: var(--tsu-font-weight-medium);
+  --tsu-text-label-line-height: 20px;
+
+  --tsu-text-caption-size: var(--tsu-font-size-sm);
+  --tsu-text-caption-weight: var(--tsu-font-weight-regular);
+  --tsu-text-caption-line-height: 16px;
 }