@jfrader/ui 0.0.0-stage → 0.1.0

package/dist/progress-XdvBG0Vv.js

@@ -0,0 +1,83 @@
+import { n as e, t } from "./css-CW_HG55W.js";
+import { n, t as r } from "./media-8K3xDAxM.js";
+import { t as i } from "./visually-hidden-BXVyhj0y.js";
+import { t as a } from "./renderable-DwPvt1I8.js";
+import { forwardRef as o, useId as s } from "react";
+import { vars as c } from "@jfrader/tokens/vars";
+import { jsx as l, jsxs as u } from "@emotion/react/jsx-runtime";
+//#region src/components/progress/progress.tsx
+var d = "40%", f = "1.4s ease-in-out infinite", p = 100, m = e({
+	from: { transform: "translateX(-100%)" },
+	to: { transform: "translateX(250%)" }
+}), h = e({
+	from: { transform: "translateX(100%)" },
+	to: { transform: "translateX(-250%)" }
+}), g = t({
+	position: "relative",
+	display: "block",
+	boxSizing: "border-box",
+	blockSize: "4px",
+	overflow: "hidden",
+	backgroundColor: c.color.surfaceHover,
+	border: `1px solid ${c.color.borderSubtle}`,
+	borderRadius: c.radius.full
+}), _ = t({
+	blockSize: "100%",
+	backgroundColor: c.color.accent,
+	borderRadius: c.radius.full,
+	transitionProperty: "width",
+	transitionDuration: c.motion.duration.base,
+	transitionTimingFunction: c.motion.easeStandard,
+	[n]: { transitionDuration: "0s" },
+	[r]: {
+		forcedColorAdjust: "none",
+		backgroundColor: "Highlight"
+	}
+}), v = t({
+	inlineSize: d,
+	animation: `${m} ${f}`,
+	"&:dir(rtl)": { animation: `${h} ${f}` },
+	[n]: {
+		"&, &:dir(rtl)": { animation: "none" },
+		opacity: .7
+	}
+});
+function y(e, t) {
+	let n = Number.isFinite(t) && t > 0 ? t : p;
+	return {
+		value: e === void 0 ? void 0 : Math.min(Math.max(Number.isFinite(e) ? e : 0, 0), n),
+		max: n
+	};
+}
+var b = o(function({ value: e, max: t = p, label: n, getValueLabel: r, slotProps: o, "aria-labelledby": c, ...d }, f) {
+	let m = `${s()}-label`, h = a(n), b = [c, h && m].filter(Boolean).join(" ") || void 0, { value: x, max: S } = y(e, t), C = x === void 0, w = x === void 0 ? 0 : x / S * 100;
+	return /* @__PURE__ */ u("div", {
+		...d,
+		ref: f,
+		role: "progressbar",
+		"data-ui": "progress",
+		"data-state": C ? "indeterminate" : "determinate",
+		"aria-labelledby": b,
+		"aria-valuemin": 0,
+		"aria-valuemax": S,
+		"aria-valuenow": x,
+		"aria-valuetext": x === void 0 ? void 0 : r?.(x, S),
+		css: g,
+		children: [h && /* @__PURE__ */ l("span", {
+			id: m,
+			css: i,
+			children: n
+		}), /* @__PURE__ */ l("div", {
+			"data-ui": "progress-indicator",
+			className: o?.indicator?.className,
+			style: C ? void 0 : { width: `${w}%` },
+			css: [
+				_,
+				C && v,
+				o?.indicator?.css
+			]
+		})]
+	});
+});
+//#endregion
+export { b as t };

package/dist/progress.js

@@ -0,0 +1 @@
+export { t as Progress } from "./progress-XdvBG0Vv.js";

package/dist/radio-group-CxMJ2Vq7.js

