@plastic-js/tsumiki 0.1.33 → 0.1.35

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,
@@ -24,7 +24,7 @@ var triggerClass = css({
 	alignItems: "center",
 	justifyContent: "space-between",
 	gap: "4px",
-	background: "var(--tsu-neutral-2)",
+	background: "var(--tsu-surface)",
 	border: "1px solid var(--tsu-accent-8)",
 	borderRadius: "10px",
 	padding: "0 10px",
@@ -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",
@@ -127,7 +77,7 @@ var itemClass = css({
 	textAlign: "left",
 	cursor: "pointer",
 	"&:active": { background: "rgba(255,255,255,0.06)" },
-	"&[data-selected]": { background: "var(--tsu-accent-2)" }
+	"&[data-selected]": { background: "var(--tsu-accent-3)" }
 });
 var itemIndicatorClass = css({
 	flexShrink: 0,
@@ -146,7 +96,7 @@ var filterInputClass = css({
 	width: "100%",
 	height: "42px",
 	padding: "0 36px 0 40px",
-	background: "var(--tsu-neutral-2)",
+	background: "var(--tsu-surface)",
 	border: "1px solid var(--tsu-accent-8)",
 	borderRadius: "10px",
 	color: "var(--tsu-fg)",
@@ -218,8 +168,6 @@ var Select = (props) => {
 		"onOpenChange",
 		"disabled",
 		"children",
-		"clearable",
-		"clearLabel",
 		"backdropClassName",
 		"backdropStyle",
 		"filter"
@@ -274,8 +222,6 @@ var Select = (props) => {
 		selectedItem,
 		setValue,
 		disabled: () => local.disabled ?? false,
-		clearable: local.clearable,
-		clearLabel: local.clearLabel,
 		backdropClassName: local.backdropClassName,
 		backdropStyle: local.backdropStyle,
 		filter: local.filter,
@@ -350,78 +296,65 @@ 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: jsx(Loop, mergeProps({
+					each: () => list,
+					children: (item) => jsx(Item, mergeProps({
+						item,
+						get key() {
+							return ctx.itemToValue(item);
+						}
+					}))
+				})) });
+			}]
+		}))
 	}));
 };
 //#endregion

package/dist/components/SelectPc.js