@@ -0,0 +1,130 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { n as t, t as n } from "./media-8K3xDAxM.js";
+import { t as r } from "./use-controlled-state-DQXkiTQI.js";
+import { t as i } from "./renderable-DwPvt1I8.js";
+import { i as a, n as o, r as s, t as c } from "./choice-control-DCyQ_hVw.js";
+import { createContext as l, forwardRef as u, useContext as d, useId as f, useMemo as p } from "react";
+import { vars as m } from "@jfrader/tokens/vars";
+import { jsx as h, jsxs as g } from "@emotion/react/jsx-runtime";
+//#region src/components/radio-group/radio-group.tsx
+var _ = l(null);
+function v(e) {
+	let t = d(_);
+	if (!t) throw Error(`RadioGroup.${e} must be rendered inside <RadioGroup>.`);
+	return t;
+}
+var y = "16px", b = {
+	vertical: e({
+		display: "grid",
+		justifyItems: "start",
+		gap: m.space[3]
+	}),
+	horizontal: e({
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "flex-start",
+		gap: m.space[4]
+	})
+}, x = e({ "input:checked + span::after": { opacity: 1 } }), S = e({ minBlockSize: "32px" }), C = e({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	inlineSize: y,
+	blockSize: y,
+	border: `1px solid ${m.color.borderControl}`,
+	borderRadius: m.radius.full,
+	backgroundColor: m.color.surfaceRaised,
+	transitionProperty: "background-color, border-color",
+	transitionDuration: m.motion.duration.fast,
+	transitionTimingFunction: m.motion.easeStandard,
+	"&::after": {
+		content: "\"\"",
+		inlineSize: "40%",
+		blockSize: "40%",
+		borderRadius: m.radius.full,
+		backgroundColor: m.color.accentContrast,
+		opacity: 0
+	},
+	[t]: { transitionDuration: "0s" },
+	[n]: { "&::after": { backgroundColor: "CanvasText" } }
+}), w = e({ fontSize: m.textSize.sm }), T = e({
+	marginInlineStart: `calc(${y} + ${m.space[2]})`,
+	fontSize: m.textSize.sm,
+	color: m.color.textMuted
+}), E = u(function({ value: e, defaultValue: t, onValueChange: n, name: i, disabled: a = !1, orientation: o = "vertical", ...s }, c) {
+	let l = f(), u = i ?? l, [d, m] = r(e, t, n), g = p(() => ({
+		value: d,
+		setValue: m,
+		name: u,
+		disabled: a
+	}), [
+		d,
+		m,
+		u,
+		a
+	]);
+	return /* @__PURE__ */ h(_.Provider, {
+		value: g,
+		children: /* @__PURE__ */ h("div", {
+			...s,
+			ref: c,
+			role: "radiogroup",
+			"aria-orientation": o,
+			"data-ui": "radio-group-root",
+			"data-orientation": o,
+			css: b[o]
+		})
+	});
+}), D = u(function({ value: e, label: t, description: n, disabled: r, onChange: l, slotProps: u, className: d, "aria-labelledby": p, "aria-describedby": m, ..._ }, y) {
+	let { value: b, setValue: E, name: D, disabled: O } = v("Radio"), k = O || r, A = f(), j = `${A}-label`, M = `${A}-description`, N = i(t), P = i(n), F = [p, N && j].filter(Boolean).join(" ") || void 0, I = [m, P && M].filter(Boolean).join(" ") || void 0, L = [d, u?.root?.className].filter(Boolean).join(" ") || void 0, R = (t) => {
+		l?.(t), t.currentTarget.checked && E(e);
+	};
+	return /* @__PURE__ */ g("label", {
+		"data-ui": "radio-group-radio",
+		className: L,
+		css: [
+			s,
+			x,
+			o,
+			u?.root?.css
+		],
+		children: [/* @__PURE__ */ g("span", {
+			css: [a, S],
+			children: [
+				/* @__PURE__ */ h("input", {
+					..._,
+					ref: y,
+					type: "radio",
+					name: D,
+					value: e,
+					checked: b === e,
+					disabled: k,
+					"aria-labelledby": F,
+					"aria-describedby": I,
+					onChange: R,
+					css: c
+				}),
+				/* @__PURE__ */ h("span", {
+					"aria-hidden": "true",
+					className: u?.control?.className,
+					css: [C, u?.control?.css]
+				}),
+				N && /* @__PURE__ */ h("span", {
+					id: j,
+					className: u?.label?.className,
+					css: [w, u?.label?.css],
+					children: t
+				})
+			]
+		}), P && /* @__PURE__ */ h("span", {
+			id: M,
+			className: u?.description?.className,
+			css: [T, u?.description?.css],
+			children: n
+		})]
+	});
+}), O = Object.assign(E, { Radio: D });
+//#endregion
+export { O as t };

package/dist/radio-group.js

@@ -0,0 +1 @@
+export { t as RadioGroup } from "./radio-group-CxMJ2Vq7.js";

package/dist/renderable-DwPvt1I8.js

@@ -0,0 +1,6 @@
+//#region src/utils/renderable.ts
+function e(e) {
+	return e != null && typeof e != "boolean";
+}
+//#endregion
+export { e as t };

package/dist/roving-focus-DeEZ55-T.js

@@ -0,0 +1,35 @@
+//#region src/utils/roving-focus.ts
+var e = (e, t) => (e + 1) % t, t = (e, t) => (e - 1 + t) % t, n = () => 0, r = (e, t) => t - 1, i = {
+	horizontal: {
+		ArrowRight: e,
+		ArrowLeft: t,
+		Home: n,
+		End: r
+	},
+	horizontalRtl: {
+		ArrowRight: t,
+		ArrowLeft: e,
+		Home: n,
+		End: r
+	},
+	vertical: {
+		ArrowDown: e,
+		ArrowUp: t,
+		Home: n,
+		End: r
+	}
+};
+function a(e, { itemSelector: t, ownerSelector: n }) {
+	return Array.from(e.querySelectorAll(t)).filter((t) => t.closest(n) === e);
+}
+function o(e, t) {
+	if (t != null) return e.find((e) => e.dataset.value === t);
+}
+function s(e, t, n, r) {
+	let o = i[n === "horizontal" && getComputedStyle(t).direction === "rtl" ? "horizontalRtl" : n][e.key];
+	if (!o) return;
+	let s = a(t, r), c = s.indexOf(e.target);
+	c !== -1 && (e.preventDefault(), s[o(c, s.length)]?.focus());
+}
+//#endregion
+export { s as n, a as r, o as t };

package/dist/select-mwFbmzsn.js