@@ -71,7 +71,7 @@ var variantClasses = {
 		}
 	}),
 	outline: css({
-		backgroundColor: "var(--tsu-bg)",
+		backgroundColor: "var(--tsu-surface)",
 		border: "1px solid var(--tsu-accent-8)",
 		"&:active:not(:disabled)": {
 			backgroundColor: "var(--tsu-accent-3)",
@@ -103,7 +103,7 @@ var indicatorClass = css({
 });
 var positionerClass = css({ zIndex: "var(--tsu-z-dropdown)" });
 var contentBaseClass = css({
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	border: "1px solid var(--tsu-neutral-6)",
 	borderRadius: "var(--tsu-radius-l2-md)",
 	boxShadow: "var(--tsu-shadow-lg)",

package/dist/components/SignaturePad.js

@@ -17,8 +17,13 @@ var canvasClass = css({
 	border: "1px solid var(--tsu-neutral-7)",
 	borderRadius: "var(--tsu-radius-l2-md)",
 	backgroundColor: "var(--tsu-bg)",
+	color: "var(--tsu-fg)",
 	touchAction: "none",
-	width: "100%"
+	width: "100%",
+	"& [data-part=\"segment-path\"]": {
+		stroke: "currentColor",
+		strokeWidth: "2px"
+	}
 });
 var clearClass = css({
 	display: "inline-flex",

package/dist/components/Steps.js

@@ -77,7 +77,7 @@ var indicatorClass = css({
 	height: "28px",
 	borderRadius: "50%",
 	border: "2px solid var(--tsu-neutral-5)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	fontSize: "var(--tsu-font-size-sm)",
 	fontWeight: "var(--tsu-font-weight-semibold)",
 	color: "var(--tsu-neutral-9)",
@@ -132,7 +132,7 @@ var navBtnClass = css({
 	padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)",
 	border: "1px solid var(--tsu-accent-7)",
 	borderRadius: "var(--tsu-radius-l2-md)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	color: "var(--tsu-neutral-11)",
 	fontSize: "var(--tsu-font-size-sm)",
 	fontWeight: "var(--tsu-font-weight-medium)",

package/dist/components/Switch.js

@@ -96,7 +96,7 @@ var thumbClass = css({
 	width: "var(--_sw-thumb-size, calc(var(--tsu-comp-secondary-height-md) - 4px))",
 	height: "var(--_sw-thumb-size, calc(var(--tsu-comp-secondary-height-md) - 4px))",
 	borderRadius: "50%",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	boxShadow: "0 1px 3px rgba(0,0,0,0.15)",
 	transform: "translateX(0)",
 	transition: "transform var(--tsu-transition-fast)",
@@ -105,7 +105,7 @@ var thumbClass = css({
 		backgroundColor: "var(--tsu-neutral-8)",
 		boxShadow: "none"
 	},
-	"&[data-disabled][data-state=\"checked\"]": { backgroundColor: "var(--tsu-bg)" }
+	"&[data-disabled][data-state=\"checked\"]": { backgroundColor: "var(--tsu-surface)" }
 });
 var labelClass = css({
 	fontSize: "var(--_sw-font-size, var(--tsu-comp-font-size-md))",

package/dist/components/TagsInput.js

@@ -12,7 +12,7 @@ var rootClass = css({
 	padding: "var(--tsu-spacing-xs) var(--tsu-spacing-sm)",
 	border: "1px solid var(--tsu-accent-8)",
 	borderRadius: "var(--tsu-radius-l1-md)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	minHeight: "var(--tsu-comp-height-lg)",
 	"&:focus-within": { borderColor: "var(--tsu-focus-border)" }
 });

package/dist/components/Toast.js

@@ -17,7 +17,7 @@ var toastClass = css({
 	gap: "12px",
 	width: "min(92vw, 340px)",
 	padding: "16px",
-	background: "var(--tsu-bg)",
+	background: "var(--tsu-surface)",
 	border: "1px solid var(--tsu-neutral-6)",
 	borderRadius: "var(--tsu-radius-l2-lg)",
 	borderLeft: "3px solid var(--tsu-neutral-7)",
@@ -49,7 +49,7 @@ var toastClass = css({
 var titleClass = css({
 	margin: 0,
 	fontSize: "15px",
-	fontWeight: 700,
+	fontWeight: "var(--tsu-font-weight-semibold)",
 	lineHeight: 1.3,
 	letterSpacing: "-0.01em",
 	color: "var(--tsu-fg)",

package/dist/components/Toggle.js

@@ -10,7 +10,7 @@ var rootClass = css({
 	padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)",
 	border: "1px solid var(--tsu-neutral-7)",
 	borderRadius: "var(--tsu-radius-l1-md)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	color: "var(--tsu-neutral-11)",
 	fontSize: "var(--tsu-font-size-sm)",
 	fontWeight: "var(--tsu-font-weight-medium)",

package/dist/components/Tour.js

@@ -5,7 +5,7 @@ import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Tour.jsx
 var contentClass = css({
 	padding: "var(--tsu-container-padding-sm) var(--tsu-container-padding-md)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	borderRadius: "var(--tsu-radius-l2-md)",
 	boxShadow: "var(--tsu-shadow-lg)",
 	border: "1px solid var(--tsu-neutral-6)",

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-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-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: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}
+: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-2);--tsu-surface-raised:var(--tsu-neutral-3);--tsu-surface-raised-hover:var(--tsu-neutral-4);--tsu-color-pressed:var(--tsu-surface-raised);--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-surface-raised);--tsu-disabled-fg:var(--tsu-neutral-9);--tsu-disabled-border:var(--tsu-neutral-7);--tsu-focus-bg:var(--tsu-surface-raised-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-fg:#fff}: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/docs/api.md

@@ -328,8 +328,6 @@ Mobile-optimized bottom-sheet select (draggable sheet overlay).
 | `open` | `(() => boolean)` | — | **Required** controlled open state. |
 | `onOpenChange` | `(open) => void` | — | Open/close callback. |
 | `disabled` | `boolean` | `false` | Disabled. |
-| `clearable` | `boolean` | `false` | Show a clear trigger. |
-| `clearLabel` | `string` | — | Accessible label for the clear trigger. |
 | `filter` | `(item, query, itemToLabel) => boolean` | — | Custom filter for the search box. |
 | `placeholder` | `string` | — | Trigger placeholder. |
 | `backdropClassName` | `string` | — | Backdrop class. |

package/docs/scroll-lock-issue.md

@@ -0,0 +1,35 @@
+# Scroll-lock is not stacked
+
+**Status:** Known issue
+**Affects:** `Select.jsx:193`, `DateInput.jsx:293/303`
+
+## Problem
+
+Overlay components set `document.body.style.overflow` directly:
+
+```js
+// Select
+document.body.style.overflow = v ? 'hidden' : ''
+
+// DateInput
+document.body.style.overflow = 'hidden'   // on open
+document.body.style.overflow = ''         // on close
+```
+
+When two overlays are open at once (e.g. a `Select` inside a `Dialog`), they
+fight over the same flag. Closing either one resets `overflow`, unlocking the
+page scroll while the other overlay is still open.
+
+## Fix
+
+Extract a shared scroll-lock counter:
+
+```js
+// scroll-lock.js
+let count = 0
+const lock = () => { count += 1; document.body.style.overflow = 'hidden' }
+const unlock = () => { count = Math.max(0, count - 1); if (count === 0) document.body.style.overflow = '' }
+```
+
+Use it in every overlay (`Select`, `DateInput`, …) instead of writing
+`document.body.style.overflow` directly.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plastic-js/tsumiki",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "description": "A UI component library for Plastic JS.",
   "license": "MIT",
   "author": "tigre",
@@ -58,14 +58,14 @@
     "popmotion": "^11.0.5"
   },
   "peerDependencies": {
-    "@plastic-js/ark": "^1.0.16",
-    "@plastic-js/plastic": "^1.0.22"
+    "@plastic-js/ark": "^1.0.17",
+    "@plastic-js/plastic": "^1.0.23"
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",
-    "@plastic-js/ark": "^1.0.16",
+    "@plastic-js/ark": "^1.0.17",
     "@plastic-js/babel-preset-plastic": "^0.1.11",
-    "@plastic-js/plastic": "^1.0.22",
+    "@plastic-js/plastic": "^1.0.23",
     "@radix-ui/colors": "^3.0.0",
     "@zag-js/combobox": "1.40.0",
     "puppeteer-core": "^25.1.0",

package/src/styles/color.css

@@ -13,11 +13,21 @@
 @import '@radix-ui/colors/amber-dark-alpha.css';
 
 :root {
+  /* App background — Radix step 1 (the most recessive color in both modes) */
   --tsu-bg: var(--tsu-neutral-1);
   --tsu-fg: var(--tsu-neutral-12);
 
+  /* Surfaces (Radix semantic steps, consistent across light/dark — the
+     neutral scale flips by mode):
+     step 2 = subtle surface (cards, sheets, panels, popovers)
+     step 3 = raised controls (solid inputs, toggles, chips)
+     step 4 = hover/focus of raised controls */
+  --tsu-surface: var(--tsu-neutral-2);
+  --tsu-surface-raised: var(--tsu-neutral-3);
+  --tsu-surface-raised-hover: var(--tsu-neutral-4);
+
   /* Pressed-state feedback (touch): rows/items vs. controls */
-  --tsu-color-pressed: var(--tsu-neutral-3);
+  --tsu-color-pressed: var(--tsu-surface-raised);
   --tsu-color-pressed-accent: var(--tsu-accent-3);
 
   /* Muted / quiet gray — loading, empty, and secondary surfaces */
@@ -95,12 +105,12 @@
   --tsu-neutral-alpha-12: var(--olive-a12);
 
   /* Disabled State */
-  --tsu-disabled-bg: var(--tsu-neutral-3);
+  --tsu-disabled-bg: var(--tsu-surface-raised);
   --tsu-disabled-fg: var(--tsu-neutral-9);
   --tsu-disabled-border: var(--tsu-neutral-7);
 
   /* Focus State */
-  --tsu-focus-bg: var(--tsu-neutral-2);
+  --tsu-focus-bg: var(--tsu-surface-raised-hover);
   --tsu-focus-border: var(--tsu-accent-8);
 
   /* Legacy Aliases — map old variable names to new token system */
@@ -113,8 +123,8 @@
   --danger: var(--tsu-danger-9);
 }
 
-/* Dark mode: use a lighter page background */
+/* Dark mode: the neutral scale flips automatically via the Radix dark import.
+   Keep the page at step 1 (like light mode); only force pure-white text. */
 :root.dark {
-  --tsu-bg: var(--tsu-neutral-3);
   --tsu-fg: #ffffff;
 }