@@ -0,0 +1,256 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { t } from "./use-controlled-state-DQXkiTQI.js";
+import { a as n, c as r, d as i, f as a, l as o, o as s, r as c, s as l, t as u, u as d } from "./collection-registry-C2jnQa7X.js";
+import { t as f } from "./trigger-style-f54idgjT.js";
+import { t as p } from "./use-overlay-floating-CsZd3qxa.js";
+import { createContext as m, forwardRef as h, useContext as g, useId as _, useLayoutEffect as v, useMemo as y, useRef as b, useState as x } from "react";
+import { vars as S } from "@jfrader/tokens/vars";
+import { jsx as C, jsxs as w } from "@emotion/react/jsx-runtime";
+import { FloatingList as T, FloatingPortal as E, useClick as D, useDismiss as O, useInteractions as k, useListNavigation as A, useMergeRefs as j, useRole as M } from "@floating-ui/react";
+//#region src/components/select/select.tsx
+var N = 500, P = new Intl.Collator(void 0, {
+	usage: "search",
+	sensitivity: "base"
+}), F = "✓", I = m(null), L = m(!1);
+function R(e) {
+	let t = g(I);
+	if (!t) throw Error(`Select.${e} must be rendered inside <Select>.`);
+	return t;
+}
+function z() {
+	let e = R("Item");
+	if (!g(L)) throw Error("Select.Item must be rendered inside <Select.Content>.");
+	return e;
+}
+var B = e({
+	justifyContent: "flex-start",
+	minInlineSize: "180px",
+	"&[aria-expanded=\"true\"]": { backgroundColor: S.color.surfaceHover }
+}), V = e({
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap",
+	"&[data-placeholder]": { color: S.color.textMuted }
+});
+function H({ value: e, defaultValue: r, onValueChange: i, open: a, defaultOpen: o = !1, onOpenChange: s, placement: c = "bottom-start", disabled: l = !1, name: u, children: d }) {
+	let f = _(), [m, h] = t(e, r, i), [g = !1, v] = t(a, o, s), [S, T] = x(null), [E, j] = x(!1), [N, F] = n(), [L, R] = x(null), z = b([]), B = b([]), V = b(null);
+	!g && E && (j(!1), T(null));
+	let { valuesByIndex: H, disabledIndices: U } = y(() => {
+		let e = [], t = /* @__PURE__ */ new Set();
+		return N.forEach((n, r) => {
+			n.index !== -1 && (e[n.index] = r, n.disabled && t.add(n.index));
+		}), {
+			valuesByIndex: e,
+			disabledIndices: t
+		};
+	}, [N]), W = m === void 0 ? void 0 : N.get(m), G = W && W.index !== -1 ? W.index : null, { refs: K, floatingStyles: q, context: J } = p({
+		open: g,
+		placement: c,
+		onOpenChange: (e) => v(e)
+	}), Y = D(J), X = M(J, { role: "listbox" }), ee = O(J, {
+		escapeKey: !0,
+		outsidePress: !0
+	}), te = A(J, {
+		listRef: z,
+		activeIndex: S,
+		onNavigate: T,
+		virtual: !0,
+		virtualItemRef: V,
+		loop: !0,
+		focusItemOnOpen: !0,
+		selectedIndex: E ? null : G,
+		disabledIndices: (e) => U.has(e)
+	}), { getReferenceProps: Z, getFloatingProps: Q, getItemProps: $ } = k([
+		Y,
+		X,
+		ee,
+		te
+	]), ne = y(() => {
+		let e = (e) => {
+			h(e), v(!1);
+		};
+		return {
+			baseId: f,
+			open: g,
+			disabled: l,
+			selectedValue: m,
+			activeIndex: S,
+			options: N,
+			triggerLabelling: L,
+			refs: K,
+			floatingStyles: q,
+			elementsRef: z,
+			labelsRef: B,
+			getReferenceProps: Z,
+			getFloatingProps: Q,
+			getItemProps: $,
+			selectValue: e,
+			matchTypeahead: (e) => {
+				let t = B.current, n = S ?? -1;
+				for (let r = 1; r <= t.length; r += 1) {
+					let i = (n + r) % t.length, a = t[i];
+					if (!(a == null || U.has(i)) && P.compare(a.slice(0, e.length), e) === 0) {
+						T(i), g || (j(!0), v(!0));
+						return;
+					}
+				}
+			},
+			selectIndex: (t) => {
+				let n = H[t];
+				n === void 0 || U.has(t) || e(n);
+			},
+			requestOpenChange: v,
+			registration: F,
+			setTriggerLabelling: R
+		};
+	}, [
+		f,
+		g,
+		l,
+		m,
+		S,
+		N,
+		L,
+		K,
+		q,
+		Z,
+		Q,
+		$,
+		H,
+		U,
+		h,
+		v,
+		F
+	]);
+	return /* @__PURE__ */ w(I.Provider, {
+		value: ne,
+		children: [d, u !== void 0 && /* @__PURE__ */ C("input", {
+			type: "hidden",
+			name: u,
+			value: m ?? "",
+			disabled: l
+		})]
+	});
+}
+var U = h(function({ id: e, disabled: t, onKeyDown: n, ...r }, i) {
+	let { baseId: a, open: o, disabled: s, activeIndex: c, refs: l, getReferenceProps: u, selectIndex: d, matchTypeahead: p, requestOpenChange: m, setTriggerLabelling: h } = R("Trigger"), g = j([l.setReference, i]), _ = b({
+		search: "",
+		lastKeyAt: 0
+	}), y = e ?? `${a}-trigger`, x = r["aria-labelledby"], S = r["aria-label"];
+	v(() => (h({
+		id: y,
+		labelledBy: x,
+		label: S
+	}), () => h(null)), [
+		y,
+		x,
+		S,
+		h
+	]);
+	let w = (e) => {
+		if (n?.(e), !(e.defaultPrevented || s || t)) {
+			if (e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.altKey && !e.metaKey) {
+				let t = performance.now(), n = _.current, r = (t - n.lastKeyAt > N ? "" : n.search) + e.key;
+				_.current = {
+					search: r,
+					lastKeyAt: t
+				}, p(r);
+			} else o && (e.key === "Tab" ? m(!1) : (e.key === "Enter" || e.key === " ") && c !== null && (e.preventDefault(), d(c)));
+		}
+	};
+	return /* @__PURE__ */ C("button", {
+		type: "button",
+		...u({
+			...r,
+			id: y,
+			disabled: s || t,
+			onKeyDown: w
+		}),
+		ref: g,
+		"data-state": o ? "open" : "closed",
+		"data-ui": "select-trigger",
+		css: [f, B]
+	});
+}), W = h(function({ placeholder: e, ...t }, n) {
+	let { selectedValue: r, options: i } = R("Value"), a = r === void 0 ? void 0 : i.get(r)?.label, o = a === void 0;
+	return /* @__PURE__ */ C("span", {
+		...t,
+		ref: n,
+		"data-placeholder": o || void 0,
+		"data-ui": "select-value",
+		css: V,
+		children: o ? e : a
+	});
+}), G = h(function({ style: e, onMouseDown: t, children: n, ...r }, o) {
+	let { open: s, triggerLabelling: c, refs: l, floatingStyles: u, elementsRef: d, getFloatingProps: f } = R("Content"), p = j([s ? l.setFloating : null, o]), m = r["aria-labelledby"] !== void 0 || r["aria-label"] !== void 0 ? {} : c?.labelledBy === void 0 ? c?.label === void 0 ? { "aria-labelledby": c?.id } : { "aria-label": c.label } : { "aria-labelledby": c.labelledBy }, h = (e) => {
+		t?.(e), e.preventDefault();
+	};
+	return /* @__PURE__ */ C(E, { children: /* @__PURE__ */ C("div", {
+		...f({
+			...m,
+			...r,
+			onMouseDown: h
+		}),
+		ref: p,
+		hidden: !s,
+		"data-state": s ? "open" : "closed",
+		"data-ui": "select-listbox",
+		style: {
+			...e,
+			...u
+		},
+		css: [a, i],
+		children: /* @__PURE__ */ C(T, {
+			elementsRef: d,
+			children: /* @__PURE__ */ C(L.Provider, {
+				value: !0,
+				children: n
+			})
+		})
+	}) });
+}), K = h(function({ value: e, disabled: t = !1, onClick: n, children: i, ...a }, f) {
+	let { baseId: p, selectedValue: m, activeIndex: h, labelsRef: g, getItemProps: _, selectValue: v, registration: y } = z(), x = b(null), { ref: S, index: T } = c(e, y, x, (e, n) => ({
+		index: e,
+		label: n,
+		disabled: t
+	}), {
+		labelsRef: g,
+		include: !t
+	}), E = j([S, f]), D = T !== -1 && h === T, O = m === e, k = (r) => {
+		n?.(r), !(t || r.defaultPrevented) && v(e);
+	};
+	return /* @__PURE__ */ w("div", {
+		..._({
+			id: u(p, e),
+			...a,
+			onClick: k
+		}),
+		ref: E,
+		role: "option",
+		"aria-selected": O,
+		"aria-disabled": t || void 0,
+		"data-active": D || void 0,
+		"data-ui": "select-item",
+		css: [
+			l,
+			s,
+			o
+		],
+		children: [/* @__PURE__ */ C("span", {
+			ref: x,
+			css: d,
+			children: i
+		}), O && /* @__PURE__ */ C("span", {
+			"aria-hidden": "true",
+			css: r,
+			children: F
+		})]
+	});
+}), q = Object.assign(H, {
+	Trigger: U,
+	Value: W,
+	Content: G,
+	Item: K
+});
+//#endregion
+export { q as t };

package/dist/select.js

@@ -0,0 +1 @@
+export { t as Select } from "./select-mwFbmzsn.js";

package/dist/skeleton-qas9ZKK9.js

@@ -0,0 +1,47 @@
+import { n as e, t } from "./css-CW_HG55W.js";
+import { n } from "./media-8K3xDAxM.js";
+import { forwardRef as r } from "react";
+import { vars as i } from "@jfrader/tokens/vars";
+import { jsx as a } from "@emotion/react/jsx-runtime";
+//#region src/components/skeleton/skeleton.tsx
+var o = e({
+	from: { backgroundPosition: "200% 0" },
+	to: { backgroundPosition: "-100% 0" }
+}), s = t({
+	display: "block",
+	inlineSize: "100%",
+	blockSize: "1em",
+	flexShrink: 0,
+	borderRadius: i.radius.sm,
+	backgroundColor: i.color.surfaceHover,
+	backgroundImage: `linear-gradient(90deg, transparent, ${i.color.border}, transparent)`,
+	backgroundSize: "200% 100%",
+	backgroundRepeat: "no-repeat",
+	animation: `${o} 1.6s ease-in-out infinite`,
+	"&:dir(rtl)": { animationDirection: "reverse" },
+	[n]: {
+		animation: "none",
+		backgroundImage: "none"
+	}
+}), c = t({
+	inlineSize: i.space[10],
+	blockSize: "auto",
+	aspectRatio: "1",
+	borderRadius: i.radius.full
+}), l = r(function({ width: e, height: t, circle: n = !1, radius: r, style: i, ...o }, l) {
+	return /* @__PURE__ */ a("div", {
+		...o,
+		ref: l,
+		"aria-hidden": "true",
+		"data-ui": "skeleton",
+		style: {
+			inlineSize: e,
+			blockSize: t,
+			borderRadius: n ? void 0 : r,
+			...i
+		},
+		css: [s, n && c]
+	});
+});
+//#endregion
+export { l as t };

package/dist/skeleton.js

@@ -0,0 +1 @@
+export { t as Skeleton } from "./skeleton-qas9ZKK9.js";

package/dist/spinner-ros2CfIf.js

@@ -0,0 +1,49 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { n as t } from "./media-8K3xDAxM.js";
+import { t as n } from "./visually-hidden-BXVyhj0y.js";
+import { n as r, t as i } from "./loading-ring-CTpT-IrT.js";
+import { forwardRef as a } from "react";
+import { vars as o } from "@jfrader/tokens/vars";
+import { jsx as s, jsxs as c } from "@emotion/react/jsx-runtime";
+//#region src/components/spinner/spinner.tsx
+var l = e({
+	position: "relative",
+	display: "inline-flex",
+	verticalAlign: "middle"
+}), u = e({
+	...i,
+	flexShrink: 0,
+	boxSizing: "border-box",
+	[t]: { animation: `${r} 1.6s ease-in-out infinite alternate` }
+}), d = {
+	sm: e({
+		inlineSize: o.space[4],
+		blockSize: o.space[4]
+	}),
+	md: e({
+		inlineSize: o.space[5],
+		blockSize: o.space[5]
+	}),
+	lg: e({
+		inlineSize: o.space[6],
+		blockSize: o.space[6]
+	})
+}, f = a(function({ size: e = "md", label: t = "Loading", ...r }, i) {
+	return /* @__PURE__ */ c("span", {
+		...r,
+		ref: i,
+		role: "status",
+		"data-ui": "spinner",
+		css: l,
+		children: [/* @__PURE__ */ s("span", {
+			"aria-hidden": "true",
+			"data-ui": "spinner-indicator",
+			css: [u, d[e]]
+		}), /* @__PURE__ */ s("span", {
+			css: n,
+			children: t
+		})]
+	});
+});
+//#endregion
+export { f as t };

package/dist/spinner.js

@@ -0,0 +1 @@
+export { t as Spinner } from "./spinner-ros2CfIf.js";

package/dist/stack-Hs8THnIL.js

@@ -0,0 +1,20 @@
+import { t as e } from "./layout-style-B_6YHQ6Q.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "@emotion/react/jsx-runtime";
+//#region src/components/stack/stack.tsx
+var r = t(function({ gap: t = "md", align: r, justify: i, wrap: a, ...o }, s) {
+	return /* @__PURE__ */ n("div", {
+		...o,
+		ref: s,
+		"data-ui": "stack",
+		css: e({
+			direction: "column",
+			gap: t,
+			align: r,
+			justify: i,
+			wrap: a
+		})
+	});
+});
+//#endregion
+export { r as t };

package/dist/stack.js

@@ -0,0 +1 @@
+export { t as Stack } from "./stack-Hs8THnIL.js";

package/dist/surface-Bo_aSQOb.js

@@ -0,0 +1,18 @@
+import { vars as e } from "@jfrader/tokens/vars";
+//#region src/styling/surface.ts
+var t = {
+	boxSizing: "border-box",
+	backgroundColor: e.color.surfaceRaised,
+	border: `1px solid ${e.color.border}`,
+	color: e.color.text,
+	fontFamily: e.font.sans,
+	lineHeight: e.lineHeight.base
+}, n = {
+	border: 0,
+	padding: 0,
+	background: "transparent",
+	color: "inherit",
+	"&::backdrop": { backgroundColor: e.color.scrim }
+};
+//#endregion
+export { t as n, n as t };